whatisthis?
HTML 훈련 - (6) Product Card 본문
Product card
<img src="https://user-images.githubusercontent.com/19285811/69318246-becd7980-0c77-11ea-8324-6c43e2de8cf2.png
" alt="">
<h1>
혼자가 혼자에게
</h1>
<strong aria-label="오늘의 책 선정">
오늘의 책
</strong>우선 img태그를 이용하여 이미지를 불러오고, alt 대신 h1태그로 제목격인 책이름을 작성한다.
또한, 오늘의 책 < 은 strong으로 의미를 강조해준다.
+) 지난 예제에서 사용했던 aria-label을 이용해서 정확한 의미전달을 해준다.
** WAI-ARIA =======================
WAI-ARIA(Web Accessibility Initiative – Accessible Rich Internet Applications)는
웹 페이지, 특히 동적 콘텐츠, 그리고 Ajax, HTML, 자바스크립트 및 관련 기술로 개발된
사용자 인터페이스 구성 요소의
접근성을 증가시키는 방법에 대해 규정한 W3C가 출판한 기술 사양임.
<aria-label 속성>
aria-label 속성을 이용해주면, 스크린리더로 읽어줄때에는 aria-label 안에 있는 내용이 읽힘.
(외관상의 변화는 전혀 없다.)
=====================================
<img src="https://user-images.githubusercontent.com/19285811/69318246-becd7980-0c77-11ea-8324-6c43e2de8cf2.png
" alt="">
<div class="product-card-title">
<h1>
혼자가 혼자에게
</h1>
<strong aria-label="오늘의 책 선정">
오늘의 책
</strong>
</div>다음과 같이 h1과 strong부분은 제목에 해당하므로, div로 감싸주고 class를 부여해준다.
<strong aria-label="저자 이병률">
이병률
</strong>저자 부분도 마크업해준다.
위처럼 저자가 title보다 위에 있지만, 우선은 아래에 마크업해준다. ---> css로 바꿔줄 수 있음.!
또한, 별표(평점)부분은 별표 그림과 9.4라는 평점으로 구분되는데, 이를 마크업해보자.
** 위에 별 ☆ 부분은 fontawsome이라는 사이트를 이용한 것이다.
Font Awesome
The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.
fontawesome.com
위 사이트에서
kit로 들어간 후에, how to use 부분을 살펴보자.
1
1. Add Your Kit's Code to a Project
<head>태그 내에 해당 코드를 복붙한다.
2. 아이콘을 찾아 해당 코드를 원하는 위치에 복붙.
예> star
<i class="fas fa-star"></i>
<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>
우선, 이는 디자인적인 요소이므로 span태그로 감싸주고 (div와 같이 디자인 기능만 하지만, inline단위임.)
- div = block 단위 디자인 요소
- span = inline 단위 디자인 요소
+) aria-hidden = true는 , 스크린리더에서 이 부분은 읽히지 않도록 숨기는 기능이다.
위 작성했던 코드 전체를 div로 감싸주고, product-card라는 클래스를 부여한다.
<div class="product-card">
<img src="https://user-images.githubusercontent.com/19285811/69318246-becd7980-0c77-11ea-8324-6c43e2de8cf2.png
" alt="">
<div class="product-card-title">
<h1>
혼자가 혼자에게
</h1>
<strong aria-label="오늘의 책 선정">
오늘의 책
</strong>
</div>
<strong aria-label="저자 이병률">
이병률
</strong>
<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>
</div>
또한, 디자인을 위해 div로 각 블록을 구분해준다.
<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>
<div class="product-card-title">
<h1>
혼자가 혼자에게
</h1>
<strong aria-label="오늘의 책 선정">
오늘의 책
</strong>
</div>
<div class="product-card-author">
<strong aria-label="저자 이병률">
이병률
</strong>
</div>
<div class="product-card-review">
<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>
</div>
</div>
전체를 div class=product-card로 감싸주고,
image / title / author / review 부분으로 각각 나눠준 구조이다.
+) <script> 태그의 위치
head태그 내에 위치할때든, body 내에 위치할때든
맨 마지막쪽에 script 태그를 해주는것이 좋다.
script를 불러오는데에는 시간이 걸리기 때문에.
style.css에 대한 코드 리뷰는 아래 포스팅에서 다뤄보겠다.
https://mywebproject.tistory.com/94
html_pr06) style.css Code Review
https://mywebproject.tistory.com/93 HTML 훈련 - (6) Product Card Product card REFERENCE (style.css) https://github.com/rohjs/bugless-101/blob/master/html-practice/06-product-card/styles.css https://..
mywebproject.tistory.com
-참고-
product-card-author이 위로 어떻게 올라왔는지?
-> CSS의 flex의 속성중 하나인 order로 순서를 바꿔주었다.
1. 우선 body를 flex box의 컨테이너로 지정
2. product-card 자체를 flex box의 아이템으로 지정
3. product-card-image / product-card-title / product-card-author을 그 하위요소이므로
order 속성을 이용해서 순서를 바꿔줌.
.product-card {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.product-card-image {
order: 1;
.product-card-title {
order: 3;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
.product-card-author {
order: 2;
.product-card-review {
order: 4;
display: flex;
justify-content: center;
align-items: center;
-> 여기서 왜 author이랑 image에는 display: flex를 안해주었을지..
REFERENCE (style.css)
https://github.com/rohjs/bugless-101/blob/master/html-practice/06-product-card/styles.css
김버그의 HTML&CSS는 재밌다 - 구름EDU
HTML&CSS를 한번에! 탄탄한 개념이해부터 실습까지 한 강의로 끝내기, 실무 가능한 실력으로 😎
edu.goorm.io
'WEB STUDY > HTML,CSS' 카테고리의 다른 글
| HTML) ARIA (Accessible Rich Internet Applications) (0) | 2021.10.30 |
|---|---|
| CSS) CSS position attribute (0) | 2021.10.27 |
| HTML 훈련 - (5) BreadCrumb & Pagination (1) | 2021.10.23 |
| HTML 훈련 - (4) Logo in Header (0) | 2021.10.22 |
| HTML 훈련 - (3) Feature Box (0) | 2021.10.20 |
