CSS 적용 방식
3. External 스타일 방식
스타일 규칙들을 별도의 외부 파일을 만들어서 그 안에 넣는 방식이다.
외부 파일의 확장자는 CSS가 되어야 한다.
<head>태그 내에 <link>태그를 선언해준다.
link태그 안에는 href 속성을 이용해서 CSS 파일의 경로를 적어준다.
상대 경로를 이용할 경우 rel 속성을 필요로 한다.
rel 속성은 연결되는 파일이 html문서와 어떤 관계인지를 명시하는 속성으로, CSS 파일을 연결할 때는 stylesheet 라고 속성값을 적어주면 된다.
많은 페이지가 있어도 <link> 태그만 복사해서 넣어주면 모두 동일한 스타일이 적용되고, 수정할 때는 CSS 파일만 수정하면 모두 동일하게 반영되어
관리하기도 편하고 용량이 적어져서 자주 사용되는 방법이다.
4. Import 방식
스타일 내에서 다른 스타일 시트 파일을 불러오는 방법이다.
<style> 태그 내부 상단이나, 외부 스타일 시트 파일 안 상단에 선언한다.
성능이 좋은 편은 아니다.
선택자
요소 선택자
선택자 중에 가장 기본이 되는 선택자로 태그 선택자 라고도 한다.
선택자의 부분에 태그의 이름이 들어가게 된다.
문서 내에 선택자에 해당하는 요소, 태그 모두에 스타일 규칙이 적용된다.
GROUPING
선택자는 그룹화가 가능하다. 아래 코드를 그룹화 해보자.
h1{color:yellow;}
h2{color:yellow;}
h3{color:yellow;}
h4{color:yellow;}
h5{color:yellow;}
h6{color:yellow;}쉼표를 이용해서 선택자를 나열하는 방법
h1, h2, h3, h4, h5, h6{color:yellow;}전체 선택자
문서 내에 있는 모든 요소를 선택하는 선택자이다. 전체 선택자는 편리하지만 성능에는 좋지 않으므로 가급적 사용을 지양하고 있다.
*{color:yellow;}별표 기호는 에스터리스크(asterisk)라고 한다.
선언 그룹화
선언부에 여러 개의 선언이 들어갈 수 있다.(이전에 배운내용으로, 대괄호 안에 선언을 여러개 해주는 방식)
h1{color : yellow; font-size:2em;background-color:gray;}선택자와 선언 동시에 그룹화
h1, h2, h3, h4, h5, h6{color:yellow;font-size:2em;background-color:gray;}