하와이 가는 여정

flexbox는 크기가 불분명한 요소들에 대해 효율적으로 동작하고, 특별한 계산 없이 쉽게 정렬할 수 있다. flexbox는 아래와 같이 부모 요소인 flex container와 자식 flex item으로 구성되어있다. flexbox를 사용하려면 정렬하고자 하는 요소의 부모 요소인 flex container에 display: flex; 를 추가하면 된다. display: flex; 를 사용하지 않으면 flex를 사용할 수 없다. display: flex; .parent { /* 배치, 정렬하고자 하는 요소를 감싸는 부모 요소 */ display: flex; } .child { /* 배치, 정렬하고자 하는 대상 요소 */ ... } flexbox는 기본적으로 가로 혹은 세로로 정해둔 방향을 기준으로 프로퍼..

position은 이름 그대로 요소를 배치하느 방법을 정하는 프로퍼티로, 네 가지 값을 주로 사용한다. position: static 보통의 요소의 position 값은 static이 기본이다. static에서는 좌표 프로퍼티를 사용할 수 없다. top, right, bottom, left 말이다. position: relative relative는 상대 위치이다. 기본 위치를 기준으로 좌표 프로퍼티를 사용하여 위치를 이동한다. position: static position: relative .static { position: static; background: pink; left: 16px; top: 16px; } .relative { position: relative; background: skybl..