반응형
Notice
Recent Posts
Recent Comments
Link
«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
Tags more
Archives
Today
Total
관리 메뉴

개발하는 동그리

[HTML/CSS] 레이아웃 : 화면을 나누는 방법 ( HTML구성하기 ) 본문

IT 정보/기타 정보

[HTML/CSS] 레이아웃 : 화면을 나누는 방법 ( HTML구성하기 )

개발하는 동그리 2022. 4. 28. 13:26
반응형

< HTML 문서 >

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="container">
	<div class="col w10">
		<div class="icon">아이<br>콘 1</div>
		<div class="icon">아이<br>콘 2</div>
		<div class="icon">아이<br>콘 3</div>
	</div>
	<div class="col w20">
		<div class="row h40">영역1</div>
		<div class="row h40">영역2</div>
		<div class="row h20">영역3</div>
	</div>
	<div class="col w70">
		<div class="row h80">영역4</div>
		<div class="row h20">영역5</div>
	</div>
</div>
</body>
</html>

<CSS>


#container {
  
  height : 700px;
  display : flex;
  flex-direction : row;
  justify-content : space-around;
  flex-wrap : wrap;
  font-weight : bold;

}

.col {
  border : 3px solid Red;
  display : flex;
  flex-direction : column;
  border : 
}

.w10 {
 flex : 0 0 6%;

}

.icon {
  border : 2px dotted red;
  margin : 10px;
  
}


.w20{
  flex : 0 0 19%;
}




.w70{
  flex : 0 0 69%;
}

.row {
  border : 2px solid blue;
  margin : 10px;
  display : flex;
  flex-wrap : wrap;
}

.h80 {
  flex : 0 0 75%;
}

.h40 {
  flex : 0 0 36%;
}

.h20 {
  flex : 0 0 17%;
}
반응형
저작자표시 비영리 변경금지

'IT 정보 > 기타 정보' 카테고리의 다른 글

Git 기초 (1편)  (10) 2022.05.02
리눅스 [Linux]  (0) 2022.05.02
[HTML/CSS] HTML , CSS 는 무엇인가!? (3편) - flexbox!  (11) 2022.04.28
[HTML/CSS] HTML , CSS 는 무엇인가!? (2편) - CSS  (4) 2022.04.27
[HTML/CSS] HTML , CSS 는 무엇인가!? (1편) - HTML  (11) 2022.04.27
'IT 정보/기타 정보' Related Articles more