프론트엔드2-3. tab메뉴 만들기

먼저 이런 탭 메뉴 사진들 가져오기

1. 기본 구조 만들기

1. ul로 메뉴, radio, 사진 첨부

html 파일

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>tabMenu</title>
	<link rel="stylesheet" href="style.css" type="text/css"></link>
</head>
<body>
	<div id="tabmenu">
		<!-- 메뉴 -->
		<ul>
			<li><label>블로그</label></li>
			<li><label>카페</label></li>
			<li><label>지식공간</label></li>
			<li><label>영화</label></li>
			<li><label>뮤직</label></li>
			<li><label>웹툰</label></li>
			<li><label>브런치</label></li>
			<li><label>게임</label></li>
		</ul>
		<!-- 버튼 -->
		<input type="radio" name="menu"/>
		<input type="radio" name="menu"/>
		<input type="radio" name="menu"/>
		<input type="radio" name="menu"/>
		<input type="radio" name="menu"/>
		<input type="radio" name="menu"/>
		<input type="radio" name="menu"/>
		<input type="radio" name="menu"/>
		<!-- 컨텐츠 -->
		<div><img src="tab1.png"/></div>
		<div><img src="tab2.png"/></div>
		<div><img src="tab9.png"/></div>
		<div><img src="tab4.png"/></div>
		<div><img src="tab5.png"/></div>
		<div><img src="tab6.png"/></div>
		<div><img src="tab7.png"/></div>
		<div><img src="tab8.png"/></div>
	</div>
</body>
</html>

2. CSS파일

@charset "UTF-8";
/*초기화*/
body, ul, li {margin:0; padding:0; list-style-type:none;}

2. li과 radio를 연결시키기

li인 블로그 글자를 클릭하면 연결된 radio가 checked 된다.
이렇게 모든 li를 radio와 연결시키면 된다.
그 다음에 라디오 버튼 숨기기

<ul>
	<li><label for="m1">블로그</label></li>
</ul>
<!-- 버튼 -->
	<input type="radio" name="menu" id="m1"/>

1. css 파일

@charset "UTF-8";

body, ul, li {margin:0; padding:0; list-style-type:none;}

/*메뉴*/
#menu>li {
	float:left; padding-right: 35px;
}
/*라디오 버튼 숨기기*/
#tabMenu>input[type=radio]{
	display:none;
}

#tabMenu {
	width:600px; height:600px; border:2px solid gray;
}

3. 컨텐츠 내용 겹치기

/*컨텐츠 겹치기(내용 겹치기)*/
#tabMenu>div{
	position:absolute; left:0px; top:0px; 
}

이렇게 되면 메뉴까지 가려버리게 되기 때문에 top:30px 공간을 남겨둔다.
지금 현재 #tabMenu>div를 감싸고 있는 #tabMenu가 position을 안정해줘서 position이 static이기 때문에 body를 기준으로 한다. 그래서 그것을 없애주기 위해서 #tabMenu에 relative를 해줘야한다.
absolute가 아닌 relative를 하는 이유는 relative가 공간을 차지하기 때문에(자리를 안빠져나간다.)

#tabMenu {
	width:600px; height:600px; border:2px solid gray;
	position:relative; 
	overflow:hidden;    /*넘치는 건 삭제(안보이게 하기)*/
}

/*컨텐츠 겹치기(내용 겹치기)*/
#tabMenu>div{
	position:absolute; left:0px; top:30px; 
}

4. 컨텐츠 숨기게 하고 메뉴 바꾸기 구현

radio버튼이 클릭되면 해당 컨텐츠 보여주기

#tabMenu>div{
	position:absolute; left:0px; top:30px; display:none; /*컨텐츠 숨기기*/
}

/*메뉴 바꾸기 구현 : radio버튼이 클릭되면(연결한 글자를 클릭하면) 해당 컨텐츠를 보여주기*/
/*상태선택자*/
#m1:checked~div:nth-of-type(1){display:block;} /*id가 m1인게 check될 때 첫번째 div 요소*/

블로그를 누르면 이렇게 사진이 뜨게 된다.

새로고침하자마자 페이지에 바로 뜨게 하고 싶으면 checked를 주면 된다.
<input type="radio" name="menu" id="m1" checked/>
#m1:checked~div:nth-of-type(1){display:block;}

저작자표시

'멀티캠퍼스 풀스택 과정 > 프론트엔드' 카테고리의 다른 글

프론트엔드3-2. JavaScript의 함수(메서드)와 이벤트 (0)	2022.02.09
프론트엔드3-1. JavaScript 기본(입출력방법과 Dom요소의 선택) (0)	2022.02.09
프론트엔드2-2. 반응형 웹(미디어쿼리)과 meta 태그 (0)	2022.02.07
프론트엔드2-1. div로 layout / Semantic 태그로 layout (0)	2022.02.07
프론트엔드1-10. css transition(예제) / visibility와 display (0)	2022.02.07