1번 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.clearfix::after {
content:'';
display: block;
clear: both;
}
.container {
width: 500px;
height: 300px;
background: pink;
border: 2px solid gray;
}
div .left-top {
color: green;
font-size: 30px;
text-align: left;
margin-left: 20px;
}
ul li {
font-size: 30px;
list-style: none;
line-height: 40px;
font-weight: 150;
}
ul .line {
color: blue;
font-weight: 200;
text-decoration: underline;
}
ul .right-top {
color: blue;
font-size: 30px;
font-weight: 200;
text-decoration: underline;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
top: 26px;
left: 400px;
}
</style>
</head>
<body>
<div class="container clearfix">
<h1 class="left-top">동물병원 24시</h1>
<ul class="clearfix">
<li>밥 먹이는 시간 지킬 것</li>
<li>길고양이 주사 맞히기</li>
<li class="line">눈 아픈 동물 목에 깔때기 씌우기</li>
<li>매일 목욕 시킬 것</li>
<li>이름없는 애들 이름 짓지 말기</li>
<div class="right-top clearfix">더보기</div>
</ul>
</div>
</body>
</html>
결과
결과
개선방향
- 우선 스타일에 클래스 지정해줄 때 가능한 자세하게 깊은 부모요소부터 적는 것이 좋을 것 같다. 따라서 좀 더 명시성을 키워서 오류를 피하도록
- 하이퍼링크 태그를 a태그를 사용해 추가하면 좋을 것 같다.
- 궂이 Height 지정없이 시도해 볼 수 있을 것 같다.
2번 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>
<!-- reset css -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">
<!-- custom css -->
<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>
CSS 코드
* {
box-sizing: border-box;
}
.clearfix::after {
content:'';
display: block;
clear: both;
}
body {
width: 1500px;
height: 1000px;
background: rgb(154, 153, 153);
}
body #wrapper {
width: 900px;
/* border: 2px solid white; */
margin: 0 auto;
}
header h1 {
/* border: 3px solid white; */
height: 150px;
background: navy;
margin: 0 ;
/* font-style: '휴먼모음 'cursive; */
font-size: 30px;
text-align: center;
padding: 30px 40px;
letter-spacing: 7px;
color: yellow;
}
h1 strong {
font-size: 80px;
color: #FFF;
}
span {
font-size: 50px;
color: yellow;
}
em {
font-size: 40px;
color: rgb(173, 173, 173);
}
div .menu {
/* border: 3px solid #000; */
background: #adabab;
width: 20%;
height: 540px;
float: left;
z-index: 111;
padding: 40px;
line-height: 30px;
}
div h2 {
/* border: 3px solid rgb(0, 0, 0); */
font-size: 28px;
letter-spacing: 3px;
padding: 10px 0px 10px 0px;
text-indent: 2%;
background: rgb(132, 18, 18);
color: yellow;
}
div p {
padding: 25px;
display: flex;
justify-content: center;
align-items: center;
line-height: 20px;
letter-spacing: 2px;
}
div .content {
background: #ffffff;
}
div .container {
background: #e3e3e3;
/* float: left; */
}
div footer {
padding: 1%;
background: #7c7c7c;
}
결과
결과
개선사항
- 역시 #wrapper까지 입력 등 으로 스타일 클래스에 명시성을 높여 주었으면 더 좋았을 것 같다.
- 바디전체에 %로 width을 잡아주고, 컨테이너또한 width를 %로 잡아준다음에 작업을 했으면 유연한 작업이 되었을 것 같다.
- 메뉴 또한 px이 아닌 %로 작업 해주었어도 괜찮았을 것 같다. 그렇게되면 height또한 필요 없었을 것 같다.