Codesigner

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

브라우저는 CSS파일이 포함되지 않은 순수 HTML 파일의 요소들을 왼쪽에서부터 오른쪽으로, 위에서부터 아래로 요소가 HTML 파일 상에서 존재하는 순서대로 렌더링 한다. 이를 HTML 요소들의 흐름(flow)라고 한다 HTML 요소들을 스타일 하는 속성에 더해, CSS는 브라우저가 요소들을 위치시키는(positioning) 속성들을 또한 포함한다. 이러한 속성들은 요소가 어디에 위치해야 하는지, 다른 요소들과 같은 줄에 위치할 수 있는지, 그리고 이와 관련된 다른 여러 속성들을 설정할 수 있다 이번 포스팅에서 다음과 같이 HTML 요소를 포지셔닝하는 다섯 가지 속성들에 대해서 알아보도록 하자 position display z-index float clear 각 속성들은 우리가 웹 페이지의 요소들을 위치..