css _ box 모델 활용

 

 

웹 페이지를 구성할 때 선을 이용해 공간을 구분하기도 하는데 그때 우리는 box 모델을 활용할 수 있다.

오늘은 그 box모델에 대해 공부하도록 하겠다.

 

box는 사면이 막혀 있으므로 공간을 구성할 때 주로 아래만 라인이 있기를 원한다.

그때는 border-bottom 이라는 코딩을 사용하면 된다 

 

예를 들면

 

h1{ border: 1px solid gray;} 이렇게 하면 사면이 막히니

h1 { border-bottom: 1px solid gray;} 이렇게 하면 된다.

 

문제에 항상 가까이 가기 위해서는 마우스 오늘 쪽을 눌러서 개발자 모드로 들어간다.

그리고 원하는 부분을 클릭해서 원리를 이해하는 것이 가장 중요하다.

 

원하는 그림이 나오지 않을 경우 개발자 모드에서 찾아보면 대부분 마진 값과 패딩 값이 문제임으로 그것을 수정하면 된다.

 

예를 들면) 

h1 { margin:0;

     padding:20px;}

 

세로줄을 그을 때는 <ol> 태그를 이용한다.

 

예를 들면)

ol {border-right:1px solid gray;

   width:100px;

   margin:0;

   padding:20px;}

 

 

끝