[CSS] STUDY 15 - mini project 06 (CSS로 탭 메뉴 만들기)

PSEveloper ㅣ 2020. 5. 26. 12:09

Mini Project 06

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>홈페이지 레이아웃</title>
<link href="https://fonts.googleapis.com/css2?family=Henny+Penny&display=swap" rel="stylesheet">
<style>
	* {
		margin: 0px;
		padding: 0px;
	}
	
	body {
		font-family: 'Times New Roman', serif;  
	}
	
	li {
		list-style: none;
	}
	
	a {
		text-decoration: none;
	}
	
	img {
		border: 0px;
	}
	
	/* 헤더 영역 */
	
	#main_header {
		width: 1000px;
		margin: 0 auto;
		height: 160px;
	}
	
	#main_gnb {
		overflow: hidden;
	}
	
	#main_gnb > ul {
		overflow: hidden;
		float: right;
		margin-top: 10px;
	}
	
	#main_gnb > ul > li {
		float: left;
	}
	
	#main_gnb > ul > li > a {
		text-decoration: none;
		display: block;
		padding: 10px 20px;
		border: 1px solid black;
	}
	
	#main_gnb > ul > li:not(:last-child) > a {
		border-right: none;
	}
	
	#main_gnb > ul > li:first-child > a {
		border-radius: 15px 0 0 15px;
	}
	
	#main_gnb > ul > li:last-child > a {
		border-radius: 0 15px 15px 0;
	}
	
	#title {
		font-family: 'Henny Penny', cursive;
		font-size: 1.2em;
	}
	
	#main_lnb {
		overflow: hidden;
	}
	
	#main_lnb > ul {
		float: right;
		overflow: hidden;
	}
	
	#main_lnb > ul > li {
		float: left;
	}
	
	#main_lnb > ul > li > a {
		text-decoration: none;
		display: block;
		padding: 10px 20px;
		border: 1px solid black;
		height: 25px;
		line-height: 25px;
	}
	
	#main_lnb > ul > li:not(:last-child) > a {
		border-right: none;
	}
	
	#main_lnb > ul > li:first-child > a {
		border-radius: 10px 0 0 10px;
	}
	
	#main_lnb > ul > li:last-child > a {
		border-radius: 0 10px 10px 0;
	}
	
	/* 컨텐츠 영역 */
	
	#content {
		width: 1000px;
		position: relative;
		margin: 60px auto;
	}
	
	#main_section {
		width: 790px;
		position: absolute;
		top: 0; left: 0;
	}
	
	#main_section > article {
		border: 1px solid black;
		padding: 20px;
		box-sizing: border-box;
		margin: 10px 0;
	}
	
	#main_aside {
		width: 200px;
		position: absolute;
		top: 0; right: 0;
		margin-top: 10px;
	}
	
	#main_aside > input {
		position: relative;
		width: 98px;
		display: block;
		float: left;
		height: 30px;
		line-height: 30px;
		opacity: 0;
		visibility: hidden;
	}

	#main_aside > input[id="first"]:checked ~ .buttons > label[for="first"] {
		background-color: black;
		color: white;
	}

	#main_aside > input[id="second"]:checked ~ .tab_item_1 {
		display: none;
	}

	#main_aside > input[id="second"]:checked ~ .tab_item_2 {
		display: block;
	}

	input[id="second"]:checked ~ .buttons > label[for="second"] {
		background-color: black;
		color: white;
	}
	
	.buttons > label {
    		width: 100px;
    		box-sizing: border-box;
		position: absolute;
		font-size: 20px;
		border: 1px solid black;
		border-bottom: none;
		text-align: center;
		height: 35px;
		line-height: 35px;	
	}

	.buttons > label[for="first"] {
		top: 0; left: 0;
		border-right: none;
	}
	
	.buttons > label[for="second"] {
		top: 0; left: 50%;
	}
	
	#main_aside > div {
		margin-top: 35px;
	}

	#main_aside > div > ul > li > a {
		display: block;
		overflow: hidden;
		padding: 10px;
		border: 1px solid black;
		box-sizing: border-box;
	}
	
	#main_aside > div > ul > li:not(:last-child) > a {
		border-bottom: none;
	}
	
	.description {
		padding-left: 10px;
		width: 115px;
		/* 요소를 줄바꿈하지 않고 말줄임표로 표시 */
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	#main_aside > div > ul > li > a > div {
		float: left;
	}
	
	.tab_item_2 {
		display: none;
	}
	
	/* 푸터 영역 */
	
	#main_footer {
		width: 1000px;
		margin: 725px auto 100px;
		text-align: center;
		height: 50px;
		padding-top: 15px;
		border: 1px solid black;
	}
</style>
</head>
<body>
	<header id="main_header">
		<nav id="main_gnb">
			<ul>
				<li><a href="#">Web</a></li>
				<li><a href="#">Mobile</a></li>
				<li><a href="#">Game</a></li>
				<li><a href="#">Simulation</a></li>
				<li><a href="#">Data</a></li>
			</ul>
		</nav>
		<div id="title"><!-- #title 에 Henny Penny 글꼴 적용 -->
			<h1>Rint Development</h1>
			<h2>HTML5 + CSS3 Basic</h2>
		</div>
		<nav id="main_lnb">
			<ul>
				<li><a href="#">HTML5</a></li>
				<li><a href="#">CSS3</a></li>
				<li><a href="#">JavaScript</a></li>
				<li><a href="#">jQuery</a></li>
				<li><a href="#">Node.js</a></li>
			</ul>
		</nav>
	</header>
	<div id="content">
		<section id="main_section">
			<article class="main_article">
				<h1>Main Article</h1>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
					Curabitur in magna libero. Sed nec pharetra nunc. Proin eget magna
					id ipsum eleifend cursus sit amet nec lectus. Nunc quis lacus
					magna. Aliquam blandit, sapien ut viverra fermentum, elit tortor
					ornare nisi, in luctus sem massa pulvinar turpis. Cras tincidunt
					dictum urna ut ultricies. Nullam diam nibh, pellentesque non
					laoreet ut, bibendum nec mauris. Maecenas pulvinar porttitor
					laoreet. Vivamus bibendum purus nisl, eget aliquam lectus. Maecenas
					justo libero, euismod sit amet suscipit eu, vulputate eget neque.
					Aliquam quam est, blandit nec iaculis non, suscipit vel nunc. Proin
					et odio aliquam erat pharetra accumsan et quis neque. Vivamus
					interdum accumsan leo eu adipiscing. Integer accumsan elit non
					turpis faucibus porttitor. Aliquam scelerisque nisi et turpis
					pretium at ultricies turpis pharetra.
				</p>
			</article>
			<article class="main_article">
				<h1>Main Article</h1>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
					Curabitur in magna libero. Sed nec pharetra nunc. Proin eget magna
					id ipsum eleifend cursus sit amet nec lectus. Nunc quis lacus
					magna. Aliquam blandit, sapien ut viverra fermentum, elit tortor
					ornare nisi, in luctus sem massa pulvinar turpis. Cras tincidunt
					dictum urna ut ultricies. Nullam diam nibh, pellentesque non
					laoreet ut, bibendum nec mauris. Maecenas pulvinar porttitor
					laoreet. Vivamus bibendum purus nisl, eget aliquam lectus. Maecenas
					justo libero, euismod sit amet suscipit eu, vulputate eget neque.
					Aliquam quam est, blandit nec iaculis non, suscipit vel nunc. Proin
					et odio aliquam erat pharetra accumsan et quis neque. Vivamus
					interdum accumsan leo eu adipiscing. Integer accumsan elit non
					turpis faucibus porttitor. Aliquam scelerisque nisi et turpis
					pretium at ultricies turpis pharetra.
				</p>
			</article>
			<article class="main_article">
				<h1>Main Article</h1>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
					Curabitur in magna libero. Sed nec pharetra nunc. Proin eget magna
					id ipsum eleifend cursus sit amet nec lectus. Nunc quis lacus
					magna. Aliquam blandit, sapien ut viverra fermentum, elit tortor
					ornare nisi, in luctus sem massa pulvinar turpis. Cras tincidunt
					dictum urna ut ultricies. Nullam diam nibh, pellentesque non
					laoreet ut, bibendum nec mauris. Maecenas pulvinar porttitor
					laoreet. Vivamus bibendum purus nisl, eget aliquam lectus. Maecenas
					justo libero, euismod sit amet suscipit eu, vulputate eget neque.
					Aliquam quam est, blandit nec iaculis non, suscipit vel nunc. Proin
					et odio aliquam erat pharetra accumsan et quis neque. Vivamus
					interdum accumsan leo eu adipiscing. Integer accumsan elit non
					turpis faucibus porttitor. Aliquam scelerisque nisi et turpis
					pretium at ultricies turpis pharetra.
				</p>
			</article>
		</section>
		<aside id="main_aside">
			<input id="first" type="radio" name="tab" checked="checked" /> 
			<input id="second" type="radio" name="tab"/>
			<section class="buttons">
				<label for="first">First</label> 
				<label for="second">Second</label>
			</section>
			<div class="tab_item_1">
				<ul>
					<li class="item">
						<a href="#">
							<div class="thumbnail">
								<img src="http://placehold.it/45x45" />
							</div>
							<div class="description">
								<b>HTML5 Canvas</b>
								<p>2019-03-15</p>
							</div>
						</a>
					</li>
					<li class="item">
						<a href="#">
							<div class="thumbnail">
								<img src="http://placehold.it/45x45" />
							</div>
							<div class="description">
								<b>HTML5 Audio</b>
								<p>2019-03-15</p>
							</div>
						</a>
					</li>
					<li class="item">
						<a href="#">
							<div class="thumbnail">
								<img src="http://placehold.it/45x45" />
							</div>
							<div class="description">
								<b>HTML5 Video</b>
								<p>2019-03-15</p>
							</div>
						</a>
					</li>
					<li class="item">
						<a href="#">
							<div class="thumbnail">
								<img src="http://placehold.it/45x45" />
							</div>
							<div class="description">
								<b>HTML5 Semantic Tag</b>
								<p>2019-03-15</p>
							</div>
						</a>
					</li>
				</ul>
			</div>
			<div class="tab_item_2">
				<ul>
					<li class="item">
						<a href="#">
							<div class="thumbnail">
								<img src="http://placehold.it/45x45" />
							</div>
							<div class="description">
								<b>CSS3 Transition</b>
								<p>2019-03-15</p>
							</div>
						</a>
					</li>
					<li class="item">
						<a href="#">
							<div class="thumbnail">
								<img src="http://placehold.it/45x45" />
							</div>
							<div class="description">
								<b>CSS3 Animation</b>
								<p>2019-03-15</p>
							</div>
						</a>
					</li>
					<li class="item">
						<a href="#">
							<div class="thumbnail">
								<img src="http://placehold.it/45x45" />
							</div>
							<div class="description">
								<b>CSS3 Border</b>
								<p>2019-03-15</p>
							</div>
						</a>
					</li>
					<li class="item">
						<a href="#">
							<div class="thumbnail">
								<img src="http://placehold.it/45x45" />
							</div>
							<div class="description">
								<b>CSS3 Box</b>
								<p>2019-03-15</p>
							</div>
						</a>
					</li>
				</ul>
			</div>
		</aside>
	</div>
	<footer id="main_footer">
		<h3>HTML5 + CSS3 Basic</h3>
		<address>Website Layout Basic</address>
	</footer>
</body>
</html>

CSS로 탭메뉴 만드는 방법

: radio 버튼과 label 태그와 :checked 선택자와 ~ 동위 선택자 활용하기

#main_aside {
    width: 200px;
    position: absolute;
    top: 0; right: 0;
    margin-top: 10px;
}

#main_aside > input {
    position: relative;
    width: 98px;
    display: block;
    float: left;
    height: 30px;
    line-height: 30px;
    opacity: 0;
    visibility: hidden;
}

#main_aside > input[id="first"]:checked ~ .buttons > label[for="first"] {
    background-color: black;
    color: white;
}

#main_aside > input[id="second"]:checked ~ .tab_item_1 {
    display: none;
}

#main_aside > input[id="second"]:checked ~ .tab_item_2 {
    display: block;
}

input[id="second"]:checked ~ .buttons > label[for="second"] {
    background-color: black;
    color: white;
}

.buttons > label {
    width: 100px;
    box-sizing: border-box;
    position: absolute;
    font-size: 20px;
    border: 1px solid black;
    border-bottom: none;
    text-align: center;
    height: 35px;
    line-height: 35px;	
}

.buttons > label[for="first"] {
    top: 0; left: 0;
    border-right: none;
}

.buttons > label[for="second"] {
    top: 0; left: 50%;
}

#main_aside > div {
    margin-top: 35px;
}

#main_aside > div > ul > li > a {
    display: block;
    overflow: hidden;
    padding: 10px;
    border: 1px solid black;
    box-sizing: border-box;
}

#main_aside > div > ul > li:not(:last-child) > a {
    border-bottom: none;
}

.description {
    padding-left: 10px;
    width: 115px;
    /* 요소를 줄바꿈하지 않고 말줄임표로 표시 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#main_aside > div > ul > li > a > div {
    float: left;
}

.tab_item_2 {
    display: none;
}

<aside id="main_aside">
    <input id="first" type="radio" name="tab" checked="checked" /> 
    <input id="second" type="radio" name="tab"/>
    <section class="buttons">
        <label for="first">First</label> 
        <label for="second">Second</label>
    </section>
    <div class="tab_item_1">
        <ul>
            <li class="item">
                <a href="#">
                    <div class="thumbnail">
                        <img src="http://placehold.it/45x45" />
                    </div>
                    <div class="description">
                        <b>HTML5 Canvas</b>
                        <p>2019-03-15</p>
                    </div>
                </a>
            </li>
            <li class="item">
                <a href="#">
                    <div class="thumbnail">
                        <img src="http://placehold.it/45x45" />
                    </div>
                    <div class="description">
                        <b>HTML5 Audio</b>
                        <p>2019-03-15</p>
                    </div>
                </a>
            </li>
            <li class="item">
                <a href="#">
                    <div class="thumbnail">
                        <img src="http://placehold.it/45x45" />
                    </div>
                    <div class="description">
                        <b>HTML5 Video</b>
                        <p>2019-03-15</p>
                    </div>
                </a>
            </li>
            <li class="item">
                <a href="#">
                    <div class="thumbnail">
                        <img src="http://placehold.it/45x45" />
                    </div>
                    <div class="description">
                        <b>HTML5 Semantic Tag</b>
                        <p>2019-03-15</p>
                    </div>
                </a>
            </li>
        </ul>
    </div>
    <div class="tab_item_2">
        <ul>
            <li class="item">
                <a href="#">
                    <div class="thumbnail">
                        <img src="http://placehold.it/45x45" />
                    </div>
                    <div class="description">
                        <b>CSS3 Transition</b>
                        <p>2019-03-15</p>
                    </div>
                </a>
            </li>
            <li class="item">
                <a href="#">
                    <div class="thumbnail">
                        <img src="http://placehold.it/45x45" />
                    </div>
                    <div class="description">
                        <b>CSS3 Animation</b>
                        <p>2019-03-15</p>
                    </div>
                </a>
            </li>
            <li class="item">
                <a href="#">
                    <div class="thumbnail">
                        <img src="http://placehold.it/45x45" />
                    </div>
                    <div class="description">
                        <b>CSS3 Border</b>
                        <p>2019-03-15</p>
                    </div>
                </a>
            </li>
            <li class="item">
                <a href="#">
                    <div class="thumbnail">
                        <img src="http://placehold.it/45x45" />
                    </div>
                    <div class="description">
                        <b>CSS3 Box</b>
                        <p>2019-03-15</p>
                    </div>
                </a>
            </li>
        </ul>
    </div>
</aside>

PSE's blog

[CSS] STUDY 15 - mini project 06 (CSS로 탭 메뉴 만들기)

Mini Project 06

CSS로 탭메뉴 만드는 방법

티스토리툴바