소개
반려동물 애호가를 위한 가상 공간인 "Pet's House"에서 웹 개발자 Alex 는 CSS Grid 를 사용하여 서비스 쇼케이스를 개선하는 여정을 시작합니다.
이 랩은 서비스를 체계적이고 시각적으로 매력적인 방식으로 제시하여 사용자를 사로잡는 것을 목표로 합니다. Alex 의 임무는 "Display" 섹션을 우아하고 효율적으로 반려동물 서비스를 강조하는 그리드 레이아웃으로 변환하는 것입니다.
Position 속성
CSS position 속성은 개발자가 페이지에서 요소의 정확한 배치를 제어할 수 있도록 하는 강력한 도구입니다. 이를 통해 요소는 일반적인 흐름, 부모 요소에 상대적인 위치, 뷰포트에 상대적인 위치 또는 가장 가까운 스크롤 조상에 상대적인 위치를 기반으로 배치될 수 있습니다.
Static (정적) 위치 지정
static은 모든 요소의 기본값으로, 요소가 일반적인 문서 흐름에 따라 배치됨을 의미합니다. 정적으로 위치 지정된 요소는 top, right, bottom 또는 left 속성의 영향을 받지 않습니다.
요소가 표준 흐름을 따르도록 하려면 정적 위치 지정을 선택하는 것이 좋습니다.
예를 들어, 페이지 왼쪽에 로봇 이미지가 있고 이 요소의 position을 static으로 설정하면 페이지를 스크롤할 때 이 이미지도 페이지 흐름에 따라 함께 스크롤됩니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.full-page-img {
width: 100%;
margin-left: 15%;
}
.box img {
width: 90%;
}
.ad-l {
position: static;
top: 100px;
left: 0;
width: 150px;
}
</style>
</head>
<body>
<img src="robot.png" class="ad-l" />
<div class="full-page-img">
<img src="page.png" />
</div>
</body>
</html>
Fixed (고정) 위치 지정
fixed 위치 지정은 요소를 브라우저 창의 뷰포트에 상대적으로 배치합니다. 페이지가 스크롤되어도 요소는 동일한 위치에 유지됩니다.
페이지 상단 또는 하단에 고정된 탐색 모음을 만들 때 유용합니다.
예를 들어, 페이지 왼쪽에 로봇 이미지가 있고 이 요소의 position을 fixed로 설정하면 페이지를 스크롤할 때 이 이미지는 페이지 스크롤로 인해 사라지지 않고 고정된 위치에 있게 됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.full-page-img {
width: 100%;
margin-left: 15%;
}
.box img {
width: 90%;
}
.ad-l {
position: fixed;
top: 100px;
left: 0;
width: 150px;
}
</style>
</head>
<body>
<img src="robot.png" class="ad-l" />
<div class="full-page-img">
<img src="page.png" />
</div>
</body>
</html>
Relative (상대) 위치 지정
relative 위치 지정을 사용하면 요소의 일반적인 위치를 기준으로 요소를 오프셋할 수 있습니다. 오프셋되더라도 요소는 원래 공간을 차지합니다.
레이아웃의 다른 부분에 영향을 주지 않고 요소의 위치를 약간 조정해야 할 때 유용합니다.
예를 들어, 페이지 왼쪽에 있는 로봇 이미지를 일반적인 위치를 기준으로 top 및 left 방향으로 설정된 픽셀 수만큼 이동했습니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
width: 100%;
}
.box img {
width: 90%;
}
.ad-l {
position: relative;
top: 70px;
left: 70px;
}
</style>
</head>
<body>
<img src="labby.png" class="ad-l" />
<div class="box">
<img src="page.png" />
</div>
</body>
</html>
Absolute (절대) 위치 지정
absolute 위치 지정은 요소를 가장 가까운 위치 지정된 조상 (있는 경우) 에 상대적으로, 그렇지 않으면 초기 포함 블록에 상대적으로 배치합니다. 이는 문서 흐름에서 제거되고 공간을 차지하지 않습니다.
모달 또는 드롭다운 메뉴와 같은 플로팅 요소를 만들어야 할 때 유용합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
width: 100%;
}
.box img {
width: 90%;
}
.ad-l {
position: absolute;
top: 70px;
left: 70px;
}
</style>
</head>
<body>
<img src="labby.png" class="ad-l" />
<div class="box">
<img src="page.png" />
</div>
</body>
</html>
position 속성의 사용법을 이해했다면 style.css에 다음을 추가할 수 있습니다.
header {
position: fixed;
display: flex;
flex-direction: row;
background-color: rgb(233, 174, 87);
width: 100%;
max-height: max-content;
min-height: 1em;
padding-top: 1%;
padding-bottom: 1%;
text-transform: uppercase;
}
.navigation li {
position: relative;
display: inline-block;
}
.service figure {
position: relative;
}
.service figcaption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
padding: 10px;
}
Grid 기본
이전 랩에서 Flexbox 를 배웠지만, 반려동물 페이지의 레이아웃은 우리가 원하는 효과를 얻지 못했습니다. 그래서 다음으로 다른 레이아웃인 Grid Layout 을 학습합니다.
CSS Grid Layout (Grid) 는 개발자가 반응형 웹 페이지 레이아웃을 만들 수 있도록 하는 그리드 기반 레이아웃 시스템입니다. Grid 는 페이지를 주요 영역으로 나누거나 더 작은 구성 요소의 레이아웃을 정의할 수 있습니다.
Grid 레이아웃을 사용하려면 먼저 컨테이너 요소에 display: grid; 속성을 설정해야 합니다. style.css에 다음을 추가할 수 있습니다.
.container {
display: grid;
padding: 0px;
padding-top: 1em;
width: 100%;
}
.services {
width: 90%;
display: grid;
margin: 20px auto;
}
행과 열 정의
다음으로, grid-template-columns 및 grid-template-rows 속성을 사용하여 컨테이너의 행과 열을 정의합니다.
예를 들어, .container는 열과 행에 대한 특정 치수를 사용하여 그리드 표시 모드를 설정합니다.
display: grid;는 컨테이너에 대한 그리드 레이아웃을 활성화합니다.grid-template-columns: 50px 100px;는 첫 번째 열이 50 픽셀 너비이고 두 번째 열이 100 픽셀 너비인 두 개의 열을 정의합니다.grid-template-rows: 30px 60px;는 첫 번째 행이 30 픽셀 높이이고 두 번째 행이 60 픽셀 높이인 두 개의 행을 정의합니다.
style.css에 다음을 추가할 수 있습니다.
.container {
display: grid;
grid-template-columns: 100%;
padding: 0px;
padding-top: 1em;
width: 100%;
}
.services {
width: 90%;
display: grid;
grid-template-columns: 2fr 2fr 2fr;
margin: 20px auto;
}
fr은 유연한 길이 단위로, 그리드 컨테이너에서 사용 가능한 공간의 일부를 나타냅니다.
그리드 간격 (Grid Gap)
grid-gap 속성 (현재는 gap, row-gap, column-gap 사용을 권장) 은 그리드 행과 열 사이의 간격을 설정할 수 있습니다.
style.css에 다음을 추가할 수 있습니다.
.services {
width: 90%;
display: grid;
grid-template-columns: 2fr 2fr 2fr;
gap: 5%;
margin: 20px auto;
}
요약
이 랩에서 Alex 는 CSS Grid 를 성공적으로 활용하여 "Pet's House" 표시 섹션을 재설계하여 구조적이고 매력적인 그리드 레이아웃으로 애완 동물 서비스를 선보였습니다. 이러한 접근 방식은 시각적 표현을 개선했을 뿐만 아니라 웹 디자인에서 CSS Grid 의 유연성과 강력함을 보여주었습니다.
