클릭
버튼을 클릭하면 명언이 나와요
-이름이 나와요
첫 웹퍼블리싱 작업 결과물
코드
<!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>카드 유형01</title>
<!-- 폰트 -->
<style>
/* reset */
* {
padding: 0;
margin: 0;
}
a {
text-decoration: none;
color: #000;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
}
img {
/* 이미지 적용시 여백이 남았을때 사용 해야함. */
vertical-align: top;
}
/* common */
.container {
width: 1160px;
margin: 0 auto;
padding: 0 20px;
/* background-color: rgba(0,0,0,0.3); */
}
.section.center{
text-align: center;
}
.nexon {
font-family: "NexonLv1Gothic";
/* h2태그의 기본 성질은 700[bold]로 되어있음. */
font-weight: 400;
}
img {
width: 100%;
vertical-align: top;
}
/* style */
.section {
padding: 120px 0;
}
.section__h2 {
font-size: 50px;
font-weight: 400;
margin-bottom: 30px;
line-height: 1;
}
.section .section__desc{
font-size: 22px;
color: #666;
margin-bottom: 70px;
font-weight: 300;
line-height: 1.5;
}
/* card__type */
.card__wrap {}
.card__inner {
display: flex;
justify-content: space-between;
}
.card__inner .card {
width: 32.3333%;
background-color: #f8f8f8;
}
.card__header {}
.card__body {
padding: 24px;
}
.card__body .title {
font-size: 24px;
margin-bottom: 15px;
}
.card__body .desc {
font-size: 16px;
color: #666;
line-height: 1.5;
margin-bottom: 15px;
}
.card__body .btn {
padding-right: 40px;
/* svg 불러내는 방법 */
/* 구글로 svg 파일을 옮긴다. --> 개발자 도구 --> 소스 -> svg파일 내용 복사 -> https://yoksel.github.io/url-encoder/ 에 넣어서 바꾼다음 -> Ready for CSS 붙여넣기*/
background-image: url("data:image/svg+xml,%3Csvg width='40' height='8' viewBox='0 0 40 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 3.5C0.723858 3.5 0.5 3.72386 0.5 4C0.5 4.27614 0.723858 4.5 1 4.5V3.5ZM39.3536 4.35355C39.5488 4.15829 39.5488 3.84171 39.3536 3.64645L36.1716 0.464466C35.9763 0.269204 35.6597 0.269204 35.4645 0.464466C35.2692 0.659728 35.2692 0.976311 35.4645 1.17157L38.2929 4L35.4645 6.82843C35.2692 7.02369 35.2692 7.34027 35.4645 7.53553C35.6597 7.7308 35.9763 7.7308 36.1716 7.53553L39.3536 4.35355ZM1 4.5H39V3.5H1V4.5Z' fill='black'/%3E%3C/svg%3E%0A");
background-repeat: no-repeat;
background-position: right center;
}
</style>
</head>
<body>
<section class="card__wrap section nexon">
<div class="container">
<h2 class="section__h2">피자의 종류</h2>
<p class="section__desc">
피자는 원형 또는 사각형의 모양으로 구운 이태리식 반죽에 토마토 소스와 치즈, 그리고 다양한 토핑을 올린 음식입니다.
대표적인 토핑으로는 페퍼로니, 양파, 체다치즈, 토마토, 버섯, 올리브, 그리고 소세지 등이 있습니다.
</p>
<div class="card__inner">
<article class="card">
<figure class="card__header">
<img src="../asset/img/cardType1.jpg" alt="콤비네이션 피자">
</figure>
<div class="card__body">
<h3 class="title">피자의 효능</h3>
<p class="desc">다양한 영양소 제공: 피자는 탄수화물, 단백질, 지방, 비민, 미네랄 등의 다양한 영양소를 제공합니다. 이 중에서도 토마토 소스는 비타민 C와 A, 칼슘 등을 함유하고 있으며, 치즈는 단백질과</p>
<a href="#" class="btn">자세히 보기</a>
</div>
</article>
<article class="card">
<figure class="card__header">
<img src="../asset/img/cardType2.png" alt="불고기 피자">
</figure>
<div class="card__body">
<h3 class="title">빠른 식사</h3>
<p class="desc">빠른 식사: 피자는 빠르게 요리가 되어 빠르게 식사를 할 수 있습니다. 또한 배달이나 픽업 서비스도 있어서 간편하게 주문할 수 있습니다.
소셜 먹방에 좋음: 피자는 대개 크기가 크기 때문</p>
<a href="#" class="btn">자세히 보기</a>
</div>
</article>
<article class="card">
<figure class="card__header">
<img src="../asset/img/cardType3.png" alt="치즈 피자">
</figure>
<div class="card__body">
<h3 class="title">행사나 모임</h3>
<p class="desc">행사나 모임에 적합: 피자는 파티나 모임에서 적합한 음식 중 하나입니다. 크기가 크기 때문에 많은 사람들에게 나눠 먹을 수 있고, 다양한 토핑을 추가하여 다양한 취향에 맞게 준비할 수 있</p>
<a href="#" class="btn">자세히 보기</a>
</div>
</article>
</div>
</div>
</section>
</body>
</html>
코드 설명
1.section 태그는 현재 section부분을 전부 가집니다.
2.container는 만든 작품을 가운데로 옮겨줍니다.
3.h2태그는 section 태그이니 2번째 제목을 의미합니다.
4.p태그로 설명을 써놓았습니다.
5.div태그의 .card__inner부분은 이미지 2개를 flex하기전에 담아두는 그릇입니다.
6.article태그의 .card는 이미지, h3, p, a태그를 포함하고 있습니다.
7.article태그의 .card를 2개 만듭니다.
8.부모인 card__inner에 display:flex를 줍니다.(display: flex)는 부모에게 할당을 해야합니다.
(ㅎ_ㅎ 이제 슬슬 피그마로 작업하면서 1부분 1부분 웹퍼블리싱을 시작하네요)
CSS코드 설명
| padding | 안쪽 여백을 지정할사용 합니다. |
| margin | 바깥 여백을 지정합니다. |
| h1,h2,h3,h4,h5,h6 | 각 부분의 제목을 나타낼떄 주로 사용합니다. |
| text-align | 글씨 위치를 지정합니다.(left, center, right) |
| font-family | 글꼴을 쓸때 사용합니다. |
| font-weight | 글씨 굵기를 지정합니다.(100~700) |
| font-size | 글씨 크기를 지정합니다 |
| line-height | 글 위아래 높낮이를 지정합니다. |
| color | 글씨 색상을 의미합니다. |
| background-image | 이미지를 불러옵니다. |
| background-repeat | 불러온 이미지의 반복 여부를 결정합니다. |
| background-position | 가져온 이미지의 위치를 지정합니다. |