사이트 도면
구현 화면
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>코드잇 미술관</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap"
rel="stylesheet"
>
<link rel="stylesheet" href="style.css">
</head>
<body>
<img src="logo.png" id="logo">
<p id="category">소개 관람·참여 전시 교육</p>
<div id="line">
<p id="museumeTitle">인상주의 거장들과 함께하는
<모네, 빛을 그리다> 展</p>
<p id="date">2025-05-02 ~ 2025-08-07</p>
<div class="images">
<img src="547239.jpg" class="image">
<img src="547250.jpg" class="image">
<img src="547252.jpg" class="image">
<img src="547266.jpg" class="image">
<img src="547292.jpg" class="image">
<img src="547293.jpg" class="image">
<img src="547310.jpg" class="image">
<img src="930543.jpg" class="image">
</div>
<a href="#" id="button">모든 작품 보기</a>
<p id="spaceDescription">공간 소개</id>
<p class="content">보국산 끝자락에 자리잡은 코드이트 보국은 천혜의 자연 경관과 함께하며 그 자체로 지친
몸과 마음을 쉬게 해 줄 힐링의 공간입니다. 김수곤 건축가의 작품인 본 갤러리는
캔버스 화폭을 형상화하여 입면을 하늘로 가져 간 전시실이 특징이며, 한국의
전통 가옥을 연상시키는 천정과 부드러운 자연광이 들어올 수 있게 설계한 쾌적한
전시공간을 연출하고 있습니다.
</p>
<img src="space.jpg" id="spaceImg">
</body>
</html>
style.css
* {
box-sizing: border-box;
}
body {
font-family: 'Noto Sans KR', sans-serif;
font-size: 16px;
margin: 0;
}
#logo{
width:104px;
margin:68px auto 24px 48px;
}
#category{
margin:0px auto 24px 48px;
font-size:22px;
font-weight: 700;
color:#000000;
}
#line{
border-top:2px solid;
}
#museumeTitle{
margin:40px auto 8px 48px;
font-size:24px;
font-weight: 700;
color:#000000;
}
#date{
margin: 0 auto 24px 48px;
font-size:16px;
color:#000000;
}
.images::-webkit-scrollbar {
display: none;
}
.images{
overflow:scroll;
white-space: nowrap;
margin: 0 0 30px 0;
}
.image{
height:194px;
margin:0 10px 0 0;
}
#button{
margin:20px auto 72px 48px;
padding:12px 24px;
background-color:#000000;
color:#ffffff;
font-size:16px;
}
#spaceDescription{
font-size:24px;
font-weight:600;
color:#000000;
margin:72px auto 16px 48px;
}
.content{
margin:0 48px 24px 48px;
font-size:16px;
color:#000000;
}
#spaceImg{
margin:0 48px 40px 48px;
width:auto;
height:600px;
}
모범 답안
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>코드잇 미술관</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap"
rel="stylesheet"
>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<img id="logo" src="logo.png">
<div class="nav">
<a class="nav-menu" href="#">소개</a>
<a class="nav-menu" href="#">관람·참여</a>
<a class="nav-menu" href="#">전시</a>
<a class="nav-menu" href="#">교육</a>
</div>
</div>
<div class="content">
<div class="section">
<h2 class="title">
인상주의 거장들과 함께하는<br>
<모네, 빛을 그리다> 展
</h2>
<h3 class="date">2025-05-02 ~ 2025-08-07</h3>
<div class="artworks">
<img class="artwork" src="547239.jpg">
<img class="artwork" src="547250.jpg">
<img class="artwork" src="547252.jpg">
<img class="artwork" src="547266.jpg">
<img class="artwork" src="547292.jpg">
<img class="artwork" src="547293.jpg">
<img class="artwork" src="547310.jpg">
<img class="artwork" src="930543.jpg">
</div>
<a class="button" href="#">모든 작품 보기</a>
</div>
<div class="section">
<h2 class="title">공간 소개</h2>
<p class="description">
보국산 끝자락에 자리잡은 코드이트 보국은 천혜의 자연 경관과 함께하며 그 자체로 지친 몸과 마음을 쉬게 해 줄 힐링의 공간입니다.
김수곤 건축가의 작품인 본 갤러리는 캔버스 화폭을 형상화하여 입면을 하늘로 가져 간 전시실이 특징이며,
한국의 전통 가옥을 연상시키는 천정과 부드러운 자연광이 들어올 수 있게 설계한 쾌적한 전시공간을 연출하고 있습니다.
</p>
<img class="full" src="space.jpg">
</div>
</div>
</body>
</html>
body {
font-family: "Noto Sans KR", sans-serif;
font-size: 16px;
margin: 0;
}
.header {
border-bottom: 1px solid #000000;
font-size: 52px;
font-weight: 800;
margin: 0;
}
#logo {
display: block;
width: 104px;
margin-bottom: 24px;
}
.nav {
font-size: 22px;
font-weight: 700;
line-height: 32px;
}
.nav-menu {
color: #000000;
margin-right: 16px;
text-decoration: none;
}
.header {
padding-bottom: 24px;
padding-top: 68px;
}
.header,
.content {
padding-left: 48px;
padding-right: 48px;
}
.section {
margin: 40px 0 72px;
}
.title {
font-size: 24px;
font-weight: 700;
line-height: 35px;
margin: 8px 0;
}
.date {
font-size: 16px;
font-weight: 400;
line-height: 23px;
margin: 8px 0;
}
.artworks {
margin: 24px -48px;
overflow: scroll;
white-space: nowrap;
}
.artwork {
height: 194px;
margin-right: 8px;
}
a.button {
display: inline-block;
background: #000000;
color: #ffffff;
padding: 12px 24px;
text-decoration: none;
}
.description {
font-size: 16px;
font-weight: 400;
line-height: 23px;
margin: 16px 0;
}
img.full {
margin: 24px 0;
width: 100%;
}
헷갈렸던 부분
- 구분선
(모범답안 - header div 생성하고 border-bottom)
border-bottom: 1px solid #000000;
.images{
overflow:scroll;
white-space: nowrap;
margin: 0 0 30px 0;
}
.image{
height:194px;
margin:0 10px 0 0;
}
- 맨 아래 사진 화면 비율 맞춰 크기 조정 되도록
(모범답안)
img.full {
margin: 24px 0;
width: 100%;
}
