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

CLASS_HTML&CSS

by 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

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

'CLASS_HTML&CSS' 카테고리의 다른 글

7월 8일_CSS(float 속성, 요소 위치, 시멘틱태그언어) (0)	2024.07.08
7월 5일_CSS(마진, 패딩, 박스모델) (1)	2024.07.05
7월 3일_HTML(도스명령어, 블록, 인라인, iframe, CSS) (1)	2024.07.03
7월 2일_HTML(멀티미디어, 폼) (1)	2024.07.02
7월 1일_HTML(프로그램 설치, 기본 문법, 표만들기) (0)	2024.07.01