728x90
텍스트 유형 홈페이지 만들기
텍스트 유형 홈페이지를 만들어 보겠습니다~
스프라이트
스프라이트는 아래와 같은 이미지를 이용해 하나의 이미지로 다양하게 사용해보겠습니다!
HTML
display:flex를 통해 하단의 HTML을 작성해서 기초가 될수있는 뼈대를 만들어 보도록 하겠습니다!
<body class="nexon">
<section class="container section">
<p>한국에서 가장 유명한 온라인 게임과 유형을 알아보자!</p>
<h2>대표적인 온라인 게임들.</h2>
<div class="card_cont1">
<div class="card_box one">
<div class="icon_box icon_1"><span class="ir">망치 아이콘</span></div>
<h3>메이플스토리</h3>
<P>횡스크롤 RPG 게임을 대표하는 한국의 게임인 ‘메이플스토리'는 남녀노소가 다 좋아하는 모든 요소들을 고루 갖춰놓고 서비스..</P>
<span>더보기</span>
</div>
<div class="card_box two">
<div class="icon_box icon_2"><span class="ir">하트 아이콘</span></div>
<h3>횡스크롤 RPG</h3>
<P>횡스크롤 알피지란 왼쪽에서 오른쪽으로 이동하며 즐길 수 있는 게임을 의미하며 대표적으로는 ‘메이플스토라', ‘귀혼', 기타등등...</P>
<span>더보기</span>
</div>
<div class="card_box three">
<div class="icon_box icon_3"><span class="ir">나침반 아이콘</span></div>
<h3>레이싱 게임</h3>
<P>레이싱 게임이란 이름에서 나타나듯 달리면서 하는 게임을 지칭하며 보통의 널리 알려진 대표적인 게임으로는 ‘카트라이더', ‘레..</P>
<span>더보기</span>
</div>
</div>
<div class="card_cont2">
<div class="card_box one">
<div class="icon_box icon_4"><span class="ir">게임 아이콘</span></div>
<h3>슈팅게임</h3>
<P>총이나 어떠한 개체를 발사하며 상대방의 hP를 깎는것을 뜻하며 세간에 알려진 대표적인 온라인 게임은 ‘서든 어택'..</P>
<span>더보기</span>
</div>
<div class="card_box two">
<div class="icon_box icon_5"><span class="ir">말풍선 아이콘</span></div>
<h3>디펜스 게임</h3>
<P>디펜스 게임이란 적들이 계속해서 들어오는것을 유저가 수시로 막고 지키는것을 의미하는 게임이며, ‘팔라독'과 같은 대표적인 ...</P>
<span>더보기</span>
</div>
<div class="card_box three">
<div class="icon_box icon_6"><span class="ir">축구공 아이콘</span></div>
<h3>오펜스 게임</h3>
<P>오펜스 게임이란 디펜스 게임의 반대 개념으로 내가 상대방 진영에 쳐들어 가는 게임이며 요즈음 우리니라에서는 이런 종류의..</P>
<span>더보기</span>
</div>
</div>
</section>
</body>
CSS
웹표준을 준수하기 위해 하단의 ir효과를 프로파일 이미지 부분에 사용해 웹표준을 준수하도록 유의하며 작성합니다.
ir효과 예제 보기
/* ir 효과 */
.ir {
display: block;
overflow: hidden;
font-size: 0;
line-height: 0;
text-indent: -9999px;
}
CSS 코드 전체 보기
/* fonts */
@import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css');
.nexon {
font-family: 'NexonLv1Gothic';
font-weight: 400;
}
/* Reset */
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #000;
}
img {
width: 100%;
border-radius: 10px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: normal;
}
/* common(공통) */
.container {
width: 1160px;
padding: 0 20px;
margin: 0 auto;
}
.section {
padding: 120px 0;
/*위 아래 */
}
.section>h2 {
/* ">" 이걸로 section 안에 있는 h2선택 */
font-size: 50px;
line-height: 1;
/* 1이라고 적으면 auto랑 똑같음 */
text-align: center;
margin-bottom: 90px;
}
.section>p {
font-size: 22px;
font-weight: 300;
color: #666;
text-align: center;
margin-bottom: 10px;
}
/* card */
.card_cont1,
.card_cont2{
background-color: #ffffff;
width: 100%;
height: 260px;
display: flex;
justify-content: space-between;
}
.card_cont2{
margin-top: 20px;
}
.card_box{
width: 373px;
height: 260px;
background-color: #ffffff;
border: 1px solid #ededed;
padding: 20px;
box-sizing: border-box;
}
.card_box:hover{
background-color: #ededed;
}
.card_box h3{
margin-bottom: 10px;
font-size: 24px;
}
.card_box p{
line-height: 1.4;
margin-bottom: 20px;
font-size: 18px;
font-weight: lighter;
}
.card_box span{
font-size: 16px;
font-weight: lighter;
}
.card_box img{
width: 60px;
height: 60px;
margin-bottom: 10px;
}
.icon_box{
width: 60px;
height: 60px;
background-color: #ededed;
background: url(img/test_icon_sprite.png) center no-repeat;
background-size: 660px;
border-radius: 100px;
margin-bottom: 10px;
border: 1px solid #ededed;
}
.icon_1{
background-position: 0px;
}
.icon_2{
background-position: -112px;
}
.icon_3{
background-position: -224px;
}
.icon_4{
background-position: -336px;
}
.icon_5{
background-position: -448px;
}
.icon_6{
background-position: -549px;
}
/* ir 효과 */
.ir {
display: block;
overflow: hidden;
font-size: 0;
line-height: 0;
text-indent: -9999px;
}
완성
와~~~~~~~~~~~우 설레는 마음으로 완성된 예시를 한번 봅시다!!
728x90
반응형
'SITE 제작' 카테고리의 다른 글
| 텍스트 유형 03 만드는 법 궁금하시나요!? (14) | 2022.08.30 |
|---|---|
| 텍스트 유형 02를 만들러 가~~~~~보자고! (10) | 2022.08.30 |
| 이미지 유형 03 사이트 만들기! (13) | 2022.08.21 |
| 이미지 유형 02 만들어보기~~~~ (2) | 2022.08.17 |
| 이미지 유형_01 만들어보기~~ (2) | 2022.08.17 |
댓글