3번 HTML 코드
<!DOCTYPE html>
<html lang="ko">
<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>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">
<link rel="stylesheet" href="art.css">
</head>
<body>
<div id="wrapper">
<header>
<h1>Musée d'Orsay<span>Musée d'Orsay Musée d'Orsay
Musée d'Orsay Musée d'Orsay Musée d'Orsay</span>
</h1>
<h2 class="stit">
Royal Academy of Arts, THE REAL VANGOGH THE ARTIST AND HIS LETTERS
</h2>
</header>
<!-- //end header -->
<div class="container clearfix">
<aside class="side-menu">
<h3>ARTIST</h3>
<ul>
<li><a href="#">작가의 작품</a></li>
<li><a href="#">작가의 시대</a></li>
<li><a href="#">작가의 일생</a></li>
</ul>
</aside>
<div class="main-content">
<div class="art-piece">
<h4 class="title"><a href="#">피리부는 소년</a></h4>
<div class="artist">에두아르마네</div>
<p class="detail">1866 캔버스에 유채, 161*97cm, 파리 오르세 Edouard MANET, Le Fifre, H.T, 161*97cm</p>
</div>
<div class="art-piece">
<h4 class="title"><a href="#">고흐의 방</a></h4>
<div class="artist">빈센트반고흐</div>
<p class="detail">1889 캔버스에 유채,57.5*74cm,파리 오르세 Vincent Van GOGH,La Chambre de Van Gogh, H/T,
57.5*74cm</p>
</div>
<div class="art-piece">
<h4 class="title"><a href="#">황색 그리스도가 있는 화가의 자화상</a></h4>
<div class="artist">폴 고갱</div>
<p class="detail">1890-1891 캔버스에 유채,38*46cm,파리 오르세 Paul Gauguin Portrait de I'artiste au Paul
Gauguin, H/T, 38*46cm</p>
</div>
<div class="art-piece">
<h4 class="title"><a href="#">오페라좌의 관현악단</a></h4>
<div class="artist">에드가 드가</div>
<p class="detail">1868-1869 캔버스에 유채,32*46cm,파리 오르세 Edgar Degas, L'orchestre de I'Opera H/T, 38*46cm
</p>
</div>
<div class="art-piece">
<h4 class="title"><a href="#">만종</a></h4>
<div class="artist">장 프랑수아 밀레</div>
<p class="detail">1857-1859 캔버스에 유채,55.5*66cm,파리 오르세 Jean-Franqois Millet, L'Angelus H/T, 55.5*66cm
</p>
</div>
<div class="art-piece">
<h4 class="title"><a href="#">제비꽃장식을 단 베르트모리조</a></h4>
<div class="artist">에두아르마네</div>
<p class="detail">1872 Eduouard Manet Berthe Morisot au bouquet de H/T, 55*38cm</p>
</div>
</div>
<aside class="banner">
<h3><span class="all">전세계인들에게</span><span class="love">제일 사랑받는</span><strong>서양미술사의 시대</strong></h3>
<ul class="link">
<li><a href="#">Workshop Go</a> <span>Life drowing workshop</span></li>
<li><a href="#">Summer exhibition</a> <span>A-level Summer Exhibition Online 2010</span></li>
<li><a href="#">RA collection</a> <span>RA Collections</span></li>
</ul>
</aside>
</div>
<!-- // end container -->
<footer>
<address>© 2012 Les Amis du Musée d'Orsay. All rights reserved.
<a href="#">amis@amis-musee-orsay.org</a>
<span>Legal status</span>
</address>
</footer>
</div>
<!-- // end wrapper -->
</body>
</html>
HTML 코드는 예제로 나왔다. 참고용으로 올림. 밑으로 내가 작성한 CSS코드
@import url('../../common.css');
body {
background: gray;
}
body #wrapper {
width: 70%;
/* height: 60%; */
/* border: 2px solid white; */
margin: 0 auto;
}
header {
/* border: 3px solid white; */
height: 20%;
background: rgb(255, 177, 51);
margin: 0 ;
text-align: center;
padding-top: 25px;
color: rgb(255, 255, 255);
}
header h1 {
font-size: 6em;
font-weight: 900;
}
span {
display: block;
font-size: 18px;
font-weight: 900;
}
header h2 {
/* border: 3px solid white; */
background: #9b9b9b;
padding: 0.5%;
margin-top: 10px;
color: black;
}
#wrapper .container {
width: 100%;
/* border: 3px solid #000; */
background: #ededed;
display: inline-block;
}
div .side-menu {
/* border: 3px solid #000; */
background: #ededed;
width: 20%;
float: left;
line-height: 30px;
}
div .banner {
/* border: 3px solid #000; */
background: #ededed;
width: 20%;
float: left;
padding-left: 1%;
line-height: 30px;
}
div .main-content {
width: 60%;
float: left;
padding: 1%;
background: rgb(185, 185, 185);
}
.art-piece .title {
/* border: 3px solid blue; */
background: rgb(0, 54, 108);
color: #FFF;
font-size: 18px;
padding: 1%;
margin-top: 20px;
}
.art-piece .artist {
color: rgb(0, 54, 108);
font-size: 20px;
padding: 10px;
padding-top: 20px;
padding-bottom: 20px;
}
.art-piece .detail {
padding: 10px;
line-height: 28px;
}
div .side-menu h3 {
background: rgb(153, 1, 1);
color: #FFF;
padding: 2%;
}
div .side-menu ul li {
padding: 2%;
text-decoration: underline;
font-weight: bold;
}
div .banner h3 {
font-size: 24px;
padding-top: 6%;
}
div .banner .all {
font-weight: bold;
font-size: 24px;
color: gray;
text-decoration: underline;
}
div .banner .love {
font-weight: bold;
font-size: 24px;
color: rgb(240, 189, 49);
text-decoration: underline;
}
div .banner .strong {
font-weight: bold;
color: black;
}
footer address {
background: rgb(0, 54, 108);
padding-left: 25%;
padding-top: 1%;
padding-bottom: 1%;
color: #FFF;
}
footer span {
display: inline;
font-weight: normal;
font-size: 15px;
}
div .banner .link li{
padding-top: 20px;
}
div .banner .link li a{
text-decoration: underline;
font-weight: bold;
display: block;
}
div .banner .link li span {
font-size: 15px;
font-weight: normal;
line-height: 12px;
}
개선사항
- 타이틀 , 아티스트, 본문이 있는 부분에서 가운데 쪽에 양위쪽에 패딩을 넣어서 코드 한줄로 패딩처리를 완료 할 수 있다.
- 역시나 id와 클래스들로 최대한 스타일 클래스의 명시성을 높여주는게 안정성에 도움이 된다.
- 코드 작성할 때 한 파트에서 진행될 부분끼리 묶어서 작성을 해주면 좋다.
- 처음 코드 작성시 보더로 구역을 나눠주고 하나씩 시작 하면 작업이 수월하다.
- 예를 들어 위 코드같은 경우는 우선 수평처리 해주기 전에 세 구간과 헤더로 나누고 헤더 작업 후 수평처리 수평처리 후 박스 내용을 처리해주면 작업 방향이 더 깔끔해 질 것 같다.