행복을 담는 블로그

맨날 footer 하단 고정하는 방법 까먹어서 정리하기 위해서 올림!!1. fixed로 하단 고정하기footer { position: fixed; bottom: 0px; width: 100%; height: 5rem;}처음에는 footer는 position:fixed로 하단에 박아버린다고 생각했다.근데 그렇게 했더니, 이렇게 컨텐츠가 있을 경우, footer 안 쪽으로 먹혀버리는 현상이 발생했다.fixed로 박을 경우, 다른 값들과 관계없이, 화면의 길이가 늘어나더라도(=스크롤의 길이가 늘어나는 경우) 가장 하단 부분에 박히는 문제가 발생하였다.   2. absolute 사용하기다음으로는 position : absolute를 사용하였더니, 상대 위치에 따라 중간 지점에 고정되어 버리는 문제가 발생..

CSS로 중앙 배치를 하고 싶을떄, 주로 display : flex;를 이용하는 것을 알 수 있다. CSS 기초에서도 배웠듯이 주로 가운데 정렬을 하기 위해서는 다음과 같이 작성을 하면 된다. display: flex; flex-direction: row; align-items: center; justify-content: center; 이떄 flex-direction 은 크게는 row와 colume으로 나뉜다. 크게는 메인축(main axis)와 교차축(cross axis)가 존재하는데, row와 colume은 두 축이 서로 반대이다. column (세로 정렬) 메인축(main axis) : y축 교차축(cross axis) : x축 row (가로 정렬) 메인축 : x출 교차축 : y축 📌 flex :..