안녕하세요 냥장판 입니다
이전에 Box model에서는 컨텐츠(contents)를 박스형으로 봤을 때, block 형인지, inline 형인지에 대해 알아봤고요.
2020/01/30 - [놀고있네/HTML & CSS] - [CSS] Box Model - Block, Inline 개념 이해하기
이 contents 주변에 padding, margin, border 는 어떻게 구성이 되는지에 대해 알아봤어요.
2020/01/30 - [놀고있네/HTML & CSS] - [CSS] Box Model - 기본 요소
2020/01/30 - [놀고있네/HTML & CSS] - [CSS] Box Model - Block, Inline 개념 이해하기
이번 게시글에서는 CSS에 Float라는 속성을 살펴볼 거에요.
영어로 Float는 물체가 물에 가라앉지 않고 둥둥 떠있는 그림을 상상하시면 되는데요.
CSS에서도 마찬가지 입니다.
Float는 레이아웃 배치에 관련된 속성이에요.
1. 페이지의 흐름(Flow)
웹페이지의 흐름은 수직 흐름(Vertical flow)와 수평 흐름(Horizontal flow)로 구분되요.
수직 흐름(Vertical flow)은
우리가 보고있는 웹페이지의 대부분이라고 할 수 있어요.
일반적으로 PC라고 하면 위에서 아래로(수직으로) 전개가 되요.
이미지 아래에 기사가 있고, 기사 아래에 댓글창이 있고 이런식으로요.
요소(elements)들이 위아래 방향에 놓이게 되요.
수평 흐름(Horizontal flow)은
이미지가 있고 오른쪽이나 왼쪽에 기사가 있는거에요.
기사 오른쪽에는 사이트바가 있는 식인거죠.
요소(elements)들이 좌우 방향에 놓이게 되요.
style="display:inline-block;width:740px;height:200px"
data-ad-client="ca-pub-9512983930357661"
data-ad-slot="5785466884">
2. 기본적인 페이지 레이아웃
Block 요소인 div를 사용할 때 기본적인 레이아웃은 수직(vertical flow)흐름이에요.
한 예로 메뉴, 사이드바, 컨텐츠, 푸터(menu, sidebar, content, footer)를 높이만 지정하고 배치한다면,
아래와 같은 흐름으로 배치가 되요.
만약 sidebar에 넓이를 지정해 주었다면,
아래처럼 됩니다.
3. Float 사용방법
Float 사용방법은 엄청 간단해요.
블럭(block)을 배치할 위치에 따라 left, right 이고요.
중앙에 배치할 때는 float가 아닌 margin을 사용해요.
사이드바 float: left
사이드바가 content에 왼쪽에 오고 두개가 겹쳐지죠?
사이드바 float: right
반대로 사이드바가 content에 오른쪽에 있게되요.
float 없이 블럭을 중앙에 배치하고 싶다면 margin을 사용하면 됩니다!
결과는 겹치지 않죠 호호
이번 게시글에서는 float에 대해 알아봤어용
코드 첨부합니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8' />
<title>HELLO Floats 😁</title>
<link rel='stylesheet' href='styles.css'/>
</head>
<body>
<div class='page'>
<div class='menu'>Menu</div>
<div class='sidebar'>Sidebar</div>
<div class='content'>Content</div>
<div class='footer'>Footer</div>
</div>
</body>
</html>
|
cs |
그럼 이만!
'🎪 놀고있네 > HTML & CSS' 카테고리의 다른 글
| [CSS] Flexbox - Flex Containers (0) | 2020.02.26 |
|---|---|
| [CSS] Flexbox - 기본개념 (2) | 2020.02.24 |
| [CSS] Box Sizing - content box, border box (4) | 2020.02.07 |
| [CSS] Box Model - Margin (4) | 2020.02.06 |
| [CSS] Box Model - Borders (border-image) (4) | 2020.02.06 |
댓글