February 24, 2022

📆 지난 4주 돌아보기

• SSR을 왜 해야 하는지
• Next.js 로 실제 과제는 안나옴, 경험이 있다 정도로 어필 가능 👏🏻
• Core JS 는 나만의 문장으로 정리해서 달달달 외우는게 좋을듯
• 커리큘럼을 큰 주제로 잡고 블로그 시리즈로 작성해도 좋을듯

🏅 Responsive Web

<aside> 💡 반응형 웹이란, 하나의 웹사이트에서 PC, 스마트폰, 태블릿 PC 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하는 웹 페이지를 의미합니다. 오늘날에는 IT 기기의 종류가 더욱 다양해짐에 따라 디스플레이의 크기에 맞게 유동적으로 반응하는 반응형 웹을 구현하는 것이 더욱 중요해졌습니다.

</aside>

Breakpoint

        데탑 스타일링   |   ipad 스타일링   |   phone 스타일링

                              **`1024px`**             **`768px`** 

• 보통 2개 - 1024 / 768
• 관리 편하게 하려면 1개 - 768

Media Query

@media only screen and (max-width: 480px) {
	body {
		font-size: 12px;
	}
}

• @media : media 쿼리를 시작
• only screen : 어떤 디바이스에서 적용하는지 알려줍니다. 예를 들면 프린트를 하고싶을 때 적용하려면 only print라고 작성하면 됩니다. screen이라고 할 경우 어떤 디바이스에 상관없이, 화면에 보이는 스크린이기만 하면 전부 적용됩니다.
• and (max-width : 480px) : 이건 media feature라고 불리는 부분입니다. 어느 조건에 아래의 css를 적용할지 작성해줘야 합니다.