Position

CSS - [ position 이용 가운데 정렬 ]

1. 수직 가운데 정렬 아래와 같이 container 안에 item 클래스를 가진 div 태그를 만든다. 그리고 css로 크기와 색상을 준다. 그러면 아래와 같이 출력된다. 요소를 수직 가운데 정렬 할 때에는 정렬할 요소의 높이를 지정하고, position absolute값, top bottom 0 값, 그리고 위 아래 margin을 auto 값을 준다. 정렬할 요소에 position 값을 주었으므로, 부모 요소에도 position 값을 설정해주어야 한다.(static 제외) 부모 요소에는 position relative 값을 준다. 이를 정리해보면 -> item의 position이 absolute 이므로 container를 기준으로 위치가 변경되게 된다. top과 bottom에 0을 주었으니 아래 사진..

CSS - [ 속성(position / 요소 쌓임 순서) ]

이번에는 요소를 원하는 위치에 배치할 수 있는 position 속성을 포함해서 여러 가지 속성들을 살펴보자. position : 요소의 위치 지정 기준. relative는 요소 자신을 기준으로, absolute는 위치상 부모 요소를 기준으로, fixed는 뷰포트를 기준으로 한다. 요소를 배치할때는 기준을 잡고 나서 위치 값을 설정해야 한다는 사실을 기억하자! position을 이용해 기준을 잡고 나면, top bottom left right 등 의 속성(값이 아니고 속성!!)을 이용해 위치 값을 설정할 수 있다. absolute, fixed가 지정된 요소는 display 속성이 block으로 변경되고, 가로 너비가 최소한으로 줄어들게 된다. 2번 요소에 자신을 기준으로하는 relative 값을 주고, t..