편집을 취소할 수 있습니다. 이 편집을 되돌리려면 아래의 바뀐 내용을 확인한 후 게시해주세요.
| 최신판 | 당신의 편집 | ||
| 30번째 줄: | 30번째 줄: | ||
|- | |- | ||
| <code>Element</code> | | <code>Element</code> | ||
| | | Element태그인 요소 선택 | ||
|- | |- | ||
| <code>#ID</code> | | <code>#ID</code> | ||
| 39번째 줄: | 38번째 줄: | ||
| 특정 클래스를 가진 요소 선택 | | 특정 클래스를 가진 요소 선택 | ||
|} | |} | ||
==== 속성 선택자 ==== | ==== 속성 선택자 ==== | ||
| 110번째 줄: | 93번째 줄: | ||
| 선택자1 다음에 오는 모든 선택자2 요소 선택 | | 선택자1 다음에 오는 모든 선택자2 요소 선택 | ||
|} | |} | ||
=== 속성 정의 === | === 속성 정의 === | ||
| 159번째 줄: | 139번째 줄: | ||
! 단위 | ! 단위 | ||
! 길이 | ! 길이 | ||
|- | |- | ||
| <code>em</code> | | <code>em</code> | ||
| 195번째 줄: | 172번째 줄: | ||
==== 색상 ==== | ==== 색상 ==== | ||
CSS에선 색상을 나타내는 표기법이 여러 가지 있다. | CSS에선 색상을 나타내는 표기법이 여러 가지 있다. | ||
* 16진법 표기: <code>#A2CCA3</code>, '#' 이후에 두 글자씩 각각 Red, Green, Blue를 나타낸다. 이 표기법이 가장 자주 쓰인다 | |||
* 16진법 표기: <code>#A2CCA3</code>, '#' 이후에 두 글자씩 각각 Red, Green, Blue를 나타낸다. 이 표기법이 가장 자주 쓰인다. | |||
* 10진법 RGB 표기: <code>rgb(162, 204, 163)</code>, 세 숫자가 각각 Red, Green, Blue를 나타낸다. | * 10진법 RGB 표기: <code>rgb(162, 204, 163)</code>, 세 숫자가 각각 Red, Green, Blue를 나타낸다. | ||
* 10진법 % 표기: <code>rgb(64%, 80%, 64%)</code>, 위와 같으나 백분율을 사용해 표기한다. | * 10진법 % 표기: <code>rgb(64%, 80%, 64%)</code>, 위와 같으나 백분율을 사용해 표기한다. | ||
| 202번째 줄: | 180번째 줄: | ||
* 색상 이름: <code>lightgreen</code>, 직접 색상의 이름을 넣을 수 있다. 전체 색상 목록은 [http://www.w3.org/TR/css3-color/#svg-color CSS 스펙 문서]를 참고할 것. | * 색상 이름: <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> | CSS3엔 알파 값(투명도) 개념이 추가되어서, RGB/HSL/HSV의 4번째 값에 알파 값을 쓸 수 있다. 단, 앞에 소문자 a를 붙여야 하며, 0은 완전 투명, 1은 불투명이다. (예: <code>rgba(162, 204, 163, 0.8)</code>) | ||
=== 미디어 쿼리(Media query, @media) === | === 미디어 쿼리(Media query, @media) === | ||
| 249번째 줄: | 227번째 줄: | ||
== 웹 페이지에 적용 == | == 웹 페이지에 적용 == | ||
작성한 CSS를 [[HTML]] 웹 페이지에 적용하는 방법은 다음과 같이 크게 세 가지가 있다. | 작성한 CSS를 [[HTML]] 웹 페이지에 적용하는 방법은 다음과 같이 크게 세 가지가 있다. | ||
* | * 해당 요소의 style속성에 직접 입력하는 방법. 별로 권장하지 않는 방법이다. | ||
* | * CSS를 <code><style></code>태그 안에 넣는 방법. | ||
* | * 외부 파일로 만들어 <code><link rel="stylesheet" href="(주소)"></code>태그를 적용하는 방법. 대체로 이 방법을 권장한다. | ||
== | == 전처리기 == | ||
CSS가 가지고 있는 한계를 극복하기 위해 기존 CSS에 없는 문법과 기능(예를 들면, 변수나 산술식, 상속 등)을 추가한 언어를 만들어, 이를 CSS로 출력하는 프로그램을 만들어 쓰는데, 이를 가리켜 CSS 전처리기(Preprocessor)라고 한다. | CSS가 가지고 있는 한계를 극복하기 위해 기존 CSS에 없는 문법과 기능(예를 들면, 변수나 산술식, 상속 등)을 추가한 언어를 만들어, 이를 CSS로 출력하는 프로그램을 만들어 쓰는데, 이를 가리켜 CSS 전처리기(Preprocessor)라고 한다. | ||
=== Sass/SCSS === | === Sass/SCSS === | ||