TIL8: CSS 기초 (2)

박스 모델 (Box Model)

박스 모델은 웹의 구조를 보여줍니다. 위 사진과 같이 모든 웹사이트는 구조를 갖고 있는데요. 웹사이트의 박스를 살펴보시려면 맥북 기준으로 cmd+option+i 를 누르시고 아래 "Computed" 섹터를 누르시면 보입니다. 이 기능을 활용해서 HTML에 쓰여져 있는 내용을 구조화 시키고 좀 더 가독성을 높일 수 있습니다. 각 구성요소에 대해 살펴보도록 하겠습니다.

 

margin (여백)

여백 중 바깥 여백. 각각의 값은 top, right, bottom, left로 시계방향입니다. 값을 두개만 넣었을 때는 top, bottom값 // left, right값으로 나뉘어 집니다. 하나만 넣는 경우 모든 네 방향에 적용됩니다.

 

border(경계선)

테두리는 다양하게 표현될 수 있습니다. 두께, 스타일, 색상 등을 정할 수 있습니다. 선을 두껍게 할건지 얇게 할건지, 실선으로 할건지 점선으로 할건지, 검정선으로 할건지 파랑선으로 할건지 등등을 선택할 수 있습니다.

 

이렇게 설정하다보면 안에 있는 글들이 박스 밖으로 빠져 나갈 수도 있을텐데요. 그럼 심미적으로 보기 안좋아질 수 있기 때문에 이를 방지하고 싶으면 속성에 'overflow: auto'를 설정해줍니다.

 

발생할 수 있는 다른 문제에 대해 더 알아보도록 하겠습니다. 이 경우는 박스 크기 측정 기준을 어떤 것을 선택하는지에 따라 박스의 넓이가 달라지는 경우입니다. container의 width는 100px이지만 개발자도구를 통해 폭을 보면 124px로 되어있습니다. 이렇게 나오는 이유는 100 + 10*2 + 2*2 = 124 이기 때문인데요. 박스의 폭은 width 뿐만 아니라 padding과 border도 포함하기 때문입니다. 이에 더해서 padding과 border는 양 방향에 설정되므로 *2를 해주는 것이죠! 하지만 이렇게 일일이 더해줘서 계산해서 전체 폭을 설정하는 것은 까다로울 것입니다. 이를 해결하기 위해 'box-sizing: border-box;' 라는 것이 있습니다. 이 속성을 설정해준다면 margin과 border까지 고려한 크기로 계산이 됩니다.

#container {
  width: 100px;
  padding: 10px;
  background-color: skyblue;
  border: 2px solid plum;
}

#inner {
  width: 100%;
  height: 200px;
  border: 2px solid green;
  background-color: lightgreen;
  padding: 30px;
}

 

이외에

박스에는 줄바꿈이 되는 박스가 있고 옆으로 붙는 박스가 있습니다.

줄바꿈이 되는 박스는 block box라고 하는데, h1이나 p가 이에 대한 대표적인 예시입니다.

줄바꿈이 되지 않는 박스는 inline block이라고 하는데, span이 이에 대한 예시입니다. 줄바꿈이 되지 않기 때문에 width나 height는 적용이 되지 않습니다. 

 

 

 

 

오늘은 계산기 문제를 풀었는데요! 파이썬 때 했던 계산기 문제와는 차원이 다른 문제였습니다. 내가 얼마만큼 노력하는지에 따라 배워갈 수 있는 내용이 천차만별인 문제였습니다. 계산기를 좀 더 멋있게 꾸미기 위해서는 css의 다양한 메서드를 공부해야 하고, 기능적인 측면에서 발전시키려면 Java Script 부분을 더 고민해봐야 했습니다. 덕분에 HTML, CSS, Java Script를 연관지어서 공부할 수 있는 기회가 되었고, 앞으로 어떤 방향으로 마저 더 공부하면 될지 방향성을 잡을 수 있게 해준 문제였던 것 같습니다. 다음주 월요일까지 일정이 너무 정신없어서 오늘은 더 리뷰할 시간이 없겠지만 일정이 어느 정도 마무리 되면 다시 계산기 코드를 분석하면서 더 효율적인, 클린한 코드를 만들어 보도록 하겠습니다.