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>카드유형01</title>
<link herf="https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css" rel="stylesheet">
<style>
/* reset */
* {
margin: 0;
padding: 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.1); */
}
.nexon {
font-family: 'NexonLv1Gothic';
font-weight: 400;
}
.section {
padding: 120px 0;
}
.section.center {
text-align: center;
}
.section__h2 {
font-size: 50px;
font-weight: 400;
margin-bottom: 30px;
line-height: 1;
}
.section__desc {
font-size: 22px;
color: #666;
margin-bottom: 70px;
font-weight: 300;
line-height: 1.5;
}
/* card__type */
.card__wrap {
height: 900px;
}
.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;
background-image: url("data:image/svg+xml,%3Csvg width='32' height='8' viewBox='0 0 32 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.5ZM31.3536 4.35355C31.5488 4.15829 31.5488 3.84171 31.3536 3.64645L28.1716 0.464466C27.9763 0.269204 27.6597 0.269204 27.4645 0.464466C27.2692 0.659728 27.2692 0.976311 27.4645 1.17157L30.2929 4L27.4645 6.82843C27.2692 7.02369 27.2692 7.34027 27.4645 7.53553C27.6597 7.7308 27.9763 7.7308 28.1716 7.53553L31.3536 4.35355ZM1 4.5H31V3.5H1V4.5Z' fill='black'/%3E%3C/svg%3E");
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">오사카시는 일본 오사카부에 있는 도시로 일본에서 도쿄 다음으로 규모가 큽니다. 도시 단위의 경제 규모로 세계 3위. 도시권 인구로 세계 12위의 메가 시티로 평가됩니다.</p>
<div class="card__inner">
<article class="card">
<figure class="card__header">
<img src="../asset/img/cardType01_01.jpg" 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/cardType01_02.jpg" 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/cardType01_03.jpg" alt="오사카 여행하기">
</figure>
<div class="card__body">
<h3 class="title">유니버셜스튜디오</h3>
<p class="desc">유니버설 스튜디오 재팬은 가족, 연인, 친구 모두에게 큰 사랑을 받는 곳입니다. 유명한 영화를 테마로 꾸며진 테마파크로 많은 재미있는 놀이기구도 탈 수 있습니다.</p>
<a href="#" class="btn">자세히 보기</a>
</div>
</article>
</div>
</section>
</body>
</html>코드 보충설명
| background-repeat | 배경 이미지의 반복 여부와 반복 방향을 정한다. repeat : 가로 방향, 세로 방향으로 반복. repeat-x : 가로 방향으로 반복. repeat-y : 세로 방향으로 반복. no-repeat : 반복하지 않음. initial : 기본값으로 설정. inherit : 부모 요소의 속성값을 상속. |
| background-position | 배경 이미지의 위치를 정하는 속성 x-position y-position : 가로 위치와 세로 위치를 정한다. initial : 기본값으로 설정. inherit : 부모 요소의 속성값을 상속 . 위치 값으로 사용할 수 있는 것. 가로 위치 값 : left, center, right, 백분율, 길이 세로 위치 값 : top, center, bottom, 백분율, 길이 |
| line-height | 줄 높이를 정하는 속성 normal : 웹브라우저에서 정한 기본값. 보통 1.2. length : 길이로 줄 높이를 정함. number : 글자 크기의 몇 배인지로 줄 높이를 정함. percentage : 글자 크기의 몇 %로 줄 높이로 정함. |
| 선택자1 선택자2 | 태그 이름 사이에 공백을 넣은 선택자는 부모 태그 하위에 있는 태그에 스타일을 적용. div span{ ... } 처럼 태그 이름 뿐만 아니라 #main_content .box{ ... } 처럼 아이디와 클래스를 사용 가능. |
| alt | <img> 태그의 alt 속성은 이미지를 보여줄 수 없을 때 해당 이미지를 대체할 텍스트를 명시 |