css는 어떠한 역할을 하는가?
css(cascading style sheets) 는 html으로 작성한 코드를 더 다채롭게 해준다. css를 통해 같은 스타일이 필요한 코드를 한번에 수정,관리할 수 있게 해준다.
css를 사용하면 글씨의 크기, 색상 같은 작은 구성요소 부터 웹 페이지 전체의 바탕 색상이나 레이아웃 구분과 같은 큰 구성까지 세밀하게 관리할 수 있으므로 사용자가 원하는 정보를 더 쉽게 제공하거나 보기 좋게 전달할 수 있다.
위치를 조절해보자.
html로 작성한 정보의 위치(레이아웃)를 조절할 수 있는 방법은 여러가지가 있는데 그 중 position이란 속성을 알아보자.
position
좌표 같은 값을 이용해서 브라우저 기준 혹은 정해진 부모의 기준에 따라 조절할 위치의 값을 정할 수 있다.
아래는 positon의 속성 값이다.
static
position의 기본 값이며, 문서의 흐름에 따라 배치한다. top,left와 같은 어느 위치에 요소를 지정하는 속성을 사용할 수 없다.
relative
자기 자신을 기준으로 위치 값을 적용한다. absolute와 관계가 깊다.
absolute
레이아웃에 공간을 차지하지 않는다. 부모 요소에 따라 상대적으로 위치 값을 가진다. 공간을 차지하지 않고 붕 떠있다고 생각하면 편할 것 같다.
fixed
absolute와 같이 공간을 차지하지 않는다. 뷰포트(브라우저)의 값을 기준으로 삼아 위치 값을 가진다.
아래 예시를 살펴보자.
4개의 div박스에 width가 300px, height가 100px 값을 주고 전부 왼쪽에서 40px 떨어지라는 값을 주었을 때의 모습이다.
1) static 값은 top,left와 같은 값을 사용할 수 없기에 아무런 변화가 없다.
2) relative 값은 자기가 원래 있던 곳에서 왼쪽으로 40px 이동한 모습
3) absolute 값은 fixed에 가려져 보이지 않는다. 부모인 값이 없기 때문에 차상위 부모인 브라우저 기준으로 왼쪽으로 40px 이동한 모습
4) fixed 값은 브라우저 기준으로 움직이기 때문에 왼쪽에서 40px 이동한 모습
이처럼 어떤 값을 기준으로 정하느냐에 따라 위치 값이 달라지게 되는 걸 확인 할 수 있다.
또, 꼭 position이 아닌 다른 기능(flex, float)으로도 웹의 레이아웃을 배치하고 조절할 수 있다. 앞으로 다른 기능을 사용했을 때의 장/단점을 알아보고 필요할 때, 상황에 따라 어떤 기능을 사용하는 게 좋을 지 생각해보는 것도 좋을 것 같다.
