[사이트 만들기]텍스트 유형 02

사이트 만들기 _ 텍스트 유형02

이번 시간은 텍스트 유형 두번째 시간입니다. 들어가기에 앞서 이번엔 레이아웃 배치를 원활하게 하기 위해서 dispaly:grid를 사용해서 작업했구요. 더보기링크가 없으므로 아이콘에 a링크를 부여할 예정입니다. 한번 따라가 보실까요

---

---

■ 그림으로 미리보기🎨

■ 핵심내용✍

- html 코드 -
<a href="#" class="icon"><span class="ir">icon</span></a>

- css 코드 -
.ir{
    overflow: hidden;
    position: absolute;
    width: 0;
    height: 0;
    line-height: 0;
    text-indent: -9999px;
}
.icon{
    background: url(img/text_type02.svg) no-repeat;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-bottom: 10px;
    display: block;
}

1유형에서는 '더보기'가 존재해서 a링크를 활용해주면 되었지만, 이번시간엔 더보기링크에 해당하는 텍스트가 없으므로 아이콘에 임의로 더보기링크를 만들어 주었습니다. 그런데 시각적으로는 아이콘이 표시되지만 웹표준을 준수하기 위해서는 의미없는 div태그에 이미지를 입혀서는 안되겠죠?
그래서 span태그에 그림에 대한 설명을 적어주고 ir효과를 주어서 시각적으로 텍스트는 가리지만 리더기가 읽을 수 있도록 유도합니다.

background: url(img/text_type02.svg) no-repeat;
background-position: 0 0;

'이미지 스프라이트'를 기억하시나요? 아이콘은 svg파일로 묶어서 만든 뒤 이미지스프라이트 기법을 활용해서 적용해봤습니다.
(기억안나시면 이 글을 참고해주세요)

.text__wrap {
    width: 1160px;
    padding: 120px 20px;
    margin: 0 auto;
    min-width: 1160px;
    display: grid;
    grid-template-areas:
    "header article1 article2"
    "header article3 article4"
    ;
    grid-template-columns: 31% 31% 31%;
    justify-content: space-between;
    grid-row-gap: 50px;
}
.text_out{
    grid-area: header;
}
.text__wrap div:nth-child(2){
    grid-area: article1;
}
...

레이아웃 배치하는 방법은 개인의 취향이긴 한데요. 저는 개인적으로 grid가 정말 편리하더라구요. 그래서 어떤 방법을 사용할까 하다가 grid를 택했습니다. 높이값은 컨텐츠의 양에 따라 유동적으로 변할 수 있도록 하기 위해서 일부러 부여하지 않았구요. 컨텐츠 사이의 행간격이 50px이 있길래 마찬가지로 50px 을 주었습니다. ‼특히 기존에는 제목부분은 제외하고 container로 컨텐츠에 해당하는 부분들만 감싸서 진행을 했었는데요, grid로 레이아웃 배치를 위해서 container를 없애고 제목부분과 컨텐츠부분들을 전부 형제관계로 만들어 태그를 작성했습니다.

.text__inner:hover {
    background-color: rgb(221, 221, 221);
    border-radius: 20px;
    transition: all 0.3s;
    animation: scale 0.5s ease forwards;
}
@keyframes scale {
    0% {transform: scale(0.95); opacity: 0.5;}
    100% {transform: scale(1.1); opacity: 1;}
}

그냥 단순히 제가 넣고싶어서 넣긴했는데요. 가장 좌측에있는 제목란은 제외하고 컨텐츠부분에만 적용하기 위해서 class 명을 text__inner와 text_out 으로 구분지었습니다. 마우스 오버시 간단한 애니메이션 효과를 부여하기 위해서 animation과 keyframes을 활용해보았습니다.

CSS 속성

/* fonts */
@import url('https://webfontworld.github.io/gmarket/GmarketSans.css');

.nexon {
    font-family: 'GmarketSans';
    font-weight: 500;
}

/* 리셋 */
*{
    margin: 0;
    padding: 0;
}
a{
    text-decoration: none;
    color: #000;
}
img {
    width: 100%;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
}


/* common */
.text__wrap {
    width: 1160px;
    padding: 120px 20px;
    margin: 0 auto;
    min-width: 1160px;
    display: grid;
    grid-template-areas: 
    "header article1 article2"
    "header article3 article4"
    ;
    grid-template-columns: 31% 31% 31%;
    justify-content: space-between;
    grid-row-gap: 50px;
}
/* .section {
    padding: 120px 0;
} */
.text_out .upper {
    background-color: #FF7979;
    width: 135px;
    height: 20px;
    border-radius: 50px;
    margin-bottom: 10px;
}
.upper p {
    text-align: center;
    color: white;
    font-size: 14px;
    line-height: 20px;
}
.text_out > h2 {
    font-size: 50px;
    line-height: 1;
    margin-bottom: 20px;
    font-weight: 700;
}
.text_out > p {
    font-size: 18px;
    font-weight: 300;
    color: #666;
    margin-bottom: 10px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.ir{
    overflow: hidden;
    position: absolute;
    width: 0;
    height: 0;
    line-height: 0;
    text-indent: -9999px;
}
/* 그리드 지정 */
.text_out{
    grid-area: header;
}
.text__wrap div:nth-child(2){
    grid-area: article1;
}
.text__wrap div:nth-child(3){
    grid-area: article2;
}
.text__wrap div:nth-child(4){
    grid-area: article3;
}
.text__wrap div:nth-child(5){
    grid-area: article4;
}
/* TextType */
.icon{
    background: url(img/text_type02.svg) no-repeat;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-bottom: 10px;
    display: block;
}
.text__wrap div:nth-child(3) .icon{
    background-position: -100px 0;
}
.text__wrap div:nth-child(4) .icon{
    background-position: -200px 0;
}
.text__wrap div:nth-child(5) .icon{
    background-position: -300px 0;
}
.text__inner{
    padding: 20px;
    box-sizing: border-box;
}
.text__inner h3{
    font-size: 24px;
    margin-bottom: 20px;
}
.text__inner p{
    font-size: 18px;
    font-weight: 300;
}
.text__inner:hover {
    background-color: rgb(221, 221, 221);
    border-radius: 20px;
    transition: all 0.3s;
    animation: scale 0.5s ease forwards;
}
@keyframes scale {
    0% {transform: scale(0.95); opacity: 0.5;}
    100% {transform: scale(1.1); opacity: 1;}
}

HTML 속성

<section id="TextType02" class="text__wrap nexon section">
    <div class="text_out">
        <div class="upper">
            <p>JAPAN TRIP</p>
        </div>
        <h2>하나무라로<br> 떠납니다</h2>
        <p> 하나무라는 일본에 진짜 있는 지역명
            인가요? 저도 잘 모르겠어요. 일본이 생각
            났는데 게임에서 맨날 말하길래 생각이났는데 세줄효과를 위해 좀더 채워볼까까까ㅏㅏㅏ
        </p>
    </div>
    <div class="text__inner">
        <a href="#" class="icon"><span class="ir">icon</span></a>
        <h3>하나무라</h3>
        <p>네~ 없네요. 궁금해서 검색해보니깐 하나무라는 일본에서 쓰이는 성씨중의 하나라고 하는군요. 그렇다고합니다. </p>
    </div>
    <div class="text__inner">
        <a href="#" class="icon"><span class="ir">icon</span></a>
        <h3>도쿄</h3>
        <p>도쿄도 또는 도쿄, 동경은 일본의 수도이며 간토지방에 위치하는 도로, 일본의 도 행정구역 가운데서 인구 수가 제일 많다고...</p>
    </div>
    <div class="text__inner">
        <a href="#" class="icon"><span class="ir">icon</span></a>
        <h3>홋카이도</h3>
        <p>훗!! 아닙니다. 홋입니다.홋카이도는 일본의 홋카이도 지방에 위치한 섬입니다. 일본열도를 이루는 4개 주요 섬중 하나로 ...</p>
    </div>
    <div class="text__inner">
        <a href="#" class="icon"><span class="ir">icon</span></a>
        <h3>오사카</h3>
        <p>오사카시는 일본 오사카부에 있는 도시로 부청 소재지다. 혼슈 긴키 지방의 요도가와 강 하구 오사카 만에 위치해 있으며 ...</p>
    </div>
</section>

결과보기

원본 소스 보기 원본 사이트