CSS layout 배치 방식

layout 배치 방식

display 방식

• inline-block
• flex
• grid

normal flow를 벗어난 방식

• float
• position
  여기서 노멀 레이아웃 플로우는 html이 기본적으로 화면에 랜더링 하는 것을 말하며 마크업 순서대로 위에서부터 아래 방향으로 나열 하는 것.(css 레이아웃 미반영)
  이미지와 텍스트를 같이 배치 시키기 위해 나온 것이 floating layout

floating 방식
float을 주게되면 레이어가 위로 뜨면서 아래의 레이어가 올라옴.
때문에 겹치는 현상이 생기게 되는데 이를 해결하는 방법은 여러가지가 있음
1. 맨 아래에 빈 형태의 div.clear를 통해 clear:both를 준다.
2. 부모 요소에 빈 ::after을 주고 거기에 display: block; clear:both; 를 준다.
3. 부모 요소에 display: float-root; 를 준다. - 가장 최신
4. 부모 요소에 overflow:hidden 을 준다. - 자식 요소가 벗어날 시에 잘려서 권장하지 않음
여기서 clear 요소는 block속성으로 랜더링 되는 요소에만 쓸 수 있음.

가령 테킷 홈페이지를 기반으로 구조 설계를 한다고 생각하면 우선 큰 영역으로 맨 위의 배너/헤더/비주얼/메인/푸터로 나눠볼 것 같다.

<article class="banner">배너</article>
<header class="main-header">헤더</header>
<article class"visual">비주얼</article>
<main class="main">메인</main>
<footer class="footer">푸터</footer>

헤더 영역: h1.logo, nav, login

<header class="main-header">
<h1>
	<a href="/">
    	<img src="링크" alt="테킷스쿨" />
    </a>
</h1>
<nav class="nav">
	
</nav>
</header>

메인 영역: header.section-header, h2.section-name, div.more, div.group