레이아웃을 설명하기 앞서 Sectioning에 대해 잠깐 얘기하려고 한다.
Sectioning이란 웹을 제작하기 전에 구획을 나누는 것을 얘기한다. 이는 레이아웃과 밀첩한 관련이있다.
🧩Sectioning
section + ing : 말 그대로 section 단원 이기 때문에 그 단원에 대한 주제,제목(heading <h1,h2,h3..>)이 있어야 한다.
nav
<nav> :
문서간에 이동할 수 있는 요소를 나타낼때 <nav>를 사용한다.
article
<article> :
뉴스 기사, 블로그 등 안에 들어있는 내용 정보 컨텐츠가 완결성이 있는 경우 사용된다. <section> 보다 뉘앙스를 살린다.
aside
<aside>
본문 내용과 직접적으로 연관이 없는 동떨어져 분리된 내용을 마크업 할때 사용한다. 사이드바, 배너 광고, 작은 위젯 등
header
<header> :
문서 전체 페이지 또는 각 section에 가장 최상단부에서 제목 등을 담당한다. <div> === <header> : div 보다는 최상단의 뉘앙스를 띔.
main
<main> :
한번만 사용할 수 있다, 본문에서 가장 핵심적인 정보 컨텐츠를 담고있는 것을 묶어줄때 사용한다. <main>은 가장 밖에서 사용된다. <body> 처럼.
main은 sectioning elements 가 아니기 때문에 <main>안에 <h1,h2,h3..>을 반드시 사용해 줄 필요는 없다.
🧩 main은 sectioning elements 가 아니기 때문에 <main>안에 <h1,h2,h3..>을 사용해 줄 필요가 없다.
<header> 안에서 <h1>으로는 가능하다.
<main>
<header>
<h1> </h1>
</header>
</main>
footer
<footer> : 하단부를 표현
구획 나눠보기
🧩레이아웃 Layout
display: block 길막
다른 요소들이 자신(block)의 공간에 침범하지 못하게 한다.
blcok의 특징
block을 입힌 태그에 width 값을 설정해주지 않으면 부모의 태그 width 100%의 값을 적용된다.
block에 width값을 적용해주면 나머지 공간은 margin으로 채움으로써 아래있는 값들이 block에 있는 줄로 올라오지 못하게 막는다.
가운데 정렬 👇
margin-left: auto + margin-right: auto = margin 0 auto
따로 부모의 height를 선언하지 않을 경우, 자식 요소의 height의 합 = 부모의 height 값이 적용 된다.
<div class="parent"> <div class="child" style="height:140px"> </div>
display : inline
inline은 옆으로 흐르는 성질을 가지고 있다. block은 자신의 옆에 어떠한 것도 오지 못하게 하지만 inline은 아래 사진처럼 작동한다. ( 대표적인 inline 속성 태그 :
<span>,<p>)
특징
1. 부모의 길이 만큼 inline이 채워지며 부모의 길이가 짧아 더이상 inline이 들어갈 수 없을때 자동으로 아래칸에 줄바꿈 하여 들어가게 된다. (글 쓰듯이)block = 면 (영역)
inline = 선 (흐름)
- inline에서 사용할 수 없는 것들!
.
padding-left , padding-right 는 inline 흐름을 방해하지 않아서 사용할 수 있다.
display: inline-block
inline-block은 inline과 block의 장점을 둘다 가지고 있다.
- inline처럼 옆으로 흐르는 동시에 block처럼 영역도 잡을 수 있다.
float
block은 가로의 영역을 모두 차지하기 때문에 가로배치가 어렵다. 이를 해결하기 위해 float를 사용해준다.
또 다른 예시
🧩position
position은 원하는 요소를 마음대로 움직이게 하는 property이다.
5가지 요소가 있다.
position을 적용하기 전에 반드시 알아야 할 부분!
1. 어떤 종류의 type position을 사용할 것인지
2. 내가 사용하는 type position 무엇을 기준으로 요소를 위치 시키는지.
기준점은 position 의 type에 따라서 굉장히 달라진다.
static
가장 일반적인 상태를 나타낸다.
relative
relative의 이동지점은 본래 자기의 자리에서 부터이다.
아무리 이동시켜도 다른 요소들에게 피해를 주지 않고 오로지 자신만 이동한다.
absolute
absolute는 position type이 static이 아닌 요소를 기준으로 삼아 자기 자신을 위치시킬 수 있다.
조상 클래스는 static이 아닌 그림처럼 position: relative 이다. 그렇기 때문에 주황이는 position: absolute로 static 성질인 부모 클래스가 아닌 조상클래스인 relative 로 이동하게 된다. 👇
fixed
fixed 는 position : absolute를 사용한 것 처럼 동일한 현상이 일어난다.
fixed는 absolute와 다르게 자신의 기준점이 명확하게 있다. "viewport" 기준으로 사이즈가 정해진다. viewport란 내가 보고있는 브라우저의 전체 창을 의미한다.
