CLASS_HTML&CSS

7월 4일_CSS(!important, 웹폰트적용, 스타일시트링크, 다양한 스타일 적용)

awesong 2024. 7. 4. 17:39
728x90

# !important

 

    h1 {
      color: brown !important
    }
    <body>
  	<h1 style="color:green">레드향</h1>

 

**

태그에 인라인으로 그린컬러가 지정되어있지만 !important로 가장 우선순위 스타일을 지정해주었기 때문에

해당 요소에 브라운 컬러가 적용됨

 

 

# font 사용하기

font 모든 font 속성을 이용한 스타일을 한 줄에 설정할 수 있음.
font-family 텍스트의 글꼴 집합(font family)을 설정함.
font-style 주로 이탤릭체를 사용하기 위해 사용함.
font-variant 텍스트에 포함된 영문자 중 소문자만을 작은 대문자(small-caps) 글꼴로 변경시킴.
font-weight 텍스트를 얼마나 두껍게 표현할지를 설정함.
font-size 텍스트의 크기를 설정함.

 

 

# CSS 스타일 링크로 불러오기

 

  • 확장자 css 파일 따로 만들어서 스타일만 지정해줌
  • 링크로 사용하고자 하는 스타일지정 파일의 경로를 불러옴
<link rel="stylesheet" href="CSS/0704-2.css">

 

 

# 웹 폰트 적용하기

  • 폰트 다운 사이트에서 웹폰트 코드 복사해서 적용
@import url('https://fonts.googleapis.com/css2?family=Gothic+A1&family=Jua&family=Single+Day&display=swap');

@font-face {
  font-family: 'CWDangamAsac-Bold';
  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/CWDangamAsac-Bold.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'SBAggroB';
  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroB.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@import url('https://fonts.googleapis.com/css2?family=Do+Hyeon&family=Gothic+A1&family=Jua&family=Single+Day&display=swap');

body {
  font-family: "Jua", sans-serif;
  font-weight: 400;
  font-style: normal;
  border: 1px solid gray;
  padding-left: 20px;
  text-align: center;
}

h1 {
  display: inline-block;
  background-color: blue;
  color: white;
  font-size: 25pt;
  font-family: 'CWDangamAsac-Bold';
}
#para {
  font-family: 'SBAggroB';
  color: green;
  font-size: 12pt;
}
.paras {
  color: orangered;
  font-size: 15pt;
  font-family: "Do Hyeon", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-weight: bold;
}

 

 

# 텍스트 밑줄 & 텍스트 그림자

   .heading {
      width: 100%;
      height: 150px;
      background: #222;
      color: rgb(255, 255, 255);
      text-align: center;
      line-height: 150px;
      text-shadow: 4px -2px 1px orange;
    }
    h2 {
      color: green;
      text-decoration: overline;
      text-shadow: 2px -3px 5px yellow;
    }
    h3 {
      text-decoration: line-through;
      text-decoration-color: crimson;
      text-decoration-thickness: 2px;
    }
    h4 {
      text-decoration: underline;
      text-underline-offset: 7px;
      text-decoration-color: crimson;
      text-decoration-thickness: 1px;
    }
    h5 {
      color: #ffffff;
      text-shadow: 0px 0px 7px #222;
      text-decoration: overline underline;
      text-underline-offset: 5px;
      text-decoration-color: royalblue;
    }

 

 

# 자간과 행간

   자간
   .spacing1 {
      letter-spacing: 0.5em;
    }
    .spacing2 {
      letter-spacing: -0.25em;
    }
    
   행간
    .small-line {
      line-height: 0.5;
      font-size: 15pt;
    }
    .big-line {
      line-height: 3;
      font-size: 15pt;

 

# 목록의 스타일 지정하기

  • square : ■
  • disc : ●
  • cicle : ○
  • upper-alpha : A,B,C 등
  • lower-roman : 로마자 ⅰⅱ ⅲ
  • upper-roman : 로마자 ⅠⅡⅢ
  • decimal : 1,2,3 등 숫자
  • 이미지로 사용할 때 list-style-image: url('0704image/dot.png'); 이미지 경로를 불러오면 됨
  • position - inside 들여쓰기
  • position - outside 

 

 

 

저작자표시 비영리 동일조건