- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
반응형
피그마에서 작업한 화면입니다.
- 넓이를 1920 으로 지정 해주고 높이를 800로 지정해 주었습니다.
- 그리드 카운트를 12개로 설정하고 마진을 380으로 지정했습니다.
HTML 코딩 입니다.
<body>
<section class="card_wrap section nexon">
<div class="container">
<div class="card_inner">
<acticle class="card">
<span class="card_notice">notice</span>
<h1 class="nexon">고양이 종류 10가지</h1>
<h2 class="nexon">GPT한테 물어본 고양이 종류가 10가지가 있습니다.다음은 그 목록입니다.</h2>
<ul>
<li>샴 고양이 (Siamese Cat)</li>
<li>페르시안 고양이 (Persian Cat)</li>
<li>스코티시 폴드 고양이 (Scottish Fold Cat)</li>
<li>먼치킨 고양이 (Manx Cat)</li>
<li>시베리안 고양이 (Siberian Cat)</li>
<li>아비시니안 고양이 (Abyssinian Cat)</li>
<li>브리티시 쇼트헤어 고양이 (British Shorthair Cat)</li>
<li>미묘 (Munchkin Cat)</li>
<li>벵골 고양이 (Bengal Cat)</li>
<li>러시안 블루 고양이 (Russian Blue Cat)</li>
</ul>
</acticle>
<acticle class="card">
<figure class="card_header">
<img src="../asset/img/img_text_Type01.png" alt="샴 고양이">
</figure>
</acticle>
<acticle class="card">
<figure class="card_header">
<img src="../asset/img/img_text_Type02.png" alt="뱅갈 고양이">
</figure>
</acticle>
</div>
</div>
</section>
</body>- 저는 container 안에 card_inner로 감싸고 그안에 .card를 3개를 만들었습니다.
- 그리고 첫번쨰 글자를 넣어주고 2번쨰 3번쨰는 이미지를 넣었습니다.
- 첫번쨰 제목 부제목 그리고 li를 통해 리스트를 넣었습니다.
CSS 코드입니다.
/* reset */
*{
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%;
/* 화면 여백 없애기 */
}
/* common */
.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;
}
/* card_type */
.card_inner {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.card_inner .card {
width: 32.333%;
/* background-color: #f8f8f8; */
}
.card {
width: 373px;
height: 500px;
}
.card h1 {
font-style: normal;
font-size: 50px;
line-height: 1.2;
padding-right: 50px;
margin-bottom: 25px;
color: #000;
}
.card h2 {
font-style: normal;
font-size: 16px;
line-height: 1.5;
color: #666;
padding-right: 10px;
margin-bottom: 15px;
}
.card ul li {
font-style: normal;
font-size: 16px;
line-height: 1.55;
color: #666;
margin-left: 17px;
}
.card_notice {
font-size: 14px;
border-radius: 30px;
background-color: #d85050;
color: #fff;
padding: 0 23px;
text-transform: uppercase;
display: inline-block;
margin-bottom: 16px;
line-height: 1.4;
}- reset을 지정해 주었고 그다음 전에 있던 .container, .nexon, .section 을 전에 있던 그대로 가져왔습니다.
- 그다음 하나하나 피그마에서 지정해준 값으로 넣어주면서 코딩을 했습니다.
완성된 이미지 입니다.
완성된 코드 보기
https://github.com/ture403/web2023/blob/main/site/image_text_type/image_text_type.html
GitHub - ture403/web2023: 수업시간예제입니다.
수업시간예제입니다. Contribute to ture403/web2023 development by creating an account on GitHub.
github.com
완성된 이미지 사진 크게 보기
https://ture403.github.io/web2023/site/image_text_type/image_text_type.html