HTML, CSS 심화 (2)

김서현·2022년 7월 6일
CSShtml
0

프론트엔드 스터디

목록 보기
7/16

이 글은 boostcourse의 '웹 UI 개발'을 수강하고 적는 글입니다.

📌 5. 메뉴

1) 메뉴 소개

메뉴(내비게이션) : 웹사이트에서 제공되는 정보를 쉽게 찾을 수 있도록 도와준다.

  • 1단 메뉴
  • 2단 메뉴
  • 좌측 메뉴

2) 1단 메뉴 제작

@charset "UTF-8";

/* 기본 스타일 */
body {
    font-family: '나눔고딕', NanumGothic, Dotum, '돋움', sans-serif;
    font-size: 14px;
    line-height: 16px;
}
body, ul, ol, li, div, a {
    margin:0;
    padding:0;
}
ul, ol {
    list-style:none;
}
a {
    color: inherit;
    text-decoration: none;
}
/* 1단 메뉴 */
.wrap {
    max-width: 700px;
    min-width: 500px;
    margin: 5px;
}
.menu {
    display: table;
    width: 100%;
    table-layout: fixed;
}
.menu_item {
    display: table-cell;
}
.menu_link {
    display: block;
    height: 36px;    
    border: 1px solid #ddd;
    font-size: 12px;
    line-height: 36px;
    color: #333;
    text-align: center;
}
.menu_item + .menu_item .menu_link {
    margin-left: -1px;
}
.menu_item:hover .menu_link {
    color: green;
    font-weight: bold;
}
.menu_item.active .menu_link {
    position: relative;
    border-color: #555;
    font-weight: bold;
    color: #fff;
    background: gray; 
}
  • 요약 정리
  • 메뉴 최소/최대 너비 : min-width, max-width
  • 메뉴 너비 균등 : display: table;, display: table-cell; tabl-layout:fixed;
  • 보더 겹침 현상 : margin:-1px;

3) 2단 메뉴 제작

@charset "UTF-8";

/* 기본 스타일 */
body {
    font-family: '나눔고딕', NanumGothic, Dotum, '돋움', sans-serif;
    font-size: 14px;
    line-height: 16px;
}
body, ul, ol, li, div, a {
    margin:0;
    padding:0;
}
ul, ol {
    list-style:none;
}
a {
    color: inherit;
    text-decoration: none;
}
/* 2단 메뉴 */
.menu {
    width: 700px;
    margin: 20px auto 0;
    text-align: center;
}
.menu_item {
    display: inline-block;
}
.menu_link {
    display: block;
    padding: 13px 20px;
    font-size: 20px;
    line-height: 24px;
    font-weight: bold;
    color: #444;
}
.menu_item:hover .menu_link,
.menu_item.active .menu_link {
    color: green; /* 메인 메뉴 선택, 활성화 효과 */
}
.menu_item.active .submenu {
    display: block; /* 메인 메뉴 활성화 시 서브 메뉴 노출 처리 */
}
.submenu {
    display: none; /* 서브 메뉴는 기본 비노출 처리 */
    position: absolute;
    left: 0;
    width: 100%;
    min-width: 700px;
    border-top: 1px solid #eee; /* 서브 메뉴 상단 라인 */
    border-bottom: 1px solid #eee; /* 서브 메뉴 하단 라인 */
}
.submenu_item {
    display: inline-block;
}
.submenu_link {
    display: block;
    padding: 15px 35px;
    font-size: 17px;
    line-height: 20px;
    color: #333;
}
 /* 서브 메뉴 선택, 활성화 시 효과 */
.submenu_item:hover .submenu_link,
.submenu_item.active .submenu_link {
    font-weight: bold;
    color: green;
}
.submenu_link span {
    position: relative; 
}
 /* 서브 메뉴 선택, 활성화 시 하단 라인 노출 효과  */
.submenu_item:hover span:after,
.submenu_item.active span:after {
    position: absolute;
    content: '';
    right: 0;
    bottom: -15px;
    left: 0;    
    border-bottom: 2px solid green;
  • 메뉴 중앙 정렬 : display:inline-block, text-align:center;
  • 서브 메뉴 보이기/감추기 : display:block/none
  • 서브 메뉴 하단 라인 : span, :after

📌 6. 탭

1) 탭 소개

Tab : 색인표 또는 식별표
탭 UI의 특징 : 여러 문서 또는 패널을 하나의 창에 두고 전환하여 볼 수 있도록 한 인터페이스

탭과 내비게이션의 차이
사용자가 탭 또는 내비게이션을 클릭 시

  • 내비게이션 : 다른 화면으로 이동
  • 탭: 화면 이동 없이 선택한 탭과 연관된 콘텐츠가 보임

2) 탭 제작

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="tab.css">
    <title>탭 실습</title>
</head>
<body>
    <div class="tab_wrap">
        <!-- 탭 목록 -->
        <ul class="tab">
            <!-- 탭 목록 활성화 클래스 active 추가 -->
            <li class="tab_item active">
                <button type="button" class="tab_btn">인기순</button>
            </li>
            <li class="tab_item">
                <button type="button" class="tab_btn">조회순</button>
            </li>
            <li class="tab_item">
                <button type="button" class="tab_btn">날짜순</button>
            </li>
        </ul>
        <!-- 인기순 탭 패널 wrap -->
        <!-- 탭 패널 활성화 클래스 active 추가 -->
        <div class="tab_panel_wrap active">
            <h3>인기순 콘텐츠</h3>
            <!-- 탭 패널 -->
            <ol class="tab_panel">
                <li class="panel_item"><a href="#" class="item_link">1. 서울~런던 30분 만에 도착…장거리 로켓 여행, 2030년 내 가능</a></li>
                <li class="panel_item"><a href="#" class="item_link">2. 웬만해선 안 죽는다는 '물곰'에게서 극한생존 열쇠 찾는다</a></li>
                <li class="panel_item"><a href="#" class="item_link">3. 애플, '에어팟 2세대' 발표</a></li>
                <li class="panel_item"><a href="#" class="item_link">4. 한국어 지원하는 미승인 성인게임물 범람</a></li>
                <li class="panel_item"><a href="#" class="item_link">5. [이슈+] "혁신없는 가격인상"…에어팟2, 애플 충성고객마저 떠난다</a></li>
                <li class="panel_item"><a href="#" class="item_link">6. KAIST, 세탁 가능한 입는 디스플레이 개발</a></li>
                <li class="panel_item"><a href="#" class="item_link">7. "세계 최초 5G 상용화"…삼성 '갤럭시S10 5G' 다음달 5일 출시</a></li>
                <li class="panel_item"><a href="#" class="item_link">8. 중국업체, 국산 배터리 탑재 전기차 5대 형식승인 신청</a></li>
                <li class="panel_item"><a href="#" class="item_link">9. 美 마이크론 '이례적' D램·낸드 감산…메모리 업황 회복 기대</a></li>
                <li class="panel_item"><a href="#" class="item_link">10. 아흔살 의사의 건강비결은 ‘매일 15분 맨손 운동’</a></li>          
            </ol>
        </div>
        <!-- 조회순 탭 패널 wrap -->
        <div class="tab_panel_wrap">
            <h3>조회순 콘텐츠</h3>
            <!-- 탭 패널 -->
            <ol class="tab_panel">
                <li class="panel_item"><a href="#" class="item_link">1. 서울~런던 30분 만에 도착…장거리 로켓 여행, 2030년 내 가능</a></li>
                <li class="panel_item"><a href="#" class="item_link">2. 웬만해선 안 죽는다는 '물곰'에게서 극한생존 열쇠 찾는다</a></li>
                <li class="panel_item"><a href="#" class="item_link">3. 애플, '에어팟 2세대' 발표</a></li>
                <li class="panel_item"><a href="#" class="item_link">4. 한국어 지원하는 미승인 성인게임물 범람</a></li>
                <li class="panel_item"><a href="#" class="item_link">5. [이슈+] "혁신없는 가격인상"…에어팟2, 애플 충성고객마저 떠난다</a></li>
            </ol>
        </div>
        <!-- 날짜순 탭 패널 wrap -->
        <div class="tab_panel_wrap">
            <h3>날짜순 콘텐츠</h3>
            <!-- 탭 패널 -->
            <ol class="tab_panel">
                <li class="panel_item"><a href="#" class="item_link">1. 서울~런던 30분 만에 도착…장거리 로켓 여행, 2030년 내 가능</a></li>
                <li class="panel_item"><a href="#" class="item_link">2. 웬만해선 안 죽는다는 '물곰'에게서 극한생존 열쇠 찾는다</a></li>
                <li class="panel_item"><a href="#" class="item_link">3. 애플, '에어팟 2세대' 발표</a></li>
                <li class="panel_item"><a href="#" class="item_link">4. 한국어 지원하는 미승인 성인게임물 범람</a></li>
                <li class="panel_item"><a href="#" class="item_link">5. [이슈+] "혁신없는 가격인상"…에어팟2, 애플 충성고객마저 떠난다</a></li>
                <li class="panel_item"><a href="#" class="item_link">6. KAIST, 세탁 가능한 입는 디스플레이 개발</a></li>
                <li class="panel_item"><a href="#" class="item_link">7. "세계 최초 5G 상용화"…삼성 '갤럭시S10 5G' 다음달 5일 출시</a></li>
                <li class="panel_item"><a href="#" class="item_link">8. 중국업체, 국산 배터리 탑재 전기차 5대 형식승인 신청</a></li>            </ol>
        </div>
    </div>
</body>
</html>
@charset "UTF-8";

/* 기본 스타일 */
body {
    font-family: '나눔고딕', NanumGothic, Dotum, '돋움', sans-serif;
    font-size: 14px;
    line-height: 16px;
}
body, ul, ol, li, div, a, button {
    margin:0;
    padding:0;
}
ul, ol {
    list-style:none;
}
a {
    color: inherit;
    text-decoration: none;
}

/* 탭 제작 */
.tab_wrap {
    width: 300px;
    margin: 20px auto 0;
}
.tab:after {
    display: block;
    content: '';
    clear: both;
}
.tab_item {
    float: left;
}
.tab_btn {
    width: 100px;
    height: 50px;
    font-size: 16px;
    color: #999;
    background-color: transparent;
    border: 1px solid #eee;
    outline: 0;
    cursor: pointer;
}
.tab_item + .tab_item .tab_btn {
    width: 101px;
    margin-left: -1px;
}
/* 탭 목록 오버 시, 활성화 시 효과 */
.tab_item .tab_btn:hover,
.tab_item.active .tab_btn {
    font-weight: bold;
    color: #000;
    border-bottom: 0; /* 하단 라인 감추기 */
}
.tab_panel_wrap {
    display: none; /* 탭 패널은 기본 비노출 처리 */
}
.tab_panel_wrap.active {
    display: block; /* 활성화 시 탭 패널 노출 처리 */
}
.tab_panel_wrap {
    min-height: 350px;
    padding: 20px;
    border: 1px solid #eee;
    border-top: 0; /* 상단 라인 감추기 */
    box-sizing: border-box;
}
.tab_panel_wrap h3 {
    /* 요소 감추기 속성은 blind 클래스로 대체 가능(HTML&CSS 활용>IR기법 강좌 참고)  */
    position: absolute;
    z-index: -1;
    color: transparent;
}
.item_link {
    display: block;
    overflow: hidden; 
    font-size: 14px;
    line-height: 30px;
    color: #333;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.panel_item:hover .item_link {
    font-weight: bold;
}
  • 텍스트 말줄임
display:block;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;

📌 7. 이미지 목록

1) 이미지 목록 소개

Image List (섬네일) : 작은 크기의 견본 이미지

2) 이미지 목록 제작

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <!-- http://meyerweb.com/eric/tools/css/reset/ -->
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="style_1.css">
    <title>네이버TV: 간단한 이미지 리스트</title>
</head>
<body>
    <div class="wrap">
        <h1>TOP100</h1>
        <div class="main_wrap">
            <div class="content">
                <p class="noti_txt">8.21 오전 9시 ~ 오전 10시 기준 (재생수, 재생시간, 좋아요)</p>
                <ol class="main_list">
                    <li>
                        <a href="#" class="item_link">
                            <div class="img_box">
                                <img src="./img/thumb_image_large.jpg" alt="">
                            </div>
                            <div class="info">
                                <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="./img/thumb_image_large.jpg" alt="">
                            </div>
                            <div class="info">
                                <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="./img/thumb_image_large.jpg" alt="">
                            </div>
                            <div class="info">
                                <span class="category">산악스키</span>
                                <p class="title">오스트리아 최대의 산악스키 연맹, 산악스키 아마데! 5개 지역에 걸쳐있고, 총 25여개의 슬로프 길이</p>
                            </div>
                        </a>
                    </li>
                </ol>
            </div>
        </div>
        <div class="sub_wrap">
            <ol class="sub_list" start="4">
                    <li>
                        <a href="#" class="item_link">
                            <img src="./img/thumb_image.jpg" alt="">
                        </a>
                        <div class="info">
                            <a href="#" class="title">국제육상경기연맹으로부터 라벨을 부여받은 국내의 단 두 개의 마라톤 대회 중 실버라벨을 5년 연속 유지하고 있는 대구국제마라톤대회!</a>
                            <a href="#" class="category_link">마라톤</a>
                        </div>
                    </li>
                    <li>
                        <a href="#" class="item_link">
                            <img src="./img/thumb_image.jpg" alt="">
                        </a>
                        <div class="info">
                            <a href="#" class="title">국제육상경기연맹으로부터 라벨을 부여받은 국내의 단 두 개의 마라톤 대회 중 실버라벨을 5년 연속 유지하고 있는 대구국제마라톤대회!</a>
                            <a href="#" class="category_link">마라톤</a>
                        </div>
                    </li>
                    <li>
                        <a href="#" class="item_link">
                            <img src="./img/thumb_image.jpg" alt="">
                        </a>
                        <div class="info">
                            <a href="#" class="title">국제육상경기연맹으로부터 라벨을 부여받은 국내의 단 두 개의 마라톤 대회 중 실버라벨을 5년 연속 유지하고 있는 대구국제마라톤대회!</a>
                            <a href="#" class="category_link">마라톤</a>
                        </div>
                    </li>
                    <li>
                        <a href="#" class="item_link">
                            <img src="./img/thumb_image.jpg" alt="">
                        </a>
                        <div class="info">
                            <a href="#" class="title">국제육상경기연맹으로부터 라벨을 부여받은 국내의 단 두 개의 마라톤 대회 중 실버라벨을 5년 연속 유지하고 있는 대구국제마라톤대회!</a>
                            <a href="#" class="category_link">마라톤</a>
                        </div>
                    </li>
                    <li>
                        <a href="#" class="item_link">
                            <img src="./img/thumb_image.jpg" alt="">
                        </a>
                        <div class="info">
                            <a href="#" class="title">국제육상경기연맹으로부터 라벨을 부여받은 국내의 단 두 개의 마라톤 대회 중 실버라벨을 5년 연속 유지하고 있는 대구국제마라톤대회!</a>
                            <a href="#" class="category_link">마라톤</a>
                        </div>
                    </li>
                    <li>
                        <a href="#" class="item_link">
                            <img src="./img/thumb_image.jpg" alt="">
                        </a>
                        <div class="info">
                            <a href="#" class="title">국제육상경기연맹으로부터 라벨을 부여받은 국내의 단 두 개의 마라톤 대회 중 실버라벨을 5년 연속 유지하고 있는 대구국제마라톤대회!</a>
                            <a href="#" class="category_link">마라톤</a>
                        </div>
                    </li>
                    <li>
                        <a href="#" class="item_link">
                            <img src="./img/thumb_image.jpg" alt="">
                        </a>
                        <div class="info">
                            <a href="#" class="title">국제육상경기연맹으로부터 라벨을 부여받은 국내의 단 두 개의 마라톤 대회 중 실버라벨을 5년 연속 유지하고 있는 대구국제마라톤대회!</a>
                            <a href="#" class="category_link">마라톤</a>
                        </div>
                    </li>
                    <li>
                        <a href="#" class="item_link">
                            <img src="./img/thumb_image.jpg" alt="">
                        </a>
                        <div class="info">
                            <a href="#" class="title">국제육상경기연맹으로부터 라벨을 부여받은 국내의 단 두 개의 마라톤 대회 중 실버라벨을 5년 연속 유지하고 있는 대구국제마라톤대회!</a>
                            <a href="#" class="category_link">마라톤</a>
                        </div>
                    </li>
                    <li>
                        <a href="#" class="item_link">
                            <img src="./img/thumb_image.jpg" alt="">
                        </a>
                        <div class="info">
                            <a href="#" class="title">국제육상경기연맹으로부터 라벨을 부여받은 국내의 단 두 개의 마라톤 대회 중 실버라벨을 5년 연속 유지하고 있는 대구국제마라톤대회!</a>
                            <a href="#" class="category_link">마라톤</a>
                        </div>
                    </li>
                    <li>
                        <a href="#" class="item_link">
                            <img src="./img/thumb_image.jpg" alt="">
                        </a>
                        <div class="info">
                            <a href="#" class="title">국제육상경기연맹으로부터 라벨을 부여받은 국내의 단 두 개의 마라톤 대회 중 실버라벨을 5년 연속 유지하고 있는 대구국제마라톤대회!</a>
                            <a href="#" class="category_link">마라톤</a>
                        </div>
                    </li>
                </ol>
        </div>
    </div>
</body>
</html>
@charset "UTF-8";

/* 기본 스타일 */
body {
    font-family: Dotum,'돋움', Helvetica, sans-serif;
    font-size: 15px;
    line-height: 18px;
    color: #3c3c3c;
}
a {
    color: inherit;
    text-decoration: none;
    vertical-align: top;
}
img {
    vertical-align: top;
}
h1 {
    overflow: hidden;
    width: 1000px;
    margin: 0 auto;
    padding: 20px 0;
    line-height: 38px;
    font-size: 26px;
    color: #000;
}
.main_wrap {
    background-color: #ececec;
}
.main_wrap .content {
    position: relative;
    width: 1000px;
    margin: 0 auto;
    padding: 50px 0 20px;
}
.main_wrap .noti_txt {
    position: absolute;
    top: 20px;
    right: 0;
    font-size: 12px;
    color: #7c7c7c;
}
.main_list:after {
    display: block;
    content: '';
    clear: both;
}
.main_list li {
    float: left;
}
.main_list li + li {
    margin-left: 17px;
}
.main_list li .item_link {
    position: relative;
    display: block;
}
.main_list .img_box {
    position: relative;
}
.main_list .img_box:after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: '';
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(0, 0, 0, 0.05);
}
.main_list .img_box img {
    width: 322px;
    height: 215px;
}
.main_list .info {
    position: absolute;
    right: 15px;
    bottom: 15px;
    left: 15px;
    color: #fff;
    overflow: hidden;
}
.main_list .category {
    font-size: 14px;
}
.main_list .title {
    margin-top: 3px;
    font-size: 18px;
    line-height: 22px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sub_wrap {
    margin-top: 30px;
}
.sub_list {
    width: 1000px;
    margin: 0 auto;
}
.sub_list:after {
    display: block;
    content: '';
    clear: both;
}
.sub_list li {
    float: left;
    width: 188px;
    margin-bottom: 40px;
}
.sub_list li + li {
    margin-left: 15px;
}
.sub_list li:nth-child(5n+1) {
    margin-left: 0;
}
.sub_list .item_link {
    display: block;
    position: relative;
}
.sub_list .item_link:after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: '';
    border: 1px solid rgba(0, 0, 0, 0.03);
}
.sub_list .item_link img {
    width: 188px;
    height: 141px;
}
.sub_list .info {
    height: 79px;
    margin-top: 10px;
    padding: 5px;
}
.sub_list .title {
    display: -webkit-box;
    overflow: hidden;
    max-height: 36px;
    font-size: 15px;
    line-height: 18px;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    word-break: break-all;
    color: #090909;
}
.sub_list .category_link {
    display: block;
    padding-top: 3px;
    font-size: 12px;
    color: #7ba7df;
}

3) 이미지 목록 추가 기능 제작

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <!-- http://meyerweb.com/eric/tools/css/reset/ -->
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="style_2.css">
    <title>네이버TV: 간단한 이미지 리스트</title>
</head>
<body>
    <div class="wrap">
        <h1>TOP100</h1>
        <div class="main_wrap">
            <div class="content">
                <p class="noti_txt">8.21 오전 9시 ~ 오전 10시 기준 (재생수, 재생시간, 좋아요)</p>
                <ol class="main_list">
                    <li>
                        <a href="#" class="item_link">
                            <div class="img_box">
                                <img src="./img/thumb_main.jpg" alt="">
                            </div>
                            <div class="info_wrap">
                                <div class="rank">
                                    <span class="num"><span class="blind">랭킹</span>1</span>
                                    <span class="change up">3<span class="blind">상승</span></span>
                                </div>
                                <div class="info">
                                    <span class="category">산악스키</span>
                                    <p class="title">오스트리아 최대의 산악스키 연맹, 산악스키 아마데! 5개 지역에 걸쳐있고, 총 25여개의 슬로프 길이</p>
                                    <span class="like"><span class="blind">좋아요</span>99,999</span>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="item_link">
                            <div class="img_box">
                                <img src="./img/thumb_main.jpg" alt="">
                            </div>
                            <div class="info_wrap">
                                <div class="rank">
                                    <span class="num"><span class="blind">랭킹</span>2</span>
                                    <span class="change down">3<span class="blind">하락</span></span>
                                </div>
                                <div class="info">
                                    <span class="category">산악스키</span>
                                    <p class="title">오스트리아 최대의 산악스키 연맹, 산악스키 아마데! 5개 지역에 걸쳐있고, 총 25여개의 슬로프 길이</p>
                                    <span class="like"><span class="blind">좋아요</span>99,999</span>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="item_link">
                            <div class="img_box">
                                <img src="./img/thumb_main.jpg" alt="">
                            </div>
                            <div class="info_wrap">
                                <div class="rank">
                                    <span class="num"><span class="blind">랭킹</span>3</span>
                                    <span class="change keep"><span class="blind">유지</span></span>
                                </div>
                                <div class="info">
                                    <span class="category">산악스키</span>
                                    <p class="title">오스트리아 최대의 산악스키 연맹, 산악스키 아마데! 5개 지역에 걸쳐있고, 총 25여개의 슬로프 길이</p>
                                    <span class="like"><span class="blind">좋아요</span>99,999</span>
                                </div>
                            </div>
                        </a>
                    </li>
                </ol>
            </div>
        </div>
        <div class="sub_wrap">
            <ol class="sub_list">
                    <li>
                        <div class="img_wrap">
                            <a href="#" class="item_link">
                                <img src="./img/thumb_sub.jpg" alt="">
                                <span class="time"><span class="blind">재생시간</span>99:99</span>
                            </a>
                            <a href="#" class="watch_later_link"><span class="blind">나중에 보기</span></a>
                        </div>
                         <div class="info_wrap">
                            <div class="rank">
                                <span class="num"><span class="blind">랭킹</span>4</span>
                                <span class="change up">3<span class="blind">상승</span></span>
                            </div>
                            <div class="info">
                                <a href="#" class="title">국제육상경기연맹으로부터 라벨을 부여받은 국내의 단 두 개의 마라톤 대회 중 실버라벨을 5년 연속 유지하고 있는 대구국제마라톤대회!</a>
                                <a href="#" class="category_link">마라톤</a>
                                <span class="like"><span class="blind">좋아요</span>99,999</span>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="img_wrap">
                            <a href="#" class="item_link">
                                <img src="./img/thumb_sub.jpg" alt="">
                                <span class="time"><span class="blind">재생시간</span>99:99</span>
                            </a>
                            <a href="#" class="watch_later_link"><span class="blind">나중에 보기</span></a>
                        </div>
                        <div class="info_wrap">
                            <div class="rank">
                                <span class="num"><span class="blind">랭킹</span>5</span>
                                <span class="change down">2<span class="blind">하락</span></span>
                            </div>
                            <div class="info">
                                <a href="#" class="title">국제육상경기연맹으로부터 라벨을 부여받은 국내의 단 두 개의 마라톤 대회 중 실버라벨을 5년 연속 유지하고 있는 대구국제마라톤대회!</a>
                                <a href="#" class="category_link">마라톤</a>
                                <span class="like"><span class="blind">좋아요</span>99,999</span>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="img_wrap">
                            <a href="#" class="item_link">
                                <img src="./img/thumb_sub.jpg" alt="">
                                <span class="time"><span class="blind">재생시간</span>99:99</span>
                            </a>
                            <a href="#" class="watch_later_link"><span class="blind">나중에 보기</span></a>
                        </div>
                        <div class="info_wrap">
                            <div class="rank">
                                <span class="num"><span class="blind">랭킹</span>6</span>
                                <span class="change keep"><span class="blind">유지</span></span>
                            </div>
                            <div class="info">
                                <a href="#" class="title">국제육상경기연맹으로부터 라벨을 부여받은 국내의 단 두 개의 마라톤 대회 중 실버라벨을 5년 연속 유지하고 있는 대구국제마라톤대회!</a>
                                <a href="#" class="category_link">마라톤</a>
                                <span class="like"><span class="blind">좋아요</span>99,999</span>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="img_wrap">
                            <a href="#" class="item_link">
                                <img src="./img/thumb_sub.jpg" alt="">
                                <span class="time"><span class="blind">재생시간</span>99:99</span>
                            </a>
                            <a href="#" class="watch_later_link"><span class="blind">나중에 보기</span></a>
                        </div>
                        <div class="info_wrap">
                            <div class="rank">
                                <span class="num"><span class="blind">랭킹</span>7</span>
                                <span class="change up">3<span class="blind">상승</span></span>
                            </div>
                            <div class="info">
                                <a href="#" class="title">국제육상경기연맹으로부터 라벨을 부여받은 국내의 단 두 개의 마라톤 대회 중 실버라벨을 5년 연속 유지하고 있는 대구국제마라톤대회!</a>
                                <a href="#" class="category_link">마라톤</a>
                                <span class="like"><span class="blind">좋아요</span>99,999</span>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="img_wrap">
                            <a href="#" class="item_link">
                                <img src="./img/thumb_sub.jpg" alt="">
                                <span class="time"><span class="blind">재생시간</span>99:99</span>
                            </a>
                            <a href="#" class="watch_later_link"><span class="blind">나중에 보기</span></a>
                        </div>
                        <div class="info_wrap">
                            <div class="rank">
                                <span class="num"><span class="blind">랭킹</span>8</span>
                                <span class="change up">3<span class="blind">상승</span></span>
                            </div>
                            <div class="info">
                                <a href="#" class="title">국제육상경기연맹으로부터 라벨을 부여받은 국내의 단 두 개의 마라톤 대회 중 실버라벨을 5년 연속 유지하고 있는 대구국제마라톤대회!</a>
                                <a href="#" class="category_link">마라톤</a>
                                <span class="like"><span class="blind">좋아요</span>99,999</span>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="img_wrap">
                            <a href="#" class="item_link">
                                <img src="./img/thumb_sub.jpg" alt="">
                                <span class="time"><span class="blind">재생시간</span>99:99</span>
                            </a>
                            <a href="#" class="watch_later_link"><span class="blind">나중에 보기</span></a>
                        </div>
                          <div class="info_wrap">
                            <div class="rank">
                                <span class="num"><span class="blind">랭킹</span>9</span>
                                <span class="change up">3<span class="blind">상승</span></span>
                            </div>
                            <div class="info">
                                <a href="#" class="title">국제육상경기연맹으로부터 라벨을 부여받은 국내의 단 두 개의 마라톤 대회 중 실버라벨을 5년 연속 유지하고 있는 대구국제마라톤대회!</a>
                                <a href="#" class="category_link">마라톤</a>
                                <span class="like"><span class="blind">좋아요</span>99,999</span>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="img_wrap">
                            <a href="#" class="item_link">
                                <img src="./img/thumb_sub.jpg" alt="">
                                <span class="time"><span class="blind">재생시간</span>99:99</span>
                            </a>
                            <a href="#" class="watch_later_link"><span class="blind">나중에 보기</span></a>
                        </div>
                        <div class="info_wrap">
                            <div class="rank">
                                <span class="num"><span class="blind">랭킹</span>10</span>
                                <span class="change up">3<span class="blind">상승</span></span>
                            </div>
                            <div class="info">
                                <a href="#" class="title">국제육상경기연맹으로부터 라벨을 부여받은 국내의 단 두 개의 마라톤 대회 중 실버라벨을 5년 연속 유지하고 있는 대구국제마라톤대회!</a>
                                <a href="#" class="category_link">마라톤</a>
                                <span class="like"><span class="blind">좋아요</span>99,999</span>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="img_wrap">
                            <a href="#" class="item_link">
                                <img src="./img/thumb_sub.jpg" alt="">
                                <span class="time"><span class="blind">재생시간</span>99:99</span>
                            </a>
                            <a href="#" class="watch_later_link"><span class="blind">나중에 보기</span></a>
                        </div>
                        <div class="info_wrap">
                            <div class="rank">
                                <span class="num"><span class="blind">랭킹</span>11</span>
                                <span class="change up">3<span class="blind">상승</span></span>
                            </div>
                            <div class="info">
                                <a href="#" class="title">국제육상경기연맹으로부터 라벨을 부여받은 국내의 단 두 개의 마라톤 대회 중 실버라벨을 5년 연속 유지하고 있는 대구국제마라톤대회!</a>
                                <a href="#" class="category_link">마라톤</a>
                                <span class="like"><span class="blind">좋아요</span>99,999</span>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="img_wrap">
                            <a href="#" class="item_link">
                                <img src="./img/thumb_sub.jpg" alt="">
                                <span class="time"><span class="blind">재생시간</span>99:99</span>
                            </a>
                            <a href="#" class="watch_later_link"><span class="blind">나중에 보기</span></a>
                        </div>
                        <div class="info_wrap">
                            <div class="rank">
                                <span class="num"><span class="blind">랭킹</span>12</span>
                                <span class="change up">3<span class="blind">상승</span></span>
                            </div>
                            <div class="info">
                                <a href="#" class="title">국제육상경기연맹으로부터 라벨을 부여받은 국내의 단 두 개의 마라톤 대회 중 실버라벨을 5년 연속 유지하고 있는 대구국제마라톤대회!</a>
                                <a href="#" class="category_link">마라톤</a>
                                <span class="like"><span class="blind">좋아요</span>99,999</span>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="img_wrap">
                            <a href="#" class="item_link">
                                <img src="./img/thumb_sub.jpg" alt="">
                                <span class="time"><span class="blind">재생시간</span>99:99</span>
                            </a>
                            <a href="#" class="watch_later_link"><span class="blind">나중에 보기</span></a>
                        </div>
                        <div class="info_wrap">
                            <div class="rank">
                                <span class="num"><span class="blind">랭킹</span>13</span>
                                <span class="change up">3<span class="blind">상승</span></span>
                            </div>
                            <div class="info">
                                <a href="#" class="title">국제육상경기연맹으로부터 라벨을 부여받은 국내의 단 두 개의 마라톤 대회 중 실버라벨을 5년 연속 유지하고 있는 대구국제마라톤대회!</a>
                                <a href="#" class="category_link">마라톤</a>
                                <span class="like"><span class="blind">좋아요</span>99,999</span>
                            </div>
                        </div>
                    </li>
                </ol>
        </div>
    </div>
</body>
</html>
@charset "UTF-8";

/* 기본 스타일 */
body {
    font-family: Dotum,'돋움', Helvetica, sans-serif;
    font-size: 15px;
    line-height: 18px;
    color: #3c3c3c;
}
a {
    color: inherit;
    text-decoration: none;
    vertical-align: top;
}
img {
    vertical-align: top;
}
.blind {
    overflow: hidden;
    position: absolute;
    clip: rect(0 0 0 0);
    width: 1px;
    height: 1px;
    margin: -1px;
}

/* 스타일 선언 */
h1 {
    overflow: hidden;
    width: 1000px;
    margin: 0 auto;
    padding: 20px 0;
    line-height: 38px;
    font-size: 26px;
    color: #000;
}
.main_wrap {
    background-color: #ececec;
}
.main_wrap .content {
    position: relative;
    width: 1000px;
    margin: 0 auto;
    padding: 50px 0 20px;
}
.main_wrap .noti_txt {
    position: absolute;
    top: 20px;
    right: 0;
    font-size: 12px;
    color: #7c7c7c;
}
.main_list:after {
    display: block;
    content: '';
    clear: both;
}
.main_list li {
    float: left;
}
.main_list li + li {
    margin-left: 17px;
}
.main_list li .item_link {
    position: relative;
    display: block;
}
.main_list .img_box {
    position: relative;
}
.main_list .img_box:after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: '';
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(0, 0, 0, 0.05);
}
.main_list .img_box img {
    width: 322px;
    height: 215px;
}
.main_list .info_wrap {
    position: absolute;
    right: 15px;
    bottom: 15px;
    left: 15px;
    color: #fff;
    overflow: hidden;
}
.main_list .info {
    margin-left: 40px;
}
.main_list .rank {
    position: absolute;
    top: -5px;
    text-align: center;
}
.main_list .rank .num {
    display: block;
    font-size: 40px;
    line-height: 42px;
}
.main_list .rank .change {
    display: block;
    margin-top: 11px;
}
.main_list .rank .change:before {
    display: inline-block;
    content: '';
    margin-right: 3px;
}
.rank .up {
    color: #f82850;
}
.rank .down {
    color: #1996ff;
}
.rank .up:before {
    width: 7px;
    height: 10px;
    background: url(./img/rank_up.png) no-repeat;
}
.rank .down:before {
    width: 7px;
    height: 10px;
    background: url(./img/rank_down.png) no-repeat;
}
.rank .keep:before {
    width: 8px;
    height: 2px;
    padding-bottom: 4px;
    background: url(./img/rank_keep.png) no-repeat;
}
.main_list .category {
    font-size: 14px;
}
.main_list .title {
    margin-top: 3px;
    font-size: 18px;
    line-height: 22px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.main_list .like {
    position: relative;
    display: block;
    margin-top: 5px;
    padding-left: 18px;
    font-size: 14px;
    line-height: 20px;
}
.main_list .like:before {
    position: absolute;
    top: 3px;
    left: 0;
    content: '';
    width: 14px;
    height: 15px;
    background: url(./img/like_large.png) no-repeat;
}
.sub_wrap {
    margin-top: 30px;
}
.sub_list {
    width: 1000px;
    margin: 0 auto;
}
.sub_list:after {
    display: block;
    content: '';
    clear: both;
}
.sub_list li {
    float: left;
    width: 188px;
    margin-bottom: 40px;
}
.sub_list li + li {
    margin-left: 15px;
}
.sub_list li:nth-child(5n+1) {
    margin-left: 0;
}
.sub_list .img_wrap {
    position: relative;
}
.sub_list .item_link {
    display: block;
    position: relative;
}
.sub_list .item_link:after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: '';
    border: 1px solid rgba(0, 0, 0, 0.03);
}
.sub_list .item_link img {
    width: 188px;
    height: 141px;
}
.sub_list .time {
    position: absolute;
    right: 4px;
    bottom: 4px;
    height: 18px;
    padding: 0 7px 0;
    font-size: 11px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.7);
}
.sub_list .watch_later_link {
    display: none;
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 45px;
    height: 45px;
    background: url(./img/later_watch.png) no-repeat 0 0;
}
.sub_list .img_wrap:hover .watch_later_link {
    display: block;
}
.sub_list .img_wrap:hover .time {
    display: none;
}
.sub_list .info_wrap {
    margin-top: 10px;
    position: relative;
}
.sub_list .info {
    height: 79px;
    margin-left: 30px;
}
.sub_list .title {
    display: -webkit-box;
    overflow: hidden;
    max-height: 36px;
    font-size: 15px;
    line-height: 18px;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    word-break: break-all;
    color: #090909;
}
.sub_list .category_link {
    display: block;
    padding-top: 3px;
    font-size: 12px;
    color: #7ba7df;
}
.sub_list .rank {
    position: absolute;
    top: 0;
    bottom: 1px;
    width: 20px;
    text-align: center;
}
.sub_list .rank .num {
    display: block;
    font-size: 22px;
    line-height: 24px;
}
.sub_list .rank .change {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
}
.sub_list .rank .change:before {
    display: inline-block;
    content: '';
    margin-right: 3px;
}
.sub_list .like {
    position: absolute;
    bottom: 0;
    padding-left: 18px;
    font-size: 14px;
    line-height: 20px;
}
.sub_list .like:before {
    position: absolute;
    top: 6px;
    left: 0;
    content: '';
    width: 11px;
    height: 10px;
    background: url(./img/like.png) no-repeat;
}

📌 8. 표

1) 표 소개

테이블 != 일반 블럭 요소

  • 테이블 접근성
  • 셀의 크기
  • 셀 안에서의 콘텐츠 정렬
  • 테이블의 테두리
  • 테이블과 position

2) 표의 접근성

  • 모든 제목 셀(th)에는 scope 속성을 추가해서 어떤 내용 셀(td)에 대한 것인지 알려주어야 합니다.
    -> scope의 값으로는 col, row, colgroup, rowgroup

3) 표와 position 속성

4) 표의 Border 속성

  • border-collapse : separate; (기본 값)

  • border-collapse : collapse; (border 병합)

  • z-index
    table < col < tbody < thead < tr < td < th

5) 통계표 제작

<table>
<caption>성별, 연령별 분포 목록</caption>
<colgroup>
	<col span="2" class="col">
	<col span="2">
</colgroup>
<thead>
<tr>
	<th scope="col">연령별</th>
	<th scope="col">성별</th>
	<th scope="col" class="th_view">조회수</th>
	<th scope="col" class="th_rate">비율</th>
</tr>
</thead>
<tbody>
<tr>
	<th rowspan="2" scope="rowgroup">전체</th>
	<th scope="row" class="th_male">남</th>
	<td>0</td>
	<td>0.0%</td>
</tr>
<tr>
	<th scope="row" class="th_female">여</th>
	<td>0</td>
	<td>0.0%</td>
</tr>
<tr>
	<th rowspan="2" scope="rowgroup">0-12</th>
	<th scope="row" class="th_male">남</th>
	<td>0</td>
	<td>0.0%</td>
</tr>
<tr>
	<th scope="row" class="th_female">여</th>
	<td>0</td>
	<td>0.0%</td>
</tr>
</tbody>
</table>
table, td, th {
	border-collapse: collapse;
}

table {
	width: 500px;
	table-layout: fixed;
	font-size: 13px;
}

.col {
	width: 90px;
}

th {
	font-weight: normal;
}

th, td {
	border-bottom: 1px solid #e1e1e1;
}

thead th {
	padding: 5px 0;
	border-bottom: 2px solid #000;
}

tbody td {
	height: 40px;
}

.th_view,
.th_rate,
tbody td {
	text-align: right;
}

.th_male,
.th_female {
	background: #f8f8f8;
}
  • colgroup, col
  • table-layout: fixed;
    -> table에 전체 표의 크기를 지정했을 경우, 각 셀의 너비는 내용과 비례하여 자동 분할됨
  • th, td에서의 콘텐츠 정렬
    1. th에서 text-align : center;
    2. td에서 text-align: left;
    3. th, td에서 모두 vertical-align: middle;

5) 통계표 제작

<table>
<caption>달력</caption>
<thead>
<tr>
	<th scope="col">일</th>
	<th scope="col">월</th>
	<th scope="col">화</th>
	<th scope="col">수</th>
	<th scope="col">목</th>
	<th scope="col">금</th>
	<th scope="col">토</th>
</tr>
</thead>
<tbody>
<tr>
	<td>
		<div class="inner">
			<span class="date dimmed">30</span>
		</div>
	</td>
	<td>
		<div class="inner">
			<span class="date">1</span>
			<em class="text anniversary">국군의 날국군의 날국군의 날국군의 날</em>
		</div>
	</td>
	<td>
		<div class="inner">
			<span class="date">2</span>
		</div>
	</td>
	<td>
		<div class="inner">
			<span class="date holiday">3</span>
			<em class="text holiday">개천절</em>
		</div>
	</td>
	<td>
		<div class="inner">
			<span class="date">4</span>
		</div>
	</td>
	<td>
		<div class="inner">
			<span class="date">5</span>
		</div>
	</td>
	<td>
		<div class="inner">
			<span class="date">6</span>
		</div>
	</td>
</tr>
<tr>
	<td>
		<div class="inner">
			<span class="date holiday">7</span>
		</div>
	</td>
	<td>
		<div class="inner">
			<span class="date">8</span>
		</div>
	</td>
	<td>
		<div class="inner">
			<span class="date holiday">9</span>
			<em class="text holiday">한글날</em>
			<span class="lunar">음 9.1
		</span></div>
	</td>
	<td class="today">
		<div class="inner">
			<span class="date">10</span>
			<strong class="blind">오늘</strong>
		</div>
	</td>
	<td>
		<div class="inner">
			<span class="date">11</span>
		</div>
	</td>
	<td>
		<div class="inner">
			<span class="date">12</span>
		</div>
	</td>
	<td>
		<div class="inner">
			<span class="date">13</span>
		</div>
	</td>
</tr>
<tr>
	<td>
		<div class="inner">
			<span class="date holiday">7</span>
		</div>
	</td>
	<td>
		<div class="inner">
			<span class="date">8</span>
		</div>
	</td>
	<td>
		<div class="inner">
			<span class="date holiday">9</span>
			<em class="text holiday">한글날</em>
			<span class="lunar">음 9.1</span>
		</div>
	</td>
	<td>
		<div class="inner">
			<span class="date">10</span>
		</div>
	</td>
	<td>
		<div class="inner">
			<span class="date">11</span>
		</div>
	</td>
	<td>
		<div class="inner">
			<span class="date">12</span>
		</div>
	</td>
	<td>
		<div class="inner">
			<span class="date">13</span>
		</div>
	</td>
</tr>
</tbody>
</table>
table, th {
	border: 1px solid #eaedef;
	border-collapse: collapse;
}

td {
	border-top: 1px solid #eaedef;
	border-left: 1px solid #eaedef;
}


table {
	width: 590px;
	table-layout: fixed;
	font-size: 12px;
}

th {
	height: 25px;
	color: #777;
}

.inner {
	position: relative;
	height: 70px;
	padding: 5px;
}

.date {
	font-weight: bold;
}

.text {
	display: block;
	margin-top: 3px;
	font-style: normal;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.date.dimmed {
	color: #e7e7e7;
}

.date.holiday {
	color: #f44e4e;
}

.text.holiday {
	color: #f44e4e;
}

.text.anniversary {
	color: #00c;
}

.lunar {
	position: absolute;
	top: 6px;
	right: 6px;
	font-size: 11px;
	color: #bababa;
}

.today {
	border: 1px solid #e0e0bf;
	background: #ffffd9;
}

7) 표 요약 정리

  1. 테이블 접근성
  • th scope = "col, row, colgroup, rowgroup"
    -> 제목 셀인 모든 th에 추가
  • th id="", th headers=""
    -> 아주 복잡한 표에서 사용하지만, 대부분 scope로 접근성 해결 가능
  1. 셀의 크기
  • 셀의 크기를 지정해 주지 않을 경우, 내용에 맞게 변함
  • 표의 크기를 지정했을 경우, 각 셀의 너비는 자동 분할
  • table-layout : fixed;
  1. 셀 안에서의 콘텐츠 정렬

  • 제목 셀 (th)
    -> text-align : center;
    -> vertical-align : middle;

  • 내용 셀 (td)
    -> text-align : left;
    -> vertical-align: middle;

  1. 테이블의 테두리
  • 기본 모양은 테두리가 없음 -> 테이블 요소에 border 속성 적용이 가능
  • 테두리 사이의 간격 제거 -> border-collapse: seperate(기본값), collapse
    테이블이 렌더링되는 방식 때문에 border를 그리기 까다로움
  1. colgroup, col
  • width, backgroud, border를 해당 열에 일괄 적용
  • col span=""으로 병합 가능
  1. 테이블과 position
  • 테이블은 각 요소를 배치하는 틀로 보고 th/td 안에 inner DIV를 추가
  • 크로스 브라우징에 특히 신경쓸 ㅓㄳ
profile
김서현
이전 포스트

HTML, CSS 심화 (1)

다음 포스트

HTML, CSS (3)

0개의 댓글