[HTML+CSS][반응형 웹] 03 - 가변 레이아웃과 가변 요소

[HTML+CSS][반응형 웹] 02 - 가변 그리드 레이아웃

[HTML+CSS][반응형 웹] 01 - 반응형 웹과 뷰포트(viewport)의 개념 [HTML+CSS][CSS3와 애니메이션] 03 - 트랜지션 [HTML+CSS][CSS3와 애니메이션] 02 - 변형과 관련된 속성들 [HTML+CSS][CSS3와 애니메이션] 01 -..

onelight-stay.tistory.com

가변 그리드 레이아웃에 대해 배웠으니

레이아웃이 변경될 때에도 다른 요소들도

자연스럽게 표현 될 수 있게 하는 가변 요소들에 대해서

알아보도록 하자.

가변 글꼴

반응형 웹 디자인을 위해 가변 그리드 레이아웃 사용 시

글자 크기도 유동적으로 바뀌는 것이다.

em 단위

부모 요소에서 지정한 폰트의 대문자 M의 너비를

1em으로 지정한 것으로

1em은 16px이다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>em 단위 사용하기</title>
    <style>
        #wrapper {
            width: 96%;
            margin: 0 auto;
        }
        header { 
            width: 100%;
            height: 120px;
            background-color: skyblue;
            border-bottom: 2px solid black;
        }
        .header-text { /*em단위로 변경*/
            font-size: 2em;
            color: white;
            text-align: center;
            line-height: 120px;
        }
        .content { /*em단위로 변경*/
            float: left;
            width: 62.5%;
            height: 400px;
            padding: 1.5625%;
            background-color: yellow;
            font-size: 1.5em;
            text-align: center;
            line-height: 380px;
        }
        .right-side { /*em단위로 변경*/
            float: right;
            width: 31.25%;
            height: 400px;
            padding: 1.5625%;
            background-color: greenyellow;
            font-size: 1.5em;
            text-align: center;
            line-height: 380px;
        }
        footer { /*em단위로 변경*/
            clear: both;
            width: 100%;
            height: 120px;
            background-color: darkred;
            font-size: 1.5em;
            text-align: center;
            line-height: 120px;
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <header>
            <h1 class="header-text">가변 그리드 레이아웃</h1>
        </header>
        <section class="content">
            <h4>본문</h4>
        </section>
        <aside class="right-side">
            <h4>사이드바</h4>
        </aside>
        <footer>
            <h4>푸터</h4>
        </footer>
    </div>
</body>
</html>

rem 단위

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>em 단위의 단점</title>
    <style>
        #wrapper {font-size: 12px;}
        .header-text {font-size: 2em;}
        .fluid-text {font-size: 1.5em;}
    </style>
</head>
<body>
    <div id="wrapper">
        <header class="header-text"> <!--부모요소 12px 2em=24px-->
            <p> 가변 그리드 레이아웃 </p>
            <p class="fluid-text"> 가변 폰트 </p><!--부모요소 24px 1.5em=36px-->
        </header>
    </div>
</body>
</html>

em 단위는 부모 요소의 글꼴을 기준으로 하기 때문에

중첩된 부모 요소의 글자 크기의 영향을 받아

부모 요소의 크기에 따라 자식 요소의 글자크기가 바뀌면서

em수치가 계속 달라진다는 단점을 가지고 있다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>rem 단위 사용</title>
    <style>
        #wrapper {font-size: 12px;}
        .header-text {font-size: 2rem;}
        .fluid-text {font-size: 1.5rem;}
    </style>
</head>
<body>
    <div id="wrapper">
        <header class="header-text"> <!--루트요소 16px 2em=32px-->
            <p> 가변 그리드 레이아웃 </p>
            <p class="fluid-text"> 가변 폰트 </p><!--루트요소 16px 1.5em=24px-->
        </header>
    </div>
</body>
</html>

이에 rem은 em과면 달리 기본 크기를 지정하기 때문에

중간에 기본값이 바뀌지 않는다.

가변 이미지

이미지는 처음부터 크기가 정해져 있어

브라우저 창의 크기가 변해도 너비 값은 변하지 않기 때문에

디자인의 모습을 해칠 수 있으므로

브라우저의 화면에 따라 유동적으로 이비지가 바뀔 수 있도록

가변 이미지로 설정해 주어야 한다.

CSS 이용하기

이미지가 감싸고 있는 부모 요소만큼만 커지거나 작아질 수 있도록

max-width 속성 값을 100%로 지정해 준다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>가변 이미지 사용하기</title>
    <style>
        #wrapper {
            width: 96%;
            margin: 0 auto;
        }
        header { 
            width: 100%;
            height: 120px;
            background-color: skyblue;
            border-bottom: 2px solid black;
        }
        .header-text { 
            font-size: 2em;
            color: white;
            text-align: center;
            line-height: 120px;
        }
        .content { 
            float: left;
            width: 62.5%;
            height: 400px;
            padding: 1.5625%;
            background-color: yellow;
            font-size: 1.5em;
        }
        .right-side { 
            float: right;
            width: 31.25%;
            height: 400px;
            padding: 1.5625%;
            background-color: greenyellow;
            font-size: 1.5em;
            text-align: center;
            line-height: 380px;
        }
        footer { 
            clear: both;
            width: 100%;
            height: 120px;
            background-color: darkred;
            font-size: 1.5em;
            text-align: center;
            line-height: 120px;
        }
        .content img { /*max-width : 100% 지정*/
            max-width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <header>
            <h1 class="header-text">가변 그리드 레이아웃</h1>
        </header>
        <section class="content">
            <h4>본문</h4>
            <img src="images/fireworks.png">
        </section>
        <aside class="right-side">
            <h4>사이드바</h4>
        </aside>
        <footer>
            <h4>푸터</h4>
        </footer>
    </div>
</body>
</html>

<img> 태그와 srcset 속성

첫번째 방법을 사용해도 되지만

만약 고해상도 이미지를 크기만 줄여 모바일에 표시하면

큰 파일 사이즈로 인해 모바일에서 다운로드하는데 시간이 오래 걸리며,

텍스트가 포함된 이미지일 경우

모바일 화면에 맞게 줄여 표시하면

텍스트 내용을 알아보기 힘들다는 단점이 있기 때문에

<img> 태그에서 srcset 속성을 사용해

화면 너비 값이나 픽셀 밀도에 따라

고 해상도의 이미지 파일을 지정해 사용할 수 있다.

<picture> 태그와 <source> 태그

- 상황별로 다른 이미지표시-

<picture> 태그와 <source> 태그를 함께 사용해

화면 해상도뿐만 아니라 화면 너비에 따라

다른 이미지 파일을 표시할 수 있다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>화면 해상도와 화면 너비에 따라 이미지 지정</title>
</head>
<body>
    <picture>
		<source srcset="images/shop-large.jpg" media="(min-width:1024px)">
		<source srcset="images/shop-medium.jpg" media="(min-width:768px)">
		<source srcset="images/shop-small.jpg" media="(min-width:320px)">
		<img src="images/shop.jpg" alt="fill with coffee" style="width:100%;">
	</picture>
</body>
</html>

가변 비디오

CSS를 사용해 마찬가지로 max-width속성을 100%로 지정해

크기를 조절할 수 있게 한다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>가변비디오</title>
    <style>
        video {
            max-width: 100%;
        }
    </style>
</head>
<body>
    <video src="cars.mp4" controls></video>
</body>
</html>

가변요소가 편리하면서도

사용하기 은근 어려운 것 같다.

자주자주 연습하면서 익숙하게 만들어야겠다.

< 참고 >

Do it! HTML5+CSS3 웹 표준의 정석

※ 해당 글은 습득 목적으로 작성된 글입니다 ※

저작자표시

'개인공부 > HTML5 + CSS3' 카테고리의 다른 글

[HTML+CSS][미디어 쿼리] 02 - 미디어 쿼리 적용하기 (0)	2020.08.06
[HTML+CSS][미디어 쿼리] 01 - 미디어 쿼리 이해하기 (0)	2020.08.05
[HTML+CSS][반응형 웹] 02 - 가변 그리드 레이아웃 (0)	2020.08.03
[HTML+CSS][반응형 웹] 01 - 반응형 웹과 뷰포트(viewport)의 개념 (0)	2020.08.02
[HTML+CSS][CSS3와 애니메이션] 05 - 연습문제 (0)	2020.08.01

IT Information Notebook

[HTML+CSS][반응형 웹] 03 - 가변 레이아웃과 가변 요소

가변 글꼴

em 단위

rem 단위

가변 이미지

CSS 이용하기

<img> 태그와 srcset 속성

<picture> 태그와 <source> 태그

- 상황별로 다른 이미지표시-

가변 비디오

'개인공부 > HTML5 + CSS3' 카테고리의 다른 글

댓글

티스토리툴바

[HTML+CSS][반응형 웹] 03 - 가변 레이아웃과 가변 요소

가변 글꼴

em 단위

rem 단위

가변 이미지

CSS 이용하기

<img> 태그와 srcset 속성

<picture> 태그와 <source> 태그

- 상황별로 다른 이미지표시-

가변 비디오

'개인공부 > HTML5 + CSS3' 카테고리의 다른 글

관련글

댓글

티스토리툴바