[HTML+CSS+자바스크립트] 7장 효과적인 레이아웃을 위한 CSS 속성 다루기 (~315p)

안녕하세요!

<코딩 자율학습 HTML+CSS+자바스크립트> 멘토를 당담하게 된 박브레드입니다.

오늘은 아홉 번째 날로, CSS 공부 마지막 날입니다!

마지막까지 힘을 내서 공부를 시작해볼까요?

 

오늘 공부할 내용은 다음과 같습니다.

 

🏃 공부할 내용(278~315p)

1. 플렉스 박스 레이아웃으로 1차원 레이아웃 설계하기

2. 그리드 레이아웃으로 2차원 레이아웃 설계하기

3. 반응형 웹을 위한 미디어 쿼리 사용하기

 

 

1. 플렉스 박스 레이아웃으로 1차원 레이아웃 설계하기

---

flex는 다음과 같이, display로 적용할 수 있습니다.

display: flex;

 

flex-direction, flex-wrap, flex-flow

justify-content, align-items, align-content, align-self  등등... 정말 많은 속성들이 있죠?

물론 속성들에 대해서 잘 아는 것도 중요하지만, 머릿속으로 아는 것보단 직접 실습해 보는 게 더 중요하다고 봐요!

 

먼저 책의 속성들에 대해서 살펴보시고, tip에 있는 블로그를 참고하시고 게임도 꼭 해보시는 거 추천드립니다.

 

💡 멘토 TIP

flex에 대해서 알아볼까요? 저는 아래 링크를 통해서 flex를 정복했었는데요.

처음에는 읽어도 무슨 말인지 이해가 안 가실 거예요...😂

그래도 책을 읽어보시면서 실습해 보시고, 블로그 내용도 직접 실습을 해보시면

언젠간 flex에 대해서 익숙해진 자신을 발견할 수 있을 거예요!

이번에야말로 CSS Flex를 익혀보자

 

💡 멘토 TIP

공부를 다 하셨으면 flex를 공부할 수 있는 개구리 게임을 한 번 해보세요!
공부한 것을 복습할 수도 있고, 제대로 알고 있는지 확인해볼 수도 있습니다.

flex 처음에 배우면 정말 어려운데 프론트엔드 개발자 하시려면

어려워도 제대로 짚고 넘어가셔야 돼요 ㅎㅎㅎ

저 또한, 이 게임으로 인해서 flex를 이해하는 데 도움이 많이 되었답니다!

Flexbox Froggy

 

 

2. 그리드 레이아웃으로 2차원 레이아웃 설계하기

---

grid 또한 flex와 같이 많이 쓰이는데요!

grid란 웹 페이지에서 2차원 방식으로 레이아웃을 설계할 수 있도록 고안된 스타일 속성입니다.

어제 잠깐 언급했었던 블로그 링크인데 이번에도 다시 한 번 읽어보시면 좋을 것 같아요.

 

flex와 마찬가지로 grid 또한 직접 실습해보시는 게 좋습니다.

CSS Grid 완벽 가이드

 

그리드 레이아웃의 핵심은 행과 열입니다. HTML에서 표를 만들 떄 행과 열을 생각하면 이해하기 쉽습니다.

 

grid는 다음과 같이, display로 적용할 수 있습니다.

display: grid

grid-template-columns, grid-template-rows, row-gap, column-gap

align-items, align-self, justify-items, justify-self 등 flex와 마찬가지로 속성들이 엄청 많아요!

하나씩 다 책 예제를 따라치시면서 사용해보시는 거 추천드립니다!

 

3. 반응형 웹을 위한 미디어 쿼리 사용하기

---

3.1 미디어 쿼리란 

미디어 쿼리는 사이트에 접속하는 미디어 타입과 특징, 해상도에 따라 다른 스타일 속성을 적용하게 하는 기술입니다.

아래 두 사진을 보시면 같은 사이트임에도 불구하고 컴퓨터로 보는 화면과 모바일로 보는 화면이 다른 것을 볼 수 있죠?

이처럼 반응형으로 코딩하는 것은 매우 중요해요.

 

 

💡 멘토 TIP

개발자 도구에서 모바일 버전으로 보기 위해선

아래 버튼을 누르시면 됩니다!

 

 

3.2 뷰포트 알아보기

뷰포트는 웹 페이지가 접속한 기기에서 보이는 실제 영역의 크기를 의미합니다.

 

3.3 미디어 쿼리의 기본 문법

아래 블로그는 미디어 쿼리 사용법에 대해서 자세히 나와있는데

참고하시면 좋을 것 같아요!

CSS 미디어 쿼리 (Media Query) 사용법

 

 

오늘은 Tip이 정말 많았는데요!

그만큼 개념보다는 실습이 중요하고, 꼭 알아야 되는 부분들이라 많았던 것 같습니다.

오늘로 CSS가 끝났는데 괜찮으셨나요? 내일부터는 자바스크립트에 대해서 배울 거예요!

새로운 부분이라 어려울 수도 있는데 자바스크립트를 배우기 전에 CSS 꼭 정리해두시는 거 추천드립니다. 😁

 

HTML + CSS 를 벌써 끝내셨네요.

축하드립니다. 👏👏👏

 

✅ 정리

1. flex
2. grid
3. media query