박스에 대해 알아보자
웹페이지를 보면 테두리들을 자주 볼 수 있다.
우리는 CSS라는 언어를 이용해서 구현할 수 있다.
먼저 웹에 박스를 만들어보겠다.
h1태그와 a태그에 빨간색 박스를 만들었다.
근데 여기서 알아야할 게 있다.
h1태그인 css의 박스는 화면전체를 채우고 있고 a태그인 html의 박스는 자신의 컨텐트만 채우고 있다.
태그를 크게 두가지로 나눌 수 있다. 하나는 화면 전체를 이용하는 block level element,
다른 하나는 자신의 컨텐트만 이용하는 inline element이다.
여기서 h1태그는 block level element, a태그는 inline element에 해당한다.
block과 inline은 태그의 기본적인 속성이고 우리가 바꿔줄 수 있다.
이젠 코드를 효율적으로 짜보자.
지금 h1과a 태그에 같은 효과를 주고 있다. 중복된 효과가 반복되고 있기에 보기 좋지 않다
그래서 두 태그에 같은 효과를 줄 것이다.
','(콤마)를 이용해서 불필요한 반복을 없애줬다.
border이라는 효과도 반복되고 있다. 이것도 없애보겠다.
이렇게 효율적으로 코드를 짤 수 있다.
이외에도 박스모델의 기능은 여려가지가 있다.
박스의 크기를 줄여주는 padding, 박스간 사이 간격을 조절하는 margin, 박스의 크기를 조절하는 width
등등이 있다.
박스모델의 기능은 구글에 css box model을 검색하여 참고하면 된다.
