CSS Layout에 대하여

HTML의 content들은 좌에서 우, 위에서 아래로 서로 겹침없이 순서대로 배치되는 것이 기본이다. 하지만 layout 을 구성하기 시작하면 필요시 특정 좌표에 고정을 하거나(창 크기가 변하거나 스크롤이 발생해도) layout 변경시 여러 tag들을 묶어서 일괄 변경하는 등의 기능이 필요하다. 이에 관한 속성들을 알아보자.

Position 속성 - relative, absolute, fixed



1. relative
 Position의 default는 "static"으로 tag 순서대로 자동적으로 좌에서 우로, 위에서 아래로 배치된다. 개발자가 직접 위치나 순서를 제어하고 싶은 경우 'relative' 로 설정 후 top, left, bottom, right 값 설정을 통해 위치 조정이 가능하다.

2. absolute
 Position 값 중 'static'을 제외한 값으로 설정된 부모 tag를 기준으로 상대 위치에 배치하고 싶은 경우 사용한다. 만약 조건을 충족하는 부모가 없다면 body를 기준으로 한다.(이 상황은 "fixed"와 같음)
3. fixed
 삽입한 tag가 web client(browser 또는 mobile) resizing 또는 scroll 등의 액션이 발생해도 항상 고정된 위치에 있기를 원할 경우 사용한다.




inline, inline-block, block 에 대해서

tag에 따라 content 내용에 상관없이 차지하는 영역이 다르다. 자신이 위치한 line을 다 차지하거나 또는 자신의 content 크기만큼만 차지할때가 있다. 이와 관련된 속성 "display"와 관련된 내용을 다뤄본다.



1. inline
 해당 tag는 자신의 content 크기만큼의 영역만을 차지한다. 즉 이 다음에 오는 tag는 inline tag 옆에 위치할 수 있다.
 대표적인 tag는 "<span>, <a>"이 있다.
2. inline-block
 inline과 같지만 너비와 높이를 지정할 수 있다는 차이가 있다.
3. block
 해당 tag는 자신이 위치하는 영역의 좌우 전체를 차지한다.
 대표적인 tag는 "<p>,<div>","<form>"이 있다.




float에 대해서

float은 image 주위에 text를 배치하기 위한 기능으로 개발되었으나 layout을 잡는 용도로도 자주 쓰인다.

    inherit : 부모 속성을 상속
    left : 대상 content는 왼쪽으로 배치되며 이후 컨텐츠는 우측에 배치됨
    right : 대상 content는 오른쪽으로 배치되며 이후 컨텐츠는 좌측에 배치됨
    none : 설정 없음



1. float을 이용하여 image와 text 배치




2. float으로 Layout 지정