WEB2 CSS - 9. 박스 모델 써먹기

 

 

이렇게 밑줄을 긋기 위해서는 어떻게 하면 될까요?

자, 여기에 밑줄을 긋기 위해서는 테두리를 사용하면 됩니다.
그리고 그 테두리를 누구에게 주면 될까요?
여기있는 저 <h1>이라는 태그에게 테두리를 주면 됩니다.

그러면 저는 태그에 border:1px solid gray;
이렇게 테두리를 줘보겠습니다.

그리고 리로드하면 이렇게 됩니다
그런데 우리가 필요한 것은
저 왼쪽, 오른쪽, 위쪽에 있는 테두리가 아니라
아래쪽 테두리만 필요하거든요
그런 경우에는 border 밑에...
border에다가 아래쪽을 뜻하는 bottom이라고 해주시면 됩니다.
자, 리로드 해보겠습니다
이렇게 되는 것을 볼 수가 있죠.

 

그런데 위치가 좀 애매해요
그렇죠?
이 위쪽은 이렇고, 밑쪽은 이렇게 좁잖아요.

왜 그렇나 봤더니 margin 값 때문이라는 것을 알 수가 있네요
그러면 여기에서 margin값을 없앱시다

그런데 그렇게 했더니
이 테두리와 저 WEB이라는 텍스트가 달라붙어 있네요
그럼 적당히 테두리와 떨어뜨리기 위해서
여기다가 padding값을 줄 수가 있겠죠
예를 들면 20px정도 한번 줘볼까요?
리로드를 해보면 이렇게 됩니다.

 

자, 이렇게 박스모델을 사용하는 겁니다
그럼 이번에는
이것처럼 이쪽에
이렇게 세로로 줄을 긋는 작업도 좀 해봤으면 좋겠는데요

 

저는 저기 있는 태그에
border-right:1px solid gray;
이렇게 하고 리로드를 해보겠습니다.

태그는 화면 전체를 쓰는
block level element 이기 때문에
이 element의 끝에 오른쪽 테두리가 가 있는 겁니다.

그럼 어떻게 하면 되나면,
저기에 있는 저 태그 밑에다가
width값을 지정해서 저 태그의 폭을 지정하는 겁니다.

그러면 이제 여기 가로선 왼쪽에 있는 이 여백
이 여백이 왜 그런지를 보겠습니다

margin값이 있기 때문이라는 걸 알 수가 있습니다
그래서 저는 여기 있는 태그에
margin값을 0으로 주고
리로드를 해보겠습니다.

짜잔
잘 붙었죠?

근데 이렇게 잘 붙였더니
이번엔 또 무슨 문제가 생겨요?
여기 있는 이 리스트들이 너무 지저분하게 붙어있네요
제가 디자이너는 아니지만 이건 너무하잖아요
그래서
여기 있는 태그에
padding 값을 주는 거죠
짜잔!
이렇게 되는 것을 볼 수가 있습니다
그리고 이렇게 한 다음에
여기 있는 테두리 옆에 또 여백이 있네요
왜 그런가를 살펴보니까
태그가
보시는 것처럼 margin값이 있기 때문이네요
그럼 저는 여기에서
이 웹페이지에 있는 태그의
margin값을
0으로 주고 리로드를 해보니까
보시는 것처럼
화면 전체를 꽉 채우는 선이 완성된 것을 볼 수가 있습니다

그럼 여기까지 했으면
이 밑에 있는 정보를 위쪽으로 올리는 작업을 하면
대충 우리의 작업이 끝나겠네요
이 얘기는 다음 시간에 살펴보도록 하겠습니다
어쨌든 지금까지 본 중요한 얘기는 박스모델이라는 것입니다