728x90
반응형
사이트 만들기
텍스트 유형의 사이트 만들기1 입니다.
피그마로 먼저 형태를 잡고 같은 모양으로 HTML과 CSS문서를 만들었습니다.
HTML
아이콘을 6개 만들었습니다.
<body>
<header>
<p class="sub">텍스트 유형 01</p>
<h2 class="tit">스크립트를 익히는 방법</h2>
</header>
<div class="container">
<div class="tb">
<div class="box">
<div class="img img1"></div>
<h3>검색 이펙트</h3>
<p>자바스크립트의 기본 메서드를 통해 검색 스크립트를 완성하는 튜토리얼입니다. 메서드를 통해 쉽게 검색을 만들수 있습니다.</p>
<a href="">더보기</a>
</div>
<div class="box">
<div class="img img2"></div>
<h3>퀴즈 이펙트</h3>
<p>기본 메서드를 통해 자바스크립트의 검색 스크립트를 완성하는 튜토리얼입니다. 메서드를 통해 쉽게 검색을 만들수 있습니다.</p>
<a href="">더보기</a>
</div>
</div>
<div class="tb">
<div class="box">
<div class="img img3"></div>
<h3>마우스 이펙트</h3>
<p>검색 스크립트를 완성하는 튜토리얼입니다. 자바스크립트의 기본 메서드를 통해 메서드를 검색을 쉽게 만들수 있습니다.</p>
<a href="">더보기</a>
</div>
<div class="box">
<div class="img img4"></div>
<h3>슬라이드 이펙트</h3>
<p>메서드를 통해 쉽게 검색을 만들수 있습니다. 자바스크립트의 기본 메서드를 통해 검색 스크립트를 완성하는 튜토리얼입니다. </p>
<a href="">더보기</a>
</div>
</div>
<div class="tb">
<div class="box">
<div class="img img5"></div>
<h3>패랠랙스 이펙트</h3>
<p>검색 스크립트를 완성하는 튜토리얼입니다. 자바스크립트의 기본 메서드를 통해 쉽게 검색을 만들수 있습니다. </p>
<a href="">더보기</a>
</div>
<div class="box">
<div class="img img6"></div>
<h3>게임 이펙트</h3>
<p>자바스크립트의 기본 메서드를 통해 검색 스크립트를 완성하는 튜토리얼입니다. 메서드를 통해 쉽게 검색을 만들수 있습니다.</p>
<a href="">더보기</a>
</div>
</div>
</div>
</body>
CSS
<style>
@import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css');
*{
font-family: 'NexonLv1Gothic';
margin: 0;
padding: 0;
}
header{
text-align: center;
margin-top: 120px;
}
header .sub{
margin-bottom: 10px;
font-size: 16px;
}
header .tit{
font-size: 48px;
margin-bottom: 60px;
}
.container{
margin: 0 auto;
width: 1160px;
display: flex;
justify-content: center;
}
.container>div{
width: 32%;
}
.box{
font-size: 16px;
height: 260px;
background-color: #fff;
margin: 30px 15px;
color: #666;
}
.box:hover{
background-color: #f5f5f5;
}
.box h3{
font-size: 20px;
margin-bottom: 20px;
color: #000;
}
.box .img{
width: 60px;
height: 60px;
border-radius: 50%;
background-color: aliceblue;
margin-bottom: 10px;
}
.img1{
background: url(/site/textType/icon01.jpg);
}
.img2{
background: url(/site/textType/icon02.jpg);
}
.img3{
background: url(/site/textType/icon03.jpg);
}
.img4{
background: url(/site/textType/icon04.jpg);
}
.img5{
background: url(/site/textType/icon05.jpg);
}
.img6{
background: url(/site/textType/icon06.jpg);
}
.box p{
margin-bottom: 20px;
font-size: 18px;
line-height: 1.4;
}
.box a{
color: #666;
}
</style>
결과
728x90
반응형
'사이트 | 레이아웃' 카테고리의 다른 글
| 텍스트 타입 사이트 만들기 03 (2) | 2022.09.01 |
|---|---|
| 텍스트 타입 사이트 만들기 02 (3) | 2022.09.01 |
| 사이트 만들기 - 이미지 타입 03 (4) | 2022.08.21 |
| 사이트 만들기 - 이미지 타입 02 (4) | 2022.08.17 |
| 사이트 만들기 - 이미지 타입01 (4) | 2022.08.17 |
댓글