013 CSS공부(9) 페이징 부분, 탭 메뉴 예제 실습

Top

Daily Study/Web Dev

2021. 2. 1.

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>paginate</title>
	<style>
	/* reset */
	html,body{width:100%;height:100%}
	body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select{margin:0;padding:0}
	body,input,textarea,select,button,table{font-family:'Malgun Gothic',Dotum,AppleGothic,sans-serif;font-size:12px}
	img,fieldset{border:0}
	ul,ol{list-style:none}
	em,address{font-style:normal}
	a{text-decoration:none}
	a:hover,a:active,a:focus{text-decoration:underline}	

	/* style */
	.wrap {
		width: 960px;
		margin: 0 auto;
	}
	.paginate {
		padding: 20px 0;
		text-align: center;
		}
	.paginate a,
	.paginate strong {
		display: inline-block;
		border: 1px solid transparent;
		/* 페이징표시 마우스오버시 보더가 나타나는건 비워놓는게 아니고
		투명한데 올리면 색이 바뀌는걸로 해야 요소들 위치가 안 바뀜
		비워놓고 올렸을때만 보더가 나타나게 하면 보더 두께만큼 움찔거림 */
		padding: 6px 8px;
		color: #666;
		font-family: verdana,'Malgun Gothic',sans-serif;
		/* 순서대로 없으면 다음 폰트로 적용, 영어/숫자에는 verdana 적용하고
		한글은 verdana 적용이 안되니까 맑은 고딕으로 적용 */
		font-size: 1.2em;
		font-weight: normal;
		line-height: 1.2em;
	}
	.paginate a:hover,
	.paginate a.direction {
		border: 1px solid #ddd;
	}
	.paginate a {}
	.paginate strong {
		border-color: #ffb69f;
		color: #ffb69f
	}
	.paginate .direction:hover {
		color: #000;
		text-decoration: none;
	}
	.paginate .direction span {
		display: inline-block;
		width: 0;
		height: 0;
		border: 4px solid #666;
		vertical-align: 2px;
	}
	.paginate .direction.prev span {
		border-width: 4px 4px 4px 0;
		border-color: transparent #666 transparent transparent;
	}
	.paginate .direction.next span {
		border-width: 4px 0 4px 4px;
		border-color: transparent transparent transparent #666;
	}
	.paginate .direction.prev:hover span {
		border-color: transparent #000 transparent transparent;
	}
	.paginate .direction.next:hover span {
		border-color: transparent transparent transparent #000;
	}


	</style>
</head>
<body>
<div class="wrap">
	<div class="paginate">
		<a href="#" class="direction prev"><span></span><span></span> 처음</a>
		<a href="#" class="direction prev"><span></span> 이전</a>
		<a href="#">1</a>
		<a href="#">2</a>
		<a href="#">3</a>
		<a href="#">4</a>
		<strong>5</strong>
		<a href="#">6</a>
		<a href="#">7</a>
		<a href="#">8</a>
		<a href="#">9</a>
		<a href="#" class="direction next">다음 <span></span></a>
		<a href="#" class="direction next">끝 <span></span><span></span></a>
	</div>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>tabmenu</title>
	<style>
	/* reset */
	html,body{width:100%;height:100%}
	body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select{margin:0;padding:0}
	body,input,textarea,select,button,table{font-family:'Malgun Gothic',Dotum,AppleGothic,sans-serif;font-size:12px}
	img,fieldset{border:0}
	ul,ol{list-style:none}
	em,address{font-style:normal}
	a{text-decoration:none}
	a:hover,a:active,a:focus{text-decoration:underline}

	/* style */
	.wrap {
		width: 960px;
		margin: 0 auto;
		padding: 30px 0;
	}
	.tab_list {
		position: relative;
		/*margin: 30px 0;*/
		width: 500px;
		height: 200px;
	}
	.tab_list li.m1 > a {
		/* 자식 선택자 사용 >로 하위 태그에 적용하는 방법
			굳이 a태그마다 다른 클래스로 적용 안해도 됨 */
		color: red;
	}
	.tab_list li.m1,
	.tab_list li.m2,
	.tab_list li.m3 {

	}

	.tab_list li.m1 > a,
	.tab_list li.m2 > a,
	.tab_list li.m3 > a {
		display: block;
		float: left;
		height: 35px;
		padding: 0 30px;
		border: 1px solid #aaa;
		background-color: #eee;
		color: #666;
		font-size: 13px;
		text-decoration: none;
		line-height: 35px;
	}
	.tab_list li.m1.active > a,
	.tab_list li.m2.active > a,
	.tab_list li.m3.active > a {
		position: relative;
		z-index: 1;
		border-bottom-color: #fff;
		background-color: #fff;
		color: #222;
		font-weight: bold;
	}
	.tab_list li.m1 ul,
	.tab_list li.m2 ul,
	.tab_list li.m3 ul {
		display: none;
		position: absolute;
		left: 0;
		top: 36px;
		width: 100%;
		border-top: 1px solid #aaa;
		padding-top: 10px;
	}
	.tab_list li.m1 ul li,
	.tab_list li.m2 ul li,
	.tab_list li.m3 ul li {
		/*overflow: hidden;*/
		margin-bottom: 6px;
		padding-bottom: 4px;
		border-bottom: 1px dashed #ddd;
		line-height: 1.5;
	}
	.tab_list li.m1 ul li:after,
	.tab_list li.m2 ul li:after,
	.tab_list li.m3 ul li:after {
		content: '';
		display: block;
		clear: both;
	}
	.tab_list li.m1 ul li a,
	.tab_list li.m2 ul li a,
	.tab_list li.m3 ul li a {
		float: left;
		color: #666;
	}

	.tab_list li.m1 ul li span,
	.tab_list li.m2 ul li span,
	.tab_list li.m3 ul li span {
		float: right;
		color: #666;
		font-family: verdana,sans-serif;
		font-size: 11px;

	}
	.tab_list li.m1.active ul,
	.tab_list li.m2.active ul,
	.tab_list li.m3.active ul {
		display: block;
	}
	.tab_list li.m1 .more,
	.tab_list li.m2 .more,
	.tab_list li.m3 .more {
		display: none;
		position: absolute;
		right: 0;
		top: 13px;
		line-height: 1.5;
	}
	.tab_list li.m1 .more a,
	.tab_list li.m2 .more a,
	.tab_list li.m3 .more a {
		color: #666;
	}
	.tab_list li.m1.active .more,
	.tab_list li.m2.active .more,
	.tab_list li.m3.active .more {
		display: block;
	}
	</style>
</head>
<body>
<div class="wrap">
	<!-- UI Object -->
	<div class="tab_list">
		<ul>
			<li class="m1">
				<a href="#"><span>공지사항</span></a>
				<ul>
					<li><a href="#">이것은 첫 번째 탭의 공지사항 목록 입니다.</a> <span>2021-02-03</span></li>
					<li><a href="#">이것은 첫 번째 탭의 공지사항 목록 입니다.</a> <span>2021-02-02</span></li>
					<li><a href="#">이것은 첫 번째 탭의 공지사항 목록 입니다.</a> <span>2021-02-01</span></li>
				</ul>
				<p class="more"><a href="#">공지사항 더보기</a></p>
			</li>
			<li class="m2">
				<a href="#"><span>보도자료</span></a>
				<ul>
					<li><a href="#">이것은 두 번째 탭의 보도자료 목록 입니다.</a> <span>2021-02-04</span></li>
					<li><a href="#">이것은 두 번째 탭의 보도자료 목록 입니다.</a> <span>2021-02-03</span></li>
					<li><a href="#">이것은 두 번째 탭의 보도자료 목록 입니다.</a> <span>2021-02-02</span></li>
					<li><a href="#">이것은 두 번째 탭의 보도자료 목록 입니다.</a> <span>2021-02-01</span></li>
				</ul>
				<p class="more"><a href="#">보도자료 더보기</a></p>
			</li>
			<li class="m3 active">
				<a href="#"><span>해명자료</span></a>
				<ul>
					<li><a href="#">이것은 세 번째 탭의 해명자료 목록 입니다.</a> <span>2021-01-31</span></li>
					<li><a href="#">이것은 세 번째 탭의 해명자료 목록 입니다.</a> <span>2021-02-01</span></li>
					<li><a href="#">이것은 세 번째 탭의 해명자료 목록 입니다.</a> <span>2021-02-04</span></li>
					<li><a href="#">이것은 세 번째 탭의 해명자료 목록 입니다.</a> <span>2021-02-05</span></li>
					<li><a href="#">이것은 세 번째 탭의 해명자료 목록 입니다.</a> <span>2021-02-06</span></li>
				</ul>
				<p class="more"><a href="#">해명자료 더보기</a></p>
			</li>
		</ul>
	</div>
	<!-- //UI Object -->
	<p>Lorem ipsum dolor sit, amet consectetur adipisicing, elit. Tempora eos harum iusto saepe quidem unde animi? Dolore perferendis provident, earum iste quo reprehenderit architecto magnam distinctio, neque animi tempore illum!</p>

</div>

</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>tab menu</title>
	<style>
	/* reset */
	html,body{width:100%;height:100%}
	body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select{margin:0;padding:0}
	body,input,textarea,select,button,table{font-family:'Malgun Gothic',Dotum,AppleGothic,sans-serif;font-size:12px}
	img,fieldset{border:0}
	ul,ol{list-style:none}
	em,address{font-style:normal}
	a{text-decoration:none}
	a:hover,a:active,a:focus{text-decoration:underline}

	/* style */
	.wrap {
		width: 900px;
		margin: 0 auto;
	}

	.list {
		position: relative;
		margin: 30px 0;
		width: 800px;
		height: 200px;
	}

	.list li.menu1,
	.list li.menu2,
	.list li.menu3,
	.list li.menu4,
	.list li.menu5 {

	}

	.list .menu1>a,
	.list .menu2>a,
	.list .menu3>a,
	.list .menu4>a,
	.list .menu5>a {
		display: block;
		float: left;
		height: 50px;
		width: 120px;
		/*padding: 0 30px;*/
		text-align: center;
		/*background-color: #eee;*/
		border: 1px solid #aaa;
		color: #666;
		font-size: 20px;
		font-family: baskerville, serif;
		line-height: 50px;
		text-decoration: none;
	}

	.list .menu1>a {background-color: rgba(246,195,203,.1);}	
	.list .menu2>a {background-color: rgba(243,168,59,.1);}	
	.list .menu3>a {background-color: rgba(0,29,245,.1);}	
	.list .menu4>a {background-color: rgba(53,125,34,.1);}	
	.list .menu5>a {background-color: rgba(118,25,124,.1);}	

	.list .menu1>a:hover {
		color: pink;
		font-weight: bold;
	}

	.list .menu2>a:hover {
		color: orange;
		font-weight: bold;
	}

	.list .menu3>a:hover {
		color: blue;
		font-weight: bold;
	}

	.list .menu4>a:hover {
		color: green;
		font-weight: bold;
	}

	.list .menu5>a:hover {
		color: purple;
		font-weight: bold;
	}


	.list .menu1.active>a,
	.list .menu2.active>a,
	.list .menu3.active>a,
	.list .menu4.active>a,
	.list .menu5.active>a {
		position: relative;
		z-index: 1;
		border-bottom-color: #fff;
		background-color: #fff;
	}
	.list .menu1.active>a {
		color: pink;
		font-weight: bold;
	}
	.list .menu2.active>a {
		color: orange;
		font-weight: bold;
	}
	.list .menu3.active>a {
		color: blue;
		font-weight: bold;
	}
	.list .menu4.active>a {
		color: green;
		font-weight: bold;
	}
	.list .menu5.active>a {
		color: purple;
		font-weight: bold;
	}


	.list li.menu1 ul,
	.list li.menu2 ul,
	.list li.menu3 ul,
	.list li.menu4 ul,
	.list li.menu5 ul {
		display: none;
		/* active 된 메뉴 말고는 안보이게 하기 */
		position: absolute;
		left: 0;
		top: 51px;
		/* 버튼 높이 50px + border 1px */
		width: 100%;
		/* absolute position일때 width값을 100%로 채워서 border-top이 끝까지 보여지게 할 수 있음 */
		border-top: 1px solid #aaa;
		padding-top: 10px;
	}
	.list li.menu1 ul li,
	.list li.menu2 ul li,
	.list li.menu3 ul li,
	.list li.menu4 ul li,
	.list li.menu5 ul li {
		/*overflow: hidden;*/
		margin-bottom: 8px;
		padding-bottom: 4px;
		border-bottom: 1px dashed #ddd;
		line-height: 1.5;
	
	}
	.list li.menu1 ul li:after,
	.list li.menu2 ul li:after,
	.list li.menu3 ul li:after,
	.list li.menu4 ul li:after,
	.list li.menu5 ul li:after {
		content: '';
		display: block;
		clear: both;
	}

	.list li.menu1 ul li a,
	.list li.menu2 ul li a,
	.list li.menu3 ul li a,
	.list li.menu4 ul li a,
	.list li.menu5 ul li a {
		float: left;
		color: #666;
	}

	.list li.menu1 ul li span,
	.list li.menu2 ul li span,
	.list li.menu3 ul li span,
	.list li.menu4 ul li span,
	.list li.menu5 ul li span {
		float: right;
		color: #666;
		font-family: baskerville,serif;
		font-size: 11px;

	}

	.list li.menu1.active ul,
	.list li.menu2.active ul,
	.list li.menu3.active ul,
	.list li.menu4.active ul,
	.list li.menu5.active ul {
		display: block;
		/* active 붙은 것만 보여주기 */
	}
	.list li.menu1 .more,
	.list li.menu2 .more,
	.list li.menu3 .more,
	.list li.menu4 .more,
	.list li.menu5 .more {
		display: none;
		/* active 되지 않은 메뉴들 더보기는 안보이게 하기 */
		position: absolute;
		right: 0;
		top: 28px;
		line-height: 1.5;
	}
	.list li.menu1 .more a,
	.list li.menu2 .more a,
	.list li.menu3 .more a,
	.list li.menu4 .more a,
	.list li.menu5 .more a {
		color: #666;
		letter-spacing: -1px;
	}

	.list li.menu1.active .more,
	.list li.menu2.active .more,
	.list li.menu3.active .more,
	.list li.menu4.active .more,
	.list li.menu5.active .more {
		display: block;
		/* active 붙은 것만 보여주기 */
}
	</style>
</head>
<body>

<div class="wrap">
	<div class="list">
		<ul>
			<li class="menu1 active">
				<a href="#"><span>Irene</span></a>
				<ul>
					<li><a href="#">아이린 방송출연</a> <span>2021-02-01</span></li>
					<li><a href="#">아이린 개인활동</a> <span>2021-01-31</span></li>
					<li><a href="#">아이린 인터뷰</a> <span>2021-01-31</span></li>
					<li><a href="#">아이린 개인화보</a> <span>2021-01-21</span></li>
					<li><a href="#">아이린 개인스케쥴</a> <span>2021-01-19</span></li>
				</ul>
				<p class="more"><a href="#">더 보기</a></p>
			</li>
			<li class="menu2">
				<a href="#"><span>Seulgi</span></a>
				<ul>
					<li><a href="#">슬기 방송출연</a> <span>2021-02-01</span></li>
					<li><a href="#">슬기 개인활동</a> <span>2021-02-01</span></li>
					<li><a href="#">슬기 인터뷰</a> <span>2021-02-01</span></li>
					<li><a href="#">슬기 개인화보</a> <span>2021-02-01</span></li>
					<li><a href="#">슬기 개인스케쥴</a> <span>2021-02-01</span></li>
				</ul>
				<p class="more"><a href="#">더 보기</a></p>
			</li>
			<li class="menu3">
				<a href="#"><span>Wendy</span></a>
				<ul>
					<li><a href="#">웬디 방송출연</a> <span>2021-02-01</span></li>
					<li><a href="#">웬디 개인활동</a> <span>2021-02-01</span></li>
					<li><a href="#">웬디 인터뷰</a> <span>2021-02-01</span></li>
					<li><a href="#">웬디 개인화보</a> <span>2021-02-01</span></li>
					<li><a href="#">웬디 개인스케쥴</a> <span>2021-02-01</span></li>
				</ul>
				<p class="more"><a href="#">더 보기</a></p>
			</li>
			<li class="menu4">
				<a href="#"><span>Joy</span></a>
				<ul>
					<li><a href="#">조이 방송출연</a> <span>2021-02-01</span></li>
					<li><a href="#">조이 개인활동</a> <span>2021-02-01</span></li>
					<li><a href="#">조이 인터뷰</a> <span>2021-02-01</span></li>
					<li><a href="#">조이 개인화보</a> <span>2021-02-01</span></li>
					<li><a href="#">조이 개인스케쥴</a> <span>2021-02-01</span></li>
				</ul>
				<p class="more"><a href="#">더 보기</a></p>
			</li>
			<li class="menu5">
				<a href="#"><span>Yeri</span></a>
				<ul>
					<li><a href="#">예리 방송출연</a> <span>2021-02-01</span></li>
					<li><a href="#">예리 개인활동</a> <span>2021-02-01</span></li>
					<li><a href="#">예리 인터뷰</a> <span>2021-02-01</span></li>
					<li><a href="#">예리 개인화보</a> <span>2021-02-01</span></li>
					<li><a href="#">예리 개인스케쥴</a> <span>2021-02-01</span></li>
				</ul>
				<p class="more"><a href="#">더 보기</a></p>
			</li>
		</ul>
	</div>

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

탭메뉴 예제를 바탕으로 비슷하게 만들어 봤는데

강의 보면서 따라하는게 아니라

직접 하려고 하니까 되게 막막했다...

일단은 무슨 스타일부터 적용해야될지 좀 복잡했고

들어가는 내용들이나 마우스오버 효과 같은걸 수정하려고 하니까

의도치 않은 실수들 때문에 찾는데 한참 걸리고 그런 일의 반복이었다.

지금 선택된 탭 메뉴 하단 border를 흰색으로 하는 스타일 태그인데

계속 뭐가 잘못됐는지 찾았는데

나중에 보니까 :이 두개 들어가있었다...

아마 엔터를 언제 쳤냐에 따라서 추가됐던 것 같은데 확인을 못했다.

그 다음에는 active가 붙은 클래스에만 적용하는 태그들 부분이

알고보니까 복사할때 수정을 안해놔서

menu1.active

menu2.active

menu3.active

이런 식이 아니라

menu1.active

이런 식으로 같은 메뉴만 5개 복사되어있었는데 확인을 못해서

찾는데 한 2~30분은 걸린 것 같다...

확실히 조금만 수정해서 혼자 해보려고 해도 체감 난이도가 확 다른 것 같다.

진짜 제대로 생각하면서 코드를 짜야될 것 같다.

저작자표시

'Daily Study > Web Dev' 카테고리의 다른 글

015 CSS공부(11) 갤러리 형식의 리스트 예제 실습 (0)	2021.02.04
014 CSS공부(10) FAQ 목록 만들기 예제 실습 (0)	2021.02.03
012 CSS공부(8) 박스모델 수직가운데정렬, 버튼 예제 실습 (0)	2021.01.28
011 CSS공부(7) 박스모델 예제 실습 (0)	2021.01.27
010 CSS공부(6) 이메일, 이벤트 페이지 예제 실습 (0)	2021.01.26