CSS입문
CSS_positon(실습3)_22.04.13(Wed)
양빵빵
2022. 4. 13. 14:03
<!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">
<title>Document</title>
<style>
body{
margin: 100px;
background: #000;
}
.clearfix::after {
content: '';
display: block;
clear:both;
}
header {
background: rgb(34, 22, 168);
width: 90%;
padding: 10px;
text-align: center;
box-sizing: border-box;
}
header h1 {
color: white;
font-family: '굴림', serif;
font-weight: bold;
}
header h1 b {
color : white;
font-size: 100px;
}
header h1 span {
font-size: 30px;
color: yellow;
}
header h1 strong {
font-size: 80px;
}
header h1 em {
font-size: 50px;
}
.container {
width: 90%;
background: lightgray;
position: relative;
}
.container .left{
width: 20%;
float: left;
background: pink;
}
.container ul{
width: 120px;
box-sizing: border-box;
position: absolute;
top: 30px;
left: 30px;
line-height: 2;
}
.container .left a{
color: black;
text-decoration: none;
}
.container .left a:hover {
font-weight: bold;
text-decoration: underline;
}
.container .right1 {
background: lightgreen;
}
.container .right2 {
background: yellow;
}
.container .box {
width: 80%;
float:right;
}
.box h2{
background: red;
color: yellow;
font-size: 50px;
box-sizing: border-box;
padding: 10px;
}
.box p{
background: white;
padding: 20px 20px 20px 20px;
line-height: 1.5;
}
footer {
background: gray;
padding: 20px 50px;
width: 90%;
box-sizing: border-box;
}
</style>
</head>
<body>
<header>
<h1> <b>호랑이</b> <span>를 <em>주제</em>로 한</span> <strong>민화</strong></h1>
</header>
<section class="container clearfix">
<nav class="left">
<ul>
<li><a href="#">그림의 작가</a></li>
<li><a href="#">그림의 시대</a></li>
<li><a href="#">그림의 재료</a></li>
<li><a href="#">그림의 주인공</a></li>
<li><a href="#">그림의 활용</a></li>
</ul>
</nav>
<div class="box">
<section class="right1">
<h2>승 운 용 호 도</h2>
<p>사람 이름 같기도 한 이 그림을 처음 보았을 때 티셔츠에 새길 그림을 일러스트레이터로 작업 중이었다.
비록 그림을 보며 원본대로 그려내는 작업이었지만 즐거웠다.
용과 겨루는 황금빛 호랑이의 모습이 용맹하기도 했지만 내게는 약간 귀여워 보였고 무엇보다 순수해 보였다.
어둠 속에서 나타난 비겁한 용보다는 맑은 물을 튀며 신성한 기운을 드러내는 우리 호랑이에서 무한한 애정을 느꼈기 때문이다.</p>
</section>
<section class="right2">
<h2>길 상 백 호</h2>
<p>호랑이 그림은 예로부터 아래로 내려오는 것보다 위로 올라가는 형상이 더 좋다고 하였다. 하지만 이 그림은 달랐다. 아래로 내려오고 있기는 하지만 윤기나는 등의 털과 그윽하게 쳐다보는 두 눈은 백호의 여유로움을 충분히 공감할 수 있게 해주었기 때문이다. 채도가 내려앉아 버린 백호의 그림이지만 건조해 보이기보다는 은빛으로 촉촉해 보이는 호랑이의 자태에 반했다고 할까? 알록달록함이 주는 아기자기함은 없지만 세련된 무채색에 다부지게 밟아 짚은 앞발에서 오히려 나를 지켜주는 든든함까지 느껴진다. 호랑이가 밟은 풀잎들에서도 우리를 한 공간 안에 무사히 존재하게 하는 안정감이 있는 듯하다. 그림을 감상할 때 그 시대적 배경과 소재의 재질 등을 함께 감상하여 아는 즐거움을 늘려야 하겠지만 나는 아무 부수적인 요소들을 제하고 오로지 내 눈과 그림이 서로 교감하여 빚어내는 상상의 공간을 좋아한다. 시대를 알고 의도를 아는 것도 중요하겠지만 작가가 우리에게 오로지 늘 같은 그것만 바라지는 않았을 것 같다. 심지어 바랬다고 해도 그냥 미안하게 생각하고 나만의 감상포인트를 놓치지 말아야겠다. 이것도 정체성을 잃지 않으려는 관객의 필사적인 노력으로 보아주기를 바래본다.</p>
</section>
</div>
</section>
<footer>Coptright©Allright Reserved.</footer>
</body>
</html>
========= 정답 ↓ ==========
외부스타일 사용
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">
<title>Document</title>
<link rel="stylesheet" href="tiger.css">
</head>
<body>
<div id="wrapper">
<header>
<h1>
<strong>호랑이</strong>를 <span>주제</span>로 한 <em>민화</em>
</h1>
</header>
<div class="container clearfix">
<ul class="menu">
<li><a href="#">그림의 작가</a></li>
<li><a href="#">그림의 시대</a></li>
<li><a href="#">그림의 재료</a></li>
<li><a href="#">그림의 주인공</a></li>
<li><a href="#">그림의 활용</a></li>
</ul>
<div class="content">
<h2>승운용호도</h2>
<p>사람 이름 같기도 한 이 그림을 처음 보았을 때 티셔츠에 새길 그림을 일러스트레이터로 작업 중이었다. 비록
그림을 보며 원본대로 그려내는 작업이었지만 즐거웠다. 용과 겨루는 황금빛 호랑이의 모습이 용맹하기도 했지만 내게는 약간
귀여워 보였고 무엇보다 순수해 보였다. 어둠 속에서 나타난 비겁한 용보다는 맑은 물을 튀며 신성한 기운을 드러내는 우리
호랑이에서 무한한 애정을 느꼈기 때문이다.</p>
<h2>길상백호</h2>
<p>호랑이 그림은 예로부터 아래로 내려오는 것보다 위로 올라가는 형상이 더 좋다고 하였다. 하지만 이 그림은
달랐다. 아래로 내려오고 있기는 하지만 윤기나는 등의 털과 그윽하게 쳐다보는 두 눈은 백호의 여유로움을 충분히 공감할 수
있게 해주었기 때문이다. 채도가 내려앉아 버린 백호의 그림이지만 건조해 보이기보다는 은빛으로 촉촉해 보이는 호랑이의
자태에 반했다고 할까? 알록달록함이 주는 아기자기함은 없지만 세련된 무채색에 다부지게 밟아 짚은 앞발에서 오히려 나를
지켜주는 든든함까지 느껴진다. 호랑이가 밟은 풀잎들에서도 우리를 한 공간 안에 무사히 존재하게 하는 안정감이 있는
듯하다. 그림을 감상할 때 그 시대적 배경과 소재의 재질 등을 함께 감상하여 아는 즐거움을 늘려야 하겠지만 나는 아무
부수적인 요소들을 제하고 오로지 내 눈과 그림이 서로 교감하여 빚어내는 상상의 공간을 좋아한다. 시대를 알고 의도를 아는
것도 중요하겠지만 작가가 우리에게 오로지 늘 같은 그것만 바라지는 않았을 것 같다. 심지어 바랬다고 해도 그냥 미안하게
생각하고 나만의 감상포인트를 놓치지 말아야겠다. 이것도 정체성을 잃지 않으려는 관객의 필사적인 노력으로 보아주기를
바래본다.</p>
</div>
</div>
<footer>
<address>Copyright © Allright Reserved.</address>
</footer>
</div>
</body>
</html>
외부스타일 :
/* common style */
.clearfix::after {
content: '';
display: block;
clear: both;
}
body {
font-size: 13px;
line-height: 1.5;
font-family: '굴림', gulim, serif;
color: #333;
background: #666;
}
#wrapper {
background: orange;
width: 60%;
margin: 0 auto;
}
/* header style */
header {
background: #123456;
}
header h1 {
font-size: 30px;
font-weight: 700;
color: #cc0;
text-align: center;
font-family: '휴먼모음'Gungseo, cursive, serif;
}
header h1 strong {
font-style: 3em;
color: #fff;
}
header h1 span {
font-size: 1.5em;
}
header h1 em {
font-size: 2em;
color: #ccc;
}
/* container style */
.container {
background: #ccc;
}
.container .menu{
width: 20%;
float:left;
padding: 20px;
box-sizing: border-box;
}
.container .menu li {
padding: 5px 0;
}
.container .menu li a{
color:black;
}
.container .menu li a:hover {
color:#662;
border-bottom: 1px dashed #662;
}
.container .content {
width: 80%;
float:right;
}
.container .content {
background: white;
}
.container .content h2{
background: #800;
color:#cc0;
font-size: 25px;
font-weight: 700;
font-family: '궁서', Gungseo, cursive, serif;
padding: 5px 20px;
}
.container .content p{
padding: 20px;
text-align: justify;
}
/* footer style */
footer {
background: #aaa;
padding: 10px 20px;
}
footer address {
color: #000;
}