728x90
반응형
텍스트유형 01번
이번에 만들어볼 사이트입니다.
자세히보기가 들어가있는 형식의 사이트입니다.
피그마를 이용하여 이미지를 만들어 작업하였습니다.
CSS
이미지를 백그라운드 효과 방식으로 삽입하였습니다.
flex를 사용하고 justify-content를 사용하여 이미지를 정렬하였습니다.
자세히보기와 내용을 백그라운드 이미지 삽입 방식을 통해 이미지 위에 배치하였습니다.
/* font */
.nexon {
font-family: 'NexonLv1GothicLow';
}
/* reset */
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #000;
}
img {
width: 100%;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: normal;
}
/* common 다른 유형에도 기본적으로 들어감*/
.container {
width: 1200px;
padding: 0 20px;
margin: 0 auto;
min-width: 1160px;
overflow: hidden;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.section {
padding: 120px 0;
}
.section>h2 {
font-size: 50px;
line-height: 1;
text-align: center;
margin-bottom: 70px;
}
.section>p {
font-size: 22px;
font-weight: 300;
color: #666;
text-align: center;
margin-bottom: 70px;
}
.section>a {
text-align: center;
display: block;
font-size: 16px;
margin-bottom: 10px;
}
.container .image__article {
width: 28%;
margin-bottom: 20px;
transition: all 0.5s ease;
}
.container .image__article:hover {
background-color: #ccc;
}
.image__article h2 {
margin-bottom: 12px;
font-size: 24px;
}
.image__article p {
margin-bottom: 20px;
line-height: 1.4;
font-size: 18px;
}
.image__article span {
color: #000;
font-weight: 300;
}
HTML
HTML입니다. section으로 전체를 묶어서 사용하였고 이미지와 내용을 container 영역을 만들어서 article을 만들고 그안에 이미지와 내용을 삽입하였습니다.
<section id="imageType01" class="nexon section">
<a href="#">텍스트 유형01</a>
<h2>레이아웃 유형</h2>
<div class="container">
<article class="image__article">
<div class="image__icon">
<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="30" cy="30" r="30" fill="#FF9292" />
<path d="M38 24H22" stroke="white" stroke-width="1.5" stroke-linecap="round" />
<path d="M38 30H22" stroke="white" stroke-width="1.5" stroke-linecap="round" />
<path d="M38 36H22" stroke="white" stroke-width="1.5" stroke-linecap="round" />
</svg>
</div>
<h2>텍스트 유형</h2>
<p>텍스트 유형은 텍스트로만 이루어진 레이아웃 유형입니다. 오로지 글자만으로 정보를 전달하는 방법으로 깔끔하고 심플합니다.</p>
<span>
<a href="#">더보기</a>
</span>
</article>
<article class="image__article">
<div class="image__icon">
<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="30" cy="30" r="30" fill="#FFC092" />
<rect x="20" y="20" width="20" height="20" rx="5" stroke="white" stroke-width="1.5" />
<path
d="M20.0641 34.8897C19.727 35.1305 19.6489 35.5989 19.8897 35.9359C20.1305 36.273 20.5989 36.3511 20.9359 36.1103L20.0641 34.8897ZM39.5199 34.5762C39.8381 34.8413 40.311 34.7983 40.5762 34.4801C40.8413 34.1619 40.7983 33.689 40.4801 33.4238L39.5199 34.5762ZM25.0782 34.0782L24.5479 34.6085L25.0782 34.0782ZM20.9359 36.1103L23.1951 34.4966L22.3233 33.276L20.0641 34.8897L20.9359 36.1103ZM24.5479 34.6085L25.6211 35.6818L26.6818 34.6211L25.6085 33.5479L24.5479 34.6085ZM28.3789 35.6818L33.368 30.6927L32.3073 29.632L27.3182 34.6211L28.3789 35.6818ZM34.7827 30.6285L39.5199 34.5762L40.4801 33.4238L35.7429 29.4762L34.7827 30.6285ZM33.368 30.6927C33.752 30.3087 34.3655 30.2808 34.7827 30.6285L35.7429 29.4762C34.7297 28.6318 33.2399 28.6994 32.3073 29.632L33.368 30.6927ZM25.6211 35.6818C26.3827 36.4433 27.6173 36.4433 28.3789 35.6818L27.3182 34.6211C27.1425 34.7969 26.8575 34.7969 26.6818 34.6211L25.6211 35.6818ZM23.1951 34.4966C23.6128 34.1983 24.1849 34.2456 24.5479 34.6085L25.6085 33.5479C24.7271 32.6664 23.3376 32.5515 22.3233 33.276L23.1951 34.4966Z"
fill="white" />
<circle r="2" transform="matrix(-1 0 0 1 26 26)" stroke="white" stroke-width="1.5" />
</svg>
</div>
<h2>텍스트 유형</h2>
<p>텍스트 유형은 텍스트로만 이루어진 레이아웃 유형입니다. 오로지 글자만으로 정보를 전달하는 방법으로 깔끔하고 심플합니다.</p>
<span>
<a href="#">더보기</a>
</span>
</article>
<article class="image__article">
<div class="image__icon">
<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="30" cy="30" r="30" fill="#F9CD5B" />
<path
d="M36 34V36C36 38.2091 34.2091 40 32 40H27C24.7909 40 23 38.2091 23 36V24C23 21.7909 24.7909 20 27 20H32C34.2091 20 36 21.7909 36 24V26"
stroke="white" stroke-width="1.5" stroke-linecap="round" />
<path d="M39 33L41.2929 30.7071C41.6834 30.3166 41.6834 29.6834 41.2929 29.2929L39 27"
stroke="white" stroke-width="1.5" stroke-linecap="round" />
<path d="M41 30L29 30" stroke="white" stroke-width="1.5" stroke-linecap="round" />
</svg>
</div>
<h2>텍스트 유형</h2>
<p>텍스트 유형은 텍스트로만 이루어진 레이아웃 유형입니다. 오로지 글자만으로 정보를 전달하는 방법으로 깔끔하고 심플합니다.</p>
<span>
<a href="#">더보기</a>
</span>
</article>
<article class="image__article">
<div class="image__icon">
<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="30" cy="30" r="30" fill="#B5E44F" />
<path
d="M40 27V35C40 37.7614 37.7614 40 35 40H25C22.2386 40 20 37.7614 20 35V25C20 22.2386 22.2386 20 25 20H34"
stroke="white" stroke-width="1.5" stroke-linecap="round" />
<circle r="2" transform="matrix(-1 0 0 1 39 22)" stroke="white" stroke-width="1.5" />
<path d="M25 32.75L28.5 28.75L31.5 31.25L35 27.25" stroke="white" stroke-width="1.5"
stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<h2>텍스트 유형</h2>
<p>텍스트 유형은 텍스트로만 이루어진 레이아웃 유형입니다. 오로지 글자만으로 정보를 전달하는 방법으로 깔끔하고 심플합니다.</p>
<span>
<a href="#">더보기</a>
</span>
</article>
<article class="image__article">
<div class="image__icon">
<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="30" cy="30" r="30" fill="#92CAFF" />
<rect x="20" y="22" width="20" height="16" rx="5" stroke="white" stroke-width="1.5" />
<path d="M20 27.5H40" stroke="white" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round" />
<path d="M24 33.5H29" stroke="white" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
</div>
<h2>텍스트 유형</h2>
<p>텍스트 유형은 텍스트로만 이루어진 레이아웃 유형입니다. 오로지 글자만으로 정보를 전달하는 방법으로 깔끔하고 심플합니다.</p>
<span>
<a href="#">더보기</a>
</span>
</article>
<article class="image__article">
<div class="image__icon">
<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="30" cy="30" r="30" fill="#B592FF" />
<path
d="M23 21.5H37V37.4656C37 38.2959 36.0466 38.7645 35.3892 38.2574L34.0584 37.2307C33.7236 36.9725 33.2625 36.9527 32.9068 37.1813L31.0815 38.3547C30.4227 38.7783 29.5773 38.7783 28.9185 38.3547L27.0932 37.1813C26.7375 36.9527 26.2764 36.9725 25.9416 37.2307L24.6108 38.2574C23.9534 38.7645 23 38.2959 23 37.4656V21.5Z"
stroke="white" stroke-width="1.5" />
<path d="M27 27.5H30" stroke="white" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round" />
<path d="M21 21.5H39" stroke="white" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round" />
<path d="M27 31.5H30" stroke="white" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round" />
<path d="M33 27.5H33.5" stroke="white" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round" />
<path d="M33 31.5H33.5" stroke="white" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
</div>
<h2>텍스트 유형</h2>
<p>텍스트 유형은 텍스트로만 이루어진 레이아웃 유형입니다. 오로지 글자만으로 정보를 전달하는 방법으로 깔끔하고 심플합니다.</p>
<span>
<a href="#">더보기</a>
</span>
</article>
</div>
</section>
결과
반응형
'사이트 제작' 카테고리의 다른 글
| 텍스트 유형03 - 사이트 만들기 (5) | 2022.09.01 |
|---|---|
| 텍스트유형02 - 사이트만들기 (0) | 2022.09.01 |
| CSS 활용 - 이미지 유형03 (4) | 2022.08.21 |
| CSS활용 - 이미지 유형02 (3) | 2022.08.21 |
| CSS활용 - 이미지 유형01 (3) | 2022.08.21 |
