편집 요약 없음 |
Emitbreaker (토론 | 기여) 잔글편집 요약 없음 |
||
1번째 줄: | 1번째 줄: | ||
CSS는 Cascading Style Sheets의 약자로, 웹 | CSS는 Cascading Style Sheets의 약자로, [[웹 페이지]]의 각 구성요소의 여백 및 폭/높이, 색상, [[글꼴]] 등의 시각적인 효과를 주는 [[프로그래밍 언어|언어]]다. [[확장자]]로는 <code>.css</code>를 사용한다. | ||
== 문법 == | == 문법 == | ||
17번째 줄: | 17번째 줄: | ||
== 웹 페이지에 적용 == | == 웹 페이지에 적용 == | ||
작성한 CSS를 HTML 웹 페이지에 적용하는 방법은 다음과 같이 크게 세 가지가 있다. | 작성한 CSS를 [[HTML]] 웹 페이지에 적용하는 방법은 다음과 같이 크게 세 가지가 있다. | ||
* 해당 요소의 style속성에 직접 입력하는 방법. 별로 권장하지 않는 방법이다. | * 해당 요소의 style속성에 직접 입력하는 방법. 별로 권장하지 않는 방법이다. | ||
* CSS를 <code><style></code>태그 안에 넣는 방법. | * CSS를 <code><style></code>태그 안에 넣는 방법. | ||
* 외부 파일로 만들어 <code><link rel="stylesheet" href="(주소)"></code>태그를 적용하는 방법. 대체로 이 방법을 권장한다. | * 외부 파일로 만들어 <code><link rel="stylesheet" href="(주소)"></code>태그를 적용하는 방법. 대체로 이 방법을 권장한다. | ||
== 바깥 고리 == | == 바깥 고리 == |
2015년 4월 25일 (토) 10:31 판
CSS는 Cascading Style Sheets의 약자로, 웹 페이지의 각 구성요소의 여백 및 폭/높이, 색상, 글꼴 등의 시각적인 효과를 주는 언어다. 확장자로는 .css
를 사용한다.
문법
CSS는 기본적으로 다음과 같이 생겼다.
div.wiki#libre {
padding: 10px;
color: #663399;
}
여기서 div.wiki#libre
는 선택자(Selector)로, 해당 선택자에 맞는 요소에 스타일이 적용된다. 여기선 "div태그 중에 class가 wiki이고, id가 libre인 요소"를 의미한다. 중괄호({}
) 사이에는 속성(attribute) 이름과 값이 연속으로 나오는 데, 여기서 해당 요소에 어떤 속성을 지정하는 지를 표기한다.
최신 CSS(CSS3)에는 미디어 쿼리(Media Query) 및 애니메이션 등의 기능이 추가되어 문법이 다소 복잡해졌다.
웹 페이지에 적용
작성한 CSS를 HTML 웹 페이지에 적용하는 방법은 다음과 같이 크게 세 가지가 있다.
- 해당 요소의 style속성에 직접 입력하는 방법. 별로 권장하지 않는 방법이다.
- CSS를
<style>
태그 안에 넣는 방법. - 외부 파일로 만들어
<link rel="stylesheet" href="(주소)">
태그를 적용하는 방법. 대체로 이 방법을 권장한다.