9/25 TIL | CSS float, flex, grid 레이아웃 써보기.

이번 주차는 HTML, CSS를 배우는 주간인데, 나는 이미 한번 배웠었던 내용이라 오히려 내가 예전에 배울 때 대충하고 넘어갔었던 flex와 grid를 다시 써보면서 손에 익혀보았다. 그렇게 총 3개의 레이아웃을 뽑아보았는데, 아래와 같다.

flex, float 사용

우선 위 사진의 레이아웃 전체는 flex로 잡아주었고, 박스 안의 글씨 레이아웃만 float를 사용하여 왼쪽 정렬, 오른쪽 정렬을 하였다.

grid, flex 사용

위의 레이아웃은 grid로 잡고, 안에 글씨는 flex로 잡아보았다.

grid, position 사용

위 사진 또한 전부 grid로 레이아웃을 잡고, 메인 글씨(FRANS, HALS, MUSEUM)만 position: absolute로 잡아주었다.

---

무튼 오랜만에 CSS를 다뤄봤는데, 옛날 기분이 새록새록... 근데 아직도 어려운 것들이 꽤 있어서 레이아웃 짜다가도 중간중간 멈칫한다..ㅋㅋㅋ 이렇게 다시 하게 된 김에 이번엔 진짜 끝내고 간다는 생각으로 이번 한 주간 제대로 해봐야겠다는 생각이 들었고..! 돌아오는 6주차 퀘스트 과제 한번 열심히 해보자 퐈이탱~!💪