투케이2K

50. (html/css/javascript/jquery) 부트스트랩 (bootstrap) 반응형 그리드 레이아웃 만들기 - container , col , grid, h 높이 본문

FrontEnd

50. (html/css/javascript/jquery) 부트스트랩 (bootstrap) 반응형 그리드 레이아웃 만들기 - container , col , grid, h 높이

투케이2K 2021. 7. 19. 16:14

[ 개발 환경 설정 ]

​

개발 툴 : 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 user-scalable=0">


    <!-- Jquery CDN 로드 : 항상 최신 버전 사용 -->    
    <script src="https://code.jquery.com/jquery-latest.min.js"></script> 
    

    <!-- 부트스트랩 CDN 로드 : 항상 최신 버전 사용 : maxcdn -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/latest/js/bootstrap.min.js"></script>


    <!-- 부트스트랩 CDN 로드 : 항상 최신 버전 사용 : netdna -->
    <!-- <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css"> -->
    <!-- <script src="https://netdna.bootstrapcdn.com/bootstrap/latest/js/bootstrap.min.js"></script> -->

    

    <!-- 내부 CSS 스타일 지정 -->
    <style>
		/* 
		[CSS 요소 설명] 	
		*/
				    			 	
    	
		/* [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 {					
			background-color: #444444;
		}


		/* [col 스타일 지정 실시] */
		.col-md-4 {
			background-color: #ffec99;
			border: 1px solid #495057;
		}

		.col-md-8 {
			background-color: #ff00ff;
			border: 1px solid #495057;
		}

		.col-sm-3{
			background-color: #0000ff;
			border: 1px solid #495057;
		}
		      				                          
    </style> 



    <!-- 내부 JS 스타일 지정 -->
    <script>

    	/*
    	[JS 요약 설명]   	
    	*/


    	/* [html 최초 로드 및 이벤트 상시 대기 실시] */
    	window.onload = function() {
    		console.log("");
    		console.log("[window onload] : [start]");
    		console.log(""); 	
    	};


    	/* [이벤트 함수 정의] */
    	function main(){
    		console.log("");
    		console.log("[main] : [start]");
    		console.log("");
    	};

    </script>

</head>


<body>

	<!-- 
	[요약 설명]	
	1. 컨테이너는 CSS에서 배운것 처럼 화면구성요소들을 묶기 위한 틀 입니다
	2. 컨테이너는 보통 <div> 태그들을 중첩해 사용하는 형식을 취하며 부트스트랩도 동일합니다
	3. container : 반응형으로 동작하며 고정폭을 가지고 있습니다 (자동 마진 크기를 가지고 있습니다)
	4. container-fluid : viewport 전체 폭을 모두 차지하는 컨테이너 박스입니다
	5. 부트스트랩의 그리드는 flexbox(Flexible Box Layout Module)에 기반하고있습니다
	6. flexbox 는 기존의 float, display, position 등을 이용한 박스 배치를 컨테이너 안에서 중심축을 기반으로 일관된 방식으로 배치합니다
	7. 부트스트랩의 그리드 시스템은 화면크기에 따라 사용할 수 있는 5개의 옵션을 제공합니다
		(.col- (extra small devices - 화면크기 < 576px))
		(.col-sm- (small devices - 화면크기 ≥ 576px))
		(.col-md- (medium devices - 화면크기 ≥ 768px))
		(.col-lg- (large devices - 화면크기 ≥ 992px))
		(.col-xl- (xlarge devices - 화면크기 ≥ 1200px))
	8. 부트스트랩에서는 기본적으로 em 이나 rem 단위를 사용하지만 그리드 컨테이너의 폭을 계산하는데는 viewport 를 따라 px 을 사용합니다
	9. h : height 값을 지정할 때 사용합니다 (w 지정 옵션과 같음)
	10. 그리드 제작 도움 사이트 : http://shoelace.io/
	 -->


	<!-- 레아아웃 지정 -->
	<div class="container-fluid h-25">
	    <div class="row h-50">
	        <div class="col-md-4">col-md-4</div>
	        <div class="col-md-8">col-md-8</div>
	    </div>	
	    <div class="row h-50">
	        <div class="col-sm-3">col-sm-3</div>
	        <div class="col-sm-3">col-sm-3</div>
	        <div class="col-sm-3">col-sm-3</div>
	        <div class="col-sm-3">col-sm-3</div>
	    </div>    
	</div>


	<!-- 레아아웃 지정 -->
	<div class="container-fluid h-100">
	    <div class="row h-50">
	        <div class="col-md-4">col-md-4</div>
	        <div class="col-md-8">col-md-8</div>
	    </div>	
	    <div class="row h-50">
	        <div class="col-sm-3">col-sm-3</div>
	        <div class="col-sm-3">col-sm-3</div>
	        <div class="col-sm-3">col-sm-3</div>
	        <div class="col-sm-3">col-sm-3</div>
	    </div>    
	</div>

</body>

</html>

[결과 출력]

​

​

[요약 설명]

​

1. 컨테이너는 CSS에서 배운것 처럼 화면구성요소들을 묶기 위한 틀 입니다

2. 컨테이너는 보통 <div> 태그들을 중첩해 사용하는 형식을 취하며 부트스트랩도 동일합니다

3. container : 반응형으로 동작하며 고정폭을 가지고 있습니다 (자동 마진 크기를 가지고 있습니다)

4. container-fluid : viewport 전체 폭을 모두 차지하는 컨테이너 박스입니다

5. 부트스트랩의 그리드는 flexbox(Flexible Box Layout Module)에 기반하고있습니다

6. flexbox 는 기존의 float, display, position 등을 이용한 박스 배치를 컨테이너 안에서 중심축을 기반으로 일관된 방식으로 배치합니다

7. 부트스트랩의 그리드 시스템은 화면크기에 따라 사용할 수 있는 5개의 옵션을 제공합니다

(.col- (extra small devices - 화면크기 < 576px))

(.col-sm- (small devices - 화면크기 ≥ 576px))

(.col-md- (medium devices - 화면크기 ≥ 768px))

(.col-lg- (large devices - 화면크기 ≥ 992px))

(.col-xl- (xlarge devices - 화면크기 ≥ 1200px))

8. 부트스트랩에서는 기본적으로 em 이나 rem 단위를 사용하지만 그리드 컨테이너의 폭을 계산하는데는 viewport 를 따라 px 을 사용합니다

9. h : height 값을 지정할 때 사용합니다 (w 지정 옵션과 같음)

10. 그리드 제작 도움 사이트 : http://shoelace.io/

 

Shoelace - Visual Bootstrap 3 Grid Builder

 

shoelace.io

 

반응형
저작자표시

'FrontEnd' 카테고리의 다른 글

52. (html/css/javascript/jquery) 부트스트랩 (bootstrap) p 태그 text 속성 사용 및 hr 수평선 사용  (0) 2021.07.20
51. (html/css/javascript/jquery) 부트스트랩 (bootstrap) 반응형 그리드 레이아웃에 커스텀 style 스타일 적용  (0) 2021.07.19
49. (html/css/javascript/jquery) 부트스트랩 (bootstrap) container , col 사용해 그리드 (grid) 레이아웃 만들기  (0) 2021.07.19
48. (html/css/javascript/jquery) 부트스트랩 (bootstrap) badge , Navbar 사용해 뱃지 및 네비게이션 바 구현 실시  (0) 2021.07.19
47. (html/css/javascript/jquery) 부트스트랩 (bootstrap) shadow 그림자 지정 실시  (0) 2021.07.19
'FrontEnd' Related Articles more
Comments