CSS 편집하기

CSS는 Cascading Style Sheets의 약자로, [[웹 페이지]]의 각 구성요소의 여백 및 폭/높이, 색상, [[글꼴]] 등의 시각적인 효과를 주는 [[프로그래밍 언어|언어]]다. [[확장자]]로는 <code>.css</code>를 사용한다.

== 문법 ==
CSS는 기본적으로 다음과 같이 생겼다.

<syntaxhighlight lang="css">

div.wiki#libre {
    padding: 10px;
    color: #663399;
}

</syntaxhighlight>

여기서 <code>div.wiki#libre</code>는 선택자(Selector)로, 해당 선택자에 맞는 요소에 스타일이 적용된다. 여기선 "div태그 중에 class가 wiki이고, id가 libre인 요소"를 의미한다. 중괄호(<code>{}</code>) 사이에는 속성(attribute) 이름과 값이 연속으로 나오는 데, 여기서 해당 요소에 어떤 속성을 지정하는 지를 표기한다.

최신 CSS(CSS3)에는 미디어 쿼리(Media Query) 및 애니메이션 등의 기능이 추가되어 문법이 다소 복잡해졌다.

=== 선택자 ===
선택자는 CSS에서 "어떤 요소"에 스타일을 적용할 지를 표현하는 요소이다. 위의 예제코드에서 <code>div.wiki#libre</code>에 해당하는 부분이다. CSS에서 쓰는 선택자의 종류는 다음과 같다.

==== 기본 선택자 ====

{| class="wikitable"
! 문법
! 설명
|-
| <code>*</code>
| 모든 요소 선택
|-
| <code>Element</code>
| Element 요소 선택<br />
<small>div, body같은 태그 선택</small>
|-
| <code>#ID</code>
| 특정 ID를 가진 요소 선택
|-
| <code>.Class</code>
| 특정 클래스를 가진 요소 선택
|}

<code>*</code>

모든 요소를 선택한다. 함부로 사용하면 웹 페이지의 로딩 속도를 느리게 할 수 있으므로 꼭 필요할 때 사용한다.

<code>Element</code>

div, body, span 같은 HTML 태그를 직접 선택한다. 지정하지 않고 아래의 선택자만 사용하면 모든 태그에 해당한다.

<code>.Class</code>

Class는 한 페이지당 여러 개의 요소를 선택할 수 있다.

<code>#ID</code>

ID는 HTML문서 한 곳에만 지정 할 수 있다. class와 달리 한 페이지의 한 요소에만 스타일 지정을 할 수 있다. class처럼 HTML페이지에 같은 ID 여러 개를 쓰면 맨 처음의 ID만 스타일 적용이 되고 그 다음은 무시되니 그 때는 class를 쓰자.

==== 속성 선택자 ====
요소의 속성값은 <code><a href="#libre" target="_blank"></code>같은 태그가 주어줬을 때, <code>href</code>나 <code>target</code>같은 부분을 뜻한다. 단, <code>id</code>나 <code>class</code>는 (위에 나와있듯이) 따로 문법이 있다.

{| class="wikitable"
! 문법
! 설명
|-
| <code>[속성이름]</code>
| 특정 속성을 가진 요소 선택
|-
| <code>[속성이름='값']</code>
| 특정 속성값이 해당 값과 일치하는 요소 선택
|-
| <code>[속성이름^='값']</code>
| 특정 속성값이 해당 값으로 시작하는 요소 선택
|-
| <code>[속성이름$='값']</code>
| 특정 속성값이 해당 값으로 끝나는 요소 선택
|-
| <code>[속성이름*='값']</code>
| 특정 속성값에 해당 값이 들어 있는 요소 선택
|-
| <code>[속성이름~='값']</code>
| (여러 단어가 띄어쓰기로 구분된) 특정 속성값에 해당 값이 들어 있는 요소 선택
|-
| <code><nowiki>[속성이름|='값']</nowiki></code>
| 특정 속성값이 해당 값과 일치하거나 해당 값 + 하이픈(-)으로 시작하는 요소 선택
|}

==== 조합 선택자 ====
두 가지 이상의 선택자를 조합한다. 주로 특정 요소 다음에 오는 요소나, 자식 요소를 선택하는 데 쓴다.

{| class="wikitable"
! 문법
! 설명
|-
| <code>선택자1, 선택자2</code>
| 선택자1 또는 선택자2 선택
|-
| <code>선택자1선택자2</code>
| 선택자1과 선택자2를 동시에 만족하는 요소 선택
|-
| <code>선택자1 선택자2</code>
| 선택자1의 자식 요소 중 선택자2 요소 선택
|-
| <code>선택자1 > 선택자2</code>
| 선택자1의 바로 밑에 있는 자식 요소 중 선택자2 요소 선택
|-
| <code>선택자1 + 선택자2</code>
| 선택자1 바로 다음에 오는 선택자2 요소 선택
|-
| <code>선택자1 ~ 선택자2</code>
| 선택자1 다음에 오는 모든 선택자2 요소 선택
|}

==== 특수 선택자 ====
===== 가상 클래스 선택자 =====

=== 속성 정의 ===
선택자로 선택한 요소를 "어떻게 보일지"를 정의하는 부분이다. 문법은 <code>속성: 값;</code>의 연속으로 구성되어 있다.

==== 단위 ====
CSS의 값에는 뒤에 단위가 붙는 경우가 있다. CSS에서 사용할 수 있는 단위는 다음과 같다.

===== 길이(절대값) =====
{| class="wikitable"
! 단위
! 이름
! 길이
|-
| <code>cm</code>
| 센티미터
| 1cm = 96px / 2.54
|-
| <code>mm</code>
| 밀리미터
| 1mm = 1cm의 1/10
|-
| <code>q</code>
| 쿼터-밀리미터
| 1q = 1cm의 1/40
|-
| <code>in</code>
| 인치
| 1in = 2.54cm = 96px
|-
| <code>pc</code>
| 피카
| 1pc = 1인치의 1/6
|-
| <code>pt</code>
| 포인트
| 1pt = 1인치의 1/72
|-
| <code>px</code>
| 픽셀
| 1px = 1인치의 1/96
|}

===== 길이(상대값) =====
{| class="wikitable"
! 단위
! 길이
|-
| <code>%</code>
| 부모 요소에서 퍼센트 값
|-
| <code>em</code>
| 요소의 글자크기
|-
| <code>ex</code>
| x-높이 (알파벳 x의 글자크기 기준)
|-
| <code>ch</code>
| 0 (숫자 영)의 글자폭
|-
| <code>rem</code>
| 루트 요소의 글자크기
|-
| <code>vw</code>
| 뷰포트의 폭 1%
|-
| <code>vh</code>
| 뷰포트의 높이 1%
|-
| <code>vmin</code>
| 뷰포트의 좁은 쪽 1%
|-
| <code>vmax</code>
| 뷰포트의 넓은 쪽 1%
|}

===== 기타 =====
* 각도에선 <code>deg</code>(원=360deg),<code>grad</code>(원=400grad),<code>rad</code>(원=2πrad),<code>turn</code>(원=1turn)을 사용한다.
* (애니메이션 등에서 쓰이는) 시간의 단위로는 <code>s</code>(초)와 <code>ms</code>(밀리초)가 있다.
* 주기를 나타내는 단위로 <code>Hz</code>와 <code>kHz</code>가 있다.

==== 색상 ====
CSS에선 색상을 나타내는 표기법이 여러 가지 있다.
* 16진법 표기: <code>#A2CCA3</code>, '#' 이후에 두 글자씩 각각 Red, Green, Blue를 나타낸다. 이 표기법이 가장 자주 쓰인다. 만약 <code>#AABBCC</code> 각각의 [[RGB]] 값이 모두 같은 두 글자라면 <code>#ABC</code>와 같이 줄여서 작성 할 수도 있다.
* 10진법 RGB 표기: <code>rgb(162, 204, 163)</code>, 세 숫자가 각각 Red, Green, Blue를 나타낸다.
* 10진법 % 표기: <code>rgb(64%, 80%, 64%)</code>, 위와 같으나 백분율을 사용해 표기한다.
* HSL 표기: <code>hsl(119, 29%, 72%)</code>, 세 숫자가 각각 Hue(색조), Saturation(채도), Lightness(명도)를 나타낸다.
* HSV 표기: <code>hsv(119, 21%, 80%)</code>, 세 숫자가 각각 Hue(색조), Saturation(채도), Value(명도)를 나타낸다. HSL과 차이가 있음에 유의할 것.
* 색상 이름: <code>lightgreen</code>, 직접 색상의 이름을 넣을 수 있다. 전체 색상 목록은 [http://www.w3.org/TR/css3-color/#svg-color CSS 스펙 문서]를 참고할 것.

CSS3엔 알파 값(투명도) 개념이 추가되어서, RGB/HSL/HSV의 4번째 값에 알파 값을 쓸 수 있다. 단, 앞에 소문자 a를 붙여야 하며, 0은 완전 투명, 1은 불투명이다. (예: <code>rgba(162, 204, 163, 0.8)</code>) 16진수 표기법에서는 뒤에 투명도를 두글자로 적으면 된다. (<code>#AABBCCDD</code>의 형식)

=== 미디어 쿼리(Media query, @media) ===
CSS3에 새로 추가된 기능으로, 특정 기기나 해상도 등에 따라 다른 효과를 줄 때 사용하며, 반응형 웹 디자인의 핵심 기능 중 하나이다. CSS 내에서 미디어 쿼리를 사용한 문법은 다음과 같다.

<syntaxhighlight lang="css">

@media screen and (min-width: 768px) {
    div.wiki#libre {
        font-size: 10pt;
    }
}

</syntaxhighlight>

또한, <code><link></code>태그로 CSS를 적용할 때에도 <code>media</code>속성에 미디어 쿼리를 다음과 같이 사용할 수 있다.

<syntaxhighlight lang="html5">

<link rel="stylesheet" media="screen and (min-width: 768px)" href="stylesheet.css" />

</syntaxhighlight>

=== 웹 폰트 (@font-face) ===
CSS3에 새로 추가된 기능으로, 현재 컴퓨터(또는 스마트폰)에 설치되어 있지 않은 글꼴을 내려받아 적용하는 기능이다. 파일 형식으로는 <code>woff2</code>, <code>woff</code>를 주로 쓰며, 구형 브라우저를 위해 <code>ttf</code>, <code>svg</code>, <code>eot</code>도 쓰인다. 웹 폰트는 다음과 같이 사용한다.

<syntaxhighlight lang="css">

@font-face {
    font-family: 'LibreWiki Font'; /* 글꼴의 이름 */
    src: url('webfont.eot'); /* IE9 */
    src: local('LibreWiki Font'), /* 해당 글꼴이 이미 설치되어 있으면 그걸 사용한다. */
         url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6 - IE8 */
         url('webfont.woff2') format('woff2'), /* WOFF 2.0 */
         url('webfont.woff') format('woff'), /* WOFF 1.0 */
         url('webfont.ttf')  format('truetype'), /* 트루타입 */
         url('webfont.svg#svgFontName') format('svg'); /* 구형 iOS */
}

div.wiki#libre {
    font-family: 'LibreWiki Font', sans-serif;
}

</syntaxhighlight>

== 웹 페이지에 적용 ==
작성한 CSS를 [[HTML]] 웹 페이지에 적용하는 방법은 다음과 같이 크게 세 가지가 있다.
* 인라인 스타일 : 해당 요소의 style속성에 직접 입력하는 방법. !important를 빼고 중요도가 가장 높은데 인라인 속성에 <code>background:black</code>이 지정되면 내부 스타일에서 지정한 <code>background:white</code>가 무시된다.
* 내부 스타일 : CSS를 <code><style></code>태그 안에 넣는 방법. 인라인 스타일 다음으로 중요도가 높다.
* 외부 스타일 : 외부 파일로 만들어 <code><link rel="stylesheet" href="(주소)"></code>태그를 적용하는 방법. 중요도가 가장 낮다.

최근에는 HTML의 용량을 줄이기 위해 CSS와 HTML을 분리하는 경향이 많아져 내부 스타일 보다는 외부 스타일을 더 많이 쓴다.

== [[전처리기]] ==
CSS가 가지고 있는 한계를 극복하기 위해 기존 CSS에 없는 문법과 기능(예를 들면, 변수나 산술식, 상속 등)을 추가한 언어를 만들어, 이를 CSS로 출력하는 프로그램을 만들어 쓰는데, 이를 가리켜 CSS 전처리기(Preprocessor)라고 한다.

=== Sass/SCSS ===
[http://sass-lang.com/ Sass 공식 홈페이지]
Hampton Catlin이 만들었다. 공식 구현체는 [[루비]]로 작성했으나, [[C++]]구현체인 [https://github.com/sass/libsass libsass]가 나오면서 이를 이용해 [[파이썬]]([https://github.com/dahlia/libsass-python libsass-python])이나 [[Node.js]]([https://github.com/sass/node-sass node-sass])등에서도 사용할 수 있다.
SCSS는 CSS와 같은 중괄호 문법을, Sass는 파이썬과 같은 들여쓰기 문법을 사용한다.
현재 Bootstrap과 Foundation에서 쓰고 있다.

=== Less ===
[http://lesscss.org/ Less 공식 홈페이지]
Alexis Sellier가 만들었다. 최초엔 루비로 작성했으나, 이후 [[자바스크립트]]로 대체했다., 서버측(Node.js나 Rhino)뿐만 아니라, 클라이언트측(웹 브라우저)에서 직접 사용할 수 있다.
Bootstrap에서 쓰고 있었으나, 버전 4 이후로 Sass로 바꿨다.

=== Stylus ===
[https://learnboost.github.io/stylus/ Stylus 공식 홈페이지]
문법을 상당히 간소화 시켜서, 중괄호는 물론, 콜론도 세미콜론도 필요없다. [[Node.js]]에서 돌아간다.

== 바깥 고리 ==
* [https://developer.mozilla.org/en-US/docs/Web/CSS CSS 문서 모음 (MDN)]
* [http://www.w3schools.com/css/default.asp W3Schools/CSS]

[[분류:인터넷]]
[[분류:컴퓨터 언어]]

{{퍼온문서|CSS|||리브레 위키|https://librewiki.net/wiki/CSS}}