Css란[4]

타이포 그래피란?

활판으로 하는 인쇄술, 편집 디자인 등에서 활자의 서체나 글자 배치 따위를 구성하고 표현하는 일을 타이포그래피라고 한다.

1. Font-Size
   • 단위
   • px - 고정된 Font-size
   • em - 가변적 Font-size
   • rem - 가변적 Font-size
   • Font-Size를 가변적으로 사용하므로 주로 사용한다.
   • 브라우저 설정에 의해 Font-Size가 변한다.
2. Color
   • color : red
   • color : rgb(255, 0, 0)
3. Text-aligin
   • left : 왼쪽 정렬
   • right : 오른쪽 정렬
   • center : 가운데 정렬
   • justify : 좌우 정렬
4. Font
   • font-family (글꼴)
   • font-family : arial, verdana, "Helvetica neue", serif/sans-serif/monospace
   • 글꼴 후보 1
   • 글꼴 후보 2
   • 글꼴 후보 3 (글꼴 이름에 띄어쓰기가 있을 경우 \"\"로 묶는다.)
   • Font 장식 여부 ex) serif : 바탕체 계열, Sans-Serif : 고딕체 계열, Monospace : 가로폭이 동일한 글꼴
   • font-weight : 글자 굵기
   • line-height : 줄사이 간경 (default : 1.2)
5. 상속 (Inherited)
   • CSS의 속성이 상속 이 된다.
   • 하지만 모든 속성이 상송되지 않으니 CSS에서 홈페이지에서 확인하면 된다.

Display 란?

요소를 어떻게 보여줄지를 결정합니다.

1. Box Model
   1. Block VS Inline
   2. Block : Width를 100%로 로 사용
   3. Inline : 안에 들어있는 요소에 따라 사이즈가 달라진다. (Width, Height 가 무시된다.)
   4. Margin, Padding
   5. 
   6. box-sizing
   7. content-box :content 크기만큼 Width, Height 설정
   8. border-box : border 크기 만큼 Width, Height 설정(Border width, heigth 도 포함)
2. Position
   • Static : 현재 위치 고정 (default)
   • Relative : Parent Box 기준 top, bottom 으로 위치 설정
   • Absolute : HTML 기준으로 위치 이동
   • 특징 1 : Parent의 Position이 Relative면 부모 기준으로 위치함 (Parent보다, Parent 중에서 Static이 아닌 부모 기준으로 위치가 정해진다.)
   • 특징 2 : 부모와의 상속이 끊긴다.
   • Fixed : 스크롤에 상관없이 화면에 고정