Flow of HTML
웹 브라우저는 CSS가 없는 HTML 문서의 요소들을 좌에서 우, 위에서 아래의 순서로 웹상에 배치할 것이다. 이것을 Flow of HTML이라고 한다. CSS를 활용하면 이러한 기본적인 속성을 바꿀 수 있다.
Position
여태까지 구현해왔던 HTML 요소들을 하나같이 동일 선상에 놓이질 않았다. 이는 Block-level element 때문인데, Block-level element는 자신의 부모 엘리먼트의 width만큼의 block을 생성하기 때문에 또 다른 element가 동일 선상에 위치하기가 불가능하다.
이럴 때 position 속성을 활용할 수 있다. Position 속성에는 4가지의 값이 있다.
- static – Default Value (기본값)
- relative
- absolute
- fixed
Position: Relative
Relative 값을 활용하면 HTML 엘리먼트의 위치가 바뀐다. Relative 값을 활용하면 원래 default 한 값인 static 값을 줬을 때 엘리먼트가 있어야 할 곳을 기준으로 엘리먼트를 이동할 수 있다.
원래 default 한 positive 속성의 값인 positive: static; 을 줬을 때의 브라우저상의 엘리먼트 배치이다.
.relative {
position: relative;
top: 50px;
right: 50px;
}position 값을 relative로 바꿨다. 이 상태에서 top, right 속성에 각각 50 pixel을 주면 원래 엘리먼트가 있어야 할 위치(static)를 기준으로 위에서 50 pixel, 오른쪽에서 50 pixel 떨어진 위치에 엘리먼트가 배치된다. 다른 예시로 left: 80px; 속성을 주게 되면 엘리먼트가 오른쪽으로 80 pixel 이동해 배치된다.
Position : Absolute
position : absolute 속성을 통해 엘리먼트의 위치를 수정할 수 있다. 엘리먼트의 position이 absolute로 설정해놓으면 나머지 element는 해당 element를 웹 사이트에 없는 엘리먼트마냥 취급한다. 그로 인해 엘리먼트는 다른 엘리먼트에 대한 위치간섭을 받지 않게 되고, 따라서 absolute로 position된 엘리먼트는 웹 사이트 간 이동이 자유롭다. 배치되는 위치는 상위 엘리먼트(position: static은 제외)의 위치를 기준으로 한다. 만약 position이 static이 아닌 상위 엘리먼트가 없을 경우 가장 상위 엘리먼트인 body태그를 기준으로 위치한다.
Position : Fixed
Fixed 속성은 absolute 속성과 여러모로 비슷하다. Position 속성이 absolute로 된 엘리먼트는 웹 페이지 상에서 스크롤을 하면 엘리먼트가 같이 올라간다. 하지만 fixed 속성을 사용하면 엘리먼트는 해당 위치에 고정되어 스크롤을 올리거나 내려도 그 위치에 머무른다.
Z-Index
앞서 배운 CSS를 활용해 엘리먼트들의 위치를 바꾸고 나면, 각 엘리먼트간의 충돌이 일어날 수 있다. 이럴 때 한 엘리먼트가 다른 엘리먼트를 덮어버리는 현상이 발생하는데 Z-Index를 활용해 이런 문제를 해결할 수 있다. Z-Index는 엘리먼트의 웹페이지 상에서 얼마만큼 ‘앞’과 ‘뒤로’ 이동해야 하는지를 정해줄 수 있다. 값은 정수를 넣어주면 된다.
위 웹 사이트를 보면 Absolute 엘리먼트가 Relative 엘리먼트의 일부를 덮었다. 만일 Relative 엘리먼트가 Absolute 엘리먼트보다 더 위로 배치하고 싶으면 다음과 같은 코드를 입력해준다.
.relative {
position: relative;
top: 50px;
right: 50px;
z-index : 10;
}z-index 속성에 정숫값 10을 넣어주고 브라우저를 새로고침해봤다.
Inline Display
모든 HTML 엘리먼트는 기본적으로 display 속성값이 존재한다. 이 값은 웹 페이지상의 같은 수평 공간을 다른 엘리먼트간 공유를 할 수 있는지에 대한 여부를 결정해준다. 하나의 엘리먼트가 한 줄의 공간을 모두 채울 수 있고, 웹 페이지를 구현하다 보면 다수의 엘리먼트가 한 줄의 공간을 빽빽하게 채울 수도 있다. Display 속성을 사용하여 이런 설정을 해줄 수 있다. Display 속성에서 사용할 수 있는 값으로는 3가지가 있다.
1 .inline
2 .block
3. inline-block
먼저 inline이다. 엘리먼트의 content 영역만 감싸주는 역할을 한다. 안드로이드로 치면 wrap-content 정도가 된다. 필요한 공간만을 차지하므로 엘리먼트들을 수평적으로 나란히 정렬해줄 수 있다.
만약 같은 수평 공간에 배치되는 것을 원하지 않는다면 block 값을 사용해줄 수 있다. 하나의 block 속성을 가진 엘리먼트는 모든 수평 공간을 차지하므로 2개 이상의 엘리먼트가 같은 수평적인 공간에 존재할 수 없다. width와 height를 수정해줄 수 있다.
마지막으로 inline-block 값은 앞서 정리했단 inline 속성과 block 속성의 특성을 모두 합한 것이라고 볼 수 있다. 각 엘리먼트의 좌, 우로 나란히 배치될 수 있으며 width와 height를 사용해 엘리먼트의 크기를 커스터마이징 할 수 있다.
