HTML CSS

2024.07.01 CSS flexbox flex-direction ์†์„ฑ์ด๋ž€?

์ •ํ›ˆ5 2024. 7. 1. 09:43

 

demo_03.html
0.00MB
demo_04.html
0.00MB

 

class_flexbox_01.zip
0.01MB

 

 

๐Ÿ’ก ํ•™์Šต ๋ชฉํ‘œ

- ์ฃผ ์ถ•(main axis)๊ณผ ๊ต์ฐจ ์ถ•(cross axis)
- flex-direction: row, row-reverse, column, column-reverse

 

FlexBox์˜ ๋‘ ๊ฐœ์˜ ์ถ•

flexbox ๋ ˆ์ด์•„์›ƒ์˜ ์ •๋ ฌ์„ ์ดํ•ดํ•˜๋Š”๋ฐ ๊ฐ€์žฅ ์ค‘์š”ํ•œ ์—ญํ• ์„ ํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

์ฃผ์ถ•( main axis)์˜ ๋ฐฉํ–ฅ๊ณผ ๊ต์ฐจ์ถ• (cross axis )์˜ ๋ฐฉํ–ฅ์„ ๊ฒฐ์ •ํ•˜๋Š” flex-direction ์ด๋ผ๋Š” ์†์„ฑ์ด ์žˆ์Šต๋‹ˆ๋‹ค.

flex-direction์˜ ๊ธฐ๋ณธ๊ฐ’์€ row์ž…๋‹ˆ๋‹ค.

  1. ์ฃผ์ถ• ๋ฐฉํ–ฅ(main axis)
    Flex container์— ์„ ์–ธ๋œ flex-direction์˜ ๊ฐ’์— ๋”ฐ๋ผ ์ž์‹ ์š”์†Œ์ธ flex item์ด ๋‚˜์—ด๋˜๋Š” ๋ฐฉํ–ฅ์ž…๋‹ˆ๋‹ค.
    flex-direction:row ์ธ ๊ฒฝ์šฐ๋Š” ์ฃผ์ถ•์ด ์ˆ˜ํ‰์ด ๋˜๊ณ  flex-direction:column์ธ ๊ฒฝ์šฐ๋Š” ์ฃผ์ถ•์ด ์ˆ˜์ง ๋ฐฉํ–ฅ์ด ๋ฉ๋‹ˆ๋‹ค.

  2. ๊ต์ฐจ์ถ• ๋ฐฉํ–ฅ(cross axis )
    Flex container์˜ ์ฃผ์ถ•์— ์ง๊ฐ์„ ์ด๋ฃจ๋Š” ์ถ•์œผ๋กœ ์ฃผ์ถ•์ด ์ˆ˜ํ‰์ด๋ฉฐ ๊ต์ฐจ์ถ•์€ ์ˆ˜์ง ๋ฐฉํ–ฅ์ด ๋ฉ๋‹ˆ๋‹ค.

 

flex-direction ์†์„ฑ์ด๋ž€?

flex-direction ์†์„ฑ์€ ์ฃผ ์ถ•์˜ ๋ฐฉํ–ฅ์„ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค.

  • row: ์•„์ดํ…œ๋“ค์„ ์ˆ˜ํ‰์œผ๋กœ ๋ฐฐ์น˜ํ•ฉ๋‹ˆ๋‹ค (๊ธฐ๋ณธ๊ฐ’).
  • row-reverse: ์•„์ดํ…œ๋“ค์„ ์ˆ˜ํ‰์œผ๋กœ ๋ฐฐ์น˜ํ•˜๋˜, ๋ฐ˜๋Œ€ ๋ฐฉํ–ฅ์œผ๋กœ ๋ฐฐ์น˜ํ•ฉ๋‹ˆ๋‹ค.
  • column: ์•„์ดํ…œ๋“ค์„ ์ˆ˜์ง์œผ๋กœ ๋ฐฐ์น˜ํ•ฉ๋‹ˆ๋‹ค.
  • column-reverse: ์•„์ดํ…œ๋“ค์„ ์ˆ˜์ง์œผ๋กœ ๋ฐฐ์น˜ํ•˜๋˜, ๋ฐ˜๋Œ€ ๋ฐฉํ–ฅ์œผ๋กœ ๋ฐฐ์น˜ํ•ฉ๋‹ˆ๋‹ค.

 

 

 

demo_03.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>์ธ๋ผ์ธ ๋ธ”๋ก์š”์†Œ ์˜ˆ์‹œ</title>
<!--  title์€ ๋ณด์ด์ง€ ์•Š๋Š”๋‹ค. -->

<style type="text/css">
	
	.container {
		display: flex;
		border: 1px solid black;
		flex-direction: row;
	}
	
	.item {
		background-color: lightblue;
		padding: 10px;
		margin: 5px;
		border: 1px solid blue;
	}
	
	
</style>

</head>

<body>
	<!-- http://localhost:8080/demo1/demo_03.html -->
	<h1>์—ฌ๊ธฐ๋Š” demo_03.html ํŒŒ์ผ ์ž…๋‹ˆ๋‹ค.</h1>
	
	<h3>flex-direction : row(๊ธฐ๋ณธ๊ฐ’)</h3>
	<div class = "container">
		<div class = "item">์•„์ดํ…œ1</div>
		<div class = "item">์•„์ดํ…œ2</div>
		<div class = "item">์•„์ดํ…œ3</div>
	</div>
	
	<h3>flex-direction : row-reverse</h3>
	<div class = "container" style="flex-direction: row-reverse;">
		<div class = "item">์•„์ดํ…œ1</div>
		<div class = "item">์•„์ดํ…œ2</div>
		<div class = "item">์•„์ดํ…œ3</div>
	</div>
	
		<h3>flex-direction : column</h3>
	<div class = "container" style="flex-direction: column;">
		<div class = "item">์•„์ดํ…œ1</div>
		<div class = "item">์•„์ดํ…œ2</div>
		<div class = "item">์•„์ดํ…œ3</div>
	</div>
	
	<h3>flex-direction : column-reverse</h3>
	<div class = "container" style="flex-direction: column-reverse;">
		<div class = "item">์•„์ดํ…œ1</div>
		<div class = "item">์•„์ดํ…œ2</div>
		<div class = "item">์•„์ดํ…œ3</div>
	</div>
	
	
	
</body>

</html>

 

 

 

 

์‹œ๋‚˜๋ฆฌ์˜ค ์ฝ”๋“œ 2

์•ต์ปค ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ํŽ˜์ด์ง€ ๋‚ด ํŠน์ • ์œ„์น˜๋กœ ์ด๋™ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

 

demo_04.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>์ธ๋ผ์ธ ๋ธ”๋ก์š”์†Œ ์˜ˆ์‹œ</title>
<!--  title์€ ๋ณด์ด์ง€ ์•Š๋Š”๋‹ค. -->

<style type="text/css">
	
	.navbar {
		display: flex;
		border: 1px solid black;
		background-color: #f8f9fa;
		padding: 10px;
	}
	
	.navbar2 {
		display: flex;
		border: 1px solid black;
		background-color: #f8f9fa;
		padding: 10px;
		flex-direction: column;
	}
	
	.navbar3 {
		display: flex;
		border: 3px black;
		padding: 10px;
	}
	
	.nav-item {
		margin: 5px;
		padding: 10px;
		background-color: lightblue;
		color: white;
		text-align: center;
		border-radius: 4px;
		text-decoration: none;
	}
	
	.section {
		height: 300px;
		padding: 20px;
		margin-top: 20px;
		border: 1px solid #000;
	}
	
</style>

</head>

<body>
	<!-- http://localhost:8080/demo1/demo_04.html -->
	<h1>์—ฌ๊ธฐ๋Š” demo_04.html ํŒŒ์ผ ์ž…๋‹ˆ๋‹ค.</h1>
	<br>
	
	<h2>flex-direction: row</h2>
	<div class="navbar">
		<a href="#home" class="nav-item">ํ™ˆ</a>
		<a href="#about" class="nav-item">์†Œ๊ฐœ</a>
		<a href="#services" class="nav-item">์„œ๋น„์Šค</a>
		<a href="#contact" class="nav-item">์—ฐ๋ฝ์ฒ˜</a>
	</div>
	
	<h2>flex-direction: column</h2>
	<div class="navbar2">
		<a href="#home" class="nav-item">ํ™ˆ</a>
		<a href="#about" class="nav-item">์†Œ๊ฐœ</a>
		<a href="#services" class="nav-item">์„œ๋น„์Šค</a>
		<a href="#contact" class="nav-item">์—ฐ๋ฝ์ฒ˜</a>
	</div>
	
	<div class="section" id="home">
		<h2>ํ™ˆ ์„น์…˜</h2>
		<p>์—ฌ๊ธฐ๋Š” ํ™ˆ ์„น์…˜ ์˜์—ญ์ž…๋‹ˆ๋‹ค.</p>
	</div>
	
	<div class="section" id="about">
		<h2>์†Œ๊ฐœ ์„น์…˜</h2>
		<p>์—ฌ๊ธฐ๋Š” ์†Œ๊ฐœ ์„น์…˜ ์˜์—ญ์ž…๋‹ˆ๋‹ค.</p>
	</div>
	
	<div class="section" id="services">
		<h2>์„œ๋น„์Šค ์„น์…˜</h2>
		<p>์—ฌ๊ธฐ๋Š” ์„œ๋น„์Šค ์„น์…˜ ์˜์—ญ์ž…๋‹ˆ๋‹ค.</p>
	</div>
	
	<div class="section" id="contact">
		<h2>์—ฐ๋ฝ์ฒ˜ ์„น์…˜</h2>
		<p>์—ฌ๊ธฐ๋Š” ์—ฐ๋ฝ์ฒ˜ ์„น์…˜ ์˜์—ญ์ž…๋‹ˆ๋‹ค.</p>
	</div>

</body>

</html>

 

 

'HTML CSS' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

2024.07.04 CSS flexbox ์ค‘๊ฐ„ ์ ๊ฒ€ - ์—ฐ์Šต ๋ฌธ์ œ (๋ฏธ์™„์„ฑ)  (0) 2024.07.04
2024.07.04 CSS flexbox FlexItem์˜ ์„ธ๋ฐ€ํ•œ ์ œ์–ด flex ์†์„ฑ  (0) 2024.07.04
2024.07.02 CSS flexbox ๊ต์ฐจ์ถ• ์ •๋ ฌ์—๋Š” align-items์™€ align-content ์ด๋‹ค.  (0) 2024.07.02
2024.07.02 CSS flexbox ์ฃผ์ถ• ๋ฐฉํ–ฅ ์ •๋ ฌ justify-content ๋ž€?  (0) 2024.07.02
2024.07.01 CSS flexbox Flexbox ๋ž€?  (0) 2024.07.01

'HTML CSS'์˜ ๋‹ค๋ฅธ๊ธ€

  • ํ˜„์žฌ๊ธ€2024.07.01 CSS flexbox flex-direction ์†์„ฑ์ด๋ž€?

๊ด€๋ จ๊ธ€

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”