728x90
텍스트 유형 홈페이지 만들기
텍스트 유형 홈페이지를 만들어 보겠습니다~
스프라이트
스프라이트는 아래와 같은 이미지를 이용해 하나의 이미지로 다양하게 사용해보겠습니다!
FIGMA
HTML
display:flex를 통해 하단의 HTML을 작성해서 기초가 될수있는 뼈대를 만들어 보도록 하겠습니다!
<body class="nexon">
<section class="container section">
<p>한국에서 가장 유명한 온라인 게임과 유형을 알아보자!</p>
<h2>대표적인 온라인 게임들.</h2>
<div class="card_cont1">
<div class="card_box one">
<P>횡스크롤 RPG 게임을 대표하는 한국의 게임인 ‘메이플스토리'는 남녀노소가 다 좋아하는 모든 요소들을 고루 갖춰놓고 서비스..</P>
<div class="test">
<div class="icon_box icon_1"><span class="ir">김미정 프로필 사진</span></div>
<div>
<div class="profile_cont">
<span class="profile_name">김미정</span>
<span class="profile_type">학생</span>
</div>
<div class="profile_rating_cont">
<div class="star_box star"></div>
<div class="star_box star"></div>
<div class="star_box star"></div>
<div class="star_box star"></div>
<div class="star_box un_star"></div>
</div>
</div>
</div>
<div class="verifying_button">자세히보기</div>
</div>
<div class="card_box two">
<P>오펜스 게임이란 디펜스 게임의 반대 개념으로 내가 상대방 진영에 쳐들어 가는 게임이며 요즈음 우리니라에서는 이런 종류의..</P>
<div class="test">
<div class="icon_box icon_2"><span class="ir">박대기 프로필 사진</span></div>
<div>
<div class="profile_cont">
<span class="profile_name">박대기</span>
<span class="profile_type">기자</span>
</div>
<div class="profile_rating_cont">
<div class="star_box star"></div>
<div class="star_box star"></div>
<div class="star_box un_star"></div>
<div class="star_box un_star"></div>
<div class="star_box un_star"></div>
</div>
</div>
</div>
<div class="verifying_button">자세히보기</div>
</div>
<div class="card_box three">
<P>디펜스 게임이란 적들이 계속해서 들어오는것을 유저가 수시로 막고 지키는것을 의미하는 게임이며, ‘팔라독'과 같은 대표적인 ...</P>
<div class="test">
<div class="icon_box icon_3"><span class="ir">오진다 프로필 사진</span></div>
<div>
<div class="profile_cont">
<span class="profile_name">오진다</span>
<span class="profile_type">고등학생</span>
</div>
<div class="profile_rating_cont">
<div class="star_box star"></div>
<div class="star_box star"></div>
<div class="star_box star"></div>
<div class="star_box star"></div>
<div class="star_box un_star"></div>
</div>
</div>
</div>
<div class="verifying_button">자세히보기</div>
</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(공통) */
body{
background-color: #F6F8FD;
}
.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{
/* background-color: #ffffff; */
width: 100%;
height: 430px;
display: flex;
justify-content: space-between;
}
.card_cont2{
margin-top: 20px;
}
.card_box{
width: 373px;
height: 430px;
background-color: #ffffff;
/* border: 1px solid #ededed; */
border-radius: 12px;
padding: 30px;
position: relative;
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: 140px;
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.svg) center no-repeat;
background-size: 800px;
border-radius: 100px;
margin-right: 10px;
border: 1px solid #ededed;
}
.icon_1{
background-position: 0px;
}
.icon_2{
background-position: -114px; /*112*/
}
.icon_3{
background-position: -227px; /*224*/
}
.icon_4{
background-position: -336px;
}
.icon_5{
background-position: -448px;
}
.icon_6{
background-position: -549px;
}
/* 프로파일 */
.profile_cont{
height: 31px;
display: flex;
align-items: flex-end;
}
.profile_rating_cont{
display: flex;
height: 31px;
align-items: flex-end;
}
/* 별점 */
.star_box{
width: 20px;
height: 20px;
background-color: #ededed;
background: url(img/test_icon_sprite.svg) center no-repeat;
background-size: 800px;
border-radius: 100px;
margin-right: 4px;
/* border: 1px solid #ededed; */
}
.star{
background-position: -665px;
background-position-y: -19px;
}
.un_star{
background-position: -731px;
background-position-y: -19px;
}
span.profile_name{
font-size: 24px;
font-weight: bold;
margin-right: 10px;
}
span.profile_type{
font-size: 18px;
font-weight: light;
}
/* 기타 */
.test{
display: flex;
justify-content: flex-start;
}
/* 자세히 보기 */
.verifying_button{
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 0%);
margin: 0 auto;
background-color: #4B57E3;
color: white;
width: 108px;
height: 28px;
border-radius: 50px;
text-align: center;
padding-top: 6px;
margin-bottom: 30px;
box-sizing: border-box;
}
.verifying_button:hover{
background-color: #232b80;
transition: all 0.25s;
}
.verifying_button:not(:hover){
transition: all 0.25s;
}
/* ir 효과 */
.ir {
display: block;
overflow: hidden;
font-size: 0;
line-height: 0;
text-indent: -9999px;
}
완성
와~~~~~~~~~~~우 설레는 마음으로 완성된 예시를 한번 봅시다!!
728x90
반응형
'SITE 제작' 카테고리의 다른 글
| 이미지/텍스트 유형 사이트 만들기! (12) | 2022.09.01 |
|---|---|
| 헤더 타입 사이트 만들기~ (17) | 2022.09.01 |
| 텍스트 유형 02를 만들러 가~~~~~보자고! (10) | 2022.08.30 |
| 텍스트 유형 01 만들어보자 얄루! (6) | 2022.08.30 |
| 이미지 유형 03 사이트 만들기! (13) | 2022.08.21 |
댓글