Codesigner

브라우저는 HTML 요소들을 화면에 렌더링 할 때 디폴트 포지션 값에 위치시킨다. 이러한 기능은 때로는 우리가 원하지 않거나 예상치 못하는 결과를 낳기도 하는데, 이번 포스팅에서는 CSS가 어떻게 HTML요소를 화면에 위치시키고 보여주는지를 이해하는데 중요한 개념인 박스 모델(Box model)에 대해서 알아보도록 하자 저번 포스팅에서 한 HTML 요소의 background-color 속성의 값을 변화시켜 주면 해당 요소를 감싸는 사각형 형태로 배경색이 지정되었다. 또, text-align 속성으로 텍스트를 정렬하면 정렬이 상대적인 위치에서 이루어졌다. 이것들이 바로 CSS의 박스 모델이 적용되었다는 증거이다. 웹 페이지 상에 모든 HTML 요소들은 박스로 표현되고, 크기, 위치, 속성(색, 배경, 테두..