1. 고정 그리드와 가변 그리드
웹 사이트에서의 레이아웃을 정할 때에는 '그리드 시스템(grid system)' 을 기준다.
보통 12 컬럼(칸)으로 화면을 분할하여 배치 요소를 규칙적으로 배열할 수 있다는 장점을 가진다.
고정 그리드는 화면의 너비를 특정한 값으로 고정해서 사용하는 것으로 너비가 항상 일정하게 유지되기 때문에 원하는 레이아웃을 만들기에 쉽다는 장점이 있지만 화면의 너비가 변하는 경우에는 적절히 변할 수 없다는 단점이 있다.
이로 인하여 능동적으로 너비의 변화에 레이아웃을 변경하는 가변 그리드를 사용하기도 한다.
너비의 값을 특정한 값으로 고정하지 않고 백분율을 활용하여 너비의 변화에 반응한다는 특징이 있다.
2. 고정 그리드 만들기
고정 그리드는 픽셀 등의 단위를 이용하여 특정한 값을 지정한 형태를 말한다.
<style>
.wrapper {
width: 960px;
margin: 0 auto;
}
header {
height: 120px;
background-color: darkblue;
}
header h1 {
color: #eee;
padding: 1em;
text-align: center;
}
.content {
float: left;
width: 600px;
padding: 15px;
background-color: cornflowerblue;
}
div p {
padding: 1em;
height: 450px;
font-size: 20px;
font-weight: bolder;
}
.right-side {
float: right;
width: 300px;
padding: 15px;
background-color: cadetblue;
}
footer {
clear: both;
width: 960px;
background-color: darkslateblue;
}
footer > p {
padding: 1em;
height: 200px;
}
</style>
</head>
<body>
<div class="wrapper">
<header>
<h1>고정 그리드 레이아웃</h1>
</header>
<div>
<section class="content">
<article>
<p>본문</p>
</article>
</section>
<aside class="right-side">
<p>사이드바</p>
</aside>
</div>
<footer>
<p>푸터</p>
</footer>
</div>
</body>
전체 너비를 960px 로 고정하였을 때를 살펴보면 큰 화면에서는 전체가 보이는 것을 확인할 수 있다.
하지만 화면의 너비가 전체적으로 줄어들었을 때를 보면 좌우 스크롤바가 함께 생기면서 안 보이는 요소가 생겼다는 것을 확인할 수 있다.
3. 가변 그리드 만들기
이번에는 위의 고정 그리드 레이아웃을 바탕으로 화면의 너비에 따라 적절히 변화하는 가변 그리드로 만들어 보자.
<style>
.wrapper {
width: 96%;
margin: 0 auto;
}
header {
height: 120px;
background-color: darkblue;
}
header h1 {
color: #eee;
padding: 1em;
text-align: center;
}
.content {
float: left;
width: 62.5%;
padding: 1.5625%;
background-color: cornflowerblue;
}
div p {
padding: 1em;
height: 450px;
font-size: 20px;
font-weight: bolder;
}
.right-side {
float: right;
width: 31.25%;
padding: 1.5625%;
background-color: cadetblue;
}
footer {
clear: both;
background-color: darkslateblue;
}
footer > p {
padding: 1em;
height: 200px;
}
</style>
</head>
<body>
<div class="wrapper">
<header>
<h1>가변 그리드 레이아웃</h1>
</header>
<div>
<section class="content">
<article>
<p>본문</p>
</article>
</section>
<aside class="right-side">
<p>사이드바</p>
</aside>
</div>
<footer>
<p>푸터</p>
</footer>
</div>
</body>
px 단위에서 % 단위로 예시를 변경해 보았다.
% 는 화면의 너비에 반응하기 때문에 위의 이미지처럼 너비가 줄어도 요소가 안 보이지 않고, 스크롤바가 생기지 않았음을 확인할 수 있다.
4. 가변 요소 : 가변 글꼴
기존의 글꼴은 px 을 기본으로 하여 지정된다.
하지만 위의 예시에서도 살펴 보았듯 px 단위를 특정한 크기로 지정한 것이기 때문에 레이아웃이 변경될 때에도 그 크기를 유지하게 된다는 특징을 갖게 된다.
레이아웃이 변경될 때에 일정하게 글자 크기도 변경하게 하려면 어떻게 해야 할까?
1️⃣ em 단위
em 단위는 px 와 달리 부모 요소에서 지정한 폰트의 대문자 M 크기를 1em 으로 지정하기 때문에
값이 상대적으로 변화할 수 있다는 특징을 가진다.
부모 요소에서 특정한 지정을 하지 않았다면 body 의 크기를 따라가기 때문에 1em 은 16px 이다.
만약 부모 요소에서 25px 로 지정하게 되면 1em 은 25px 이 되고, 2em 은 50px 가 된다.
다음은 요소를 전체적으로 감싸는 .wrapper 에 font-size 값으로 25px 지정했을 경우를 살펴볼 수 있다.
본문의 글자 크기를 1em 으로 했을 때 화면에 적용되는 크기를 [computed] 탭으로 확인할 수 있는데,
본문의 글자 크기가 25px 임이 보인다.
2️⃣ rem 단위
em 단위는 위에서도 살펴 보았듯이 부모 요소의 글꼴을 기준하고 있기 때문에 그 크기가 중첩되면 글자 크기에 대해 영향이 중첩으로 이뤄질 수 있다는 단점이 있다.
예를 들어 부모 > 자식 > 자손의 관계가 있다고 가정해보자.
부모에서 25px 을 설정하였고, 자식과 자속에는 각각 2em, 1.5em 이라고 하였을 때, 자식에서의 1em 은 50px 이 된다.
그렇다면 자손에서는 어떻게 영향을 미치게 될까?
먼저 자손의 부모가 누구인지를 명확히 해야 한다.
자손의 부모는 바로 자식 위치의 요소가 된다.
즉, 자손에서의 em 기준은 자식의 px을 따라가게 되기에 50px 이 1em의 기준이 되는 것이고,
1.5em 은 75px 이 되는 것이다.
이렇게 em 을 사용하게 되면 겪게 될 어려움을 알게 되었다.
이를 해결하기 위하여 rem 단위를 활용할 수 있다.
rem 의 r 은 루트(root) 를 나타내며, 부모에서 정한 px을 그대로 기준으로 삼겠다라는 의미로 사용할 수 있다.
즉, 자식 요소에서 50px 로 변경되더라도 부모의 영향을 계속 유지하여 25px 을 기준하게 된다는 것이다.
5. 가변 요소 : 가변 이미지
화면에 이미지를 넣었을 때 너비가 줄어준다면 이미지는 어떻게 될까?
이미지의 크기가 유지되지만 화면의 요소에 가려지며 레이아웃이 이상해지는 것을 볼 수 있다.
즉, 이미지 또한 화면의 너비에 따라 변화되어야 한다는 것이다.
이미지의 너비 값을 다음과 같이 바꿔보자.
max-width : 100%
이렇게 너비 속성을 백분율로 변경하니 화면의 너비가 줄어도 이미지가 가려지거나 하지 않게 되었다.
📌 화면 너비마다 다른 이미지 표시하기
<picture> 태그와 <soure> 태그를 이용하면 너비 값마다 다른 이미지를 보여 줄 수 있게 된다.
<style>
picture img {
width: 300px;
}
</style>
</head>
<body>
<picture>
<source srcset="https://img.animalplanet.co.kr/news/2021/11/30/700/717rrlucsy5gtlyvw515.jpg" media="(min-width:1024px)">
<source srcset="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT_AZow9EaNsHoMYrjrj3htjXk6-cm-F10VjMAsqEZ1a8ukQF20MRykIthtbs9K6qWX2x0&usqp=CAU" media="(min-width:768px)">
<source srcset="https://t1.daumcdn.net/cfile/tistory/27738433597DCB1312" media="(min-width:320px)">
<img src="http://storage.enuri.info/pic_upload/knowbox2/202012/0107315902020121547c1dd11-700c-4145-96e7-fea4a8ebdd84.jpg" alt="">
</picture>
</body>
'CSS' 카테고리의 다른 글
| 플렉스 박스 레이아웃 (0) | 2022.10.31 |
|---|---|
| 미디어 쿼리 (0) | 2022.10.30 |
| CSS Diner : selector 연습하기 (21 ~ 32번) (0) | 2022.10.30 |
| CSS Diner : selector 연습하기 (11 ~ 20번) (1) | 2022.10.30 |
| CSS Diner : selector 연습하기 (1 ~ 10번) (0) | 2022.10.30 |
