[02. CSS] 001. CSS란

CSS를 사용하여 HTML을 더욱 풍요롭게 만들 수 있다. CSS규칙은 선택자(selector)와 선언(declaration)이라는 두 부분으로 구성되어 있다. 그리고 선언은 프로퍼티와 값이라는 두 부분으로 나누어져 있다.

 

p {
    font-family: Arial;
}

 

p가 선택자이고 {}안에 있는 것이 선언이다. 그 중 font-family가 프로퍼티이며 Arial은 값이다.

 

선택자	의미	예시
범용 선택자	문서에 있는 모든 요소 의미	* {}
타입 선택자	요소 이름을 의미	h1 {}
클래스 선택자	Class 속성의 값을 의미	.sidebar {} / p.sidebar {}
id 선택자	id 속성의 값을 의미	#abc {}
자식 선택자	직계 자식 요소를 의미	li>a {}
자손 선택자	직계 + 특정 요소의 자손 요소를 의미	p a {}
인접 형제 선택자	바로 옆에 있는 요소를 의미	h1+p {}
일반 형제 선택자	형제 관계에 있는 요소를 의미	h1~p {}
[표 2.1] 선택자의 종류

두 개 이상의 규칙을 동일한 요소에 적용해야 한다면 우선순위에 대해 잘 알아야 한다.

 

1) 후자 우선의 원칙

나중에 작성된 선택자가 우선한다.

 

2) 구체성

더 구체적으로 작성된 선택자가 우선한다. h1이 *보다 우선하며 p b보다 p가 우선한다. 그리고 p#abc가 p보다 우선한다.

 

3) 중요성

먼저 선언이 되었더라도 프로퍼티의 값 다음에 !important를 추가하면 우선된다.

 

CSS를 외부파일에서 로딩해서 쓸 수도 있고 내부에 작성해서 사용할 수도 있다. 외부 CSS은 다음과 같이 호출한다. 외부 CSS를 로딩해서 쓰면 동일한 스타일을 공유할 수 있어 코드를 반복적으로 작성할 필요가 없다는 장점이 있다.

 

<link href="css파일 주소" type="text/css" rel="stylesheet">

 

내부 CSS는 <style>이라는 요소 안에서 작성한다.

 

그리고 CSS파일 안에서 다른 CSS를 호출하는 방법은 다음과 같다.

 

@import url(“CSS파일 경로”);

 

이를 css파일의 첫 줄에 작성하면 된다.