1. Position 속성
HTML 태그로 작성한 컨텐츠를 어디에 배치할 것인지는 CSS의 position 속성을 통해 지정해 줄 수 있습니다.
CSS에서 position은 1) Static, 2) Relative, 3) Absolute, 4) Fixed의 4가지 속성을 가질 수 있습니다.
1) position : static
static은 기본값으로서 특별히 설정해 주지 않으면 static이 됩니다. 원래 있어야 되는 자리에 배치되는 것이므로 굳이 static을 지정해 둘 필요는 없습니다.
2) position : relative
CSS에서 선택한 HTML 태그의 현재 위치를 "기준"으로 선언을 하는 것입니다. 이렇게 선언을 하게 되면, 해당 위치가 기준점이 되어서 이후에는 top, bottom, left, right의 속성을 설정함으로서 위치를 바꿔줄 수가 있습니다.
아래 사래 중 before에서 보는 것처럼 div의 위치는 top, left에 각각 여백 없이 그대로 붙어있지만, position:relative로 설정한 뒤 top:50px, left:30px를 설정해 원래 위치를 기준점으로 하여 아래로 50px 이동하고, 오른쪽에서 30px만큼 이동하는 것을 알 수 있습니다.
<Before : position relative 설정 이전>
<After : position relative 설정 이후 위에서 50px, 왼쪽에서 30px 이동한 모습>
3) position : absolute
부모 div를 relative로 기준을 잡아준 뒤, 자식 div를 위치를 absolute를 통해서 정해 줄 수 있습니다.
아래 사례에서는 자식 div에서 왼쪽에서 50픽셀, 위쪽에서 30픽셀 이동한 것을 알 수 있습니다.
만약 relative로 잡아준 기준점이 없다 상태에서 absolute를 사용하게 되면 문서 본문(document body)를 기준점으로 하여 각각 지정된 값만큼 이동하여 위치하게 됩니다.
4) position : fixed
어떤 요소를 웹페이지 뷰포트에 고정하려고 할 경우에는 fixed를 사용합니다. 이 경우, 스크롤로 위아래로 움직이더라도 해당요소는 웹페이지 상 특정 위치에 고정되어 움직이지 않습니다. 쇼핑몰 등에서 중요한 이벤트나 안내사항 보여줄 때 잘 사용하는 방법입니다.
2. Display 속성
HTML 태그는 블록요소(block element) 혹은 인라인요소(inline element)의 특성을 가집니다.
블록요소는 1) 항상 새로운 라인에서 시작하며, 2) 화면 크기 전체의 가로폭을 차지하며, 3) 높이, 너비, 마진 등프로퍼티 지정이 가능합니다. 대표적인 태그로는 div, h, p, ol, ul, li 등이 있습니다.
반면, 인라인요소는 1) 줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치하며, 2) content의 너비만큼 가로폭을 차지하며, 3) width, height, margin-top, margin-bottom 프로퍼티를 지정할 수 없습니다. 대표적인 태그로는 span, a, strong, img 등이 있습니다.
CSS에서는 이런 HTML 태그의 고유한 특징들을 Display란 속성을 통해서 제어할 수 있습니다. 각각의 케이스별로 어떻게 사용하며, 어떤 경우에 활용될 수 있는지 정리해 봅니다.
1) display : inline
원래 블록요소의 특징을 갖는 태그를 인라인요소로 변경해 줄 수 있습니다. div 태그는 블록요소이지만, 아래 사례에서처럼 CSS에서 display 속성을 inline으로 변경하여, 한 줄에 나란히 div 세 개를 배치할 수 있습니다.
2) display : block
원래 inline 요소의 특징을 갖는 태그를 block 속성으로 변경해 줄 수 있습니다. span 태그는 인라인요소이지만, 아래 사례에서처럼 CSS에서 display 속성을 block으로 변경하여, span 태그 각각이 한 줄을 차지하도록 변경할 수 있습니다.
3) display : inline-block
inline-block은 block과 inline 각각의 속성을 가집니다. 한 줄에 여러 요소를 배치할 수 있다는 면에서 inline의 특징을, 대신 width, height, margin 프로퍼티를 지정할 수 있다면 면에서 block의 요소를 가집니다.
아래 사례에서 보는 것처럼, span 태그를 inline-block으로 설정을 해 주면 1) 한 줄에 span 태그가 나란히 배치되면서도, 2) 높이나 너비를 지정할 수 있음을 알 수 있습니다.
이처럼 html 태그를 CSS에서 display 속성을 통해 변경하고자 할 때는 inline, block, inline-block이 가지는 각각의 특성을 고려하여 사용하면 됩니다.
3. Float 속성
Float는 띄우다라는 원래 의미답게, 이미지를 띄어서 텍스트와 함께 사용하기 위해 만들어 진 속성입니다.
아래 사례와 같이 이미지에 대해 float:left; (왼쪽으로 띄어서 넣어라)를 부여함으로서 이미지와 텍스트가 조화롭게 배치되게 됩니다. 만약에 float:left;가 없었다면, 이미지가 보여지고 난 뒤 맨 아래 줄부터 텍스트가 배치되게 되어 화면이 이쁘게 보이지 않습니다.
Float는 속성값으로 4가지를 가질 수 있습니다. 1) left (왼쪽으로 띄우기), 2) right(오른쪽으로 띄우기), 3) inherit (부모요소로부터 상속받기), 4) none (요소를 띄우지 않음)
Float는 이미지와 텍스트를 배치하는데도 사용하지만, 화면 레이아웃을 잡는 데도 자주 사용합니다. 아래 화면과 같이 왼쪽에 메뉴영역을 두고, 오른쪽에 컨텐츠 영역을 둔다고 할 때, 왼쪽 메뉴영역에 float:left;를 부여하여 자리를 잡게 한 뒤에, 나머지 컨텐츠 영역들을 중복되지 않게 배치할 수 있습니다. float를 하게 되면 해당요소는 display:inline-block으로 취급되어 다른 영역과 한 줄에 같이 배치될 수 있으면서도 너비와 높이를 가질 수 있게 됩니다.
만약 float된 요소의 흐름을 끊고, 제거하려면 이후 태그에서 clear 속성을 이용하여 아래와 같이 제거해 줄 수 있습니다. 그렇게 되면, 띄어졌던 left-menu의 float 속성은 사라져 content, comment div태그는 다음 줄부터 나오게 됩니다.
