[CSS] 3 - 적용 스타일과 박스 모델

5. 적용 스타일

1) 폰트 변경
font-family : 브라우저 사용자의 시스템에 설치 되어있지 않거나
운영체제에 따라 원하는 결과가 안나올 경우가 있다.
@font-face  : 웹 폰트 사용. 웹 문서 안에 끌꼴 정보도 저장하여, 사용자가 접속하면 
사용자 시스템에 글꼴 다운로드시켜 적용
font-size   : 클자 크기 지정 : px | em | rem | ex | pt 단위로 지정가능
font - weight : 글자 굵기 지정 : normla | bold | border | lighter
 100   200  400 400이 normal
font - style : nomal | italic | oblique 

2) 텍스트 스타일
color : 글자색 지정. 색상명 | rgb(0,256,0) | #00f
text-decoration : 텍스트에 줄 표시 지정. none | underline | overline | line-through

3) 문단 스타일
text-align : 텍스트 정렬 left | right | center | justify..

4) 목록과 링크 스타일
list-style-type : 목록의 불릿과 번호  스타일 지정
none | disc | circle | square 
none | 1 | a | A....
5) 색상과 배경
background-color : 배경색 지정
background-image : 배경이미지, url('이미지파일경로') 로 이미지 지정
background-attachment : 배경이미지 고정. scroll(default) | fixed
* background : 속성값만 나열하여 한번에 적용



* css 크기 단위
px : 화소 단위, 해상도에 따라 상대적인 크기를 가짐
% : 백분율, 기정사이즈를 기반으로 상대적인 비율의 크기를 가짐
em : 배수 단위, 지정 사이즈를 기반으로 배수로 계산된 크기를 가짐.
16px -> 2em (32px)을 말함 : 중첩태그의 경우 바로 상위 태그의 값을 기준으로 
배수가 괴어 주의가 필요함. 
rem : root em 으로, 최상위 요소 사이즈를 기준으로 함. 배수 단위 
16px -> 1rem = 16px, 2rem = 32px, 1.5rem ->24px....

* css 색상표현 단위
1) 색상이름 표기 : https://www.w3schools.com/colors/colors_names.asp
2) 16진수 표기 :#ffffff 같이표기/ #fffff -> #fff 같은값반복이면 생략가능
                   #22FF55 ->#2F5 
# 8A  2B  E2
  빨  녹  파  / 각 두자리가 16진수의 빨녹파 값
3) RGB표기 : rgb(120,43,68)
4) RGBA 표기 : rgba(12,44,67,0.5) RGB+alpha (투명도) 0.0-> 투명
투명도 지정 속석 opacity : CSS제공 속성. 상속함
rgba는 상속안함


6. 박스모델
1) 블록 레벨 : 요소 하나가 혼자 한 줄 다 차지하는 요소. 박스형태
p, h, ul, ol, div, form, table 등
2) 인라인 레벨 : 혼자 한줄 차지하지 않는 요소
img, br, span, input, textarea, button 등
3) display : 화면 배치 방법 결정
none : 화면에 표시 하지 않음
block : 블록 레벨로 지정
inline : 인라인 레벨로 지정. 한 줄로 배치 가능한데, 너비나 높이, 
마진 같은 박스 모델값이 정확히 적용 안될 수 도 있다.
inline-block : 인라인 레벨요소이면서 블록레벨 속성을 갖도록 지정하는 것
4) border : 테두리
border-width, border-color 등 속석이 분리 적용하게 있다.
간단하게는 border : 두께 스타일 색상와 같이 한번에 적용가능.
그 외 border-top/-left/-right/-bottom, border-top-left-radius

5) 여백
margin : 요소의 바깥 여백
값 1개 : 상하좌우, 값 2개 : 상하 좌우, 값 4개 : 상 우 하 좌
padding : 콘텐츠와 테두리 사이 여백, margin과 적용방법 같음