728x90
반응형
텍스트 유형 사이트
완성 화면
코드 보기 / CSS
/* reset */
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color:#000;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
}
img {
vertical-align: top;
width: 100%;
}
.mt10 {margin-top: 10px !important;}
.mt20 {margin-top: 20px !important;}
.mt30 {margin-top: 30px !important;}
.mt40 {margin-top: 40px !important;}
.mt50 {margin-top: 50px !important;}
.mt60 {margin-top: 60px !important;}
.mt70 {margin-top: 70px !important;}
.mb10 {margin-bottom: 10px !important;}
.mb20 {margin-bottom: 20px !important;}
.mb30 {margin-bottom: 30px !important;}
.mb40 {margin-bottom: 40px !important;}
.mb50 {margin-bottom: 50px !important;}
.mb60 {margin-bottom: 60px !important;}
.mb70 {margin-bottom: 70px !important;}
/* 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__small {
font-size: 14px;
border-radius: 50px;
background-color: #AC43FF;
color: #fff;
padding: 1px 23px;
text-transform: uppercase;
margin-bottom: 20px;
display: inline-block;
}
.section__h2 {
font-size: 50px;
color: #000;
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;
}
.text__inner {
text-align: left;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.text__inner .text {
width: 32.3333333%;
border: 1px solid #f5f5f5;
padding: 90px 20px 20px 20px;
border-radius: 10px;
box-sizing: border-box;
margin-bottom: 20px;
transition: all 0.3s;
cursor: pointer;
position: relative;
}
.text__inner .text:hover {
background-color: #ece0f8;
}
.text__inner .text::before {
content: '';
width: 60px;
height: 60px;
background-color: rgba(147, 87, 245, 0.76);
background-image: url(../asset/img/textType01_01.svg);
background-repeat: no-repeat;
background-position: center;
position: absolute;
left: 20px;
top: 20px;
border-radius: 50%;
}
.text__inner .text::after {
content: '';
}
.text__title {
font-size: 24px;
margin-bottom: 10px;
}
.text__desc {
font-size: 16px;
color: #666;
margin-bottom: 15px;
line-height: 1.5;
}
.text__btn {
float: right;
position: relative;
padding-right: 20px;
}
.text__btn:hover::before {
transform: rotate(360deg);
}
.text__btn::before {
content: '';
position: absolute;
right: 0;
top: 0;
width: 15px;
height: 15px;
background-image: url(../asset/img/icon_plus.svg);
transition: all 0.3s;
}
코드 보기 / HTML
<section class="text__wrap section center nexon">
<div class="container">
<span class="section__small">notice</span>
<h2 class="section__h2 mb70">About the Milky way</h2>
<div class="text__inner">
<div class="text">
<h3 class="text__title">명칭 및 어원</h3>
<p class="text__desc">우리 은하의 명칭은 “Milky Way(밀키 웨이)”입니다. 그러나 밀키 웨이는 우리 은하 뿐 아니라 은하수 자체를 가리키기도 합니다. 은하수들도 각각의 명칭이 있습니다.</p>
<a class="text__btn" href="#">더 보기</a>
</div>
<div class="text">
<h3 class="text__title">갤러틱 할로(Galactic Halo)</h3>
<p class="text__desc">은하 중심부를 둘러싸고 있는 둥근 모양의 거대한 구조물 입니다. 은하 중심부에 위치한 은하 플레어와 달리, 할로는 무수히 많은 별, 암석체, 가스, 먼지 등이 혼합된 구조물입니다.</p>
<a class="text__btn" href="#">더 보기</a>
</div>
<div class="text">
<h3 class="text__title">은하 헤일로(Galaxy Hale)</h3>
<p class="text__desc">은하 헤일로는 아메리칸 천문학자 조지 엘리슨 헤일이 처음으로 제안한 은하 분류 체계입니다. 이 체계는 은하를 크기와 모양에 따라 4가지 유형으로 분류하고 있습니다.</p>
<a class="text__btn" href="#">더 보기</a>
</div>
<div class="text">
<h3 class="text__title">우리 은하의 구조</h3>
<p class="text__desc">우리 은하는 막대 나선 은하에 속하며, 허블의 은하 분류에 따르면 Sbc(중심에 막대가 존재하고 나선팔이 느슨히 감긴 형태)입니다. 막대 구조는 대부분 붉고 오래된 항성들로 구성되어 있습니다.</p>
<a class="text__btn" href="#">더 보기</a>
</div>
<div class="text">
<h3 class="text__title">우리 은하의 블랙홀</h3>
<p class="text__desc">우리 은하를 구성하는 별들은 은하의 중심부를 중심으로 나선팔 모양으로 공전합니다. 이는 은하 중심에 초대질량 블랙홀이 있기 때문이라 여겨집니다.</p>
<a class="text__btn" href="#">더 보기</a>
</div>
<div class="text">
<h3 class="text__title">우리 은하의 팔</h3>
<p class="text__desc">우리 은하에는 네 개의 큰 나선 팔이 있다고 여겨졌으나, 2008년에 스피처 적외선 망원경을 이용하여 1억 개 이상의 별의 분포를 분석한 결과, 단지 2개의 나선 팔만이 구분되었습니다.</p>
<a class="text__btn" href="#">더 보기</a>
</div>
</div>
</div>
</section>
.text__inner {
text-align: left;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}:text__inner 클래스(class)는 텍스트 블록들을 감싸는 부모 요소를 나타낸다.
이 클래스는 왼쪽 정렬이 되며(text-align), 텍스트 블록들은 flexbox를 이용해(display: flex, flex-wrap: wrap) 감싸져서 각각의 텍스트 블록 사이에 공간이 생기도록 하는 속성(justify-content: space-between)이 적용된다.
.text__inner .text {
width: 32.3333333%;
border: 1px solid #f5f5f5;
padding: 90px 20px 20px 20px;
border-radius: 10px;
box-sizing: border-box;
margin-bottom: 20px;
transition: all 0.3s;
cursor: pointer;
position: relative;
}
: text__inner 클래스 안의 text 클래스는 텍스트 블록을 나타낸다.
text__inner .text 클래스는 각각의 텍스트 블록이 32.33%의 너비를 가지고 있으며(width:32.33%), 테두리가 (border: 1px) 있고, 패딩(텍스트를 기준으로 주는 여백, padding: 90px(상/위) 20px(우/오른쪽) 20px(하/아래) 20x(좌/왼쪽)))과 보더 라운딩(테두리를 둥글게 하는 것, border-radius : 10px), 마진 등의 속성을 준다.
마우스가 해당 텍스트 블록 위에 올라갔을 때 배경색이 변하도록 (:hover) 속성을 주었다.
.text__btn {
float: right;
position: relative;
padding-right: 20px;
}: text__btn 요소는 오른쪽 끝으로 float 속성을 이용해 위치시킨다.
이어서 position 속성을 relative로 지정하여 text__btn 요소의 자식 요소의 배치를 위한 기준점으로 삼는다.
또한 padding-right 속성을 사용하여 오른쪽 패딩 값을 20px 지정해주었다.
.text__btn:hover::before {
transform: rotate(360deg);
}
.text__btn::before {
content: ' ';
position: absolute;
right: 0;
top: 0;
width: 15px;
height: 15px;
background-image: url(../asset/img/icon_plus.svg);
transition: all 0.3s;
}
: text__btn의 가상 요소이다.
content: ' '; 속성으로 컨텐츠를 추가하고, position 속성을 absolute로 설정하여 해당 요소의 위치를 text__btn 요소에서 상대적으로 지정한다.이 가상 요소의 위치는 right: 0과 top: 0으로 오른쪽 상단 모서리에 위치 시킨다.
width, height 속성은 각각 가상 요소의 너비와 높이를 15px로 설정한다.
background-image 속성은 가상 요소의 배경 이미지(까만 동그라미 배경의 +)를 지정한다.
또한 transiton 속성을 이용해 마우스가 까만 동그라미 배경의 + 요소 위에 마우스가 올라갔을 때의 변화를 부드럽게 처리할 수 있도록 설정하고,
transsform 속성을 이용해 가상 요소가 360도 회전 시키는 애니메이션 효과를 주었다.