WEB2 CSS- 박스모델

박스모델을 배웠다.

 

박스모델이란?

HTML의 태그들은 (사각형 모양을 의미하는)박스의 형태를 가지고 있는데 이것을 가르켜 박스모델이라고 하고, 박스의 크기와 박스간의 간격을 정의하는 다양한 속성이 있다.

 

 

• margin : border를 기준으로 박스의 여백을 지정, 시각적인 요소는 없음

• border : 박스의 테두리

• padding : 테두리와 content간의 간격

• content : 태그 안에 포함되는 컨텐츠

저 박스모델 개념을 토대로 디자인을 해보려고 하는데 우선 h1으로 감싸진 제목부터 해보려고 한다.

먼저 위의 코드를 설명해보면 다음과 같다. 

• border-bottom:1px solid gray; : 박스의 아래에 1px의 굵기의 회색 단선을 그으라는 뜻이다.

•  margin: 0; : 박스 밖의 여백은 0을 주었다.

• padding: 20px; : 박스와 컨텐츠의 여백은 20px을 주었다.

그 결과 실행 해보면 위와 같이 표현된다.

 

이제 다음으로는 웹사이트의 제목 아래 맨 왼쪽에 있는 목록들을 선으로 그어서 디자인 해보려고 한다.

먼저 코드를 설명 하면 아래와 같다.

 

• border-right:1px solid gray; : 박스의 오른쪽에 1px 굵기의 선을 그으라는 뜻이다.

•  width:100px; : 이것은 선의 넓이를 100px로 하라는 뜻인데 border-right 명령을 내리면 웹 페이지 맨 오른쪽으로 선이 표시 되기에 넓이를 주어 왼쪽으로 옮기려고 한 것이다.

•  margin:0; : 박스 밖 여백을 0으로 주었다.

• padding:20px; : 박스와 컨텐츠의 여백을 20px으로 주었다.

그 결과 다음과 같이 실행 되었다.