Study Record

반응형 웹 디자인과 그리드 레이아웃 본문

웹/HTML + CSS

반응형 웹 디자인과 그리드 레이아웃

초코초코초코 2025. 4. 9. 00:22
728x90

 

 

반응형 웹 디자인

웹 사이트의 내용을 그대로 유지하면서 다양한 화면 크기에 맞게 웹 사이트를 표시하는 방법이다. 다양한 화면 크기의 모바일 기기들의 웹 사이트를 표시하면 화면 디스플레이 값이 다양해지고 있는 때에 화면 크기에 반응해 화면 요소들을 자동으로 바꾸어 사이트를 구현하는 것이 바로 반응형 웹 디자인이다.

 

단, 반응형 웹 기술이 최신 웹 표준인 CSS3의 일부 최신 모던 웹 브라우저에서만 지원된다.

 

 

 뷰포트(viewPort)

뷰포트란 실제 내용이 표시되는 영역을 뜻한다. PC 화면과 모바일 화면의 픽셀 표시 방법이 다르기 때문에 모바일 화면에서 의도한대로 표시되지 않는다. 뷰포트를 지정하면 기기 화면에 맞춰 확대/축소해서 내용을 표시한다. 

 

 

뷰포트 지정하기

 

<head> 태그 안에서 <meta> 태그를 이용해 뷰포트를 지정한다.

<meta name="viewport" content="<속성1=값>, <속성2=값>">

 

 

사용할 수 있는 속성값

속성 설명 사용 가능한 값 기본 값
width 뷰포트 너비 device-width 또는 크기 브라우저 기본 값
height 뷰포트 높이 device-height 또는 크기 브라우저 기본 값
user-scalable 확대/축소 가능 여부 yes 또는 no yes
initial-scale 초기 확대/축소 값 1~10 1
minimum-scale 최소 확대/축소 값 0~10 0.25
maximum-scale 최대 확대/축소 값 0~10 1.6

 

 

일반적인 사용법

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

 

 

 그리드 시스템(grid system)

화면을 여러 개의 칼럼(column)으로 나누어, 필요할 때마다 칼럼들을 묶어 배치하는 방법이다. 화면 너비 값에 따라 '960 그리드 시스템', '1200 그리드 시스템' 등으로 나뉜다.

 

칼렘 개수에 따라 '12 칼럼 그리드 스시템', '16 칼럼 그리드 시스템', '24 칼럼 그리드 시스템' 등으로 나뉜다. 주로 960 픽셀 12칼럼의 그리드 시스템을 사용한다.

 

  1. 고정 그리드 : 화면 너비를 일정하게 고정하고 레이아웃을 만든다.
  2. 가변 그리드 : 화면 너비를 % 같은 가변 값으로 지정한다. 

 

가변 그리드 레이아웃을 사용할 경우, 너비 값이 줄어들면 실제 콘텐츠를 확인하기 불편하므로 가능하면 간결한 디자인을 사용하는 것이 좋다.

 

 

 고정 그리드 레이아웃

문서의 맨 바깥 부분을 #wrapper 요소로 묶고 너비를 960px로 지정한다. 헤더와 본문, 사이드바, 퓨터를 배치하고 이때 너비는 px 값으로 지정한다. 화면 너비가 좁아질 경우 내용의 일부가 가려질 수 있다. 스크롤에 따라(화면 너비 값에 따라) 요소들이 가변적으로 변하지 않기 때문에 가려지는 부분이 생긴다.

 

예시)

#wrapper {
    width: 960px;
    margin: 0 auto;
}

header {
    width: 960px;
    height: 120px;
    background-color: cornflowerblue;
}

.content {
    float: left;
    width: 600px;
    padding: 15px;
    height: 400px;
    background-color: burlywood;
}

.right-side {
    float: right;
    width: 300px;
    padding: 15px;
    height: 400px;
    background-color: aquamarine;
}

footer {
    clear: both;
    width: 960px;
    height: 120px;
    background-color: brown;
}
<div id="wrapper">
    <header>고정 그리드</header>
    <section class="content">
        본문
    </section>
    <aside class="right-side">
        오른쪽 사이드
    </aside>
    <footer>
        footer
    </footer>
</div>

 

 

 가변 그리드 레이아웃

전체를 감싸는 요소의 너비를 %로 변환한다. 화면에 꽉 차게 하고 싶다면 100%로 지정하고 여유를 두려면 적당히 지정한다. 전체를 감싸는 요소의 너비를 기준으로 각 요소의 너비를 계산한다.

(요소의 너비 / 콘텐츠 전체를 감싸는 요소의 너비) * 100

 

 

예시)

#wrapper {
    width: 96%;
    margin: 0 auto;
}

header {
    width: 100%;
    height: 120px;
    background-color: cornflowerblue;
}

.content {
    float: left;
    width: 62.5%;
    padding: 1.56%;
    height: 400px;
    background-color: burlywood;
}

.right-side {
    float: right;
    width: 31.25%;
    padding: 1.56%;
    height: 400px;
    background-color: aquamarine;
}

footer {
    clear: both;
    width: 100%;
    height: 120px;
    background-color: brown;
}
<div id="wrapper">
    <header>고정 그리드</header>
    <section class="content">
        본문
    </section>
    <aside class="right-side">
        오른쪽 사이드
    </aside>
    <footer>
        footer
    </footer>
</div>

 

 

가변 그리드 레이아웃에 따른 가변 글꼴 사용하기

화면이 가변적으로 표시될 때 글꼴은 어떻게 사용해야 하는지 알아야 한다. 픽셀크기는 PC 브라우저에서와 모바일에 표시되는 크기가 달라진다. 따라서 픽셀이 아닌 em 단위나 rem 단위를 사용해야한다.

 

 

 가변 그리드 레이아웃에 따른 가변 이미지 사용하기

가변 이미지는 브라우저 창의 너비가 변하더라도 이미지 너비 값은 변하지 않는다. 브라우저 화면 너비를 줄일 경우 이미지 일부가 가려진다. 가변 이미지로 만들면 창의 너비에 따라 이미니 너비도 조절된다. 

 

 

가변 이미지 CSS를 이용하여 표시하기

 

이미지를 감싸고 있는 부모 요소만큼만 커지거나 작아지도록 max-width 속성 값을 100% 지정한다. 이 방법은 고해상도로 지정하면 PC에서나 모바일에서나 같은 파일 크기를 가지기 때문에 추천하는 방법은 아니다.

.content img {
    max-width: 100%;
    height: auto;
}

 

 

<img> 태그와 srcset 속성으로 가변 이미지 표시하기

 

화면 너비 값이나 픽셀 밀도에 따라 고해상도의 이미지 파일을 지정할 수 있다.

// 픽셀 밀도가 2배인 화면(고해상도의 화면)일 경우 pencil-hd.jpg 이미지를 표시한다. 
<img scr="image/pencil.jpg" srcset="image/pencil-hd.jpg 2x">

 

 

<picture> 태그와 <source> 태그로 가변 이미지 표시하기

 

화면 해상도뿐만 아니라 화면 너비에 따라 다른 이미지 파일을 표시한다.

<picture>
    <source srcset="image/ex-large.jpg" media="(mid-width: 1024px)">
    <source srcset="image/ex-medium.jpg" media="(mid-width: 760px)">
    <source srcset="image/ex-small.jpg" media="(mid-width: 320px)">
    <img src="image/ex.jpg" alt="fill with coffee" style="width: 100%;">
</picture>

 

 

가변 그리드 레이아웃에 따른 가변 비디오 사용하기

가변 비디오는 CSS를 사용해 max-width 속성을 100%로 지정한다.

<style>
    video { max-width: 100%; }
</style>

<video autoplay loop src="assets/cars.mp4"> </video>

 

728x90

'웹 > HTML + CSS' 카테고리의 다른 글

CSS 애니메이션  (0) 2025.04.07
CSS3 선택자  (0) 2025.04.04
HTML 멀티미디어  (2) 2025.04.02
CSS 포지셔닝  (0) 2025.02.20
CSS 레이아웃을 위한 스타일  (0) 2025.02.18
'웹/HTML + CSS' Related Articles more