홈페이지 박스모델링

    안녕하세요? 저희가 진행 하였던 홈페이지 소개를 하다보면 웹 모델링 용어가 종종 들어가곤 합니다. 일상생활에서 사용되는 용어가 아닌 만큼 용어가 무엇을 의미하는지 궁금하셨던 분들 계셨으리라 생각이 됩니다. 그래서 오늘은 홈페이지용어에 대해 설명하도록 하려고 합니다. 처음으로 소개 해 드릴 용어는 박스모델링 입니다.

   박스모델링이란 div 태그를 이용해 레이아웃을 디자인한 홈페이지를 의미합니다. div 태그를 박스처럼 이용하여 레이아웃 모양을 잡는 형식의 모델링이기 때문에 박스모델링이라는 명칭이 붙게 되었습니다. 알고 보니 참으로 간단하고 1차원 적으로 작명 된 용어이지요?

    그 전까지는 레이아웃이나 테이블을 사용한 모델링을 사용하기도 했는데요. 어째서 최근에는 div를 사용한 박스 모델링만 사용하게 된 것일까요? 여기에는 두 가지 중요한 이유가 있습니다.

    처음으로 모바일웹이 출몰하면서 여러가지 해상도에 대응하는 반응형웹이 유행하게 되었기 때문입니다. 반응형웹은 다음 포스팅에서 보다 자세히 다룰 생각인데요. 간단히 설명을 하자면 각기 다른 해상도에 맞게 최적의 레이아웃으로 변경되는 것을 의미합니다. div 속성을 사용하면 여러가지 레이아웃을 다르게 구사할 수 있기 때문에 사용이 보편화 되었지요.

    다음으로 CSS라 불리는 스타일시트의 사용이 편리하기 때문입니다. 헤더에 스타일시트 링크만 가져다 입력하면, 스타일 시트에서 원격으로 홈페이지 디자인을 바꿀 수 있기 때문에 상당히 편리하죠. 이런 편의성 문제로 현재 박스모델링이 인기를 끌고 있답니다. 오늘은 자주 쓰이는 CSS 속성까지만 정리를 해 드릴게요 ^_^

CSS속성 박스 모델링

- div : 예외태그 / 독립구성이 되지 않는다 / 속성값이없음 / css만 결합 사용가능

        아무 옵션을 주지 않으면 100%, 텍스트 크기 만큼의 높이height값을 가짐

        공간 값을 가질 수 없음,, 공간값을 위ㅣ값으로 대체한다. (이게 예외적

        실제로는 공간을 차지하지 않음

border의 width값이 높아지면 브라우저에 따라 자의적으로 해석하여 

사용되므로 크로스 브라우징을 고려한다면 img로 사용하는 것도 좋다

- margin : 보더를 기준으로 바깥쪽의 여백

투명한 것이 특징이며 세로방향으로 마진이 만났을 경우 겹친 현상을 발생 시키는데 

이것을 [ 마진 겹침 현상 ]이라고 한다.

겹침현상 발생시 두개의 값 중에 무조건 더 큰 값이 적용 된다.

축약형 사용 : margin{상 우 하 좌} <이 순서대로 

-패딩 : 안쪽여백

  - border를 기준으로 안쪽 여백

  - margin과 달리 겹침현상 발생하지 않는다.

  - 페딩의 값은 

- Float

 박스의 위치를 왼쪽 또는 오른쪽으로 이동시키는 기능

 단, 부모요소가 있다면, 부모요소의 내부에서 이동이 가능

- clear : 인접 해있는 float을 해제

- 포지션 

 박스 배치 변경

 포지션 값이 없을 경우 static 값

 relative(자기기준), absoulte(절대기준/떠있는 형태), fixed 값을 지정하여 자유롭게 위치 변경이 가능

  - top, right, bottom, left : 단위값은 px, %

(홈페이지 가운데 정렬 할 때 요즘 이거 써서 정렬함> 가운데 정렬당한 걸 상속받아서 상대배치)

 - relative : 상대 배치 방식

   요소가 본래 있었던 자신의 위치를 기준으로 지정한 오프셋 속성의 값 만큼 떨어져서 배치

   다른 요소들의 배치 위치에 영향이 없다

 - absoulte : 절대 배치 방식

   요소가 포함 된 컨테이닝 블록을 기준으로 지정한다.

   문서의 일반적인 흐름에 따라 배치되지 않고 본문의 다른요소의 위, 아래에 

   배치됨으로 다른 요소들의 배치에 영향을 미침

 - fixed : 앱솔루트와 지정방식은 유사

   fixed로 지정된 div는 스크린을 기준으로 배치

   스크롤바가 나타나더라도 지정 위치를 벗어나지 않음

   단, IE6 에서는 동작하지 않는다

 + z-index : 수치값이 높을 수록 상위에 위치

div에만 존재하는 개념

아무런 값을 지정하지 않으면 div 생성 순서대로 z-index가 배치