CSS 문법

CSS란

• HTML(마크업 언어)을 꾸며주는 표현용 언어
• 문서를 보기 좋게 디자인
• CSS는 보통 마크업 언어인 HTML과 같이 묶어서 사용

CSS 구문

• 선택자(selector) - "h1"
• 속성(property) - "color"
• 값(value) - "yellow"
• 선언(declaration) - "color: yellow", "font-size: 2em"
• 선언부(declaration block) - "{ color: yellow; font-size:2em; }"
• 규칙(rule set) - "h1 { color: yellow; font-size:2em; }"

h1 { color: yellow; font-size:2em; }

h1
{ color: yellow; font-size:2em; }

h1 {
    color: yellow;
    font-size:2em;
}

CSS의 속성(Property)과 HTML의 속성(Attribute)

• HTML에도 속성이 있고, CSS에도 속성이 있음. 하지만 두 가지는 전혀 다른 것
• HTML의 속성은 영어로 attribute이고, CSS의 속성은 property

CSS 주석

/* 주석 내용 */
/*
    주석은 여러 줄로도
    선언 할 수 있습니다.
*/

CSS의 적용

1. Inline

• Inline은 해당 요소에 직접 스타일 속성을 이용해서 규칙들을 선언

<div style="color:red;"> 내용 </div>

• Inline 스타일 방식은 코드의 재활용이 되지 않기 때문에 자주 사용하지 않음

2. Internal

• Internal은 문서에 <style> 을 활용한 방법

<style> div {color: red;} </style>

• 하지만 이것도 한계가 있음
• 많은 페이지가 있는 경우에는 모든 페이지에 저마다의 규칙을 선언해줘야 함

3. External

• External은 외부 스타일 시트 파일을 이용한 방법

div {color: red;}

• 우선 CSS 파일을 하나 만들고 스타일 규칙을 선언
• 그 다음 <link>을 이용해서 CSS 파일을 연결

<link rel="stylesheet" href="css/style.css">

• rel 속성은 연결되는 파일이 문서와 어떤 관계인지를 명시하는 속성으로, CSS 파일은 'stylesheet' 라고 적어야 함
• 외부 스타일 시트 방식으로 스타일을 선언하면 많은 페이지가 있더라도 이 한 줄로 모든 페이지에 같은 스타일을 적용할 수 있음
• 외부 스타일 시트 방식은 파일 관리가 편하면서도 용량이 작기 때문에 주로 사용되는 방법

4. Import

• Import는 스타일 시트 내에서 다른 스타일 시트 파일을 불러오는 방식

@import url("css/style.css");

• <style> 내부 상단이나 외부 스타일 시트 파일 상단에 선언하는데 성능상 좋지 않아서 거의 쓰이지 않음

선택자

요소(태그) 선택자

h1 { color: yellow; }
h2 { color: yellow; }
h3 { color: yellow; }
h4 { color: yellow; }
h5 { color: yellow; }
h6 { color: yellow; }
h1 { color: yellow; font-size: 2em; background-color: gray; }

• 그룹화

h1, h2, h3, h4, h5, h6 { color: yellow; }
h1, h2, h3, h4, h5, h6 { color: yellow; font-size: 2em; background-color: gray; }

• 전체 선택자

* { color: yellow; }

한 번의 선언만으로 문서 내에 모든 요소에 스타일 규칙이 적용
전체 선택자는 매우 편리하지만, 성능에 좋지 않으므로 될 수 있으면 사용을 지양

class 선택자

• 요소에 구애받지 않고 스타일 규칙을 적용할 수 있는 가장 일반적인 방법
• HTML을 수정해 class 속성을 추가
• 클래스 선택자를 쓸 때는, 맨 앞에 .(마침표)를 찍어주셔야 함

.foo { font-size: 30px; }

<p class="foo"> ... </p>

• 다중 class

.foo { font-size: 30px; }
.bar { color: blue; }

<p class="foo bar"> ... </p>
class 속성은 꼭 하나의 값만 가질 수 있는 것은 아님
공백으로 구분하여 여러 개의 class 값을 넣을 수 있음

id 선택자

• 선택자를 쓸 때는 #(해시) 기호를 사용

#bar { background-color: yellow; }

<p id="bar"> ... </p>

• class 선택자와의 차이점
  1. .기호가 아닌 #기호 사용
  2. 태그의 class 속성이 아닌 id 속성을 참조
  3. 문서 내에 유일한 요소에 사용
  4. 구체성
  5. class와 달리 id는 문서 내에서 유일해야 한다는 점
  

선택자의 조합

/* 요소와 class의 조합 */
p.bar { ... }

/* 다중 class */
.foo.bar { ... }

/* id와 class의 조합 */
#foo.bar { ... }

속성 선택자

• 속성 선택자는 대괄호를 이용해서 선언하며 대괄호 안에 속성 이름이 들어감

// 첫 번째는 <p>이면서 class 속성이 있는 요소이면 규칙이 적용
p[class] { color: silver; }

// 두 번째는 <p>이면서 class 속성과 id 속성이 함께 있어야 규칙이 적용
p[class][id] { text-decoration: underline; }

<p class="foo">Hello</p>
<p class="bar">CSS</p>
<p class="baz" id="title">HTML</p>

• 정확한 속성값으로 선택

p[class="foo"] { color: silver; }
p[id="title"] { text-decoration: underline; }

• 부분 속성값으로 선택

// [class~="bar"] : class 속성의 값이 공백으로 구분한 "bar" 단어가 포함되는 요소 선택
// [class^="bar"] : class 속성의 값이 "bar"로 시작하는 요소 선택
// [class$="bar"] : class 속성의 값이 "bar"로 끝나는 요소 선택
// [class*="bar"] : class 속성의 값이 "bar" 문자가 포함되는 요소 선택

p[class~="color"] { font-style: italic; } /* 1, 2번째 요소 */
p[class^="color"] { font-style: italic; } /* 1, 3번째 요소 */
p[class$="color"] { font-style: italic; } /* 2번째 요소 */
p[class*="color"] { font-style: italic; } /* 1, 2, 3번째 요소 */

<p class="color hot">red</p>
<p class="cool color">blue</p>
<p class="colorful nature">rainbow</p>

문서 구조 관련 선택자

부모와 자식

• 부모 요소는 그 요소를 포함하는 가장 가까운 상위 요소로, 그 요소의 부모 요소는 단 하나뿐
• 자식 요소는 부모 요소와 반대라고 생각하면 되며 자식 요소는 여러 개일 수도 있음

조상과 자손

• 조상 요소는 그 요소를 포함하는 모든 요소로, 부모 요소를 포함하여 여러 개일 수도 있음
• 자손 요소는 그 반대로, 그 요소가 포함하고 있는 모든 요소가 자손 요소

형제

• 같은 부모를 가지고 있는 요소들은 서로 형제 관계

문서 구조 관련 선택자

• 자손 선택자

div span { color: red; }

<div>의 자손 요소인 <span>를 선택하는 선택자 

• 자식 선택자

div > h1 { color: red; }

div>의 자식 요소인 <h1>를 선택하는 선택자 

• 인접 형제 선택자

div + p { color: red; }

인접 형제 선택자는 형제 관계이면서 바로 뒤에 인접해 있는 요소를 선택하는 선택자

• 형제 선택자

h1 ~ p { background-color:green; }

<h1>h1</h1>
<p>p</p><!--적용대상-->
<p>p</p><!--적용대상-->
<p>p</p><!--적용대상-->

가상 선택자

가상 클래스(pseudo class)

• 직접 요소에 클래스를 선언하는 것은 아니고, 약속된 상황이 되면 브라우저 스스로 클래스를 적용
• :(콜론) 기호를 써서 나타냄

문서 구조와 관련된 가상 클래스

• :first-child : 첫 번째 자식 요소 선택
• :last-child : 마지막 자식 요소 선택

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JS</li>
</ul>

li:first-child { color: red; }
li:last-child { color: blue; }

앵커 요소와 관련된 가상 클래스

• :link : 하이퍼 링크이면서 아직 방문하지 않은 앵커
• :visited : 이미 방문한 하이퍼링크를 의미

a:link { color: blue; }
a:visited { color: gray; }

사용자 동작과 관련된 가상 클래스

:focus: 현재 입력 초점을 가진 요소에 적용
:hover: 마우스 포인터가 있는 요소에 적용
:active: 사용자 입력으로 활성화된 요소에 적용

a:focus { background-color: yellow; }
a:hover { font-weight: bold; }
a:active { color: red; }

가상 요소(pseudo element)

• HTML 코드에 존재하지 않는 구조 요소에 스타일을 부여
• :(더블 콜론) 기호를 사용
• 하지만 하위 브라우저에서 :: 문법을 지원하지 않는 문제가 있으므로 상황에 따라 : 기호를 사용해야 함

::pseudo-element {
    property: value;
}

:before : 가장 앞에 요소를 삽입
:after : 가장 뒤에 요소를 삽입
:first-line : 요소의 첫 번째 줄에 있는 텍스트
:first-letter : 블록 레벨 요소의 첫 번째 문자

// before와 after 가상 요소는 애초에 내용이 없는 상태로 생성되기 때문에 내용을 넣기 위해 content 속성을 이용해야 함
p::before { content: "###" }
p::after { content: "!!!" }
p::first-line { ... }
p::first-letter { ... }

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

구체성

• 어떤 규칙이 우선으로 적용되어야 하는지에 대해 정해진 규칙
• 0, 0, 0, 0(좌측에 있는 값부터 비교하며, 좌측 부분의 숫자가 클수록 높은 구체성을 가짐)

 0, 1, 0, 0 : 선택자에 있는 모든 id 속성값
 0, 0, 1, 0 : 선택자에 있는 모든 class 속성값, 기타 속성, 가상 클래스
 0, 0, 0, 1 : 선택자에 있는 모든 요소, 가상 요소
 전체 선택자는 0, 0, 0, 0
 조합자는 구체성에 영향 X. (>, + 등)
 
 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 */

인라인 스타일

p#page { color: red; }

<p id="page" style="color:blue">Lorem impusm dolor sit.</p>

첫 번째는 0, 1, 0, 1의 구체성을 가지는 선택자로 스타일을 선언
두 번째는 요소에 직접 인라인 스타일 방식으로 스타일을 선언
결과적으로 <p>에는 color: blue가 적용
인라인 스타일의 구체성 값은 1, 0, 0, 0이며 규칙들 중 가장 큰 구체성을 갖기 때문

important

• important 키워드는 별도의 구체성 값은 없지만, 모든 구체성을 무시하고 우선권을 갖음
• important 키워드는 속성값 뒤 한 칸 공백을 주고 느낌표 기호와 함께 씀

p#page { color: red !important; }

<p id="page" style="color:blue">Lorem impusm dolor sit.</p>

상속

• <em>은 부모인 <h1>의 color: gray를 상속받음
• 모든 속성이 다 상속되는 것은 아님
• margin, padding, background, border 등 박스 모델 속성들은 상속되지 않음

h1 { color: gray; }

<h1>Hello, <em>CSS</em></h1>

상속되는 속성의 구체성

* { color: red; }
h1#page { color: gray; }

<h1 id="page">Hello, <em>CSS</em></h1>

전체 선택자의 구체성은 0, 0, 0, 0 이며 id 선택자의 구체성은 0,1,0,1
<em>에는 color: red가 적용되는데 그 이유는 바로 상속된 속성은 아무런 구체성을 가지지 못하기 때문

캐스케이딩

• 3가지 규칙이 있습니다.

1. 중요도(!important)와 출처(출처는 CSS 출처를 의미)
2. 구체성
3. 선언 순서

• CSS 출처는 제작자와 사용자, 그리고 사용자 에이전트(user agent) 경우로 구분

• 제작자의 경우는 사이트를 실제 제작하는 개발자가 작성한 CSS를 의미 (대부분이 여기에 해당)

• 그리고 사용자의 경우는 웹 페이지를 방문하는 일반 사용자들이 작성한 CSS를 의미

• 마지막으로 사용자 에이전트의 경우는 일반 사용자의 환경, 즉 브라우저에 내장된 CSS를 의미

• 현재의 브라우저에서는 사용자 스타일을 지원하지 않는 추세

• 모든 스타일은 아래의 규칙에 따라 단계적으로 적용됩니다.

1. 스타일 규칙들을 모아서 중요도가 명시적으로 선언되었는지에 따라 분류합니다.
   1. 중요도가 명시적으로 선언된 규칙들은 그렇지 않은 규칙들보다 우선합니다.
   2. 중요도가 있는 규칙들끼리는 아래 다른 규칙들을 적용받습니다.
2. 스타일 규칙들을 출처에 따라 분류합니다.
   1. 제작자 스타일 규칙이 사용자 에이전트 스타일 규칙보다 우선합니다.
3. 스타일 규칙들을 구체성에 따라 분류합니다.
   1. 구체성이 높은 규칙들이 우선합니다.
4. 스타일 규칙들을 선언 순서에 따라 분류합니다.
   1. 뒤에 선언된 규칙일수록 우선합니다.