박스 모델 써먹기

이제 우리가 만든 1.html을 바탕으로 디자인을 해봅시다.

이런식으로 밑줄을 만들고 싶다면 border를 이용하면 됩니다.

그런데 전체 웹페이지에서 보면 WEB이라는 글자의 위치가 너무 애매합니다.

그래서 검사를 눌러 어떤 영역인지 확인을 해봅시다. 확인을 해보니 margin 영역입니다.

margin 영역을 0으로 바꿔줍시다.

그러면 애매한 위의 여백이 사라지게 됩니다.

테두리와 WEB의 거리도 벌리고 싶다면 padding값을 조절해줍시다.

그러면 이렇게 자연스러운 여백과 테두리가 생기게 됩니다.

이렇게 박스모델을 사용을 하는것 입니다.

 

그리고 단락을 구분짓기 위해 세로로 테두리를 그리고 싶으면 아래 사진 처럼 추가하면 됩니다.

그런데 테두리가 너무 오른쪽에 붙어있지 않나요 이유는 ol이 block level element이기 때문입니다.

그럼 어떻게 하면 되냐면 ol 태그 밑에다가 width 값을 지정해서 ol 태그의 폭을 지정을 해주는 겁니다.

줄어든 것을 볼 수가 있습니다.

이번 영상은 뭔가 글로 바꾸기 힘들다..

그리고 웹페이지에 body값에 margin이 애매하게 붙어서

양옆으로 여백이 애매하게 생긴 것을 볼 수가 있다

이것도 선택자로 body를 지정해서 margin을 0으로하면 없앨 수 있다.

내용을 간단하게 정리해보면 박스 모델을 쓸 때 편하게 쓰려면

웹페이지의 오른쪽 버튼을 클릭한 검사를 애용하는 것이 좋을 것 같다

그리고 쓰다보면 어느 부분이 margin이고 padding인지 익숙해질 것 같다.