Codesigner

저번 포스팅에서는 HTML 요소를 포지셔닝하는 다섯 가지 속성 중 첫 번째인 position에 대해서 알아보았다. 이번 포스팅에서는 나머지 속성들에 대해서 알아보도록 하자 Z-Index 웹 페이지 상의 박스들이 포지셔닝 될 때 서로 오버랩될 수 있다. 이는 해당 박스의 콘텐츠를 읽기 어렵게 만드는 요인으로 작용한다 .box-top { background-color: Aquamarine; } .box-bottom { background-color: DeepSkyBlue; position: absolute; top: 20px; left: 50px; } 위 코드에서 아래쪽 박스는 위쪽 박스를 무시(ignore)하여 이를 오버랩한다. z-index 속성은 웹 페이지 상의 요소들이 얼마나 '뒤로' 가고 '앞으로'..

저번 포스팅에서 박스 모델의 중요한 네 컴포넌트: 차원, 테두리, 패딩, 마진에 대해서 알아보았다. 그런데 이러한 박스 모델의 차원에서 한 가지 문제가 존재한다 Hello World h1 { border: 1px solid black; height: 200px; width: 300px; padding: 10px; } 위 코드는 h1 요소의 박스는 1px의 검은 실선 테두리를 가지게 된다. 이 박스의 height는 200px이고 width는 300px인데, 모든 방향의 패딩이 10px씩 더해졌다 위의 현재 박스 모델에서, 테두리의 굵기와 패딩은 박스의 차원에 영향을 미친다. 10px의 패딩은 height는 220px 만큼 커지게 하고 또한 width를 320px만큼 늘린다. 그리고 1px의 테두리가 또 포..

지금까지 박스 모델의 컴포넌트: 콘텐츠, 테두리, 패딩에 대해서 알아보았다. 이번 포스팅에서는 네 번째 컴포넌트이자 마지막 컴포넌트인 마진(margin)에 대해서 알아보자 Margin I 마진은 박스의 외부의 공간을 말한다. margin 속성으로 이 공간의 크기를 조절할 수 있다 p { border: 1px solid aquamarine; margin: 20px; } 위 코드는 모든 p 요소의 박스 외부에 20px만큼의 공간을 설정한다. 이는 다른 HTML 요소들이 각 p 요소들과 적어도 20px 만큼 떨어져야 한다는 것을 의미한다. 만약 한 방향에 대해서만 외부 공간을 설정해주고 싶다면, 다음과 같은 속성을 사용할 수 있다 margin-top margin-right margin-bottom margin..