개발일지📝_06

💡 이번 주에는 반응형 웹에 대해서 배우고 반응형 웹의 핵심이라고 할 수 있는 미디어쿼리에 대해서도 알아보았다.

🌼새로 배운 내용

✔ 반응형 웹 : 디바이스에 따라 반응하도록 구현된 웹
-> 웹 페이지 하나로도 사용자의 디바이스에 따라 웹의 레이아웃이 달라지도록 웹을 개발할 수 있음

▪️ 반응형 웹을 위한 뷰포트
viewport meta태그 : name 속성에 viewport가 입력된 meta태그

<meta name="viewport" content="width=device-width, initial-scale=1.0">

👉VS code의 html 파일에서 !를 입력하고 Enter를 치면 자동으로 작성되는 기본 문서 구조에 이미 포함되어 있음. 위의 meta 태그는 문서의 width를 디바이스의 너비대로 하고, 초기 확대 비율은 1.0으로 하겠다는 의미를 가짐.

✔ 미디어 쿼리 : 반응형 웹의 핵심!
-> 미디어 쿼리는 특정한 브라우저 및 디바이스 환경에서만 특정한 CSS 속성을 적용할 수 있도록 해줌

/* 미디어쿼리 기본 형식 */ 
@media media-type and (media-feature-rule) {
  /* CSS rules go here */
}

▪️ 미디어 쿼리는 @media로 시작함. 그 뒤에 미디어 타입media-type과 미디어 특성media-feature-rule을 포함하는 미디어 쿼리 구문이 나옴. 미디어 쿼리 구문이 논리적으로 참인 경우, 중괄호 { }안에 들어있는 스타일 속성이 적용 & 거짓일 경우, 적용되지 않음

/* 스크린 너비가 480px이상 768px이하일 경우 배경색상 설정 */
@media screen and (min-width: 480px) and (max-width: 768px) {
    body {
        background-color: rgb(210, 217, 241);
    }
}

✔ 미디어 타입 : 스마트폰, 태블릿PC, 데스크톱 등 디바이스의 미디어타입은 screen으로 지정함

👀 웹페이지를 인쇄할 때의 배경 및 글자색상을 흑백으로 설정하고자 할때, 미디어 타입 print를 활용할 수 있음

@media print {
    body {
        background-color: beige;
    }
    h1 {
        color: black
    }
}

✔ 분기점 : 웹의 디자인이 달라지는 지점,
breakpoint라고 함

📌 반응형 웹_프로젝트에 적용해보기

/* 데스크톱 */
@media screen and (min-width: 768px) and (max-width: 1200px) {
}

/* 태블릿 PC */

@media screen and (min-width: 480px) and (max-width: 768px) {
    body {
        background-color: rgb(210, 217, 241);
    }
}

/* 스마트폰 */

@media screen and (max-width: 480px) {
    body {
        background-color: rgb(255, 255, 228);
    }
}

👉 진행상황 : 데스크톱과 태블릿 pc, 스마트폰 각각의 미디어쿼리를 만들어서 분기점을 설정하고 배경색상도 설정해보았다. 태블릿 pc에 해당하는 스크린 너비로 갈수록 웹 페이지의 요소들이 깨지는 모습을 볼 수 있는데 이는 앞으로 해결해나갈 예정이다.
이번 주에는 스마트폰의 너비에 해당하는 웹 페이지 구성에 집중하여 미디어쿼리를 작성 및 적용해보았다.

🔽 스마트폰 스크린 너비에서의 이케아 페이지

느낀점

데스크톱에 맞춰서 만든 프로젝트 페이지를 실행하여 개발자도구로 웹 페이지의 너비를 줄여보니 웹 페이지 요소들이 겹치거나 깨지는 것을 볼 수 있었다. 이를 확인했을때 각각의 디바이스 스크린 너비에 맞는 웹 페이지를 어떻게 하나하나 수정해야할지 너무 막막했다. 하지만 기말고사까지 남은 기간동안 차근차근 목표를 정해서 해나가면 된다!라는 긍정적인 마인드를 갖기도 했다. 이번 주 목표는 스마트폰 너비에 해당하는 이케아 사이트 구현해보기였다. 헤더부분과 검색창 위치, 아이콘 위치, 메인이미지부분의 위치 수정하는 것을 시도하여 최대한 본래 이케아 사이트와 비슷하게 구현하고자 하였다. 아직 수정해야할 부분이 많은만큼 틈틈이 시간을 내서 프로젝트를 준비해야겠다.