[HTML/CSS] CSS3 스타일 시트 기초

5. CSS3 스타일 시트 기초

5.1 CSS(Cascading Style Sheets) : 웹문서의 스타일, 디자인 요소 지원

　- html에 문서의 구조를 지정하는 태그와 스타일을 지정하는 태그가 섞여 있으면 유지보수하기가 어려움

　- 스타일을 지정하는 부분은 CSS로 분리하는 것이 바람직함

　- 동일한 요소를 가진 웹페이지도 CSS가 달라지면 다른 모습으로 표현될 수 있다.

　- 문서 전체의 일관성을 유지할 수 있고 작업 시간도 단축된다.

5.2 CSS 문법

　- 태그 { 속성: 값 }

　p { background-color: yellow; }

　p 태그의 배경색상을 yellow로 설정함

5.3 선택자(selector) : 스타일을 적용할 요소(태그)

　- 태그를 선택하는 경우 : 태그 { 속성: 값; }

　- id를 선택하는 경우 : #id { 속성: 값; }

　　#special { color: red; }

　- class를 선택하는 경우 : .class { 속성: 값; }

　　.type1 { color: red; }

5.4 id는 중복될 수 없지만 class는 여러 태그에 중복하여 사용 가능함

5.5 CSS를 삽입하는 방법(3가지)

　- inline CSS : 태그 내부에 style 속성으로 지정

　- 내부 스타일 시트(head 태그 내부에 작성)

　- 외부 스타일 시트 파일

5.6 RGB color : 빛의 3원색

　- 16진수로 표현할 경우

　　#RRGGBB : red, green, blue 색상별로 00~FF(0~255)

　　#000000 : black

　　#FF0000 : red

　　#00FF00 : green

　　#0000FF : blue

　　#FFFFFF : white

　- 퍼센트로 표시할 경우 : rgb(60%, 40%, 10%)

　- 0~255 10진수로 표시할 경우 : rgb(153, 102, 25)

5.7 실습예제

　5.7.1 font.jsp

　5.7.2 css.html

* 주석

<% %> 자바코드 영역

// 한줄 주석, /* */ 여러줄 주석

// 한줄 주석, /* */ 여러줄 주석

/* */

<html> </html> html 코드

　5.7.3 css_id.html

　5.7.4 css_class.html

　5.7.5 css_group.html

　5.7.6 css_desc.html

　5.7.7 include/mystyle.css

　5.7.8 extstyle.html

　5.7.9 css_color.html

　5.7.10 gradient1.html

　5.7.11 gradient2.html

　5.7.12 fontsize.html

　5.7.13 fontsize2.html

　5.7.14 text_align.html

　5.7.15 text_trans.html

`note.

margin : 다른 요소와의 여백(바깥쪽 여백)

padding : 내부 여백

　5.7.16 text_shadow.html

　5.7.17 word_wrap.html

저작자표시 비영리 변경금지 (새창열림)

티스토리툴바