투케이2K

38. (html/css/javascript/jquery) 반응형 tab 탭 화면 기능 구현 - display 사용 본문

FrontEnd

38. (html/css/javascript/jquery) 반응형 tab 탭 화면 기능 구현 - display 사용

투케이2K 2021. 6. 25. 08:23

/* =========================== */

[ 개발 환경 설정 ]

​

개발 툴 : Edit++

개발 언어 : html, css, js, jquery

/* =========================== */

​

/* =========================== */

[소스 코드]

 

<!DOCTYPE HTML>
<!-- 자바스크립트 차단된 콘텐츠 자동 허용 실시 -->
<!-- saved from url=(0013)about:internet -->

<!-- 표시 언어 지정 -->
<html lang="ko">

<!-- 헤더 정의 부분 -->
<head>
    <title>HTML TEST</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">  
    

    <!-- 내부 CSS 스타일 지정 -->
    <style>
		/* 
		[CSS 요소 설명] 
		1. font-family : 폰트 표시 형태 스타일 지정
		2. width : 가로 크기 지정
		3. height : 세로 크기 지정
		4. margin : 마진 (외부) 여백 설정
		5. padding : 패딩 (내부) 여백 설정
		6. border : 테두리 (선) 표시 설정
		7. background : 배경 표시 설정
		8. overflow : 범위를 벗어난 콘텐츠 표시 여부 설정 (스크롤)
		9. float : 정렬 기준 설정
		10. div : 레이아웃 표시 블록
		11. position : 레이아웃 위치 정렬 설정
		12. display : 해당 div 영역을 표시 여부 설정		
		13. vertical-align : middle; : 테이블 셀 영역에서 텍스트 수직 정렬 설정
		14. table-layout : 표 크기 고정 실시
		15. font-size : 텍스트 사이즈 지정
		*/
				    			 	
    	



		/* html, body 영역 스타일 지정 */
		html, body{
			width : 100%;
			height : 100%;
			margin : 0;
			padding : 0;
			border : none;	
			
			/* 스크롤바 표시 지정 */
			overflow : auto;					
		}


		
		

		/* body 스크롤바 메인 스타일 지정 */
		body::-webkit-scrollbar {
			/* 스크롤바 너비 지정 */
			width: 10px;
			
			/* 스크롤바 배경 색상 지정 */
			background-color: #c1c1c1;
		}
		/* body 스크롤바 thumb 스타일 지정 */
		body::-webkit-scrollbar-thumb {					
			/* 스크롤바 thumb 색상 지정 */
			background-color: #444444;
		}
        
        



		/* 메인 탭 레이아웃 */
		#tab_container {			
			width : 50%;
			height : 60%;
			margin : 0 auto;
			padding : 0;
			border : none;
			/*background-color : #ff0000;*/
					
			/* 컨테이너 배치 정렬 실시 */
			float : top;
			position : relative; 
			top : 15%;
			left : 0%;

			/* 브라우저에서 화면 터치 시 파란박스 하이라이트 제거 */
			-webkit-tap-highlight-color : rgba(0,0,0,0);
		}





		/* 탭 헤더 부분 레이아웃 */		
		#tab_header {			
			width : 100%;
			height : 15%;
			margin : 0 auto;
			padding : 0;
			border : none;
			/*background-color : #0000ff;*/
					
			/* 컨테이너 배치 정렬 실시 */
			float : top;
			position : relative; 
			top : 0%;
			left : 0%;

			/* 브라우저에서 화면 터치 시 파란박스 하이라이트 제거 */
			-webkit-tap-highlight-color : rgba(0,0,0,0);
		}





		/* 탭 헤더 공통 레이아웃 */
		.tab_header_common {
			width : 25%;
			height : 100%;
			margin : 0 auto;
			padding : 0;
			border : none;			
					
			/* 컨테이너 배치 정렬 실시 */
			float : left;
			position : relative; 
			top : 0%;
			left : 0%;
			
			/* 마우스 커서 스타일 지정 */
			cursor : pointer;	

			/* 브라우저에서 화면 터치 시 파란박스 하이라이트 제거 */
			-webkit-tap-highlight-color : rgba(0,0,0,0);

			/* 텍스트 정렬 위한 display 설정 */
			display: table;
			table-layout: fixed;
		}
		.tab_header_common:hover{
			/* 마우스 오버 시 투명도 조절 */
			opacity: 0.5;
		}
		.tab_header_text_common {
			/* 텍스트 가로 정렬 지정 */
			text-align : center; 
			
			/* 텍스트 색상 지정 */
			color : #ffffff;
			
			/* 텍스트 굵기 지정 */
			font-weight : bold;
			
			/* 텍스트 사이즈 지정 */        	
			font-size : 150%;
        	
			/* 텍스트 수직 정렬 실시 */        	        	 	
			display : table-cell;
			vertical-align : middle;
			
			/* 텍스트 내용 길면 숨김 처리*/
			overflow : hidden;
			text-overflow : ellipsis;
			white-space : nowrap;
			
			/* 태그 밑줄 없애기 */
			text-decoration : none;							
		}





		/* 탭 헤더 개별 레이아웃 */
		#tab_header_1 {						
			background-color : #ff0000;
		}
		#tab_header_2 {						
			background-color : #00ff00;
		}
		#tab_header_3 {						
			background-color : #0000ff;
		}
		#tab_header_4 {						
			background-color : #000000;
		}






		/* 탭 콘텐츠 레이아웃 */		
		#tab_content {			
			width : 100%;
			height : 85%;
			margin : 0 auto;
			padding : 0;
			border : none;
			background-color : #ff00ff;           
					
			/* 컨테이너 배치 정렬 실시 */
			float : top;
			position : relative; 
			top : -0.2%;
			left : 0%;

			/* 브라우저에서 화면 터치 시 파란박스 하이라이트 제거 */
			-webkit-tap-highlight-color : rgba(0,0,0,0);
		}





		/* 탭 콘텐츠 공통 레이아웃 */
		.tab_content_common {
			width : 100%;
			height : 100%;
			margin : 0 auto;
			padding : 0;
			border : none;			
					
			/* 컨테이너 배치 정렬 실시 */
			float : top;
			position : relative; 
			top : 0%;
			left : 0%;
			
			/* 마우스 커서 스타일 지정 */
			cursor : pointer;	

			/* 브라우저에서 화면 터치 시 파란박스 하이라이트 제거 */
			-webkit-tap-highlight-color : rgba(0,0,0,0);
		}





		/* 탭 콘텐츠 개별 레이아웃 */
		#tab_content_1 {						
			background-color : #ff6699;
			/* 표시 설정 */
			display: block;
		}
		#tab_content_2 {						
			background-color : #66cc99;
			/* 표시 설정 */
			display: none;
		}
		#tab_content_3 {						
			background-color : #3366ff;
			/* 표시 설정 */
			display: none;
		}
		#tab_content_4 {						
			background-color : #888888;
			/* 표시 설정 */
			display: none;
		}
		      				                          
    </style>


    <!-- 내부 JS 지정 -->
    <script>

    	/*
    	[JS 요약 설명]
    	1. includes : 특정 값이 포함된 것을 확인합니다
    	2. document.getElementById(객체).style : 특정 객체 스타일 속성을 변경합니다    	
    	*/

    	/* [이벤트 수행 함수] */
    	function tab_Change(tagId){
    		var id = tagId.id;
    		console.log("");
    		console.log("[tab_Change] : [start] : " + id); 
    		console.log("");

    		//반복문을 수행하면서 스타일 변경 실시
    		for(var i=1; i<=4; i++){
    			if(id.includes(i)){
    				var content = "tab_content_" + String(i);
    				document.getElementById(content).style.display = "block";
    			}
    			else {
    				var content = "tab_content_" + String(i);
    				document.getElementById(content).style.display = "none";
    			}
    		}    		

    	};
    	
    </script>

</head>


<body>

<!-- 탭 레이아웃 -->
<div id = "tab_container">
	<div id = "tab_header">
		<div id = "tab_header_1" class="tab_header_common" onclick="tab_Change(this);">
			<p class="tab_header_text_common">ONE</p>
		</div>
		<div id = "tab_header_2" class="tab_header_common" onclick="tab_Change(this);">
			<p class="tab_header_text_common">TWO</p>
		</div>
		<div id = "tab_header_3" class="tab_header_common" onclick="tab_Change(this);">
			<p class="tab_header_text_common">THREE</p>
		</div>
		<div id = "tab_header_4" class="tab_header_common" onclick="tab_Change(this);">
			<p class="tab_header_text_common">FOUR</p>
		</div>
	</div>
	<div id = "tab_content">
		<div id = "tab_content_1" class="tab_content_common"></div>
		<div id = "tab_content_2" class="tab_content_common"></div>
		<div id = "tab_content_3" class="tab_content_common"></div>
		<div id = "tab_content_4" class="tab_content_common"></div>
	</div>
</div>

</body>

</html>

/* =========================== */

​

/* =========================== */

[결과 출력]

​

​

/* =========================== */

​

/* =========================== */

[요약 설명]

​

/*

[CSS 요소 설명]

1. font-family : 폰트 표시 형태 스타일 지정

2. width : 가로 크기 지정

3. height : 세로 크기 지정

4. margin : 마진 (외부) 여백 설정

5. padding : 패딩 (내부) 여백 설정

6. border : 테두리 (선) 표시 설정

7. background : 배경 표시 설정

8. overflow : 범위를 벗어난 콘텐츠 표시 여부 설정 (스크롤)

9. float : 정렬 기준 설정

10. div : 레이아웃 표시 블록

11. position : 레이아웃 위치 정렬 설정

12. display : 해당 div 영역을 표시 여부 설정

13. vertical-align : middle; : 테이블 셀 영역에서 텍스트 수직 정렬 설정

14. table-layout : 표 크기 고정 실시

15. font-size : 텍스트 사이즈 지정

*/

​

/*

[JS 요약 설명]

1. includes : 특정 값이 포함된 것을 확인합니다

2. document.getElementById(객체).style : 특정 객체 스타일 속성을 변경합니다

*/

/* =========================== */

​

/* =========================== */

[파일 첨부]

a_test_tab.html
0.01MB

/* =========================== */

​

 

반응형
저작자표시

'FrontEnd' 카테고리의 다른 글

40. (html/css/javascript/jquery) keyboard 키보드 활성 시 ui 밀림 , 줄어듬 현상 방지 및 zoom in 줌 효과 제거 방법  (0) 2021.07.01
39. (html/css/javascript/jquery) keyframes 사용해 css 속성 조작해 애니메이션 (animation) 동작 수행 실시  (0) 2021.06.28
37. (html/css/javascript/jquery) class 클래스 설명 및 input text 기본 구현, value 변경 및 확인  (0) 2021.06.22
36. (html/css/javascript/jquery) box shadow 사용해 div 영역에 그림자 표시 수행 실시  (0) 2021.06.22
35. (html/css/javascript/jquery) canvas 캔버스 사용해 pc (피씨), mobile (모바일) 에서 전자 서명 기능 구현 - mouse , touch  (5) 2021.06.19
'FrontEnd' Related Articles more
Comments