CSS - 5. box를 이제 적용해보자

https://opentutorials.org/course/3086/18319

*생활코딩의 예제를 보고 공부하였습니다.

출처 : 생활코딩

앞서 살폈던 것처럼 우리가 만들고자 하는 형태는 바로 이러하다. 다시 예전에 만들어 두었던 2.html 파일로 돌아와 보자.

1. 제목 밑에 테두리를 줘보자.

이전 시간에 배웠던 border를 바탕으로 style에 1픽셀짜리 회색 직선을 그어보자.

 

   h1{

      font-size:60px;

      text-align:center;

      border:1px solid gray;  <- 이 부분이 추가됨

    }

하지만 우리가 필요한 것은 아래 테두리이니 border에 아래쪽을 나타내는 bottom을 추가하여 아래쪽 테두리만 남겨보자

흠.. 하지만 제목 위에 저 공백은 어디서 나온 걸까? 

2. 검사도구를 이용해 보자

2.html 파일이 켜진 창에서 오른쪽 클릭> 검사창을 통해 도대체 무엇이 h1 위쪽에 공백을 차지하고 있는지 확인해보자.

자 저기 살구색이 바로 문제의 공백이다. 오른쪽 아래의 스타일 시트를 보니 살구색은 마진의 값이라고 한다. margin값을 0으로 고쳐주자

      margin:0;

선과 웹이 짝 달라붙었다. 

3. 너무 달라붙었는걸? - padding

하지만 이번엔 제목과 테두리 사이가 너무 가까운 것 같다. padding 값을 줘서 여유를 줘보자!

      padding:20px;

흠 괜찮군.

4. 이제 목차 오른쪽에 선을 그어보자 - border-right

우리가 원하는 그림이 나오려면 목차가 왼편에 내용이 오른편에 있어야 한다. 그럼 일단 해야 하는 것은 목차 오른편에 선을 긋는 것! 우리의 목차는 <ol> 태그로 묶여 있으니 <style> 태그 안에 ol 태그의 박스 오른쪽에 줄 긋기를 해보자

    ol{

      border-right:1px solid gray;      

       }

자 줄이 생겼다! 그런데... 예쁘진 않다. 오른쪽 끝에 생기다니!

5. 목차 쪽으로 선을 쫌 당겨와 보자 - width

목차의 상자값을 당기기 위해 상자 가로 크기 width 값을 100px정도로 줄여보자

      width:100px; 

확실히 이쁘게 당겨졌다. 하지만 또다시 위아래에 여백이 생겼다.

6. 목차에 생긴 여백을 없애 보자 - 검사해보니 역시나 margin값...

검사도구로 가서 ol 태그에 마우스를 가져다 대면 역시나 살구빛 마진 값이 원치 않은 공간을 채우고 있는 것이 보인다. 마진 값을 0으로 바꿔보자 

margin:0;

역시나 잘 붙었다. 

7. 이런 또 너무 붙었잖아 - padding

으으 너무 붙어서 보기 싫다 padding 값으로 20을 줘서 여백을 만들어보자.

음 이제야 좀 적당해졌다. 이제 어느 정도 선정리는 끝난 것 같다. 이제 남은 작업은 아래에 내려와 있는 내용들을 목차 옆으로 옮기는 것이다. 그것은 역시... 다음 시간에 계속하는 것이 좋겠다.