CSS
CSS는 HTML 요소를 꾸며주는 역할을 한다.
CSS는 꾸밀 대상이 되는 요소와 그에 대한 스타일 내용으로 이루어진다.
h1 { color: yellow; font-size:2em; }선택자 : h1
속성 : color
값 : yellow
선언 : "color :yellow , font-size : 2em"
선언부 : "{color : yellow; font-size : 2em;}"
규칙 : h1{color : yellow; font-size : 2em;}"
css 파일은 여러개의 규칙으로 이루어져 있다.
선택자와 선언부 사이, 선언과 선언 사이에는 개행을 해도 상고나없다
하지만 속성이름과 속성값 사이에는 개행이 불가능하다
CSS의 적용
Inline
인라인 스타일은 해당 요소에 직접 스타일 속성을 이용해서 규칙을 선언하는 방법이다.
<div style = "color:red;"> 내용 </div>Internal
Internal은 문서에 style 태그를 활용하여 스타일을 적용하는 방법이다 style 태그는 head 태그 내부에 들어가며 style 태그 안에 스타일 규칙이 들어가게 된다.
<style>div{color:red;}</style>위의 코드로 모든 div에 같은 스타일을 줄 수 있지만 페이지가 많은 경우 모든 페이지에 선언을 해줘야 하는 문제점이 있다.
External
External은 외부 스타일 시트 파일을 이용한 방법이다.
외부 스타일 시트는 스타일 규칙들을 별도의 파일에 만들어 넣는 방식이다.
외부 파일은 확장자가 .css가 되며 css 파일이라고 부른다.
div { color: red;}우선 CSS 파일을 만들고 스타일 규칙을 선언한다. 그런 다음 link 태그를 이용해서 CSS 파일을 연결하면 된다.
<link rel = "stylesheet" href = "css/style.css">head 내부에 link를 선언한 후 href 속성을 이용해 경로를 적는다. rel 속성은 연결되는 파일이 문서와 어떤 관계인지 명시하는 속성으로 CSS 파일은 stylesheet 라고 적어야 한다.
외부 스타일 시트의 장점은 많은 페이지가 있더라도 선언 한번으로 모든 페이지에 같은 스타일을 적용할 수 있다는 점이다. 따라서 수정이 용이하고 용량적인 측면에서도 이득을 볼 수 있다.
import
import는 스타일 시트 내에서 다른 스타일 시트 파일을 불러오는 방식이다.
@import url("css/style.css");style 내부 상단이나 외부 스타일 시트 파일 상단에 선언하는데 성능상 좋지 않아서 많이 쓰지 않는다.
선택자
선택자의 조합
선택자를 조합하여 사용할 경우 속성들을 전부 가지고 있을 때 적용된다.
/* 요소와 클래스의 조합*/
p.bar {...}
/* 클래스와 클래스의 조합*/
.foo.bar {...}
/* 아이디와 클래스의 조합*/
#foo.bar {...}문서 구조 관련 선택자
자손 선택자
div span {color : red;}자손 선택자는 선택자 사이에 공백으로 구분을 한다. 예시의 선택자는 div 의 자손 요소인 span을 선택하는 선택자이다.
자식 선택자
div > h1 { color : red; }자식 선택자는 선택자 사이에 > 기호를 넣는다.
이 때, 선택자와 기호 사이에 공백은 있어도 된다. 예시의 선택자는 div의 자식 요소인 h1을 선택하는 선택자이다.
인접 형제 선택자
div + p { color : red;}인접 형제 선택자는 형제 관계이면서 바로 뒤에 인접해 있는 요소를 선택하는 선택자이다.
인접 형제 선택자는 선택자 사이에 + 기호를 넣는다. 자식 선택자와 마찬가지로 공백의 유무는 상관이 없다.
가상 요소
가상 클래스
가상 클래스는 미리 정의해놓은 상황에 적용되도록 약속된 보이지 않는 클래스이다.
:pseudo-class{
property : value;
}가상 클래스는 콜론( : ) 기호를 사용하여 나타낸다.
문서 구조와 관련된 가상 클래스
- :first-child : 첫 번째 자식 요소 선택
- :last-child : 마지막 자식 요소 선택
앵커 요소와 관련된 가상 클래스
- :link : 하이퍼링크이면서 아직 방문하지 않은 앵커
- :visited : 이미 방문한 하이퍼링크
사용자 동작과 관련된 가상 클래스
- :focus : 현재 입력 초점을 가진 요소
- :hover : 마우스 포인터가 있는 요소
가상 요소
가상 요소는 존재하지 않는 요소에 스타일을 부여할 수 있도록 해주는 문법이다. 가상 요소도 가상 클래스처럼 문서 내에서 보이지 않지만, 미리 정의한 위치에 삽입되도록 약속되어있다.
CSS3부터는 가상 클래스와 가상 요소를 구분하기 위해 가상 요소는 ( :: ) 기호를 사용하기로 했다.
::pseudo-element{
property : value;
}- ::before : 가장 앞에 요소를 삽입
- ::ater : 가장 뒤에 요소를 삽입
- ::first-line : 요소의 첫 번째 줄에 있는 텍스트
- ::first-letter : 블록 레벨 요소의 첫 번째 문자
구체성
요소를 선택하는 방법은 여러가지라는 걸 배웠다. 만약 같은 요소를 선택하는 다른 규칙들이 다른 스타일을 적용한다면 어떻게 될까?
선택자에는 어떤 규칙이 우선으로 적용되어야 하는지에 대한 규칙이 있다. 이 규칙을 구채성 이라고 한다.
구체성이란 선택자를 얼마나 명시적으로 선언했느냐를 수치화 한 것으로 구체성의 값이 클수록 우선적으로 적용된다.
0,0,0,0위와 같이 구체성은 4개의 숫자 값으로 이루어져 있다.
- 1 , 0 , 0 , 0 : 인라인 스타일
- 0 , 1 , 0 , 0 : 선택자에 있는 모든 id 속성값
- 0 , 0 , 1 , 0 : 선택자에 있는 모든 class 속성값, 기타 속성 , 가상클래스
- 0 , 0 , 0 , 1 : 선택자에 있는 모든 요소 , 가상 요소
- 조합자는 구체성에 영향을 주지 않는다 ( > , + 등 )
- important 키워드는 모든 구체성을 무시하고 우선권을 갖는다.
h1 { ... } /* 0,0,0,1 */
body h1 { ... } /* 0,0,0,2 */
.grape { ... } /* 0,0,1,0 */
*.bright { ... } /* 0,0,1,0 */
p.bright em.dark { ... } /* 0,0,2,2 */
#page { ... } /* 0,1,0,0 */
div#page { ... } /* 0,1,0,1 */정리)
1. important
2. 인라인 스타일
3. id
4. class
5. tagName
6. 상속
상속
h1 { color: gray; }<h1>Hello, <em>CSS</em></h1>위의 예제에서 em은 부모인 h1의 속성을 상속받는다.
상속은 자연스러운 현상처럼 보이지만 모든 속성이 상속되는 것은 아니다.
박스 모델등과 같은 속성들은 상속이 이루어 지지 않는다.
Cascading
앞서 배운 내용들은 cascading의 규칙 중 하나이다.
만약 구체성도 같은 내용이 다른 속성값을 적용하면 어떻게 될까?
h1 { color : red;}
h1 { color : blue;}위와 같은 예제에서는 color : blue 가 적용된다.
cascading 규칙
- 중요도와 출처
- 구체성
- 선언 순서
CSS 출처는 제작자와 사용자, 그리고 에이전트로 구분한다.
제작자는 사이트를 실제 제작하는 개발자가 작성한 CSS이다.
사용자의 경우는 웹 페이지를 방문한 사용자들이 작성한 CSS를 의미한다.
마지막으로 에이전트는 브라우저에 내장된 CSS를 의미한다.
모든 스타일은 아래와 같은 규칙으로 적용된다.
- 스타일 규칙들을 모아서 중요도가 명시적으로 선언되었는지에 따라 분류한다.
- 중요도가 명시적으로 선언된 규칙들은 그렇지 않은 규칙보다 우선한다.
- 중요도가 있는 규칙들끼리는 아래 다른 규칙들을 적용한다
- 스타일 규칙들을 출처에 따라서 분류한다.
- 제작자 스타일 규칙이 사용자 에이전트 스타일 규칙보다 우선한다.
- 스타일 규칙들을 구체성에 따라 분류한다.
- 구체성이 높은 규칙들이 우선한다
- 스타일 규칙들을 선언 순서에 따라 분류한다.
- 뒤에 선언된 규칙일수록 우선한다.
