1. TIP: Flexbox의 이해-반응형 웹페이지 만들기
웹 페이지의 레이아웃을 구현할 때는 일반적으로 display, float, position과 같은 CSS의 속성을 활용한다. 그런데 이러한 방식은 구현하기 어렵고 반응형 웹페이지를 만드는 데 한계가 있다. flexbox는 이러한 한계를 극복하기 위해 만들어진 display 방식으로, 해당 속성을 활용하면 뷰포트가 동적으로 변할 때도 유연하게 레이아웃을 구성할 수 있다.
📌참고: float를 사용한 레이아웃
float는 텍스트와 이미지들을 배치하기 위해서 사용된다. 아래 그림은 각각 float: left, float: center, float: right를 나타낸 것이다.
display: flex를 활용하면 위의 레이아웃을 쉽게 짤 수 있을 뿐만 아니라, 반응형으로 웹 페이지를 구성할 수 있다. 이러한 flexbox를 사용하기 위해서는 2가지 중요한 포인트를 이해해야 한다.
📍flexbox에 대해 이해할 점 1
flexbox에는 중심축(main)과 반대축(cross)이 있다. 수평축을 중심으로 설정하면 수직축이 반대축이 되고, 수직축을 중심축으로 설정하면 수평축이 반대축이 된다. 위 그림에서는 flex-direction: row가 설정되어 있기 때문에 중심축이 가로로 놓여 있다. 만약 flex-direction: column으로 설정해주면 중심축이 세로로 놓이게 되고, 반대축은 가로로 놓이게 된다.
📍flexbox에 대해 이해할 점 2
flexbox는 container와 그 안에 포함된 각각의 item들에 적용할 수 있는 속성값들이 존재한다. 즉, 컨테이너에서 '해당 컨테이너 안의 item이 배치되는 방식'을 지정해 줄 수 있고, 각 item이 어떻게 배치될 것인지를 따로 지정할 수 있다. 따라서 container에 적용되는 속성과 item에 적용되는 속성을 따로 외워서 적용해야 한다.
- container에 적용되는 속성 값
| 속성 | 값 | 설명 |
| display | flex | flexbox를 이용하기 위해 가장 먼저 선언 |
| flex-direction | row row-reverse column column-reverse |
기본값. 왼쪽에서 오른쪽으로 아이템 정렬 오른쪽에서 왼쪽으로 아이템 정렬 위에서 아래로 아이템 정렬 아래에서 위로 아이템 정렬 |
| flex-wrap | nowrap wrap wrap-reverse |
기본값. 아무리 가로축(세로축)이 줄어도 여전히 아이템이 같은 줄에 있음 가로축(세로축)이 줄면 오른쪽(아래)의 아이템들은 아래(오른) 줄로 넘어감 가로축(세로축)이 줄면 오른쪽(아래)의 아이템들은 윗(왼) 줄로 넘어감 |
| flex-flow | flex-direction flex-wrap |
flex-direction과 flex-wrap를 동시에 선언 ex: flex-flow: row nowrap |
| justify-content (중심축) |
flex-start flex-end center space-around space-evenly space-between |
기본값. item의 원래 순서는 유지하되, 페이지 왼쪽/위쪽에 붙음 item의 원래 순서는 유지하되, 페이지 오른쪽/아래쪽에 붙음 item의 원래 순서는 유지하되, 위쪽 가운데/왼쪽 가운데에 붙음 item들을 사방으로 둘러싸는 space를 만들어줌 item들을 똑같은 간격으로 띄워줌. 화면과 아이템 사이에도 간격 있음 item들의 사이를 똑같은 간격으로 띄워줌. 화면과는 붙어있음 |
| align-items (수직축) |
center baseline |
container의 수직축을 페이지 가운데로 설정 item들을 수직축 가운데 정렬함 |
| align-content (수직축) |
space-between (나머지 justify-content의 모든 속성들…) |
item들의 사이를 똑같은 간격으로 띄워줌. 화면과는 붙어있음 |
- item에 적용되는 속성 값
| 속성 | 값 | 설명 |
| order | 1, 2, 3… | item의 순서가 order에 맞춰서 이동함 (현업에서는 사용되지 않음) |
| flex-grew | 0 1, 2, 3… |
기본값. 화면이 커져도 item의 크기는 안 변함. 각 item의 값을 지정해주면 해당 비율대로 item들이 커짐 |
| flex-shrink | 0 1, 2, 3… |
기본값. 화면이 작아져도 item의 크기는 안 변함. 여백이 없을 때 각 item의 값을 지정해주면 해당 비율대로 item들이 줄어듬 |
| flex-basis | auto 20%, 30%… |
기본값. grew나 shrink에 맞추어 지정됨 항상 화면의 일정 비율을 차지하도록 item들이 만들어짐 |
| align-self | center (나머지 justify-content의 모든 속성들…) |
아이템 별로 지정 위치 지정 가능 |
2. Debug: CSS 적용 안됨 문제-(sol)브라우저 캐시 삭제
프론트엔드를 개발하면서 가장 난감했던 에러는 변경한 CSS/JS가 적용이 되지 않는 에러였다. 이 에러의 특징은 local에서 개발할 때는 아무런 문제가 되지 않다가, 서버를 구축하여 도메인으로 접근하는 순간 CSS/JS를 아무리 변경해도 변경 사항이 반영되지 않는다는 점이었다.
해결책부터 말하자면, 에러를 고치는 방법은 간단하다! 바로 브라우저의 캐시를 지워주면 된다. 크롬 브라우저를 사용하는 경우 '설정 > 개인정보 및 보안 > 인터넷 사용 기록 삭제'로 들어가, '캐시된 이미지 및 파일' 항목에 체크 표시를 하고 삭제해주면 된다.
그렇다면 이 에러는 왜 발생하는 것일까? 그 이유는 바로 기존에 접근한 적 있던 URL에 다시 접근하는 경우, 브라우저에서 해당 URL에 대한 캐시를 사용하여 페이지를 로딩하기 때문이다. HTML의 경우에는 페이지에 접근할 때마다 매번 새롭게 로딩하지만, CSS/JS 파일의 경우에는 기존에 로딩했던 코드를 캐시에 저장해 두었다가 다시 동일한 URL에 접근할 때 기존에 저장해두었던 코드를 활용한다.
캐시는 웹 페이지의 로딩 시간을 줄이기 위해 만들어진 것이지만, 한창 변경 사항이 생기는 개발 단계에서는 캐시를 지워주어야 한다. 코드의 논리상 오류가 전혀 없는데 CSS/JS 변경 사항이 적용되지 않는 문제가 있다면 브라우저의 캐시를 지우고 다시 로딩하면 된다.