이미지 카드 리스트 만들기(image card list) +추가수정

참고 홈페이지

https://www.yuseong.go.kr/prog/trrsrt/TRSE_01/tour/sub02_01/list.do

기간

21.10.13 ~ 21.10.14

🔥 주의사항 🔥

불필요한 태그 빼기.

알맞은 태그 넣기.

디자인에 맞게 적용하기.

 

📌 [정리]

1. 텍스트부터 채운다. font에서 부터 padding,margin을 끝으로 안에서 밖으로 작업한다.
2. img의 경로가 잘못되거나 로딩이 안 될 경우, 대체 이미지를 넣어준다.
   1. img src="" onerror="this.src='대체이미지경로'"
   2. background-image
3. 텍스트는 말줄임표를 넣어준다.
4. 이미지 높이는 padding-top으로 만들어주고 그 안을 이미지로 채운다.

.img {
position: relative;
padding-top: 245px;
}
.img .img-inner {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
width: 100%; height: 100%;
}
.img .img-inner img {
/* 이미지 가운데 정렬 */
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
/* 이미지 높이로 기준 맞추기 */
height: 100%;
}

5. IR :: 이미지를 대체하는 텍스트 (홈페이지에서는 아래와 같은 IR기법 사용.)

.ir {
overflow: hidden;
font-size: 0;
line-height: 0;
/* 대체 이미지 넣기 */
background-image: url('');
}

6. 접근가능한 숨김 텍스트를 참고하여 blind 클래스를 넣어 이미지를 대체.

<span class="info"><i class="blind">이미지대체</i></span>

.info {
background-image: url('');
}
.blind {
overflow: hidden;
display: inline-block;
position: relative;
z-index: -1;
border: 0;
width: 1px;
height: 1px;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
}

 

(+) 추가수정사항 21.10.15

✔️ 퍼블리싱할 때는 확장성, 단순성을 항상 생각해야 한다.

• 보통은 동일 영역으로 작업해 이미지가 없는 경우는 없다. 그러므로, 텍스트만 있을 수 없다.
• 두 번째 리스트처럼 대체 이미지를 넣어준다.
• 조회수, 지역 부분에 만약 2개 이하이거나 3개 이상일 경우 어떻게 할건지.
• <strong>"유림공원"</strong> 부분을 h2으로 수정.
• html 태그 축소화 :: 이미지 부분에 태그 하나 더 줄일 수 있을 것 같다.
• resize시 리스트 중구난방으로 떨어짐. @media 필요.

 

😭 막혔던 부분 1-1.

웹 접근성으로 이미지의 설명을 넣어줘야 한다.

<!-- 문제점 :: i에 대체이미지를 못 넣음. -->
<div class="local">
    <span><i class="icon1"></i>541</span>
    <span><i class="icon2"></i>온천1동</span>
</div>

<!-- 아래로 변경 -->
<div class="local">
    <span class="view"><i class="blind">조회수</i>541</span>
    <span class="place"><i class="blind">장소</i>온천1동</span>
</div>

.blind {
    position: absolute;
    clip: rect(0,0,0,0);
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
}

 

 

😭 막혔던 부분 1-2.

노랑색부분에서 말줄임적용을 했는데 글이 넘쳐서 두 줄로 나타났다.

.local span {
    overflow: hidden;
    text-overflow: ellipsis;
    /* inline-box :: inline-block처럼 한 칸에 두 박스 들어가기 위해. */
	display: -webkit-inline-box;
    /* 말줄임 한줄 처리 */
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    font-size: 15px;
    color: #666;
}

break-all (x)

word-break: break-all을 해주어 텍스트 하나씩 다 깨준다.

그러면 한 줄로 잘 나오게 된다.

 

 

😭 막혔던 부분 1-3.

span.view, span.place 클래스 명을 지정해준 이유.

/* 1 */
.main-tour .txt .local .span:nth-of-type(1)::before {}
.main-tour .txt .local .span:nth-of-type(2)::before {}

/* 2 */
.main-tour .txt .local .view::before {}
.main-tour .txt .local .place::before {}

1번으로 했을 경우, 첫번째 span이 사라지면 두번째 span이 첫번째 이미지를 가진다. 그러므로 각각의 해당 background-image를 가지지 못한다.

2번 방법처럼 클래스를 지정해주어 순서가 바뀌어도 클래스의 고정된 이미지여야 한다.

 

 

😭 막혔던 부분 1-4.

span이 1개일 때, 2개일 때, n개 일 때?

.local span:first-of-type:nth-last-of-type(1) {
    display: -webkit-box;
    max-width: 100%;
}
.local span:first-of-type:nth-last-of-type(2) {
    margin-left: 0px;
    max-width: 40%;
}
.local span:first-of-type:nth-last-of-type(2) ~ span {
    margin-left: 26px;
    max-width: 40%;
}
.local span:first-of-type:nth-last-of-type(3) {
    margin-left: 0;
    max-width: 30%;
}
.local span:first-of-type:nth-last-of-type(3) ~ span {
    margin-left: 10px;
    max-width: 30%;
}
.local span:nth-of-type(n+4) {
    display: none;
}

~ :: 본인을 뺀 모든 형제 노드(하나이상.)

+ :: 본인을 뺀 바로 다음 형제 노드(하나)

:fist-of-type:nth-last-of-type(n) :: 자신.

📂img_card_list