일반적으로 웹 사이트는 잘 정리된 형태를 가지게 된다.
레이아웃이란 웹사이트를 구성하는 요소들을 배치할 공간을 분할하고 정렬하는 것이다.
공간을 구분할 때는 먼저 행을 구분한 후, 행 내부 요소들을 분리하는 것이 일반적이다.
웹을 처음부터 설계할 때 레이아웃을 정하고 웹을 만들어 나가게 되는데 설계된 레이아웃 형태를 벗어나지 않고 잘 정리될 수 있도록 해주는 것이 position이다.
해당하는 정보가 접근성을 가지면서 올바르게 사용자와 상호작용하게 하기 위해서는 편한 곳에 해당하는 기능이 있어야 한다.
그런 정보나 기능을 원하는 곳에 위치시키기 위해서 필요한 것이 position이다.
모든 태그들은 처음에 position: static;
상태이기 때문에 static이라고 명시할 필요가 없다.
그래서 relative, absolute, fixed만 잘 알고 있어도 무방하다.
태그들은 순서대로 왼쪽, 오른쪽, 위, 아래 순서로 쌓이게 된다.
position: relative;
를 살펴보면 relative는 상대적이라는 의미를 가지고 있다.
이 상대적이라는 것은 기준이 필요한데 그것은 기존 static이었을 때의 위치를 기준으로 움직인다.
여기서 사용되는 것이 top, right, bottom, left로 해당 속성을 사용했을 때 주어진 픽셀만큼 이동하게 된다.
relative는 각각의 방향을 기준으로 태그 안쪽 방향으로 움직이기 때문에
top을 기준으로 설명하자면 양수를 주게 되면 top은 아래로 내려가고 음수를 주게 되면 top은 위로 올라가게 된다.
해당 속성이 의미하는 픽셀만큼 움직이고 싶다면 음수를 적어주면 되겠다.
absolute는 이름처럼 절대적인 위치에 둘 수 있다.
이것 또한 기준이 필요한데 특정 부모를 기준으로 절대적으로 움직인다고 볼 수 있다.
relative가 static인 상태를 기준으로 주어진 픽셀만큼 움직인다면, absolute는 position:static;
속성을 가지고 있지 않은 부모를 기준으로 움직니다.
만약 부모 중에 포지션이 relative, absolute, fixed인 태그가 없다면 가장 위의 태그가 기준이 된다.
fixed는 홈페이지의 메뉴바를 생각하면 간단하게 이해할 수 있다.
스크롤을 내려도 항상 모니터의 메뉴바 위치에 고정되어 항상 위치하게 된다.
line이라는 의미는 줄, 선을 의미한다. 일반적인 선은 얇고 좌우로 길게 늘어뜨려진 것을 선이라고 한다.
이를 생각하면 inline은 매우 명확하다. inline은 상하 값을 갖지 않고 좌우 값만 갖게 되어 길게 늘어뜨린 줄을 상상하면 된다.
display 속성이 inline으로 지정된 엘리먼트는 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치된다.
대표적인 inline 엘리먼트로 span 태그가 있다.
inline 엘리먼트를 사용할 때 주의할 점은 width와 hight 속성을 지정해도 무시된다는 것이다.
왜냐하면 해당 태그가 마크업하고 있는 컨텐츠의 크기 만큼만 공간을 차지하도록 되어 있기 때문이다.
또한 margin과 padding 속성은 좌우 간격만 반영이 되고, 상하 간격은 반영이 되지 않는다.
display 속성인 block은 전후 줄바꿈이 들어가 다른 엘리먼트들을 다룬 줄로 밀어내고 혼자 한 중을 차지한다.
대표적인 block 엘리먼트로 div태그 p태그 등이 있다.
block 엘리먼트는 말 그대로 상자라는 의미로 상하좌우 전부다 해당 width, height이 적용되고 상하좌우의 inline과 다르게
display 속성인 inline-block은 기본적으로 inline 처럼 전후 줄 바꿈 없이 한 줄에 다른 요소들과 나란히 배치된다. 하지만 inline에서는 불가능하던 width와 height 속성을 지정할 수 있고 margin과 padding 속성의 상하 좌우 간격 지정이 가능해진다.
쉽게 말하자면 inline과 block을 합친 하이브리드라고 볼 수 있을 것이다.
이런 속성들은 브라우저의 내장 스타일이 해당 태그에 적용되어서 그렇게 작동한다.
원하는 스타일을 구현하기 위해서 내장 스타일을 덮어씌우고 내 입맛대로 적용하는 경우가 많기 때문에 어떤 느낌인지만 알면 된다.
float은 이름 그대로 떠있다는 의미이다.
float은 정렬 방법 중의 하나이고, 자신만의 특성이 있어서 조심해서 사용해야 한다.
float을 주면 width값이 더이상 100%가 아니다.
앞서 설명했듯이 일반적인 태그들은 위에서 아래로, 왼쪽에서 오른쪽으로 정렬 순서를 가지게 되는데 그중에 float 속성을 가지는 태그가 공중에 뜨게 되는 것이다. 사이에 긴 태그가 공중으로 뜨게 되면 주변의 태그는 빈 자리를 메우려고 한다.
float의 문제점은 부모 태그가 float 속성의 자식 태그를 인식하지 못한다는 것이다. 따라서 높이가 0이 되어버리는 문제가 발생한다.
float 속성의 자식을 인식하게 하려면 부모 태그에 overflow:hidden;
을 주어야 부모 태그가 정상적으로 자식 태그의 높이를 인식한다.