231222(HTML 훈련2)

Product Card

product card라는걸 만들어보자.

Untitled

이런걸 만든다고함… 이게 Product card임.

요소가 몇개인가?

Untitled

최소 6개..?

일단 사진을 넣고…

이때 혼자가 혼자에게 옆의 ‘오늘의 책’은 label로 인식하는게 맞다.

그리고 저자명 ‘이병률’과 평점‘9.4’는 <strong>태그로 처리함…

별표 부분은 이런 사이트에서 가져온다.

Get Started instantly With 1,000+ Free Icons | Font Awesome

<strong aria-label ="평점 9.4">
        <**span aria-hidden ="true"**>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star-half"></i>
        </span>
        9.4
    </strong>

여기서 배운건 aria속성중에 hidden을 이용하면, 스크린리더가 읽지 않게 만들 수 있음. 별표 하나하나 읽을 필요는 없으니.. 제낀다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ProductCard</title>
    <link rel="stylesheet" 
    href="<https://use.fontawesome.com/releases/v5.15.1/css/all.css>" 
    integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" 
    crossorigin="anonymous">
    <link rel="stylesheet" href="styles_PC.css">
</head>
<body>
    <div class="product-card">
        <div class ="product-card-image">
            <img src="<https://user-images.githubusercontent.com/19285811/69318246-becd7980-0c77-11ea-8324-6c43e2de8cf2.png>" alt =""/>
        </div>
        <h1 class = "product-card-title">
            혼자가 혼자에게
            <strong aria-label="오늘의 책 선정">오늘의 책</strong>
        </h1>
        
        <strong aria-label="저자 이병률" class = "product-card-author">
            이병률
        </strong>
        <strong aria-label ="평점 9.4" class = "product-card-review">
            <span aria-hidden ="true">
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star-half"></i>
            </span>
            9.4
        </strong>
    </div>
</body>
</html>

어찌저찌 만들었다.

솔직한 심정으로는… html을 이런식으로 배우는건 너무 재미없다. 그냥 태그의 나열… 나랑 별로 안맞는 방식인 것 같음. 어차피 태그쓰는건 자주 하다보면 익숙해질텐데.. 흠.

이번 강의에서 중요한건… 단순히 눈에 보이는 웹페이지로만 정보를 전달하려는 사고방식에서 탈피하라는 것임. 웹페이지는 앞을 볼 수 있는 사람만 이용하는건 아니다. 다양한 신체적 조건에 있는 사람들이 웹페이지의 사용자임. 그들에게도 정보를 전달하기 위해 효율적인 마크업을 고민하라..