Layout?

HTML/CSS에서 레이아웃은 중요하다. 쇼핑몰 웹페이지에서 어느 위치에 상품 사진을 띄워놓느냐에 따라 해당 상품의 판매량이 달라지고, 웹페이지 구성에 따라 이용자를 늘릴 수도 있고 줄일 수도 있기 때문이다. 그런데 문제가 있다. 입문자에게 어렵다. 크롬을 켜면 항상 보이는 모서리가 둥글둥글한 사각형에 돋보기 아이콘과 "Search Google or type a URL"이라는 회색 글씨, 그리고 음성 인식을 위한 마이크 아이콘이 들어가 있는 구글 검색창은 손으로 그리면 길어도 30초면 뚝딱 그려낼 수 있지만, HTML과 CSS로 만들려면 Margin, Padding, Border, img, button, placeholder, value 등등의 여러가지 속성을 사용하고 각 부분들의 position은 어떻게 정할 것인지, 이 block은 inline으로 할 것인지 아닌지 등을 고려하다 보면 입문자들은 외형만 똑같은 검색창을 만들어 내려고만 해도 인고의 시간을 겪어야 한다.

Position: ?

CSS에는 Position이라는 속성이 있다. Position에는 static, relative, absolute, fixed, sticky의 값을 줄 수 있다. 단순히 position: static/relative/absolute/fixed/sticky 만을 입력하는 것으로는 특별한 영향을 주지 않지만, 어떤 position을 쓸지 선언해야만 대상의 위치를 top, right, bottom, left= (random number)px;로 위치를 옮기거나, 아니면 무조건적으로 한 위치에 고정시켜 놓거나 등을 정할 수 있기 때문에 레이아웃을 구성하는 데에 있어서 필수적인 속성이다.

position: static

Position: static은 말 그대로, 대상을 static 상대로 고정시킨다. 예를 들어,

div.static {
	position: static;
    border: 1px solid black;
}

라는 선언을 하면

는 div 전의 대상 다음에 등장한다.

position: relative

Position: relative는 선언만으로는 특별한 수행을 해내지 않지만, relative를 선언해야만 대상을 top/right/bottom/left: ?px;로 이동시킬 수가 있다. 예를 들어,

div.static {
	position: relative;
    border: 1px solid black;
    top: 20px;
    right: 50px;
}

라는 선언을 하면

는 div 전의 대상으로부터 위에서 20px, 오른쪽에서 50px 떨어진 위치에 등장한다.

position: absolute

Position: absolute는 절대적인 위치에 고정시킨다. 예를 들어,

div.relative {
	position: relative;
    width: 1000px;
    height: 1000px;
    border: 1px solid black;
}

div.absolute {
	position: absolute;
    top: 850px;
    right: 200px;
    width: 100px;
    height: 10px;
    border: 1px solid yellow;
}

라는 선언을 하면 relative 클래스를 가진 div 안에 좌측상단 꼭지점이 위에서 850px, 오른쪽에서 200px 떨어진 지점에서 시작하는 100px X 10px 크기의 상자가 항상 그 자리에 위치한다.

position: fixed

Position: fixed는 absolute와 비슷하지만 relative가 필요없다. 예를 들어,

div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 340px;
  border: 1px solid black;
}

라는 선언을 하면 fixed 클래스를 가진 가로 340px 크기의 div는 항상 화면 우측하단에 표시된다.

position: sticky

Position: sticky는 fixed와 relative를 섞어 놓은 느낌이다. 예를 들어,

div.sticky {
	position: sticky
    top: 10px;
    border: 1px solid black;
	}

라는 선언을 하면 해당 sticky 클래스를 가진 div는 처음엔 그 전 대상으로부터 위에서 10px 떨어진 지점에 위치해 있지만 스크롤이 해당 div의 위치보다 밑으로 내려가면 화면의 위로부터 10px 떨어진 지점에 고정되어있다. (호버링 한다는 표현이 더 맞다.)

Display: ?

지금까지 position에 대해 설명을 했는데 이번엔 display라는 속성에 대해 설명하려 한다. display라는 속성은 요소(element)가 block으로 다뤄질 것인지, inline element(인라인 요소)로 다뤄질 것인지를 결정하고 해당 클래스/아이디 밑에 있는 요소들이 어떤 레이아웃을 사용할지를 선언한다. ex) flow layout, grid, flex, etc.

display: inline

display를 inline으로 정한 태그/클래스/아이디는 해당 요소 전에 오는 대상과 후에 오는 대상 사이에 위치한다. border를 적용시키거나 background-color를 적용시킬 수는 있으나, 가로/세로 수치나 위치를 특정할 수는 없으며 단순히 전/후 대상 사이에 마치 글처럼 위치한다.

display: inline-block

inline-block이 inline과 같이 전/후 대상 사이에 요소가 글처럼 위치하게 만들고 border와 background-color 등을 적용시킬 수 있다. 하지만, inline과 달리 가로/세로 수치를 특정할 수 있으며 top/bottom margin/padding을 적용시킬 수 있다.

display: block

block은 inline-block과 기능이 똑같지만 글처럼 위치하지 않고 위아래로 줄바꿈이 적용된다.