css
CSS - 스타일 시트 시작하기
CSS는 HTML 문서에 스타일(글꼴, 간격, 색상)을 첨부하여 문서 내의 데이터를 다양한 모습으로 표현할 수 있게 하는 표현 중심 언어입니다.
css는 문서 내에 넣을 수 있고 외부 파일로 연결할 수 있습니다.
스타일시트 문서를 참조해야 하는 경우 다음의 형식을 따릅니다.
스타일 시트는 다른 곳에 지정해도 되지만 가능하면 <HEAD>...</HEAD>에서 하는 것이 안전합니다.
css는 문서 내에 넣을 수 있고 외부 파일로 연결할 수 있습니다.
<!-- 문서 내 스타일 시트를 사용합니다. -->
<style> 내용 </style>
<!-- 외부 스타일 시트를 사용합니다. -->
<link href='[URL]' rel='stylesheet' type="text/css" />
스타일시트 문서를 참조해야 하는 경우 다음의 형식을 따릅니다.
선택자 { 선언… 속성:속성값; }
설 명 | |
---|---|
선택자 | 규칙이 적용될 요소의 이름 1. 선택자를 화면에 표현할 방식을 결정하는 문장. 2. 선택자는 <태그>, class, id 속성이 대상이 됨. ex.) a { …. }, p { .. }, div { … } |
선언 | { } 안에 명령을 기술합니다. { 속성 : 속성 값;} 형식으로 선언 Ex.) font-style : italic; font-weight : bold; |
작성 규칙
- style 명령은 { .... } 로 묶여야 함.
- 복수의 빈칸은 구별하지 않음.
- 선택자에 두 개 이상의 선언이 필요한 경우 세미콜론(;)으로 구분함.
복수의 선언에 세미콜론을 생략하면 정의된 모든 속성이 무효가 됨. - 대소문자를 구분하지 않음.
- 같은 style 을 중복해서 지정 했을 때는 나중에 지정한 선택자로 덮어씀.
- 주석은 /* 내용 */ 으로 작성함.
/* 기본 지정 */
<STYLE type="text/css">
P { background: yellow; color: black; }
/* 아래 지정한 값으로 색상이 설정됩니다. */
P { background: blue; color: yellow; }
</STYLE>
/* 불러 쓸 때는 이렇게 ... */
<P>내용</P>
0 댓글