- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
반응형
<!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>레이아웃 표현</title>
<link href="https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css" rel="stylesheet">
<style>
*{
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
}
img {
vertical-align: top;
/* 인라인 구조 여백 없애기 */
}
.container{
width: 1160px;
margin: 0 auto;
padding: 0 20px;
/* background-color: rgba(0,0,0,0.3); */
}
.nexon {
font-family: 'NexonLv1Gothic';
font-weight: 400;
}
.section {
padding: 120px 0;
text-align: center;
}
.section_h2 {
font-size: 50px;
font-weight: 400;
/* h2 기본 두께가 700 임 */
margin-bottom: 30px;
line-height: 1;
}
.section_desc {
font-size: 22px;
color: #666;
margin-bottom: 70px;
font-weight: 300;
}
/* image_wrap */
.image_warp {
/* background-color: rgba(0,0,0,0.3); */
}
.image_inner {
display: flex;
justify-content: space-between;
}
.image_inner .image {
width: 570px;
height: 370px;
background-color: #ccc;
position: relative;
}
.image_body {
position: absolute;
left: 0;
bottom: 0;
color: #fff;
text-align: left;
padding: 30px;
}
.image_body .title {
font-size: 32px;
line-height: 1;
margin-bottom: 15px;
}
.image_body .desc {
margin-bottom: 15px;
line-height: 1.5;
padding-right: 20%;
}
.image_body .btn {
display: inline-block;
color: #fff;
background-color: rgba(0,0,0,0.5);
padding: 10px 30px;
}
</style>
</head>
<body>
<section class="image_warp section nexon">
<div class="container">
<h2 class="section_h2">반려묘을 키우는 방법</h2>
<p class="section_desc">반려묘을 키우는 것은 책임감 있는 일입니다.</p>
<div class="image_inner">
<article class="image">
<figure class="image_header">
<img src="/Rectangle 1.jpg" alt="경제적 능력">
</figure>
<div class="image_body">
<h3 class="title">경제적 능력</h3>
<p class="desc">반려묘가 아플떄 병원도 가야하고 사료,모래 끊이지 않게 공급해야함 아무튼 돈이 많이 들어감</p>
<a href="#" class="btn">자세히보기</a>
</div>
</article>
<article class="image">
<figure class="image_header">
<img src="/Rectangle 2.jpg" alt="고양이 알레르기">
</figure>
<div class="image_body">
<h3 class="title">고양이 알레르기</h3>
<p class="desc">고양이는 생각보다 털이 많이 날리는 동물임 천식있으시면 정말 신중하게 생각 해야함</p>
<a href="#" class="btn">자세히보기</a>
</div>
</article>
</div>
</div>
</section>
</body>
</html>완성
보통 홈페이지에서 많이 쓰이는 section 구조이다.
일단 html 과 css 만으로 구성을 했고 동적 요소는 다음에 자바스크립트를 이용해서 추가 할 예정입니다.
내가 생각 했을때 홈페이지를 구성할때 중요한건 구성인거 같다. 구성을 잘 짜야지 나중에 큰일이 없을꺼 같다.
구성을 잘못 짜면 나중에 유지보수 할떄 많이 힘들꺼 같다. 그리고 시멘틱 태그는 아직 쓰임새가 익숙하지 않다.
더 공부를 해야겠다.