1. position 속성
position은 레이아웃이나 객체의 위치, 배치를 위해 사용하는 CSS 속성이다. 주로 사용하는 것은 아래의 세가지인데, position 속성은 상속되지 않음에 주의해야 한다.
position: relative;
left, bottom, top, right 값을 지정할 수 있다. 요소가 처음 위치한 곳을 기준으로 이동한다. 예를들어 top: -10px;이라고 하면 현재 위치에서 위로 10px만큼 움직임.
position: absolute;
해당 요소의 레이어를 가장 위로 올림. 부모 요소 중 가장 근접한 relative 요소를 기준으로 이동한다. relative, absolute 설정을 해두고 요소를 움직이는데 마음대로 안될 때 다시 잘 보면 열에 아홉은 다 이 케이스였던 것 같다.
만약 이 기준을 찾지 못한다면 body를 기준으로 움직인다. 그 이유는 가장 최상위 태그가 body이기 때문이다.
👀
사실, 부모요소가 relative가 아니라 absolute여도 자식요소는 부모요소를 기준으로 이동한다. 그러나 relative로 많은 글들이 안내하는 이유는 브라우저의 크기가 변경되었을 때, 부모요소는 그에 맞게 위치를 정하고 그 안의 자식은 부모에 맞게 위치를 정하게 하는 것이 편해서 부모는 relative, 자식은 absolute로 소개한다. 출처
position: fixed;
요소를 화면에 계속 고정시킨다. 즉, 사용자의 스크롤에도 상관없이 계속 정해진 위치에 고정된다. 흔히 볼 수 있는 웹페이지 내 우측 하단에 고정된 페이지 상단으로 이동하기 버튼이나 고객센터 상담 버튼이 position: fixed;의 예시에 해당한다.
position: fixed;를 적용하면 기본적으로 초기값의 위치에 고정되며 이 경우 다른 것들과 맞닿게 된다. 그러나 left, bottom, top, right와 같은 값을 지정하면 레이어가 다른 것보다 위에 놓이게 되며, z-index로 조정할 수 있다.
fixed와 sticky
주로 스크롤시에도 요소의 위치가 변하지 않게 하기 위해서 position: fixed;를 많이 사용했는데, 최근 position: sticky;가 추가되었다. 결과물만 놓고 보면 두 속성은 비슷한듯 하나 다른점이 있는데 이에 대해 이 글에서 정리해보았다.
2. Display 속성
CSS의 display 속성은 요소를 어떤 공간 속성으로 처리할 것인지 결정하고, 요소를 배치할 때 사용할 레이아웃을 설정한다. 이 글에서는 공간 속성에 대해서만 정리해본다.
block
display:block;
- 같은 줄에 하나의 요소만 위치할 수 있는 것
- 아무도 내 옆에 올 수 없삼
- 높이와 너비 설정이 가능함
div,p,header등
inline
display:inline;
- 같은 줄에 여러 요소가 위치할 수 있는 것
- 높이, 너비 설정을 할 수 없다. 그렇기 때문에 때로는 일부 설정만 적용이 된다.
- margin을 좌우로만 가질 수 있다.
span,a,img등
💖 블록 요소를 인라인으로, 인라인 요소를 블록으로 display 속성 변경하는 것도 가능하다.
inline-block
display:inline-block;
inline의 특징인 같은 줄에 여러 요소가 위치하게 하는 것을 가능하게 하면서도, block의 특징인 상/하 margin을 적용할 수도 있다.
🚨 그런데 반응형 디자인을 지원하지 않는다!😱 그래서 별로 권장되지 않는다고 함. 알 수 없는 공백이 요소 사이에 주어지는데다 이 공백이 정해진 형식이 없고 마음대로이며, 맨 앞과 맨 뒤의 공백이 동일하지 않는 등, 단점이 많다.
3. float 레이아웃
이전에 자바스크립트를 공부하면서 새로운 문법의 등장 이전 작성된 코드, 대표적으로 var같은 것을 레거시 코드라고 배웠다. float의 경우에도 레거시 코드까진 아닐지 몰라도 지금은 flexbox와 grid에 밀려 많이 쓰지 않는, 다단 레이아웃을 생성하기 위한 과거의 흔적이라고 한다. 다만 오래된 웹사이트를 유지보수할 일이 생길 수도 있으니 알아둘 필요가 있어 가볍게만 정리하고자 한다.
float의 초기목적
사실 원래 float는 다단 레이아웃을 목적으로 만들어진 것이 아니라 글 문단 내에 이미지를 삽입하였을 경우, 이미지가 들어갈 공간을 만들어주고 이미지를 중심으로 글이 다시 배치되게끔 하는 것을 구현하기 위해 만들어졌다.
뭔 소린가 하면, 한글 프로그램에서 '글씨로 취급하기'를 체크한 이미지 파일을 글 한 가운데에 넣었을 때를 생각하면 된다.
다단레이아웃 구성을 위한 float
이것을 발전시켜 다단레이아웃 구성을 위해 float을 쓰기 시작한 것이 옛날의 방식이다. HTML에서 태그의 순서를 바꾸지 않고, float에 다음과 같은 속성값을 적용하여 만들 수 있다.
float: left;
요소를 왼쪽 방향으로 설정
float: right;
요소를 오른쪽 방향으로 설정
float: none;
기본값. float하지 않음
그외 특징
float속성을 사용한 요소는position:absolute;를 사용할 수 없다.
