이 글은 boostcourse의 '웹 UI 개발'을 수강하고 적는 글입니다.
메뉴(내비게이션) : 웹사이트에서 제공되는 정보를 쉽게 찾을 수 있도록 도와준다.
@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;
}
@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;
Tab : 색인표 또는 식별표
탭 UI의 특징 : 여러 문서 또는 패널을 하나의 창에 두고 전환하여 볼 수 있도록 한 인터페이스
탭과 내비게이션의 차이
사용자가 탭 또는 내비게이션을 클릭 시
- 내비게이션 : 다른 화면으로 이동
- 탭: 화면 이동 없이 선택한 탭과 연관된 콘텐츠가 보임
<!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;
Image List (섬네일) : 작은 크기의 견본 이미지
<!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;
}
<!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;
}
테이블 != 일반 블럭 요소
border-collapse : separate; (기본 값)
border-collapse : collapse; (border 병합)
z-index
table < col < tbody < thead < tr < td < th
<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;
}
<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;
}
제목 셀 (th)
-> text-align : center;
-> vertical-align : middle;
내용 셀 (td)
-> text-align : left;
-> vertical-align: middle;