1. position 속성
position은 요소의 위치를 지정하는 속성
static: 기본값. 문서 흐름에 맞춰서 자동으로 배치absolute:relative,fixed,absolute중 하나의 속성을 가진 가장 가까운 부모 요소 기준 절대적 위치 지정relative: 원래 있던 기본값 위치를 기준으로 상대적 위치 지정fixed: 스크롤과 상관없이 항상top,right,bottom,left중 한 곳에 위치 고정inherit: 부모 요소의 속성값 상속
position 속성값은 이처럼 총 5가지가 있으며, static은 기본값이기에 따로 CSS파일에 작성하거나 자주 쓰이지는 않는다. 5가지 중에서 주로 많이 쓰이는 속성값은 부모 요소와 부모 요소를 기준으로 절대적 위치를 지정할 수 있는 absolute와 relative, 메뉴바나 네비게이션 바처럼 화면에 항상 같은 위치에 고정되어서 쓰여야 하는 요소에 지정하는 fixed 정도이다. 사실 sticky같은 속성값이 더 있긴 하지만 현업에서는 잘 쓰이지 않는 것 같기도 하다. 처음 막 웹 개발에 발을 들였을 때에는 아무것도 모르고 그냥 써보기도 했고, 이런 속성값이 있다고 배우기도 했지만 길고 길었던 인턴 생활 중에도 해당 속성을 써본 적도 없었고 서비스의 기존 코드에도 사용된 걸 보지 못했던 것 같다.
그러니 relative, absolute, fixed에 대해 알아보자.
1-1. relative, absolute, fixed
- 3가지 속성값의 공통점:
top,right,bottom,left값(픽셀 or 백분율) 지정 가능 - 4개의 위치값에 음수를 지정하면
top은 아래로,right은 왼쪽으로,bottom은 위로,left는 오른쪽으로 즉, 반대쪽으로 움직이게 된다.
relative- 기본값인
static상태였을 때의 자신의 위치를 기준으로 상대적 위치를 지정하는 속성값 absolute값을 부여한 자식 요소의 기준이 될 부모 요소에 많이 사용되는 속성값
- 기본값인
absolute- 4개의 위치값을 이용해서 요소에 절대적 위치를 지정할 때 사용하는 속성값
- 자유롭게 위치를 조정하고 싶을 때 많이 사용된다.
fixed- 스크롤의 위치와 상관없이 화면에 요소를 고정할 때 사용하는 속성값
- 상단의 네비게이션 바 또는 좌/우측의 퀵메뉴와 같이 스크롤의 위치와 상관없이 화면에 고정되어 있어야 하는 요소에 부여하는 일이 많다.
2. display 속성
웹 페이지의 레이아웃을 결정하는 중요한 속성 중 하나
HTML요소의 대부분이display속성의 기본값인 블록(block) 또는 인라인(inline)의 값을 가진다.- 블록과 인라인의 속성을 모두 갖고 있는 인라인-블록(inline-block)이라는 값도 많이 사용된다.
2-1. 블록(block)
- 항상 새로운 라인에서 시작한다.
- 해당 라인의 전체 너비를 차지한다.
- 예)
<p>,<div>,<ul>,<ol>,<form>등
2-2. 인라인(inline)
- 새로운 라인에서 시작하지 않는다.
- 해당 요소의 영역만큼만 너비를 차지한다.
- 예)
<span>,<a>,<img>등
2-3. 인라인-블록(inline-block)
해당 요소끼리는 인라인처럼 적용되지만, 요소 내부에서는 블록처럼 적용되는 속성
-
해당 속성값이 지정된 요소들끼리는 인라인처럼 적용되어 한 라인에 여러 요소들이 들어간다. 하지만 너비와 높이,
margin이나padding값을 지정하여 블록 요소처럼 활용이 가능하다.예)
<!DOCTYPE> <html> <head> ... </head> <body> <div class="wrapper"> <div class="box1 inline-block"> 1 </div> <div class="box2 inline-block"> 2 </div> </div> </body> </html>.box1 { width: 100px; height: 50px; } .box2 { width: 200px; height: 50px; } .inline-block { display: inline-block; }
함께 나아가는 개발자💪