- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
반응형
피그마를 이용한 그리드 지정 해준 화면 입니다.
- 넓이를 1920 으로 지정 해주고 높이를 1058로 지정해 주었습니다.
- 그리드 카운트를 12개로 설정하고 마진을 380으로 지정합니다. 그럼 분홍색으로 12개 선이 생깁니다.
- 글자의 line-hegiht를 1.5 로 피그마는 150 으로 넣어 주면 됩니다.
HTML 코드입니다.
<body>
<section class="image_wrap section center nexon">
<div class="container">
<h2 class="section_h2">고양이를 키우는 방법</h2>
<p class="section_desc">반려묘를 키울려면 돈과 열정과 시간과 관심도 많아야 합니다.</p>
<div class="image_inner">
<article class="image">
<figure>
<img src="../asset/img/imageType01_01.jpg" alt="경제적 능력">
</figure class="image_header">
<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="../asset/img/imageType01_02.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>css 코드입니다.
<style>
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
color: #000;
}
h1,h2,h3,h4,h5,h6{
font-weight: normal;
}
img{
vertical-align: top;
/* 화면 여백 없애기 */
width: 100%;
}
.mt10 {margin-top: 10px !important;}
.mt20 {margin-top: 20px !important;}
.mt30 {margin-top: 30px !important;}
.mt40 {margin-top: 40px !important;}
.mt50 {margin-top: 50px !important;}
.mt60 {margin-top: 60px !important;}
.mt70 {margin-top: 70px !important;}
.mb10 {margin-bottom: 10px !important;}
.mb20 {margin-bottom: 20px !important;}
.mb30 {margin-bottom: 30px !important;}
.mb40 {margin-bottom: 40px !important;}
.mb50 {margin-bottom: 50px !important;}
.mb60 {margin-bottom: 60px !important;}
.mb70 {margin-bottom: 70px !important;}
.container {
width: 1160px;
margin: 0 auto;
padding: 0px 20px;
/* background-color: rgba(0,0,0,0.1); */
}
.nexon {
font-family: 'NexonLv1Gothic';
font-weight: 400;
}
.section {
padding: 120px 0;
}
.center {
text-align: center;
}
.section_h2 {
font-size: 50px;
font-weight: 400;
margin-bottom: 30px;
line-height: 1;
}
.section_desc {
font-size: 22px;
color: #666666;
margin-bottom: 70px;
font-weight: 300;
}
/* image_type */
.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 {
margin-bottom: 15px;
font-size: 32px;
line-height: 1;
}
.image_body .desc {
margin-bottom: 15px;
line-height: 1.5;
padding-right: 22%;
}
.image_body .btn {
color: #fff;
background-color: rgba(0, 0, 0, 0.5);
padding: 10px 30px;
display: inline-block;
}
</style>css을 보시면 .container 위까지 리셋과 많이 쓰이는 css 를 적어놨습니다.
nexon 을 보시면 폰트를 따로 관리하는 코드 입니다.
img에서 vertial-align 은 top으로 설정했는데 화면 여백 없애는 방법입니다. 실무에서 자주 쓰입니다.
여기에서는 폰트를 링크 방식으로 연결했습니다. 그리고 HTML을 보시면 웹 표준성에 준수하게 만들었습니다.
완성된 화면입니다.
https://ture403.github.io/web2023/site/imageType/imageType01.html