[실습] image list 제작하기

[project] boostcourse

[실습] image list 제작하기_2/3

hhnn 2021. 8. 20. 17:21

만들어볼 최종 실습 이미지

메인이미지 삽입

HTML

<!DOCTYPE html>
<html lang="ko">

<head>
    <title>네이버TV</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="0820_maincss.css">
</head>

<body>
    <div class="wrap">
        <h1>TOP100</h1>

        <div class="main_wrap">
            <div class="content">
                <p class="notice_txt">8.21 오전 9시 ~ 오전 10시 기준(재생수, 재생시간, 좋아요)</p>
                <ol class="main_list">
                    <li> 
                        <a href="#" class="item_link"> 
                            <div class="img_box">
                                <img src="http://via.placeholder.com/322x215" alt="">
                            </div>
                        </a> 
                    </li>
                    <li> 
                        <a href="#" class="item_link"> 
                            <div class="img_box">
                                <img src="http://via.placeholder.com/322x215" alt="">
                            </div>
                        </a> 
                    </li>
                    <li> 
                        <a href="#" class="item_link"> 
                            <div class="img_box">
                                <img src="http://via.placeholder.com/322x215" alt="">
                            </div>
                        </a> 
                    </li>
                </ol>
            </div>

        </div>
    </div>
</body>

</html>

이미지에 약간 어두운 액자효과 넣기

상위 부모에 position으로 위치를 잡고 :after를 통한 효과 넣기
content: '';을 넣어 빈공간을 만들어주어야 한다.

CSS

.img_box {
    position: relative;
}
.main_list .img_box:after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: '';
    background-color: rgba(0,0,0,0.2);
    border: 1px solid rgba(0,0,0,0.05);
}

이미지 위에 글씨 삽입

이미지 안에 글씨가 삽입되어야 하므로 a링크 내부에 글씨를 넣는다.

position을 사용해 .img_box 위에 얹게 할 것이라서 .item_link (부모) 를 position: relative로 잡고
.infor (자식) 에 position: absolute 를 통해 위치를 잡는다.

.infor의 상위 부모는 .item_link 이므로 .item_link 에 position: relative; 를 찍어주면 다음과 같이 각 이미지의 위에 글씨가 자리잡는다.

글씨 말줄임처리를 해야 한다.

말줄임처리 방법

서브 이미지 삽입

float : left; 를 통해 이미지를 나열한 모습

:after 가상선택자를 통해 clear:fix를 해준 뒤 형제 선택자를 이용해 각 이미지 마다 간격을 만들어 준다.

HTML

<!DOCTYPE html>
<html lang="ko">

<head>
    <title>네이버TV</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="0820_maincss.css">
</head>

<body>
    <div class="wrap">
        <h1>TOP100</h1>
        <!-- 메인 리스트 -->
        <div class="main_wrap">
            <div class="content">
                <p class="notice_txt">8.21 오전 9시 ~ 오전 10시 기준(재생수, 재생시간, 좋아요)</p>
                <ol class="main_list">
                    <li> 
                        <a href="#" class="item_link"> 
                            <div class="img_box">
                                <img src="http://via.placeholder.com/322x215" alt="">
                            </div>
                            <div class="infor">
                                <span class="category">산악스키</span>
                                <p class="title">오스트리아 최대의 산악스키 연맹, 산악스키 아마데! 5개 지역에 걸쳐있고, 총 25여개의 슬로프 길이</p>
                            </div>
                        </a> 
                    </li>
                    <li> 
                        <a href="#" class="item_link"> 
                            <div class="img_box">
                                <img src="http://via.placeholder.com/322x215" alt="">
                            </div>
                            <div class="infor">
                                <span class="category">산악스키</span>
                                <p class="title">오스트리아 최대의 산악스키 연맹, 산악스키 아마데! 5개 지역에 걸쳐있고, 총 25여개의 슬로프 길이</p>
                            </div>
                        </a> 
                    </li>
                    <li> 
                        <a href="#" class="item_link"> 
                            <div class="img_box">
                                <img src="http://via.placeholder.com/322x215" alt="">
                            </div>
                            <div class="infor">
                                <span class="category">산악스키</span>
                                <p class="title">오스트리아 최대의 산악스키 연맹, 산악스키 아마데! 5개 지역에 걸쳐있고, 총 25여개의 슬로프 길이</p>
                            </div>
                        </a> 
                    </li>
                </ol>
            </div>
        </div>
        <!-- 서브 리스트 -->
        <div class="sub_wrap">
            <ol class="sub_list">
                <li>
                    <a href="#" class="item_link">
                        <img src="img/thumb_image.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#" class="item_link">
                        <img src="img/thumb_image.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#" class="item_link">
                        <img src="img/thumb_image.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#" class="item_link">
                        <img src="img/thumb_image.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#" class="item_link">
                        <img src="img/thumb_image.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#" class="item_link">
                        <img src="img/thumb_image.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#" class="item_link">
                        <img src="img/thumb_image.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#" class="item_link">
                        <img src="img/thumb_image.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#" class="item_link">
                        <img src="img/thumb_image.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#" class="item_link">
                        <img src="img/thumb_image.jpg" alt="">
                    </a>
                </li>
            </ol>
        </div>
    </div>
</body>

</html>

CSS

/* sub_wrap */
.sub_wrap {
    margin-top: 30px;
}
.sub_list {
    width: 1000px;
    margin: 0 auto;
}
.sub_list>li {
    float: left;
    width: 188px;
    margin-bottom: 40px;
}
.sub_list .item_link img {
    display: block;
    width: 188px;
    height: 141px;
}
.sub_list::after {
    display: block;
    clear:both;
    content: '';
}
.sub_list li + li {
    margin-left: 15px;
}

margin-left 를 이용하게 되면 모든 이미지의 왼쪽에 15px의 공간이 만들어져서 1000px의 범위를 벗어나게 되어 아래로 내려간다.

nth-child를 사용해 일정 요소의 값만 없앤다.

nth-chile(an+b) {
	margin-left: 0;
}

an+b

📌첫번째 이미지와 여섯번째 이미지에 margin 값을 없애야 하므로 b에는 1 을 넣는다.

📌an은 배수를 의미하며 5n을 사용하게 될 경우 n은 0부터 대입하게 되어,

5n ( n=0 ) +1 -> 1번째

5n ( n=1 ) +1 -> 6번째

에 margin-left: 0; 이 적용된다.

**가상선택자를 사용하여 border 삽입

img 위 상위 부모인 .itme_link에 position:relative; 를 찍어준 뒤
가상선택자를 통해 공간을 만들어 border를 넣어준다.
이때 content: '';을 추가하지 않으면 border 삽입이 안됨.

.sub_list .item_link {
    display: block;
    position: relative;
}
.sub_list .item_link:after {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: '';
    border: 1px solid rgba(0,0,0,1);
    /* 검정색 투명도 3%의 외곽선 추가 */
}

**썸네일 하단부 text 삽입

text 두줄 말줄임이 되어야 하므로

.sub_list .title {
    display: -webkit-box;
    max-height: 36px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 15px;
    line-height: 18px;
    color: #090909;
}

webkit 이외 브라우저에 대응하기 위해 max-height 값을 삽입한다

(IE, FireFox =webkit속성이 적용되지 않으므로 max-height 값 필수!)

높이 값은 line-height(18px) * -webkit-line-clamp (2) = max-height값 36

**category_link 한줄 말줄임으로 꾸미기

.sub_list .category_link {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-top: 3px;
    font-size: 12px;
    line-height: 15px;
    color: #7ba7df;
}

See the Pen [boostcourse] img_list by limhaneul2244 (@limhaneul2244) on CodePen.

SMALL

'[project] boostcourse' 카테고리의 다른 글

[실습] image list 제작하기_3/3 (0)	2021.08.22
[실습] 텍스트 말줄임표 만들어보기 (0)	2021.08.13
[실습] image list 제작하기_1/3 (0)	2021.08.13
[실습] 탭제작하기 (0)	2021.08.12
[실습] 레이아웃 만들어보기 (0)	2021.08.05

현재글[실습] image list 제작하기_2/3

개인 공부용 블로그

Flex, git, CSS, 코딩웍스, bootstrap, 가상선택자, JQuery, 개놀자, react, phpstorm, 업무일지, for문, javascript, if문, typescript, plugin, vue, Sass, HTML, 비공개,

Today :
Yesterday :

개인 공부용 블로그