웹사이트 만들기/CardType 02

사이트 만들기 _ 카드 유형02

사이트 만들기 두번째 시간입니다. 오늘은 카드유형 중 두번째 유형입니다.
4개의 카드가 한줄에 구성된 총 두줄의 카드유형이네요! 웹 표준을 준수해서 사이트를 만들어 봅시다.

---

---

웹표준을 준수하여 사이트를 만들어 보겠다고 했었는데 카드타입1유형과는 다르게 시간과 다르게 더보기가 텍스트가 사라지고 이미지로만 구성되어있기 때문에 alt태그를 통해서 이미지에 대한 설명을 덧붙여줘야합니다.
그런데 이번에는 더보기를 a링크로만 구성하고 css를 이용해서 작업해서 alt링크를 넣을 수가 없네요...또 이미지가 혹시라도 출력이 안될 경우 읽어줘야하는데 못읽는 경우가 발생할 수 도 있습니다. 이럴땐 어떻게 해야할까요?
정답은 'IR효과를 사용해라' 입니다.

IR 효과

IR 기법은 이미지 대체 텍스트를 제공하기 위한 CSS 기법으로 다양한 CSS기법을 사용하여 이미지 대체 텍스트를 제공할 수 있습니다.

- Phark Method

의미 있는 이미지의 대체 텍스트를 제공하는 경우 : 이미지로 대체할 엘리먼트에 배경이미지를 설정하고 글자는 text-indent를 이용하여 화면 바깥으로 빼내어서 보이지 않게 하는 방법입니다.

- PWA IR

대체 텍스트로 이미지를 off해도 대체 텍스트를 보여주고자 할때 : 이미지로 대체할 엘리먼트에 배경이미지 설정 후 글자는 span으로 감싸고 z-index: -1;을 이용하여 화면에 안보이게 설정

CSS 속성

@import url('https://webfontworld.github.io/gmarket/GmarketSans.css');
                    
                    .gmark {
                        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 */
.container {
    width: 1160px;
    padding: 0 20px;
    margin: 0 auto;
    min-width: 1160px;
}
.section {
    padding: 120px 0;
}
.section > h2 {
    font-size: 50px;
    line-height: 1;
    text-align: center;
    margin-bottom: 20px;
}
.section > p {
    font-size: 22px;
    font-weight: 300;
    color: #666;
    text-align: center;
    margin-bottom: 70px;
}
.gray {
    background-color: #f5f5f5;
}

/* 이미지 대체 효과(alt태그와 동일한효과) : 이미지스플라이트기법(=ir효과 =ir기법) 이미지가 출력안되는경우 span더보기는 알트태그가 없으므로 안나올때를 대비함*/
/* 웹표준 준수 목적 */
.ir {
    display: block;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    text-indent: -9999px;           
}

/* cardType02 */
.card__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.card__inner .card{
    width: 24%;
    position: relative;
}
.card__inner .card:first-child {
    margin-bottom: 50px;
}
.card__inner .card img {
    margin-bottom: 20px;
    border-radius: 10px;
}
.card__inner .card .tit {
    font-size: 28px;
    margin-bottom: 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-right: 20px;
}
.card__inner .card .desc {
    font-size: 18px;
    color: #666;
    font-weight: 300;
    line-height: 1.4;  
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical;
}
.card__inner .card .more {
    width: 24px;
    height: 24px;
    background-image: url(img/card_bg02_arrow.svg);
    display: block;
    position: absolute;
    right: 0;
    top: 227px;
    border-radius: 5px;
}
.card__inner .card .more span {
    display: none;
}

HTML 속성

<section id="cardType" class="card__wrap gmark section gray">
        <h2>스타벅스 탐방</h2>
    <p>
        바쁘다 바빠!현대 사회! 야속하다 야속해! 자본주의 사회!!를 살아가는 우리
        <br>전세계인이 사랑하는 스타벅스로 여행을 떠나요.룰루랄라랄🎶
        </p>
    <div class="card__inner container">
    <article class="card">
    <img src="img/card_bg02_01.jpg" alt="커피사진">
    <h3 class="tit">좋아요! 스타벅스 자허블</h3>
    <p class="desc">
    바쁘다 바빠! 야속하다 야속해! 현대사회를 살아가는 우리들은 매일매일이 피곤하고 지치고 졸리고 자고싶다 눕고싶다
    </p>
    <a href="#" class="more"><span class="ir">더보기</span></a>
    </article>
    <article class="card">
    <img src="img/card_bg02_02.jpg" alt="커피사진">
    <h3 class="tit">좋아요!</h3>
    <p class="desc">
    바쁘다 바빠! 야속하다 야속해! 현대사회를 살아가는 우리들은 매일매일이 피곤하고 지치고 졸리고 자고싶다 눕고싶다
    </p>
    <a href="#" class="more"><span class="ir">더보기</span></a>
    </article>
    <article class="card">
    <img src="img/card_bg02_03.jpg" alt="커피사진">
    <h3 class="tit">좋아요!</h3>
    <p class="desc">
    바쁘다 바빠! 야속하다 야속해! 현대사회를 살아가는 우리들은 매일매일이 피곤하고 지치고 졸리고 자고싶다 눕고싶다
    </p>
    <a href="#" class="more"><span class="ir">더보기</span></a>
    </article>
    <article class="card">
    <img src="img/card_bg02_04.jpg" alt="커피사진">
            <h3 class="tit">좋아요!</h3>
            <p class="desc">
            바쁘다 바빠! 야속하다 야속해! 현대사회를 살아가는 우리들은 매일매일이 피곤하고 지치고 졸리고 자고싶다 눕고싶다
            </p>
            <a href="#" class="more"><span class="ir">더보기</span></a>
            </article>
            <article class="card">
            <img src="img/card_bg02_05.jpg" alt="커피사진">
            <h3 class="tit">좋아요!</h3>
            <p class="desc">
            바쁘다 바빠! 야속하다 야속해! 현대사회를 살아가는 우리들은 매일매일이 피곤하고 지치고 졸리고 자고싶다 눕고싶다
            </p>
            <a href="#" class="more"><span class="ir">더보기</span></a>
            </article>
            <article class="card">
            <img src="img/card_bg02_06.jpg" alt="커피사진">
            <h3 class="tit">좋아요!</h3>
            <p class="desc">
            바쁘다 바빠! 야속하다 야속해! 현대사회를 살아가는 우리들은 매일매일이 피곤하고 지치고 졸리고 자고싶다 눕고싶다
            </p>
            <a href="#" class="more"><span class="ir">더보기</span></a>
            </article>
        <article class="card">
            <img src="img/card_bg02_07.jpg" alt="커피사진">
            <h3 class="tit">좋아요!</h3>
            <p class="desc">
            바쁘다 바빠! 야속하다 야속해! 현대사회를 살아가는 우리들은 매일매일이 피곤하고 지치고 졸리고 자고싶다 눕고싶다
            </p>
            <a href="#" class="more"><span class="ir">더보기</span></a>
        </article>
        <article class="card">
            <img src="img/card_bg02_08.jpg" alt="커피사진">
            <h3 class="tit">좋아요!</h3>
            <p class="desc">
            바쁘다 바빠! 야속하다 야속해! 현대사회를 살아가는 우리들은 매일매일이 피곤하고 지치고 졸리고 자고싶다 눕고싶다
            </p>
            <a href="#" class="more"><span class="ir">더보기</span></a>
        </article>
        </div>
</section>

결과보기

원본 소스 보기 원본 사이트