12열_그리드_시스템, [class*="col

12열_그리드_시스템, [class*="col_"], [attribute*=value]

by H_Develop 2022. 6. 26. 16:54

12열_그리드_시스템 (12 Columns Grid System / col greed라고 부르기도 함)
반응형 웹에서 가장 많이 사용되는 그리드 시스템
다양한 너비의 블록 요소를 쉽게 만듦
12열-그리드에서 하나의 열의 너비는 100%/12 해서 8.33% 가 됨

.col_1{width : 8.33%} .col_2{width : 16.66%} .col_3{width : 25%}
.col_4{width : 33.33%} .col_5{width : 41.66%} .col_6{width : 50%}
.col_7{width : 58.33%} .col_8{width : 66.66%} .col_9{width : 75%}
.col_10{width : 83.33%} .col_11{width : 91.66%} .col_12{width : 100%}

[class*="col_"]
- col_ 로 시작하는 모든 class를 전부 선택

CSS 선택자 [attribute*=value]
- value를 포함하는 모든 요소를 선택
- a [href*="academy"] 는 <a> 태그의 속성 값에 "academy" 라는 문자열을 포함하고 있는 모든 요소 선택

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
  * { margin : 0; padding : 0; box-sizing : border-box; text-align : center; }
  li { list-style-type : none; }
  .box { clear : both; width : 80%; height : 50%; background-color : #eeeeee;	
	 margin : 0 auto; }
  .col_1 { width : 8.33%; }
  .col_2 { width : 16.66%; }
  .col_3 { width : 25%; }
  .col_4 { width : 33.33%; }
  .col_5 { width : 41.66%; }
  .col_6 { width : 50%; }
  .col_7 { width : 58.33%; }
  .col_8 { width : 66.66%; }
  .col_9 { width : 75%; }
  .col_10 { width : 83.33%; }
  .col_11 { width : 91.66%; }
  .col_12 { width : 100%; }
  [class*="col_"] { float : left; padding : 15px; }
  header { height : 100px; background-color : green; }
/* 클래스 main */
  .main li { float : left; 	height : 300px; }
  .main li:nth-child(1) { background-color : yellow; } /* nth n번째 */
  .main li:nth-child(2) { background-color : skyblue; }
/* 클래스 banner */
	.banner li { float : left; height : 200px; }
	.banner li:nth-child(1), .banner li:nth-child(3) { background-color : pink; }
	.banner li:nth-child(2), .banner li:nth-child(4){ background-color : purple; }
  footer { clear : both; 	height : 100px; 	background-color : green; }
</style>
</head>
<body>
	<header>
		<div class="box">
				헤더
		</div> 
	</header>
	<section>
		<div class="box main"> <!-- box와 main 둘다 사용 가능, 띄어쓰기로 구분 -->
			<ul>
				<li class="col_8">요소</li>
				<li class="col_4">요소</li>
			</ul>
		</div> 
		<div class="box banner">
			<ul>
				<li class="col_3">요소</li>
				<li class="col_3">요소</li>
				<li class="col_3">요소1</li>
				<li class="col_3">요소2</li>
			</ul>
		</div> 
	</section>
	<footer>
		<div class="box">
				푸터
		</div>
	</footer>
</body>
</html>

'FrontEnd > HTML 반응형 웹' 카테고리의 다른 글

Variable 가변 이미지 (width, max-width) (0)	2022.06.26
media query (다른 기기에서는 다른 화면 전환) (0)	2022.06.26
반응형 웹 폰트 (em, rem) (0)	2022.06.26
그리드 뷰 (Grid View) (0)	2022.06.24
ViewPort (뷰 포트), <meta> 태그 (0)	2022.06.24