display&position&overflow 정리

Display 속성

가장 기본적인 속성 값은 inline, inline-block, block 이다.

 

 

inline

선택자 {
	display : inline
}

 

HTML 요소를 한 줄에 배치되게 만드는 속성이다.

inline 을 지정하면 해당 요소의 높이는, 해당 요소가 가지고 있는 컨텐츠의 높이에 맞춰진다.

즉, 고정으로 height 를 지정한다 하더라도 무시된다.

width, height, margin-top, margin-bottom, float 등의 설정이 듣지 않는다.

높이를 조절하려면 inline-block 을 해준다.

 

 

inline-block

선택자 {
	display : inline-block
}

inline 과 block 의 속성을 둘 다 가지게 하는 값이다.

HTML 요소를 한 줄에 여러개 배치할 수 있지만, 정해진 공간이 넘어가면 줄바꿈하여 배치한다.

 

 

block

선택자 {
	display : block
}

한 줄에 하나 배치된다.

그렇기 때문에, 한 줄에 들어가 있는 요소의 width 값이 작더라도 자동으로 margin 이 채워져서 한 줄을 다 차지하게 된다.

 

 

position 속성

HTML 요소의 postion 속성으로, 브라우저 안에서의 상대위치, 절대위치, 고정위치 등을 지정할 수 있다.

position 속성은 상속되지 않는다. 예를 들기 위해 임의의 div 태그를 만들어서 살펴보자.

 

먼저 상속되지 않는 특성은 확인을 해보면 간단하게 알 수 있다.

아래와 같이 HTML 에 div 요소를 삽입하고, CSS 에서 div_one 클래스에 position : relative 값을 주었을 때,

div_two 의 포지션은 그대로(static) 값을 가지며, 부모 요소의 position 값을 상속받지 않는다.

<div class="div_one">
	<div class="div_two"></div>
</div>

 

 

position : static

div {
	position : static
}

 

position 의 기본 값은  static 이며, 가장 위, 왼쪽으로 배치된다.

HTML 에 div 태그를 하나 만들고 화면을 보면, 화면의 가장 위에 그리고 왼쪽으로 배치된다.

F12 를 눌러 개발자 툴에서 방금 만든 div 를 살펴보면 position 값은 없는 것을 확인할 수 있는데,  기본으로 static 값이 들어가 있는 것이다.

 

또한 static 은 top, left, bottom, right 값을 무시한다.

값이 무시되는 것은 뒤의 relative 에서 확인해보도록 하자.

 

 

position : relative

div {
	position : relative;
}

원래 있어야 할 자리를 기준으로 상대적으로 위치 변경이 일어난다. 

예를 들기 위해서 3개의 div 를 만들고, 아래와 같이 CSS 속성을 정의하였다.

 

div_2 에 top, left 값을 설정해서, 왼쪽에서 200px 만큼 떨어지게 끔 하였는데, 젼혀 변화가 일어나지 않았다.

방금 전에 position : static 값은 top, left, bottom, right 값을 무시한다고 하였는데, 바로 이것이다.

여기서 div_2 의 position 값을 relative 로 바꿔보면 아래와 같이 된다.

즉, position : relative 는 원래 자신이 있어야 할 위치에서 상대적으로 위치 값이 변동된다는 것이다.

div_2 가 원래 있어야 할 위치는 div1 의 바로 아래이다.

div 태그는 block 레벨의 요소이기 때문에 HTML 화면에서 한 줄 전체를 차지한다.

div_2 의 위치를 단순하게 계산하면 div_1 의 높이 200 을 더하여, top 은 200 이 될 것이고, left 0 이 될 것이다. 

그런데 position 의 값을 relative 로 정하게 되면, 자신이 원래 있어야 하는 위치를 기준으로 위치를 변경하기 때문에,

top : 0; left: 200 의 값을 주면, top 은 변동이 없게 되고, left 값만 바뀌게 된다.

 

 

absolute

div {
	position : absolute;
}

해당 아이템이 담겨있는 박스 안에서 위치 변경이 일어난다.

아래의 이미지는 top: 10px, left : 20px 값을 주었을 때의 결과이다.

위치 변동의 기준점이 현재 위치가 아니라, 감싸고 있는 div 의 위치로 이동하였다.

 

 

fixed

div_4{
	position : fixed;
}

 

박스에서벗어나, 브라우저(윈도우)를 기준으로 위치 변경이 일어난다.

이 속성값 역시 top, left, bottom, right 값을 지정하여 위치를 변경한다.

fixed 를 사용하게 되면 block 레벨의 요소는 inline 요소와 같이 크기가 content에 맞게 바뀌게 된다.

때문에 필요에 따라서 고정 width, height 값을 지정해야 할 수도 있다.

아래 이미지는 fixed 를 적용했을 때의 예이다. 

참고로 마우스를 스크롤 했을 때도 div_4 의 위치 값은 변하지 않는다.

먼저 선언한 HTML 요소를 fixed 를 이용하여 위치 값을 지정했을 때, 스크롤을 내리면 나중에 선언된 요소들에게 가려져,

보이지 않게 된다. 이 때는 z-index 를 활용하여 위로 보여지게 할 수 있다.

 

 

 

position : sticky

현재 자신의 위치에 고정된다. 스크롤을 내릴 때 고정되어 있는 장바구니를 생각하면 된다.

주의 할 점은 역시 포지션을 명시적으로 지정해줘야 하는 것이다.

부모 박스 안에서 고정되기 때문에 top, left 와 같은 위치 값을 지정해줘야 한다.

즉, position : sticky 만 쓰면 아무런 변화가 일어나지 않고, top, left, bottom, right 값을 지정해야 한다.

 

 

overflow 속성

visible

- 영역을 벗어난 부분을 표시한다. (기본 값)

 

hidden

- 영역을 벗어난 부분을 잘라서 보이지 않게 한다.

 

scroll

- 영역을 벗어난 부분이 없어도 스크롤을 표시한다. 

 

auto

- 영역을 벗어난 부분이 있을 때만 스크롤을 표시한다.