CSS 벼락치기 2 - 텍스트, 색 , 폰트 , 박스

 

* 색 (RGB)

CSS에서 색 표현법은 여러가지가 있지만, 일반적인 방법은 RGB(빨강, 파랑, 초록의 비율)로 나타내는 방법입니다. 

 

color - property (속성)

div{
color: 텍스트 색;
background-color : 배경색
border_color :테두리 색
}

 

 

16진수 표현법 (hex)

#RR GG BB 각 성분 (R,G,B)는 8비트(0부터 255)의 정수이며, 이것을 16진수로 넣어 나타냅니다. ex ) #FF0000 : 빨간색 , #00FF00 : 초록색 , #0000FF 파란색

 

div{color : #2A2BFF;}

 

 

10진수 표현법

rgb(Red,Green,Blue) 마찬가지로 0부터 255의 수를 10진수로 넣어주면 됩니다.

p{color : rgb(121,23,59;)}

 

 

 

색 이름 표현법

색의 이름을 사용하는 방법입니다.

blue, black, lime, gold ...................... 등등

body{color : gold;}

---

* 텍스트

html로 텍스트를 작성하고, CSS로 텍스트의 정렬 형태, 문단의 들여쓰기 및 데코레이션등을 할 수 있습니다.

 

텍스트의 정렬

h1{text-align : right;}

 속성값 : left, right, center, justify

블록요소 안의 인라인요소를 정렬하는 프로퍼티입니다.

 

데코레이션

div{text-decoration : underline;}

속성값 : underline, ocerline, line_through

 

들여쓰기

strong{text-indent : 3em;}

1em : 한글자 들여쓰기, 2em : 두글자 들여쓰기.

 

*em은 배수를 의미한다. ex ) font-size : 3em;    은 현재 폰트의 3배크기 를 나타냅니다.

---

* 폰트

폰트 크기

body{font-size : large}

상대값 : xx-small, x-small, small, medium , large, x-large, xx-large, ( smaller, larger )

절대값 : 10px (픽셀)

 

 문서의 크기 조절시, 글자크기가 고정된 형태로 출력되지 않을 경우가 있기때문에 상대값을 이용하는게 더 바람직하다고 합니다.

폰트 굵기

h3{font-weight : bold;}

100~900사이의 숫자를 입력해도 됩니다. (900이 최대 굵기)

 

---

* 박스 모델 (box model)

css는 html 요소를 4가지의 박스로 인식한다.

콘텐츠(contents) : 텍스트, 이미지.

패딩(padding) : 콘텐츠와 테두리 사이의 공간(여백).

테두리(border) : 패딩 외부의 외곽선 .

여백(margin) : 가장 바깥 부분.