HTML/CSS 레이아웃3
index.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">
<link rel="stylesheet" href="style/style.css">
<title>Document</title>
</head>
<body>
<div id="wrap">
<header id="header">
<h1>Musee d'Orsay</h1>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Enim quae nisi soluta.
</p>
</header>
<!-- header#header -->
<main id="main">
<div id="topcontent">Royal Academy of Arts THE REAL VANGOGH</div>
<div id="flexcontainer" class="flex-container">
<div id="flexBox">
<div id="left">
<h3>ARTIST</h3>
</div>
<ul id="titlemenu">
<li class="mainLi">
<a href="#">작가의 작품</a>
</li>
<li class="mainLi">
<a href="#">작가의 시대</a>
</li>
<li class="mainLi">
<a href="#">작가의 일생</a>
</li>
</ul>
</div>
<div id="flexBox2">
<div id="center">
<h1>피리부는소년</h1>
</div>
<div id="centerContent">
<h2>에두아르마네</h2>
<p>1866 캔버스에 유채. 161*97cm, 파리 오르세</p>
</div>
<div id="center">
<h1>고흐의 방</h1>
</div>
<div id="centerContent">
<h2>빈센트 반 고흐</h2>
<p>1889 캔버스에 유채. 57.5*74cm, 파리 오르세</p>
</div>
<div id="center">
<h1>황색 그리스도가 있는 화가의 자화상</h1>
</div>
<div id="centerContent">
<h2>폴 고객</h2>
<p>1890-1891 캔버스에 유채. 38*46cm, 파리 오르세</p>
</div>
</div>
<div id="flexBox3">
<div id="right">
<p id="righttitle">
<span id="subtitle1">
전세계인들에게<br>
</span>
<span id="subtitle2">
제일 사랑받는<br>
</span>
서양미술사의 시대
</p>
<h3>
Workshop Go
</h3>
<p id="subtitles">
Life drowing workshop
</p>
<h3>
Summer exhibition
</h3>
<p id="subtitles">
A-level Summer Exhibition<br>
Online 2010
</p>
<h3>
RA collection
</h3>
<p id="subtitles">
RA collection
</p>
</div>
</div>
</div>
<footer id="footer">
©Lorem ipsum dolor sit, amet consectetur adipisicing elit. Alias, possimus minus. Quidem.
</footer>
</div>
</main>
<!-- main#main -->
</div>
<!-- div#wrap -->
</body>
</html>
style.css
@charset "UTF-8";
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.flex-container {
display: flex;
}
/* div#wrap start */
div#wrap {
width: 1000px;
padding: 1px;
border: 1px solid #000;
margin: 0 auto;
margin-top: 20px;
/* background-color: #fff; */
}
/* div#wrap end */
/* header#header start */
header#header {
text-align: center;
background-color: orange;
}
#header h1 {
color: white;
background-color: orange;
font-size: 100px;
font-weight: bold;
}
#header p {
color: white;
font-size: 20px;
font-weight: bold;
}
/* header#header end */
/* main#main start */
/* div#left start */
div#left {
/* border: 1px solid #000; */
width: 200px;
height: 55px;
line-height: 50px;
font-size: 25px;
background-color: #641300;
color: white;
}
div#left h3 {
padding: 0 0 0 5px;
}
div#topcontent {
text-align: center;
font-size: 18px;
background-color: #b2b5a2;
height: 50px;
line-height: 50px;
}
ul#titlemenu {
list-style: none;
line-height: 40px;
/* border: 1px solid #000; */
height: 600px;
}
li.mainLi {
padding: 0 0 0 5px;
}
li.mainLi a {
color: #000;
font-size: 20px;
font-weight: bold;
}
li.mainLi :hover {
text-decoration: none;
}
/* div#left end */
/* main#main end */
/* div#center start */
div#flexBox2 {
background-color: #b2b5a2;
padding: 10px 0 0 0;
}
div#center h1 {
color: white;
font-size: 28px;
}
div#center {
background-color: #011a21;
width: 480px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 30px;
/* border: 1px solid green; */
}
div#centerContent {
/* border: 1px solid #000; */
margin-right: 10px;
margin-left: 10px;
height: 100px;
margin-bottom: 30px;
}
div#centerContent p {
/* font-weight: bold; */
padding-top: 20px;
font-size: 18px;
}
/* div#center end */
/* div#right start */
div#right {
width: 299px;
padding: 10px;
/* border: 1px solid red; */
}
p#righttitle {
font-weight: bold;
font-size: 33px;
margin-bottom: 50px;
}
span#subtitle1 {
color: gray;
text-decoration: underline;
}
span#subtitle2 {
color: orange;
text-decoration: underline;
}
div#right h3 {
text-decoration: underline;
}
p#subtitles {
font-size: 20px;
margin-bottom: 30px;
}
/* div#right end */
footer#footer {
text-align: center;
height: 50px;
line-height: 50px;
background-color: #011a21;
color: white;
}
Leave a comment