CSS이해

css 소개

cascading style sheet

html(마크업 언어)을 꾸며주는 언어
html이 웹페이지의 정보를 표현한다면, css는 html을 보기 좋게 디자인하는 역할

css 문법

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 주석

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

css 적용

inline

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

해당 요소에 직접 스타일 속성을 이용해 규칙을 선언하는 방법

해당 요소에 직접 입력하기 때문에 선택자는 필요하지 않게 되고, 선언부에 내용만 스타일 속성의 값으로 넣어주면 된다.
inline 방식은 코드이 재사용이 되지 않아 자주 사용하지 않음

internal

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

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

<style>은 <head>내부에 들어가며 <style>안에 스타일 규칙이 들어간다. 많은 페이지가 있는 경우에는 모든 페이지에 저마다의 규칙을 선언해줘야 한다.
페이지가 많고 스타일 규칙 내용이 많아지면 어려워진다.

external

스타일 규칙들을 별도의 외부 파일을 만들어 넣는 방식
외부 파일은 확장자가 .css가ㅏ 되며 css 파일이라고 부른다.

css파일을 하나 만들고 규칙을 선언한다.
그 다음 <link>를 이용해서 css파일을 연결한다.

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

rel 속성은 연결되는 파일이 문서와 어떤 관계인지를 명시하는 속성으로, css파일은 stylesheet라고 적어야 한다.

import

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

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

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

선택자

요소 선택자

선택자 중에서 가장 기본이 되는 선택자, 태그 선택자라고도 한다.

h1 { color: yellow; }
h2 { color: yellow; }
h3 { color: yellow; }

요소 선택자는 선택자 부분에 태그 이름이 들어간다.
문서 내의 모든 요소에 스타일 규칙이 적용된다.

그룹화

선택자는 쉼표를 이용해서 그룹화를 할 수 있다.

h1, h2, h3 { color: yellow; }

전체 선택자

* { color: yellow; }

*(별표, asterisk) 기호로 문서 내에 모든 요소를 선택할 수 있다.
한 번의 선언만으로 문서 내에 모든 요소에 스타일 규칙이 적용된다.
성능에 좋지 않으므로 사용을 지양하는 것이 좋다.

선언 그룹화

선택자뿐만 아니라 선언들도 그룹화가 가능하다.

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

선택자와 선언이 동시에 그룹화도 가능하다.

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

class 선택자

요소에 구애받지 않고 스타일 규칙을 적용할 수 있는 가장 일반적인 방법

class 선택자를 사용하기 위해서는 html을 수정해 class속성을 추가해야 한다.
class 속성은 글로벌 속성이므로 어느 태그에서도 사용할 수 있다.
class 속성에 값을 넣게 되면, class 선택자를 이용해서 해당 요소에 스타일 규칙을 적용할 수 있다.
class 선택자를 쓸 때는 맨 앞에 .(마침표)를 찍어주면 된다.

.foo { font-size: 30px; }

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

다중 class

공백으로 구분하여 여러 개의 class 값을 넣을 수 있다.

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

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

id 선택자

id 선택자는 class 선택자와 비슷하다.
선택자를 쓸 때는 #(해시) 기호를 쓰고 요소에는 id 속성을 쓰면 된다.

#bar { background-color: yellow; }

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

class 선택자와의 차이점

.가 아닌 # 기호 사용
태그의 id 속성 참조
문서 내에 유일한 요소에 사용
구체성

class와 달리 id는 문서 내에서 유일하다는 차이점이 있다.
클래스 선택자는 여러 요소에 같은 클래스를 넣고 같은 규칙을 적용할 수 있지만,
id 속성값은 문서 내에 유일하게 사용되어야 한다.

선택자의 조합

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

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

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

속성 선택자

단순 속성으로 선택

p[class] { color: silver; }
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; }

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

속성의 값으로 요소를 선택한다.
선택자는 대괄호 안에 속성 이름과 속성값을 다 적으면 된다.

부분 속성값으로 선택

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

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

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번째 요소 */

문서 구조 관련 선택자

<html>
<body>
    <div>
        <h1><span>HTML</span>: Hyper Text Markup Language</h1>
    </div>
    <p>HTML과 CSS와 JAVASCRIPT를 이용해서 멋진 웹 사이트를 제작할 수 있습니다.</p>
</body>
</html>

부모와 자식

부모 요소는 그 요소를 포함하는 가장 가까운 상위 요소로 그 요소의 부모 요소는 단 하나뿐이다.
자식요소는 여러 개일 수 있다.

<body>의 부모 요소: <html> ↔ <html>의 자식 요소: <body>
<div>의 부모 요소: <body> ↔ <body>의 자식 요소: <div>, <p>
<h1>의 부모 요소: <div> ↔ <div>의 자식 요소: <h1>
<span>의 부모 요소: <h1> ↔ <h1>의 자식 요소: <span>
<p>의 부모 요소: <body> ↔ <body>의 자식 요소: <div>, <p>

조상과 자손

부모와 자식의 관계를 포함한 확장된 관계 조상 요소는 그 요소를 포함하는 모든 요소로 부모 요소를 포함하여 여러 개 일수도 있다.
자손 요소는 그 반대로, 그 요소가 포함하고 있는 모든 요소가 자손 요소 이다.

형제

같은 부모를 가지고 있는 요소들은 형제 관계이다.
형제 관계에서 바로 뒤에 이어 나오는 요소가 인접한 형제 요소이다.

문서 구조 관련 선택자

자손 선택자

div span { color: red; }

자식 선택자

div > span { color: red; }

인접 형제 선택자

div + span { color: red; }

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

body > div table + ul { ... }

가상 클래스(pseudo class)

미리 정의해놓은 상황에 적용이 되도록 약속되어있는 보이지 않는 클래스

직접 요소에 클래스를 선언하는 것은 아니고, 약속된 상황이 되면 브라우저 스스로 클래스를 적용해준다.

:pseudo-class {
    property: value;
}

가상 클래스는 :(콜론) 기호로 나타낸다.

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

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; }

실제 <li>에는 class 속성이 없지만 내부적으로 가상 클래스가 적용되어 아래의 코드처럼 동작한다.

<ul>
    <li class="first-child">HTML</li>
    <li>CSS</li>
    <li class="last-child">JS</li>
</ul>

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

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

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

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

가상 요소

미리 정의해놓은 위치에 삽입이 되도록 약속되어있는 보이지 않는 요소

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

p::before { content: "###" }
p::after { content: "!!!" }
p::first-line { ... }
p::first-letter { ... }

before와 after 가상 요소는 애초에 내용이 없는 상태로 생성되기 때문에 내용을 넣기 위해 content 속성을 이용한다.

구체성

선택자가 어떤 규칙이 우선으로 적용되어야 하는지에 대해 정해진 규칙

구체성은 선택자를 얼마나 명시적으로 선언했느냐를 수치화한 것으로 구체성의 값이 클수록 우선으로 적용된다.

0,0,0,0

구체성은 4개의 숫자 값으로 이루어져 있다. 좌측에 있는 값부터 비교하며, 좌측 부분의 숫자가 클수록 높은 구체성을 갖는다.

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

인라인 스타일

인라인 스타일의 구체성 값은 1,0,0,0 이며 가장 큰 구체성을 갖는다.

important

important는 구체성 값은 없지만 모든 구체성을 무시하고 우선권을 갖는다.

상속

상속되는 속성

h1 { color: gray; }

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

위 코드에서 <em>은 부모인 <h1>의 color: gray를 상속받는다.
margin, padding, backround, border 등 박스 모델 속성들은 상속되지 않는다.

상속되는 속성의 구체성

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

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

위 코드에서 전체 선택자 구체성은 0,0,0,0 이며 id 선택자는 0,1,0,1이다.
하지만 <em>은 color: red가 적용되는데 상속된 속성은 아무런 구체성을 가지지 못하기 때문이다.

캐스캐이딩

cascading은 스타일 규칙들이 어떠한 기준으로 요소에 적용되는지를 정한 규칙이다.

구체성이 같은 두 규칙이 동일한 요소에 적용된다면?

h1 { color: red; }
h1 { color: blue; }

color: blue가 적용된다.

cascading 규칙

중요도(!important)와 출처

기본적으로 !important로 선언된 모든 규칙은 그렇지 않은 규칙보다 우선한다.
출처는 제작자, 사용자, 사용자 에이전트(User Agent)로 구분한다. 제작자 : 사이트를 실제 제작하는 개발자가 작성한 css 사용자 : 웹 페이지를 방문하는 일반 사용자들이 작성한 css 사용자 에이전트 : 브라우저 내장 css

우선순위
사용자 important 스타일 > 제작자 important 스타일 > 제작자 스타일 > 사용자 스타일 > 사용자 에이전트 스타일

구체성

선언 순서

나중에 선언된 것이 우선

dongkwon

css 소개

cascading style sheet

css 문법

css 구문

css 주석

css 적용

inline

internal

external

import

선택자

요소 선택자

그룹화

전체 선택자

선언 그룹화

class 선택자

다중 class

id 선택자

class 선택자와의 차이점

선택자의 조합

속성 선택자

단순 속성으로 선택

정확한 속성값으로 선택

부분 속성값으로 선택

문서 구조 관련 선택자

부모와 자식

조상과 자손

형제

문서 구조 관련 선택자

가상 클래스(pseudo class)

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

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

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

가상 요소

구체성

구체성

인라인 스타일

important

상속

상속되는 속성

상속되는 속성의 구체성

캐스캐이딩

cascading 규칙

중요도(!important)와 출처

구체성

선언 순서

참고

미디어 쿼리

레이아웃

폰트, 텍스트

단위,배경,박스모델