플로우(Flow) : 구조를 형성하고 텍스트와 다른 요소들을 배치하는 방식
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box1 { width: 300px; height: 300px; background-color: yellow; display: inline-block; } .box2 { width: 300px; height: 300px; background-color: red; display: inline-block; position: absolute; top: 100px; left: 100px; } .box3 { width: 300px; height: 300px; background-color: green; display: inline-block; } .box4 { width: 300px; height: 300px; background-color: blue; display: inline-block; } .box5 { width: 300px; height: 300px; background-color: bisque; display: inline-block; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> <div class="box5"></div> </body> </html>
1. 디폴트 값 : 스테이틱 플로우(static flow)
블록 요소는 새로운 줄에서 시작하고 수직으로 쌓임
인라인 요소는 텍스트와 함께 수평으로 나란히 배치됨
2. Relative : 상대적 위치 결정
일반 플로우에서 벗어나게 됨
다른 요소의 위치에 영향을 주지 않으면서 자신을 이동
기본 플로우 스테이틱에서 앞에 있는 애의 상태를 설정으로 연관되서 위치 설정 가능
3. Absolute : 기존 도화지 위에 추가
나중에 아이콘 집어넣을 때 사용
제트 인덱스 : 여러 개가 겹쳐있는 가운데 몇 번째로 하는 것인지 얘기하는 것
겹쳐져 있는 것을 배열처럼 순서를 매기고 인덱스로 구별하는것 같은…
박스4는 박스 5의 부모
박스5는 박스 4의 자식
모든 그림 그리는 도구는 자식을 그리고 나서 부모를 그림
자녀는 앞에 있는 그림으로 먼저 그려지고 나서 부모가 자녀를 기준으로 그려짐
<상대적 위치에 두고 싶을 때>
기본 플로우 : static flow
부모 : Relative
자식 : Absolute
⇒ 종이가 덧데져셔 안에 위치하게 되는 문법
Relative 든 Absolute 든 한개가 있으면 바디와의 상대적 위치로 결정됨
4. Fixed : 브라우저 화면에 위치가 픽스됨
스크롤에 상관없이 바디를 기준으로 위치가 결정됨
Share article
