CSS - 1. CSS 이해하기

공부일기/부스트코스

CSS - 1. CSS 이해하기

Youngbin Kim 2020. 9. 16. 23:02

1. CSS 소개

Cascading Style Sheets의 약자. HTML을 꾸며주는 언어이며 html이 웹페이지의 정보를 표현한다면, CSS는 html을 보기 좋게 디자인 하는 역할이다.

2. CSS 문법과 적용

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

/*
h1 = 선택자
color, font-size = 속성
yellow, 2em = 값
color: yellow, font-size: 2em = 선언
{ ... } : 선언부
*/

선택자(selector): 어느 요소를 꾸밀 건지
속성(property): html의 속성과 구별해서 이해하자
값(value): 속성으로 표현될 값
선언(declaration): 속성과 값의 조합
선언부(declaration block): 중괄호를 포함한 부분
규칙(rule set): 선택자와 선언부가 합쳐진 구문. 선택자와 선언부, 선언과 선언사이에 개행 가능
주석: /* 내용 */

CSS의 적용 방법 4가지

1. Inline: 해당 요소에 직접 스타일 속성을 이용해서 규칙들을 선언하는 방법. 선택자는 필요 없고, 선언부에 내용만 스타일 속성의 값으로 넣어주면 된다. Inline 스타일 방식으로 부른다.

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

2. Internal: 문서에 <style>을 활용한 방법. <head> 태그 내부에 들어가며 <style> 안에 스타일 규칙이 들어간다.

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

3. External: 외부 스타일 시트 파일을 이용한 방법. 외부 스타일 시트는 스타일 규칙들을 별도의 외부파일을 만들어 넣는 방식이다. 외부 파일 확장자는 .css이며 css파일이라 부른다. 실제 제일 많이 사용하는 방식

<link rel="stylesheet" href="css/style.css"> /* <head>태그 내에 설정 */


p {
    color: gray;
}

4. @import: 스타일 시트 내에서 다른 스타일 시트 파일을 불러오는 방식이나 성능상 좋지 않아 거의 쓰이지 않는다.

3. 선택자

완성도 있는 디자인을 표현하기 위해 반드시 내가 원하는 요소를 선택할 수 있어야 한다. 따라서 CSS에서 선택자는 중요한 역할을 한다.

요소 선택자: 선택자 중에 가장 기본이 되는 선택자(태그 선택자)
그룹화: 쉼표를 이용해 선택자를 나열해주면 그룹화 할 수 있다.

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} /* 전체 선택자, 성능에는 좋지 않으므로 사용을 지양한다. */
h1 { color:yellow; font-size: 2em; background-clor:gray;} /* 선언 */
h1, h2, h3, h4, h5, h6 { color:yellow; font-size: 2em; background-clor:gray;} /* 선택자&선언 */

class 선택자: .을 이용해 표현할 수 있다. 다중 class 선언도 가능하다.

<head>
  <meta charset="utf-8">
  <title>CSS</title>
  <style media="screen">
    .html { color:purple; }
    .css { text-decoration: underline; }
  </style>
</head>
<body>
  <dl>
    <dt class="html">HTML</dt>
    <dd><span class="html">HTML</span>은 문서의 구조를 나타냅니다.</dd>
    <dt class="css">CSS</dt>
    <dd><span class="css">CSS</span>는 문서의 표현을 나타냅니다.</dd>
    <dt class="html css">JS</dt>
    <dd><span class="html css">JS</span>는 문서의 동작을 나타냅니다.</dd>
  <dl>
</body>

id 선택자: .대신에 #을 이용한다. class 선택자와의 차이는 문서 내에 유일한 요소에 사용하며, 구체성의 값이 다르다.

<head>
  <meta charset="utf-8">
  <title>CSS</title>
  <style media="screen">
    .html { color:purple; }
    .css { text-decoration: underline; }
    #id-selector { font-size: 30px; }
    
    .html.css { border: 1px solid; } /* 선택자 조합 */
  </style>
</head>

<body>
  <dl>
    <dt class="html">HTML</dt>
    <dd><span class="html">HTML</span>은 문서의 구조를 나타냅니다.</dd>
    <dt class="css">CSS</dt>
    <dd><span class="css">CSS</span>는 문서의 표현을 나타냅니다.</dd>
    <dt class="html css">JS</dt>
    <dd><span class="html css">JS</span>는 문서의 동작을 나타냅니다.</dd>
  <dl>
  <p id="id-selector">id 선택자는 해쉬 기호를 사용합니다.</p>
</body>

선택자의 조합

/* 요소와 클래스의 조합 */
p.bar { ... }

/* 다중 클래스 */
.foo.bar { ... } 

/* 아이디와 클래스의 조합 */
#foo.bar { ... }

속성 선택자

- 단순 속성으로 선택

p[class] {color:silver;}
p[class][id] {text-decoration:underline;}

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

- 정확한 속성값으로 선택

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

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

부분 속성값으로 선택:

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

<p class="color hot">red</p> /* 1번, 2번, 4번 적용 */
<p class="cool color">blue</p> /* 1번, 3번, 4번 적용 */
<p class="colorful nature">rainbow</p> /* 2번, 4번 적용 */

4. 문서 구조 관련 선택자

자손 선택자: 선택자 사이에 아무 기호 없이 공백으로 구분한다

div span { color: red }

자식 선택자: 선택자 사이에 닫는 꺽쇠 기호 '>'를 넣는다. 밑의 예에선 <div>의 자식 요소인 <h1>를 선택하는 선택자이다.

div > h1 { color:red; }

인접 형제 선택자: 인접 형제 선택자는 선택자 사이에 + 기호를 넣는다. 형제 관계이면서 바로 뒤에 인접해 있는 요소를 선택하는 선택자이다.

/* body 요소의 자식인 div 요소의 자손인 table 요소 바로 뒤에 인접한 ul 요소 선택 */

body > div table + ul { ... }

5. 가상 선택자

가상 선택자는 지금 문서 내에 존재하지 않는 요소에 스타일을 부여하거나 특정 요소의 형태를 미리 추정해 가상의 클래스로 스타일을 적용시킬 수 있는 선택자.

가상 클래스: 미리 정의해 놓은 상황에 적용이 되도록 약속되어 있는 보이지 않는 클래스. 약속된 상황이 되면 브라우저 스스로 클래스를 적용한다.

:pseudo-class {
  property: value;
}

문서 구조와 관련된 가상 클래스
- :first-child: 첫 번째 자식 요소 선택
- :last-child: 마지막 자식 요소 선택

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

링크 관련된 가상 클래스
- :link: 하이퍼링크이면서 아직 방문하지 않은 앵커
- :visited: 이미 방문한 하이퍼링크를 의미

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

사용자 동작 관련 가상 클래스
- :focus: 현재 입력 포커스를 갖고 있는 요소에 적용 ex) tab 눌렀을 때 점선 테두리
- :hover: 마우스 포인터가 위치해 있는 요소에 적용
- :active: 사용자 입력에 의해 활성화된 요소에 적용

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

가상 요소: 미리 정의해 놓은 위치에 삽입이 되도록 약속되어 있는 보이지 않는 요소. CSS3부터 가상 클래스와 구분하기 위해 :: 기호를 사용하기로 했으나 ::문법을 지원하지 않는 하위 브라우저 문제가 있어 상황에 따라 : 기호를 사용한다.
- :before: 가장 앞에 요소를 삽입
- :after: 가장 뒤에 요소를 삽입
- :first-line: 요소의 첫 번째 줄에 있는 텍스트
- :first-letter: 블록 레벨 요소의 첫 번째 문자

6. 구체성

구체성: 선택자를 얼마나 명시적으로 선언했느냐를 수치화 한 것. 구체성의 값이 높을 수록 우선되어 적용된다.
0, 0, 0, 0
0, 1, 0, 0: 선택자에 있는 모든 id 속성값
0, 0, 1, 0: 선택자에 있는 모든 class 속성값, 기타 속성, 가상 클래스
0, 0, 0, 1: 선택자에 있는 모든 요소, 가상 요소
전체 선택자는 0, 0, 0, 0을 갖는다. 조합자는 구체성에 영향을 주지 않는다.

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, */
div#page {...} /* 0,1,0,1 */

인라인 스타일일 경우 가장 높은 구체성을 가진다. 1,0,0,0
!important: 별도의 구체성 값은 없지만 구체성을 모두 무시하고 우선권을 갖는다.

7. 상속

구체성과 더불어 선언들이 문서에 어떻게 적용되는지를 이해하기 위한 중요한 핵심 개념
박스모델 관련 속성들은 상속되지 않는다.
상속된 값은 아무런 구체성을 가지지 않으며, 0,0,0,0도 아니다

8. 캐스케이딩

cascading: CSS가 어떤 기준으로, 어떤 방식으로 문서에 적용 되는 지를 정한 규칙
캐스케이딩의 규칙은 1. 중요도와 출처 2. 구체성 3. 선언순서의 순으로 이뤄진다.