[Web] CSS(Cascade Style Sheet) - 2

CSS(Cascade Style Sheet) - 2

박스 모델

CSS로 태그들의 부피 위치 등을 지정해주는 것이다.

위의 그림을 보면 쉽게 이해가 될 것이다.

CONTENT를 기점으로 넓이와 높이, 내부공간에 대한 Padding, 아웃라인인 Border

그리고 다른 컨텐츠 사이의 간격인 Margin을 통해 content를 배치한다.

CSS는 이러한 위치, 부피에 박스 모델을 적용한다.

우선 3개의 리스트를 작성했다.

리스트마다 효과를 다르게 주기 위하여 내부에 ID를 부여한다.

CSS에서 아이디는 #ID로 구분할 수 있다.

먼저 2번째 리스트에 border라인과 padding, margin이 적용되었다.

여기서 내부공간과 다른 태그와의 간격이 어떻게 변경되었는지 확인해보자.

구글의 경우 웹페이지에서 우측클릭 -> 검사를 누르면 개발자를 위한 페이지가 나온다.

우측하단에 보면 박스 모델과 동일한 모양이 나오는데, 상단의 소스를 클릭하면

해당 태그의 박스 모델 현황이 나오게된다.

개발자는 이 값을 조정하여 적절한 배치를 조정할수 있다.

기존에는 소스 코딩 후 무한 새로고침으로 확인해야 했던것에 비하면 상당히 편리한 기능이다.

물론 조정된 값은 자신의 소스코드에 바로 적용되지 않으므로 주의해야한다.