7. 반응형 프로젝트의 중요성

반응형 웹 디자인과 미디어 쿼리

반응형 웹 디자인은 다양한 디바이스와 화면 크기에 맞게 웹사이트를 조정하는 기술입니다. 이를 위해 뷰포트 메타 태그와 미디어 쿼리를 활용할 수 있습니다.

뷰포트 설정

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

• width=device-width: 뷰포트의 폭을 기기의 화면 폭에 맞게 설정합니다.
• initial-scale=1.0: 초기 배율을 1로 설정합니다.

뷰포트 설정 추가 옵션

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.5, user-scalable=yes">

• maximum-scale: 줌인의 최대 제한을 설정합니다.
• user-scalable: 사용자가 줌인/줌아웃을 할 수 있는지 여부를 설정합니다.

미디어 쿼리 활용

/* 모바일 버전 */
@media screen and (max-width: 767px) {
    body {
        font-size: 14px;
    }

    /* 추가적인 모바일 스타일 지정 */
}

/* 태블릿 및 데스크탑 버전 */
@media screen and (min-width: 768px) {
    body {
        font-size: 16px;
    }

    /* 추가적인 태블릿/데스크탑 스타일 지정 */
}

• @media: 미디어 쿼리를 시작합니다.
• screen: 화면에 출력되는 미디어 타입을 선택합니다.
• (max-width: 767px): 최대 너비가 767px일 때 해당 스타일을 적용합니다.
• (min-width: 768px): 최소 너비가 768px일 때 해당 스타일을 적용합니다.

미디어 쿼리의 다양한 활용

/* 세로 모드일 때 */
@media screen and (orientation: portrait) {
    /* 세로 모드에 대한 스타일 지정 */
}

/* 가로 모드일 때 */
@media screen and (orientation: landscape) {
    /* 가로 모드에 대한 스타일 지정 */
}

/* 여러 조건을 결합한 예시 */
@media (min-width: 768px) and (max-width: 1024px), (orientation: landscape) {
    /* 768px 이상 1024px 이하의 가로 모드에 대한 스타일 지정 */
}

• orientation: 화면의 방향을 선택합니다.

이미지 및 텍스트 관리

/* 이미지 및 텍스트 관리 예시 */
img {
    max-width: 100%;
    height: auto;
}

/* 텍스트 관리 예시 */
@media screen and (max-width: 767px) {
    .text-container {
        display: block; /* 인라인 블록 해제 */
        max-width: 100%;
        margin: 0 auto; /* 가운데 정렬 */
    }
}

• 이미지의 max-width: 100%는 이미지가 부모 요소의 너비에 맞게 조절됨을 의미합니다.
• 텍스트의 max-width와 margin을 활용하여 모바일에서 웹으로의 자연스러운 전환을 도웁니다.