[CSS] Position 에 대해 알아보자!
·
Frontend/HTML & CSS
static ⇒ 기본값, html 에 정의된 순서대로 자연스럽게 보여지는것! 설정안하면 가장 기본값으로 되어 있음 relative ⇒ 원래 있던 자리(static)를 기준으로 top bottom left right를 조정해서 설정함!! absolute ⇒ 부모 박스를 기준으로 정렬되는것! fixed ⇒ 웹 페이지를 기준으로 정렬되는것 sticky ⇒ 원래의 자리에 위치하나, 스크롤링 되어도 고정되어 있는것!
[CSS] Flexbox 란 무엇인가?
·
Frontend/HTML & CSS
flex 와 grid 가 등장하기 이전, float 을 사용하여 html 내의 요소들을 배치 했다. 하지만 flex 가 등장하며 float 은 더이상 사용되지 않는다! ( 호환성때문에 아직 사용되긴 하지만.. 왠만하면 flex를 사용함 ) 그래서 우리는 flex 가 무엇인지 알아보려고 한다! Flexbox의 구성 Flexbox 는 container 와 item 으로 구성되며, container 와 item 에 각각의 속성을 적용할수 있다! 예제를 통해 각각의 속성을 알아보자! container 의 속성 display display: flex;​ flexbox 임을 명시하는 속성! flex-direction flexbox의 중심축을 정의 /* 수평 정렬 (오르쪽 기준) */ flex-direction : ..