[HTML/CSS] CSS3 스타일 시트 기초
programming/html-css

[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; }

  <p id="special">

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

  .type1 { color: red; }

  <p class="type1">


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


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


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

  <p style="background-color: yellow;">

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

 - 외부 스타일 시트 파일

  <link type="text/css" rel="stylesheet" href="스타일시트파일">


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

* 주석


<% %> 자바코드 영역

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


<script> </script> 자바스크립트 코드 영역

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


<style> </style> css 코드 영역

/* */


<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