CSS도 몇개의 규칙을 제외하고는 HTML과 마찬가지로 많은 속성과 그에 해당하는 값의 집합으로 이루어져 있다.
그래서 CSS의 구성 요소와 규칙에 대해 배우고 문서에 적용하는 방식을 학습해야 한다.
CSS문법
CSS가 하는 역할은 html을 꾸며주는 역할을 한다.
그러면 필요한 것이 두가지가 있다.
첫 번째는 어느 요소를 꾸밀 건지 선택할 요소가 필요하고
두 번째는 그 요소를 어떻게 꾸밀건지 스타일의 관한 것이다.
선택자(selector)
h1 {color: yellow; font-size: 2em;}
코드 맨 앞의 h1이 어느 요소를 꾸밀건지에 대한 '선택자' 이다.
'selector'라고도 많이 부른다.
선언(declaration)
h1 {color: yellow; font-size: 2em;}
선택자 뒤에 중괄호로 감싸진 {color: yellow; font-size: 2em;} 문법이어떻게 꾸밀 건지에 대한 부분이다.하나씩 보면 color:yellow;라고 되어있는데바로 이 부분이 '속성 이름'과 '속성의 값'이다.이렇게 두 개를 묶어서 하나의 '선언'이라고 한다.(세미콜론 기호 주의)그 뒤에 font-size: 2em;은 폰트사이즈를 뜻하는데 선언 뒤에는 또 다른 선언이 올 수 있다. 마지막 선언에는 세미콜론이 필요 없지만 실수 방지를 위해 적어주는 것이 좋다.
속성(property)
html에도 속성이 있고 css에도 속성이 있다.
두 속성의 의미가 다르다
html의 속성은 Attribute
css는 Property이다.
둘다 한글로 의미는 속성이지만 엄연히 다르다.
HTML은 "문장의 구조"를 만드는 반면 CSS는 "그 문장을 어떻게 브라우저에 표시할지 지정하는 언어"
기억하자.
선언부(declaration block)
중괄호를 포함한 {color: yellow; font-size: 2em;} 이 부분을
선언부라고 한다.
룰셋(rule set)
h1 {color: yellow; font-size: 2em;}
이렇게 선택자부터 선언부까지 전체가 합쳐진 게 하나의 규칙
즉, 룰 셋(rule set)이라고 한다.
CSS적용
CSS와 HTML을 어떻게 연결할까?
lnline 스타일
해당 요소에 직접 스타일 속성을 이용해서 규칙을 선언하는 것이다.
해당 요소에 직접 입력하기 때문에 선택자는 필요하지 않다.
선언부에 내용만 스타일 속성의 값으로 넣어주면 되는데
Inline 스타일은 코드의 재활용이 되지 않기 때문에 자주 사용하지 않는다.
Internal 스타일
internal은 문서에 <style>을 활용한 방법이다.
<head>내부에 <style>에 규칙이 들어간다.
하지만 internal 방식도 많은 페이지가 있는 경우에 모든 페이지마다 규칙을 선언해줘야 한다.
페이지가 많고 스타일 규칙 내용이 많아지면 쉬운 방식은 아니다.
External 스타일
External은 외부 스타일 시트 파일을 이용한 방법으로
외부 스타일 시트는 스타일 규칙들을 별도의 외부 파일을 만들어 넣는 방식이다.
CSS.css 확장자를 사용하여 css파일을 만들어 준다.
<head>내부에 <link>를 선언한 후 href 속성을 이용해 css파일의 경로를 적는다.
<link rel="stylesheet" href="css/style.css">
rel 속성은 연결되는 파일이 문서와 어떤 관계인지를 명시하는 속성으로
CSS파일은 'stylesheet'라고 적어야 한다.
외부 스타일 시트 방식은 파일 관리가 편하고 용량도 작다.
그리고 많은 페이지가 있더라도 모든 페이지에 같은 스타일을 적용할 수 도있고,
또한 수정이 필요할 때도 CSS파일을 수정하면 연결된 모든 페이지에 반영할 수 있어서
보통은 External 방식을 많이 사용한다.
'CSS' 카테고리의 다른 글
| [CSS] 문서 구조 관련 선택자 (0) | 2023.03.28 |
|---|---|
| [CSS] 선택자(selector)- 조합과 속성 선택자 (0) | 2023.03.27 |
| [CSS] 선택자(selector)-class,id 선택자 (0) | 2023.03.27 |
| [CSS] 선택자(selector)-요소 선택자 (0) | 2023.03.27 |
| [CSS] CSS소개 (0) | 2023.03.26 |