CSS #10 (반응형 웹, layout, @media)

웹 페이지의 레이아웃과 콘텐츠가 자동으로 최적화되어,

웹 페이지가 데스크탑, 태블릿, 모바일 등 다양한 기기에서 동일한 품질로 표시

 

 

 

 

모바일 웹 디자인 : 다양한 스마트폰과 태블릿 화면 크기에 맞춰 웹 페이지를 최적화하는 과정을 포함.

• 디스플레이 크기 : 모바일 장치는 화면 크기가 작기 때문에, 모바일 웹 디자인은 화면 공간을 효율적으로 활용해야 함.
• 터치스크린 인터페이스 : 모바일 기기에서 터치스크린을 사용하는 사용자 경험을 고려하여 버튼 크기, 링크 간격 등을 설계함.
• 빠른 로딩 속도 : 모바일 데이터 네트워크를 고려해 페이지 로딩 속도가 빠르고 효율적으로 최적화되어야 함.
• 자동 크기 조정: 반응형 웹 디자인을 적용하여, 화면 크기에 따라 컨텐츠가 자동으로 조정되도록 함.

 

※ viewport(뷰포트) : 웹 페이지를 표시할 때, 브라우저나 기기의 화면에서 실제로 보여지는 영역을 의미

• Viewport는 웹사이트가 사용자 기기에 어떻게 보일지를 결정.
• <meta name="viewport" ...>를 반드시 설정해야 모바일 대응이 가능.
• 반응형 웹에서는 CSS 미디어쿼리와 함께 활용.

 

 

 

 

가변 그리드 레이아웃 (Flexible Grid Layout) : 비율 기반의 레이아웃

- 다양한 화면 크기에 맞게 콘텐츠가 유동적으로 변하도록 함.

 

그리드 시스템 : 고정 크기 대신 비율(%) 을 사용하여 각 요소의 크기를 설정, 
- 요소가 부모 컨테이너의 크기에 비례하여 늘어나거나 줄어듦.

 

.container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 10px;
}

.item {
    background-color: lightblue;
    padding: 10px;
}

grid-template-columns 속성은 3개의 열을 정의.
첫 번째 열과 세 번째 열은 1fr, 두 번째 열은 2fr로 설정하여 두 번째 열이 두 배 더 넓어지도록 설정.

 

※ @media 쿼리

@media screen and (max-width: 768px) {
    .container {
        grid-template-columns: 1fr;
    }
}

@media(미디어 쿼리)를 사용하여 화면 크기가 다를 때 
그리드 열의 개수를 변경하거나, 아이템 크기를 조정할 수 있다.

 

 

 

가변 레이아웃과 가변 요소 (Flexible Layout and Flexible Elements)

- 콘텐츠가 화면 크기에 맞게 유연하게 조정되도록 함.

 

가변 레이아웃 (Flexible Layout) : 픽셀 단위 대신 비율(%), 뷰포트 단위(vw, vh), flex 와 같은 유연한 단위를 사용하여 요소를 배치

• %: 요소의 크기를 부모 요소의 비율로 설정
• vw (viewport width): 화면 너비의 1%에 해당하는 크기
• vh (viewport height): 화면 높이의 1%에 해당하는 크기

 

※ flexbox : 가변적인 레이아웃을 쉽게 구현할 수 있게 해주는 CSS 레이아웃 모델.

- 요소들이 주어진 공간에 맞게 유동적으로 배치

.container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.item {
    flex: 1 1 200px;  /* grow, shrink, basis */
    margin: 10px;
    background-color: lightcoral;
    padding: 10px;
}

flex: 1 1 200px 는 요소가 200px로 시작하고, 
부모 요소의 크기에 따라 유동적으로 크기가 변할 수 있도록 설정.
flex-wrap: wrap 은 자식 요소들이 화면 크기에 맞게 줄바꿈 되도록 함.

 

가변 요소 (Flexible Elements) : 요소를 flexible하게 만들기 위해, flex, min-width, max-width 등의 속성을 사용으로 크기 조정이 가능하게 함.

• min-width: 요소가 최소 크기를 지정
• max-width: 요소가 최대 크기를 지정

.item {
    min-width: 150px;
    max-width: 300px;
    width: 100%;
}

<div> 요소는 최소 150px, 최대 300px의 크기로 반응형으로 크기가 조정

 

 

 

요약

1. 모바일 기기와 웹 디자인: 모바일-first 접근 방식으로 모바일 기기에서도 잘 작동하도록 디자인합니다.
2. 가변 그리드 레이아웃: 비율 기반의 레이아웃을 사용하여 다양한 화면 크기에 적응할 수 있도록 설정합니다. fr 유닛을 사용한 그리드 레이아웃과 미디어 쿼리로 화면 크기에 맞춰 레이아웃을 변화시킬 수 있습니다.
3. 가변 레이아웃과 가변 요소: flexbox 와 같은 기술을 사용하여 요소들이 화면 크기에 맞게 유동적으로 조정되도록 설정합니다.