반응형 웹 개발의 대세는 '페이지 만들기'에서 '컴포넌트 만들기'로 이동했다고 봐도 무방하다. 

 

웹 개발(또는 프로그래밍)에 있어 컴포넌트(Component)란 독립적이고 재사용이 가능한 모듈을 뜻한다.

컴포넌트 기반으로 웹을 제작하면 마치 블록 장난감을 조립하듯 각각의 컴포넌트 간 조합을 이용해 화면을 구성할 수 있다.

 

모듈화된 디자인은 작업 효율에 많은 도움이 된다. 여러 개의 페이지는 각각의 다양한 레이아웃을 가지지만, 페이지를 구성하는 컴포넌트의 형태는 비슷한 경우가 많기 때문에 컴포넌트에 초점을 맞추어 웹을 만들면 일이 줄게 된다.

 

모듈화란 ?

 

개별 컴포넌트를 하나의 조립 부품(모듈)으로 보고 작업하는 것

 

 

모듈화가 주는 이점

  • 반응형 컴포넌트를 만들고, 그것들을 조립해 하나의 페이지를 만들면 페이지는 자연스럽게 반응형 페이지가 된다.
  • 스타일 재사용이 용이하다. 필요한 경우 추가 스타일을 적용하면 된다.
  • 페이지의 일관성을 유지하기가 용이하다.

 

* reset.css

https://meyerweb.com/eric/tools/css/reset/

 

CSS Tools: Reset CSS

CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're inter

meyerweb.com

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

 

'Front-End > 반응형 웹' 카테고리의 다른 글

반응형 웹(7) - 가변 이미지  (1) 2024.07.18
반응형 웹(6) - 미디어 쿼리  (0) 2024.07.17
반응형 웹(5) - calc()  (0) 2024.07.15
반응형 웹(4) - 가변형 레이아웃  (2) 2024.07.14
반응형 웹(3) - 다양한 상대 단위  (0) 2024.07.13

이미지 요소에도 상대 단위 em, vw, % 등을 얼마든지 사용할 수 있다. 이때 주의할 점은 브라우저가 대개 이미지의 비율을 유지한다는 점, 그리고 이미지가 무작정 커지는 것을 경계해야 한다는 점입니다.

 

 

max-width

CSS의 max-width 속성은 너비의 최대값을 지정하여 요소의 너비가 크 이상 커지지 않게 한다.

img{
	max-width: 200px;
}


/* 부모 요소의 크기에 따라 변하지만 부모 요소의 크기보다는 커질 수 없다. */
img{
	max-width: 100%;
}

 

 

 

picture

HTML의 picture 요소를 이용하면 뷰포트의 너비 등 브라우저의 특정 조건에 따라 이미지를 반응형으로 불러 올 수 있다.

<picture>
	<source scrset="desktop.png" media="(min-width: 1200px)">
    <source scrset="tablet.png" media="(min-width: 800px)">
    <img scr="mobile.png">
</picture>

 

 

정리 

'Front-End > 반응형 웹' 카테고리의 다른 글

반응형 웹(9) - 모듈화 디자인  (0) 2024.07.19
반응형 웹(6) - 미디어 쿼리  (0) 2024.07.17
반응형 웹(5) - calc()  (0) 2024.07.15
반응형 웹(4) - 가변형 레이아웃  (2) 2024.07.14
반응형 웹(3) - 다양한 상대 단위  (0) 2024.07.13

미디어 쿼리(media query)는 미디어 타입을 인식하고, 콘텐츠를 읽어들이는 기기나 브라우저의 물리적 속성을 감지할 수 있는 유용한 장치(기능)입니다. 모든 미디어 쿼리는 다음 두 가지 구성 요소를 지니고 있다

  • 미디어 타입
  • 조건에 대한 물음(쿼리)
@media 미디어_타입 and (조건에_대한_물음) {
	/*
    	미디어 타입과 조건을
        모두 만족할 때 덮어씌울
        스타일 선언문
    */
}

 

구체적인 사용 예시

@media screen and (max-width: 768px){ // 768px 이하
	/*
    	화면(screen)의 너비가 768px 이하일 경우에
        여기에 정의된 스타일 선언문을 추가 적용할 것이다.
   	*/
}


@media screen and (min-width: 800px) { // 800px 이상
	/*
	화면(screen)의 너비스 800px 이상일 경우에
	여기에 적용된 스타일 선언문을 추가 적용할 것이다.
	*/
}

 

 

미디어 쿼리에 입력할 수 있는 미디어 타입과 쿼리의 종류는 무척 다양하다.

미디어 쿼리의 종류

 

다음과 같은 방식으로도 미디어 쿼리를 적용할 수 있다.

미디어 쿼리 적용

 

 

정리 

 

'Front-End > 반응형 웹' 카테고리의 다른 글

반응형 웹(9) - 모듈화 디자인  (0) 2024.07.19
반응형 웹(7) - 가변 이미지  (1) 2024.07.18
반응형 웹(5) - calc()  (0) 2024.07.15
반응형 웹(4) - 가변형 레이아웃  (2) 2024.07.14
반응형 웹(3) - 다양한 상대 단위  (0) 2024.07.13

CSS의 속성값을 기정할 때도 함수 개념을 적용할 수 있다. CSS의 함수는 괄화 안에 인수를 전달하면, 인수에 따른 결과값을 속성에 적용하는 방식으로 작동한다.

 

CSS 함수의 대표선수 calc()

CSS 함수의 calc()를 이용하면 계산식의 결과를 속성값으로 지정할 수 있다. calc() 함수는 괄호 안에 표현식 하나를 받고, 표현식의 결과가 최종 값이 된다. 표현식은 단순 계산이면 무엇이든 가능하다.

 

예를 들어,  width: calc(30px - 20px) 이런 식이다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>calc 함수</title>
    <style>
        .message{
            display: flex;
            justify-content: space-around; /*좌우로 여백을 두고 펼처진다*/
            align-items: center;
            height: 100px;
            padding: 0.5em;
            border: 1px solid #000;
            font-size: 1.5em;
        }
        .message_text{
            width: 80%;
            height: 100%;
            border: none;
            resize: none;
        }
        .message_text:focus{outline:none;}
        .message_send{
            width: 20%;
            height: 100%;
            border-radius: 8px;
            background-color: #9ec4cf;
        }

    </style>
</head>
<body>
    <div class="mass">
        <textarea class="message_text" name="" id="" cols="30" rows="10"></textarea>
        <button class="message_send">전송</button>
    </div>
</body>
</html>

 

위 코드를 브라우저에서 확인해보면 브라우저의 크기가 커질수록 전송 버튼의 크기가 늘어나게 된다.

 

 

전송 버튼의 크기를 고정해보자.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>calc 함수</title>
    <style>
        .message{
            display: flex;
            justify-content: space-around; /*좌우로 여백을 두고 펼처진다*/
            align-items: center;
            height: 100px;
            padding: 0.5em;
            border: 1px solid #000;
            font-size: 1.5em;
        }
        .message_text{
            width: 80%;
            height: 100%;
            border: none;
            resize: none;
        }
        .message_text:focus{outline:none;}
        .message_send{
            width: 100px;
            height: 100%;
            border-radius: 8px;
            background-color: #9ec4cf;
        }

    </style>
</head>
<body>
    <div class="mass">
        <textarea class="message_text" name="" id="" cols="30" rows="10"></textarea>
        <button class="message_send">전송</button>
    </div>
</body>
</html>

 

전송 버튼의 크기를 100px로 고정했다. 이렇게 했을 경우 브라우저의 크기가 커졌을때 message_text 의 크기 80%와 전송 버튼의 100px을 뺀 나머지 부분이 빈 영역으로 존재하게 된다.

 

예상하지 않던 여백이 생긴 것이다. 이럴때 calc() 함수를 사용할 수 있다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>calc 함수</title>
    <style>
        .message{
            display: flex;
            justify-content: space-around; /*좌우로 여백을 두고 펼처진다*/
            align-items: center;
            height: 100px;
            padding: 0.5em;
            border: 1px solid #000;
            font-size: 1.5em;
        }
        .message_text{
            width: calc(100% - 100px); /*전송 버튼을 뺀 나머지 부분을 모두 차지한다*/
            height: 100%;
            border: none;
            resize: none;
        }
        .message_text:focus{outline:none;}
        .message_send{
            width: 100%;
            height: 100%;
            border-radius: 8px;
            background-color: #9ec4cf;
        }

    </style>
</head>
<body>
    <div class="mass">
        <textarea class="message_text" name="" id="" cols="30" rows="10"></textarea>
        <button class="message_send">전송</button>
    </div>
</body>
</html>

 

message_text 의 크기를 변경했다.

 

위에서 봤던 것과는 다르게 브라우저의 크기를 늘려도 불필요한 여백이 생기지 않았다.

 

정리

'Front-End > 반응형 웹' 카테고리의 다른 글

반응형 웹(7) - 가변 이미지  (1) 2024.07.18
반응형 웹(6) - 미디어 쿼리  (0) 2024.07.17
반응형 웹(4) - 가변형 레이아웃  (2) 2024.07.14
반응형 웹(3) - 다양한 상대 단위  (0) 2024.07.13
반응형 웹(2) em & rem  (0) 2024.07.09

em을 이용해 상대적인 크기의 폰트를 적용할 때처럼, 레이아웃에도 비율에 기반한 개념을 적용할 수 있다. 

부모 요소의 크기에 비례해 자식 요소의 크기가 변하는 방식은 가변 레이아웃을 만들 때 흔히 사용되는 방식이다.

 

그럴 때 사용되는 상대적이고 비례적인 단위는 바로 % (퍼센트) 이다.

 

% 

% 단위는 백분율 값을 나타낸다. 보통 부모 요소와의 상대적 크기를 지정할때 사용한다. 너비와 높이, 여백 뿐 아니라 글자 크기에도 사용할 수 있다.

/* 부모 요소의 글자 크기가 100% */
font-size: 50%;

/* 부모 요소의 높이가 100% */
height: 50%;

/* 부모 요소의 너비가 100% */
width: 50%;
margin: 50%;
padding: 10%;

 

아래의 코드로 연습을 해보자

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>가변 레이아웃</title>
    <style>
        .container {
            width: 960px;
            margin: 0 auto;
            text-align: center;
        }
        .header{
            width: 960px;
            height: 100px;
            background-color: tomato;
        }
        .main{
            float: left;
            width: 640px;
            height: 300px;
            background-color: orange;
        }
        .asdie{
            float: right;
            width: 320px;
            height: 300px;
            background-color: purple;
        }
        .footer{
            clear: both; /*float으로 인해 문맥이 흐트러지는 것을 방지*/
            width: 960px;
            height: 100px;
            background-color: violet;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">HEADER</div>
        <div class="main">MAIN</div>
        <div class="aside">ASIDE</div>
        <div class="footer">FOOTER</div>
    </div>
</body>
</html>

브라우저에 표시

 

위 레이아웃은 960px; 이라는 고정 크기를 가지고 있다.  그래서 960px; 보다 작은 화면을 만나게 되면 요소가 가려지게 된다.

이때 사용하면 좋은것이 가변레이아웃 % 이다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>가변 레이아웃</title>
    <style>
        .container {
            width: 90%;
            margin: 0 auto;
            text-align: center;
        }
        .header{
            width: 100%;
            height: 100px;
            background-color: tomato;
        }
        .main{
            float: left;
            width: 640px;
            height: 300px;
            background-color: orange;
        }
        .asdie{
            float: right;
            width: 320px;
            height: 300px;
            background-color: purple;
        }
        .footer{
            clear: both; /*float으로 인해 문맥이 흐트러지는 것을 방지*/
            width: 100%;
            height: 100px;
            background-color: violet;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">HEADER</div>
        <div class="main">MAIN</div>
        <div class="aside">ASIDE</div>
        <div class="footer">FOOTER</div>
    </div>
</body>
</html>

 

가장 부모 요소인 container 를 90% 로 설정해보자

960px 이었을때 동일하게 960px을 가지고 있던 header, footer 를 100% 로 설정할 수 있다.

main과 aside도 동일하게 % 단위로 변경해보자.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>가변 레이아웃</title>
    <style>
        .container {
            width: 90%;
            margin: 0 auto;
            text-align: center;
        }
        .header{
            width: 100%;
            height: 100px;
            background-color: tomato;
        }
        .main{
            float: left;
            width: 67%;
            height: 300px;
            background-color: orange;
        }
        .asdie{
            float: right;
            width: 33%;
            height: 300px;
            background-color: purple;
        }
        .footer{
            clear: both; /*float으로 인해 문맥이 흐트러지는 것을 방지*/
            width: 100%;
            height: 100px;
            background-color: violet;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">HEADER</div>
        <div class="main">MAIN</div>
        <div class="aside">ASIDE</div>
        <div class="footer">FOOTER</div>
    </div>
</body>
</html>

 

이렇게 변경하면

 

브라우저 창이 작아져도 레이아웃을 유지하는 것을 확인할 수 있다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>가변 레이아웃</title>
    <style>
        *{ box-sizing: border-box;}
        .container {
            width: 90%;
            margin: 0 auto;
            text-align: center;
        }
        .header{
            width: 100%;
            height: 100px;
            background-color: tomato;
        }
        .main{
            float: left;
            width: 67%;
            height: 300px;
            padding: 10%;
            background-color: orange;
        }
        .asdie{
            float: right;
            width: 33%;
            height: 300px;
            padding: 10%;
            background-color: purple;
        }
        .footer{
            clear: both; /*float으로 인해 문맥이 흐트러지는 것을 방지*/
            width: 100%;
            height: 100px;
            background-color: violet;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">HEADER</div>
        <div class="main">MAIN</div>
        <div class="aside">ASIDE</div>
        <div class="footer">FOOTER</div>
    </div>
</body>
</html>

 

위와 같이 padding: 10%; 로 줘보자

 

 

그러면 부모 요소인 container 너비를 기준으로 10% 의 padding 크기를 갖는걸 확인할 수 있다.

 

정리

'Front-End > 반응형 웹' 카테고리의 다른 글

반응형 웹(6) - 미디어 쿼리  (0) 2024.07.17
반응형 웹(5) - calc()  (0) 2024.07.15
반응형 웹(3) - 다양한 상대 단위  (0) 2024.07.13
반응형 웹(2) em & rem  (0) 2024.07.09
반응형 웹(1)  (0) 2024.07.08

앞에서 살펴본 em과 rem은 주변 상황에 따라 그 크기를 달리할 수 있는 가변성을 지니고 있지만, 브라우저나 기기 화면에 크기에 따라 크기가 달라지는 단위는 아니다. 따라서 진정한 반응형 단위라고 할 수 는 없다.

 

 

반응하는 단위들 

아래 몇 가지 단위들은 뷰포트 크기를 기반으로 값을 계산하여 크기를 결정하는 가변 단위이다.

font-size: 1vw; /* 뷰포트 너비의 100분의 1 */
font-size: 1vh; /* 뷰포트 높이의 100분의 1 */

/* 뷰포트 높이와 너비 중 작은 쪽의 100분의 1 */
font-size: 1vmin;

/* 뷰포트 높이와 너비 중 큰 쪽의 100분의 1 */
font-size: 1vmax;

 

사용해보자

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>다른 상대 단위들</title>
    <style>
        p{
            margin: 0;
            font-size: 50vw;
        }

    </style>
</head>
<body>
    <p>왕왕</p>
</body>
</html>

 

위 소스를 확인해보면 

 

브라우저의 크기에 따라 글씨의 크기가 달라지는 것을 확인할 수 있다.

 

뷰포트 높이로 설정을 변경해보자

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>다른 상대 단위들</title>
    <style>
        p{
            margin: 0;
            font-size: 50vh;
        }

    </style>
</head>
<body>
    <p>왕왕</p>
</body>
</html>

 

 

 

이제는 넓이에는 영향을 받지 않는다.

 

브라우저 창의 높이를 줄이면 글씨가 작아지게 된다.

 

 

정리

 

'Front-End > 반응형 웹' 카테고리의 다른 글

반응형 웹(6) - 미디어 쿼리  (0) 2024.07.17
반응형 웹(5) - calc()  (0) 2024.07.15
반응형 웹(4) - 가변형 레이아웃  (2) 2024.07.14
반응형 웹(2) em & rem  (0) 2024.07.09
반응형 웹(1)  (0) 2024.07.08

절대 길이 단위 px

입문 레벨에서 가장 많이 사용하는 단위인 px(픽셀)은 절대 길이 단위이다. px은 어떤 상황에서도 동일한 값을 유지하므로 가변성이 없다.

픽셀로 인해 글씨가 잘렸다.

 

 

em과 rem

em과 rem은 박스에서 텍스트 크기를 조정할 때 사용하는 상대 단위이다. em은 부모 요소의 글꼴 크기를, rem은 루트 요소의 글꼴 크기를 의미한다.

<div style="font-size: 20px;">
	<p>자식 요소의 1em은 20px!</p>
    <p>자식 요소의 2em은 40px!</p>
</div>

 

루트 요소는 <html> 요소를 말하는 것이며 루트 요소 글자 크기 기본값은 16px이다.

 

em으로 내, 외부 여백 크기를 정할 때는 자기 자신의 글자 크기를 기준으로 한다.

 

다음예시를 보자

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>em과 rem</title>
    <style>
      .inner {
        display: inline-block;
        width: 200px;
        height: 200px;
        background-color: tomato;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="inner">고양이</div>
    </div>
  </body>
</html>

 

해당 html 문서를 확인해 보면 '고양이'는 16px로 표시되는 것을 확인할 수 있다.

 

그렇다면 다음의 경우는 어떨까?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>em과 rem</title>
    <style>
      .outer {
        font-size: 24px;
      }
      .inner {
        display: inline-block;
        width: 200px;
        height: 200px;
        background-color: tomato;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="inner">고양이</div>
    </div>
  </body>
</html>

 

outer 클래스의 글자 크기를 24px로 설정했기 때문에 자식 요소의 글자인 '고양이'도 24px로 표시되는 것을 확인할 수 있다.

 

 

em을 한번 살펴보자

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>em과 rem</title>
    <style>
      .outer {
        font-size: 24px;
      }
      .inner {
          font-size: 2em; /*글자 크기가 48px로 커진다.*/ 
        display: inline-block;
        width: 200px;
        height: 200px;
        background-color: tomato;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="inner">고양이</div>
    </div>
  </body>
</html>

 

자식요소인 inner 클래스에서 글자 크기를 2em으로 설정하게 되면 부모요소인 outer 클래스의 글자 크기가 24px이기 때문에 2배인 48px이 되는 것을 확인할 수 있다.

 

rem은 어떨까

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>em과 rem</title>
    <style>
      .outer {
        font-size: 24px;
      }
      .inner {
          font-size: 1rem; /*html 요소의 값을 기준으로 설정된다 기본값인 16px로 설정된다.*/ 
        display: inline-block;
        width: 200px;
        height: 200px;
        background-color: tomato;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="inner">고양이</div>
    </div>
  </body>
</html>

 

여기서 html style="font-size: 20px;"로 설정하게 되면 20px로 설정되는 것을 확인할 수 있다.

 

padding 과 margin에 대해서도 확인해보자

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>em과 rem</title>
    <style>
      .outer {
        font-size: 24px;
      }
      .inner {
          font-size: 1rem; /*html 요소의 값을 기준으로 설정된다 기본값인 16px로 설정된다.*/ 
        display: inline-block;
        width: 200px;
        height: 200px;
        background-color: tomato;
        margin: 1rem;
        padding: 1rem;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="inner">고양이</div>
    </div>
  </body>
</html>

 

padding과 margin을 1rem으로 설정한 경우 기본값인 16px인 것을 확인할 수 있다.

 

em은 어떨까?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>em과 rem</title>
    <style>
      .outer {
        font-size: 32px;
      }
      .inner {
          font-size: 16px; /*html 요소의 값을 기준으로 설정된다 기본값인 16px로 설정된다.*/ 
        display: inline-block;
        width: 200px;
        height: 200px;
        background-color: tomato;
        margin: 1em;
        padding: 1em;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="inner">고양이</div>
    </div>
  </body>
</html>

 

자기 자신에 대한 padding과 margin을 설정한 경우 부모의 글자 크기로 설정하는 것이 아닌 자기 자신을 기준으로 글자 크기를 설정한다.

따라서 위와 같이 설정한 경우 padding과 margin은 16px이 된다. 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>em과 rem</title>
    <style>
      .outer {
        font-size: 32px;
      }
      .inner {
          font-size: 1em; /*html 요소의 값을 기준으로 설정된다 기본값인 16px로 설정된다.*/ 
        display: inline-block;
        width: 200px;
        height: 200px;
        background-color: tomato;
        margin: 1em;
        padding: 1em;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="inner">고양이</div>
    </div>
  </body>
</html>

 

위와 같이 font-size: 1em; 으로 변경한 경우 32px로 변경되기 때문에 padding과 margin 또한 32px로 변경된다.

 

정리 

'Front-End > 반응형 웹' 카테고리의 다른 글

반응형 웹(6) - 미디어 쿼리  (0) 2024.07.17
반응형 웹(5) - calc()  (0) 2024.07.15
반응형 웹(4) - 가변형 레이아웃  (2) 2024.07.14
반응형 웹(3) - 다양한 상대 단위  (0) 2024.07.13
반응형 웹(1)  (0) 2024.07.08

오늘날 우리는 다양한 기기와 해상도를 통해 웹문서를 열람하고 있다. 따라서 웹문서를 만드는 사람이라면 누구나 특정 기기나 브라우어제 국한되지 않고 다양한 환경에서 동일한 경험을 제공할 수 있는 웹 문서를 만들어야 한다는 요구를 피해갈 수 없게 되었다.

 

이것을 '반응형 웹' 이라고 부르기로 했다. 반응형 웹이 무엇인지 알아보자.

 

반응형 웹

반응형 웹이란, 다양한 기기나 브라우저의 크기에 맞게 구성이나 크기를 변경해가며 반응하는 웹문서 또는 이를 위해 사용하는 기법을 뜻한다. 스마트 모바일 기기의 등장으로, 데스크톱 화면을 위해 존재했던 웹문서의 설계에도 변화가 요구되기 시작했다. 변화의 초기에는 모바일 전용 URL을 제공하는 방법이 주로 사용되었다.

 

모바일 환경과의 격리가 성공적으로 정착한 사례도 있지만, 기기의 유형이 갈수록 다양해짐에 따라 한계를 들어낼 수밖에 없다. 

 

기기에 최적화된 콘텐츠를 계속해서 생산해내는 것은 현실적으로 어렵기 때문에, 사용하는 기기에 적절하게 맞춰지는 사이트를 개발하는 것이 바람직하다.

 

즉 반응형 웹사이트를 만드는 것이 좋다. 그리고 반응형 웹사이트에서 가장 핵심이 되는 키워드는 바로 '가변성'이다.

 

 

뷰포트 (viewport)

뷰포트란 현재 화면에 보여지고 있는 영역을 의미한다. 기기 별로 뷰포트가 다르기 때문에, 동일한 웹 페이지라도 기기에 따른 배율 조정이 발생해 화면의 크기가 다르게 보이는 현상이 나타난다. 아래 그림은 HTML 문서를 각각 PC와 모바일로 확인한 결과이다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    // 뷰포트가 존재한다. 
    // width = 기기의 넓이로 하고, 초기 스케일을 잡겠다.
    <meta name="viewport" 
    content="width=device-width, initial-scale=1.0">

    <title>Document</title>
</head>
<body>
    
</body>
</html>

 

이렇게 뷰포트가 존재하는데 해당 meta 태그를 삭제하고 모바일 크기로 html 문서를 조회해보자

모바일 화면

 

32px정도 되어야 하는 <h1> 태그의 크기가 작아진 것을 확인할 수 있다. 이런 이유는 모바일과 데스크톱의 화면 비율이 다르기 때문이다. 

 

그렇다면 <meta> 태그가 있으면 어떻게 될까?

 

모바일 화면

 

 

위와 같이 데스크탑과 동일하게 보이는 것을 확인할 수 있다.

따라서 기기에 따라 다른 화면 크기에 대응하기 위해, 웹문서에 viewport 속성에 대한 마크업을 추가해야 한다.

 

'Front-End > 반응형 웹' 카테고리의 다른 글

반응형 웹(6) - 미디어 쿼리  (0) 2024.07.17
반응형 웹(5) - calc()  (0) 2024.07.15
반응형 웹(4) - 가변형 레이아웃  (2) 2024.07.14
반응형 웹(3) - 다양한 상대 단위  (0) 2024.07.13
반응형 웹(2) em & rem  (0) 2024.07.09

+ Recent posts

티스토리툴바