투케이2K

10. (html/css/javascript/jquery) viewport 뷰포트 , media 미디어 사용해 반응형 모바일 구조로 레이아웃 변경 실시 본문

FrontEnd

10. (html/css/javascript/jquery) viewport 뷰포트 , media 미디어 사용해 반응형 모바일 구조로 레이아웃 변경 실시

투케이2K 2021. 5. 25. 17:52

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

[ 개발 환경 설정 ]

​

개발 툴 : Edit++

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

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

​

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

[소스 코드]

 

<!DOCTYPE HTML>
<!-- 표시 언어 지정 -->
<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">
    
    <!-- 반응형 뷰 포트를 사용하기 위함 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 내부 CSS 스타일 지정 -->
    <style>
		/* 
		[요소 설명] 
		1. font-family : 폰트 표시 형태 스타일 지정
		2. width : 가로 크기 지정
		3. height : 세로 크기 지정
		4. margin : 마진 (외부) 여백 설정
		5. padding : 패딩 (내부) 여백 설정
		6. border : 테두리 (선) 표시 설정
		7. background : 배경 표시 설정
		8. display : 화면에 어떻게 표시 할지를 설정 (정렬, 표시여부)		
		9. div : 레이아웃 표시 블록
		10. viewport : 메타 태그로 반응형 뷰 포트 설정 실시
		11. media : 실시간 반응형 뷰 포트 디스플레이 화면 크기 확인
		12. min-width : 최소 너비 사이즈
		13. min-height : 최소 높이 사이즈
		14. position : 레이아웃 배치할때 사용	
		15. float : 정렬 기준 설정
    	
    	
		[세부 설명]
		1. width : 100%; : 가로 크기를 (%)로 지정 - 반응형 설정
		2. margin : 0 auto; : 중앙 배치 설정
		3. border : none; : 테두리 스타일 없음 설정
		4. background-color : #343d46; : rgb 색상을 사용해 배경색 지정
		5. position : relative; : 부모 기준으로 위치 지정 실시		
		7. display : inline-block; : 가로 방향으로 정렬 실시
		8. display : block; : 세로 방향으로 정렬 실시
		*/							
    	
		/* 전체 공통 스타일 설정 지정 */	
		* {
			font-family : 'Noto Sans KR' , sans-serif;    	
		}
    	
		/* html, body 영역 스타일 지정 */
		html, body{
			width : 100%;
			height : 100%;
			margin : 0;
			padding : 0;
			border : none;
			
			/* overflow 설정 실시 */
			overflow : hidden;			
		}
        
		/* 상단 div 스타일 지정 */
		#header_container {
			width : 100%;
			height : 10%;
			margin : 0 auto;
			padding : 0;
			border : none;
			background-color : #343d46;
			
			/* 컨테이너 배치 정렬 실시 */
			float : top;
			position : relative; 
			top : 0%;
			left : 0%;     
		}
		
		/* 콘텐트 div 스타일 지정 */
		#content_container {
			width : 100%;
			height : 70%;
			margin : 0 auto;
			padding : 0;
			border : none;			
			 
			/* 컨테이너 배치 정렬 실시 */
			float : top;		
			position : relative; 
			top : 0%;
			left : 0%;	     		     
		}			
		
		/* 하단 div 스타일 지정 */
		#footer_container {
			width : 100%;
			height : 20%;
			margin : 0 auto;
			padding : 0;
			border : none;
			background-color : #343d46; 
			
			/* 컨테이너 배치 정렬 실시 */	
			float : top;		
			position : relative; 
			top : 0%;
			left : 0%;			  
		}
		
		/* 가로,세로 뷰 포트 반응형 구조 */
		@media (min-width:360px),(min-height:480px){
			#content_container div {			
				display : block;
			}       
		
			#side_content_container {
				width : 100%;		
				height : 30%;	
				margin : 0 auto;
				padding : 0;
				border : none;
				background-color : #000000;
			 
				/* 컨테이너 배치 정렬 실시 */
				float : top;		
				position : relative; 
				top : 0%;
				left : 0%;	     		     
			}
		
			#main_content_container {
				width : 100%;
				height : 70%;
				margin : 0 auto;
				padding : 0;
				border : none;
				background-color : #4b555e;
			
				/* 컨테이너 배치 정렬 실시 */
				float : top;			
				position : relative; 
				top : 0%;
				left : 0%; 			  
			}
		}
		
		@media (min-width:768px),(min-height:850px){
			#content_container div {			
				display : block;
			}       
		
			#side_content_container {
				width : 100%;		
				height : 30%;	
				margin : 0 auto;
				padding : 0;
				border : none;
				background-color : #000000;
			 
				/* 컨테이너 배치 정렬 실시 */
				float : top;		
				position : relative; 
				top : 0%;
				left : 0%;	     		     
			}
		
			#main_content_container {
				width : 100%;
				height : 70%;
				margin : 0 auto;
				padding : 0;
				border : none;
				background-color : #4b555e;
			
				/* 컨테이너 배치 정렬 실시 */
				float : top;			
				position : relative; 
				top : 0%;
				left : 0%; 			  
			}
		}
		
		@media (min-width:1024px),(min-height:1280px){
			#content_container div {			
				display : inline-block;
			}       
		
			#side_content_container {
				width : 30%;		
				height : 100%;	
				margin : 0 auto;
				padding : 0;
				border : none;
				background-color : #000000;
			 
				/* 컨테이너 배치 정렬 실시 */
				float : left;		
				position : relative; 
				top : 0%;
				left : 0%;	     		     
			}
		
			#main_content_container {
				width : 70%;
				height : 100%;
				margin : 0 auto;
				padding : 0;
				border : none;
				background-color : #4b555e;
			
				/* 컨테이너 배치 정렬 실시 */
				float : left;			
				position : relative; 
				top : 0%;
				left : 0%; 			  
			}
		}
		                          
    </style>

</head>

<!-- body 몸체 부분 -->
<body>

<!-- 상단 div 레이아웃 -->
<div id = "header_container"></div>


<!-- 콘텐츠 div 레이아웃 -->
<div id = "content_container">
	<!-- 사이드 콘텐츠 div 레이아웃 -->
	<div id = "side_content_container"></div>

	<!-- 메인 콘텐츠 div 레이아웃 -->
	<div id = "main_content_container"></div>
</div>


<!-- 하단 div 레이아웃 -->
<div id = "footer_container"></div>

</body>

</html>

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

[결과 출력]

​

​[브라우저 화면]

​

​[모바일 화면]

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

​

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

[요약 설명]

​

/*

[요소 설명]

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

2. width : 가로 크기 지정

3. height : 세로 크기 지정

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

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

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

7. background : 배경 표시 설정

8. display : 화면에 어떻게 표시 할지를 설정 (정렬, 표시여부)

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

10. viewport : 메타 태그로 반응형 뷰 포트 설정 실시

11. media : 실시간 반응형 뷰 포트 디스플레이 화면 크기 확인

12. min-width : 최소 너비 사이즈

13. min-height : 최소 높이 사이즈

14. position : 레이아웃 배치할때 사용

15. float : 정렬 기준 설정

​

​

[세부 설명]

1. width : 100%; : 가로 크기를 (%)로 지정 - 반응형 설정

2. margin : 0 auto; : 중앙 배치 설정

3. border : none; : 테두리 스타일 없음 설정

4. background-color : #343d46; : rgb 색상을 사용해 배경색 지정

5. position : relative; : 부모 기준으로 위치 지정 실시

7. display : inline-block; : 가로 방향으로 정렬 실시

8. display : block; : 세로 방향으로 정렬 실시

*/

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

반응형
저작자표시

'FrontEnd' 카테고리의 다른 글

12. (html/css/javascript/jquery) 인터넷 및 폴더 이미지를 배경 이미지로 설정 - background-image, repeat, position, size  (0) 2021.05.28
11. (html/css/javascript/jquery) 기본 반응형 레이아웃 구조 생성 - viewport 뷰포트 , media 미디어 사용  (0) 2021.05.26
9. (html/css/javascript/jquery) overflow 사용해 콘텐츠 영역 표시 여부 설정 실시  (0) 2021.05.25
8. (html/css/javascript/jquery) display table 사용해 p태그 텍스트 수평, 수직 정렬 및 vw , vh 사용해 폰트 사이즈 반응형 크기 지정  (0) 2021.05.25
7. (html/css/javascript/jquery) display block 사용해 div 레이아웃 세로 정렬 수행 실시 - id 값 지정 사용  (0) 2021.05.25
'FrontEnd' Related Articles more
Comments