TIL - CSS

소밍·2022년 4월 5일

TIL

목록 보기

8/17

📌 CSS 의 기본구조

selector{
	property : value;
    }
    /* 속성 : 값 -> declaration */

selector 선택자
property 속성
value 값
declaration 선언 블록

📌 Selector

1. 전체 선택자

* 문서에 있는 모든 요소에 대해 스타일 적용

2. 타입 선택자

태그 이름 사용, 해당하는 모든 태그에 속성 적용

3. 아이디 선택자

페이지에 있는 해당 요소를 유일하게 식별할 때 사용
HTML 안에 단 한 개 존재해야함 .
id는 알파벳, _(언더바) , -(하이픈) 로 시작하도록!

해쉬링크 만들 수 있음 !

4. 클래스 선택자

요소 식별할 때 사용, 여러개 존재 가능

5. 선택자 목록

콤마로 선택자 연결하여 일치하는 모든 요소 선택

h1 {color: red;}
h2 {color: red;}
h3 {color: red;}
h4 {color: red;}
h5 {color: red;}
h6 {color: red;}

h1, h2, h3, h4, h5, h6 {color: red;}
/*선택자 목록을 이용하여 효율적으로 작성*/

📌 선택자 우선순위

1. 후자 우선의 원칙

동일한 선택자 사용되었을 경우 후자가 우선 적용

<style>
	p {color: red;
       font-size: 20px;}
      
    p {color: green;}
    /* 후자 color : green 적용 */
</style>

2. 구체성의 원칙

같은 태그를 가르키고 있더라도 보다 구체적인 선택자 우선 적용

<style>
        p.color-red {
            color: red;
            font-size: 20px;
        }
        /* 더 구체적인 선택자, color : red; 적용*/

        p { color: green;
        }
</style>

가중치 기준으로 판단
- inline-style : 요소의 안에 속성으로 선언되는 스타일, 1000 점
- id 선택자 : 100점
- class, 가상클래스, 속성 선택자 : 10점
- 타입, 가상요소 선택자 : 1점
- 전체선택자(Universal Selector) : 0점

3. 중요성의 원칙

!important
절대적인 우선순위, 우선 순위 계산 어려워지므로 사용하는 것을 지양

📌 css 적용 방법

인라인 방식 : 태그에 직접 적용
내부 스타일 시트 : html 파일 내에 직접
외부 스타일 시트 : html 외부 css 파일과 연결
다중 스타일 시트 : css 파일 안에 css 포함하기

🧷 다중 스타일 시트

@import "foo.css";

@가 붙는 문법 at-rule

@charset : 스타일시트에서 사용하는 문자 인코딩 지정. 문서에서 가장 먼저 선언.

@import : 다른 스타일 시트에서 스타일 규칙을 가져옴. @charset 바로 다음에 선언되어야함.

@font-face : 디바이스에 없는 폰트를 다운받아 적용할 때 사용.

@keyframes : 애니메이션을 만들 때 사용.

@media : 사용자 디바이스에 따른 스타일을 분기 처리하고자 할 때 사용.

@supports : 특정 CSS 속성을 브라우저가 지원하는지 확인하고 스타일을 선언하고자 할 때 사용.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>hello</title>
    <style type="text/css">
      /* 
      아래와 같이 여러가지로 사용할 수 있습니다. 
      @import url("hello.css");
      @import url(hello.css);
      @import url("./hello.css");
      @import "hello.css"; // @import hello.css;는 안됩니다.
    */
      @import "hello.css";
    </style>
  </head>
  <body>
    <h1>hello world</h1>
  </body>
</html>