[CSS]자유롭고 창의적인 디자인 기법(CSS) - 3

1. CSS 속성

 1-1. 박스 모델(Box Model)

   - 박스 모델은 CSS의 중요한 개념으로 블록 박스와 인라인 박스가 화면에 표시되는 영역과

     다른 박스와의 배체 등에 대한 내용을 담고 있습니다.

   - 특히 화면에 표시되는 박스의 크기를 결정할 때 width, height, border, margin, padding 등의 속성을

     사용할 수 있는데, 박스의 크기는 다음의 계산식을 통해 결정됩니다.

   - 실제 화면에 차지하는 가로 영역 크기 계산식

     - width + margin + border + padding

   - 실제 화면에 차지하는 세로 영역 크기 계산식

     - height + margin + border + padding

   - width : 콘텐츠의 가로 크기

   - height : 콘텐츠의 세로 크기

   - border : 콘텐츠 테두리

   - margin : 콘텐츠 바깥쪽 여백(border 기준)

   - padding : 콘텐츠 안쪽 여백(border 기준)

  - 표준 모드와 호환 모드에서의 박스 모델

   - XHTML 문서가 웹 브라우저에서 표준 모드로 렌더링 될 경우와 호환 모드로 렌더링될 경우 CSS의 박스 모델은

     다르게 적용됩니다.

   - 특히 인터넷 익스플로러의 경우 호환 모드에서는 padding 속성에 지정된 값을 width에 포함시켜 계산하기

     때문에 의도한 것보다 박스가 작게 출력 될 수도 있습니다.

  - margin 겹침 현상

   - margin collapsing(마진 겹침현상)

    - 두개 이상의 margin값이 세로 방향으로 만났을 때 하나의 margin으로 합쳐지는 현상

 - 플로트(float)

  - 요소의 박스를 이동시키는 것

  - 값 : left | right | none | inherit

  - left : 왼쪽으로 플로트 된 박스를 생성 뒤에 계속되는 내용은 블록박스의 윗변의 오른쪽에서부터 시작

  - right : 오른쪽으로 플로트 된 박스를 생성 뒤에 계속되는 내용은 블록박스의 윗변의 왼쪽에서부터 시작

- 플로트(float) 해체

 - 포지션(position)

  - 요소의 배치방법을 지정 [기본값 static]

  - relative : 요소의 본래 위치에서 상대적으로 배치

  - absolute : 절대배치 [포함블록의 네 변 기준]

  - fixed : 웹 브라우저의 스크린을 기준으로 배치

  - 요소의 위치 : top, right, bottom, left 속성 이용

 

 - 타이모 그라피

 - font-family

  - 글꼴 패밀리를 지정하고자 할 때 사용합니다.

  - 값 : [<글꼴 패밀리명> | <대표 패밀리명>]

 - font-size

  - line-height

 

 - font-weight

 - font-style

  - font-variant

 - font

 - text-indent

 - text-align

 - vertical-align

 - text-decoration

 - text-transform

 - letter-spacing

- white-space

- 색상과 뱌경

- color

 - background-color

 - background-image

 - background-repeat

 - background-position

 - background-attachment

- background

 - 목록

- list-style-type

- list-style-position

- list-style-image

- 그 외 속성

- border-collapse

- overflow

- display

- visibililty

- z-index

- 핵(hack)