09. 박스 모델 써먹기

 

밑줄을 긋기 위해선 테두리를 사용하면 되며 , 그 테두리는 <h1>WEB</h1> 태그에 주면 된다. 그런데 지금 필요한것은 아래쪽 테두리 이므로 border 대신 border-bottom을 쓰면 된다.

... 생략 ...
<style>
 ... 생략 ...
h1{
   font-size: 45px;
   text-align: center;
   border-bottom: 1px solid gray;
  }
</style>
... 생략 ...

 

그런데 위치가 애매하다. 개발자 도구(F12) 를 열어서 margin 값 때문임을 확인 할 수 있다.

 

margin은 없어졌지만 web이 아래 밑줄이랑 너무 붙어 있다 . padding 값을 지정해주자( 20px정도)

<ol>태그를 사용하여 세로 줄을 그어 주자

 

오른쪽 끝에 세로줄이 생성된 것을 확인 할 수 있다. <ol> 태그는 화면 전체를 쓰는 블록 레벨 엘리먼트 이기 때문에 오른쪽 끝에 생기는 것이다. 이럴땐 width값을 지정해서 <ol>태그의 크기를 지정하면 된다.

 

margin 이 또 생겼으므로 0으로 바꿔주기

padding 지정해서 리스트들 거리 벌려주기

 

최종 모습