HTML/CSS - Layout

1. 레이아웃이란

정보를 효과적으로 배치하는 것.

종류로는

-1단

-2단 이상 (다단)

-고정(상,하단이 고정되어있는)

-유동적

 

1단 레이아웃

가장 기본이 되는 레이아웃으로 한개의 행으로 이루어진 레이아웃이다.

상단(header),중단(contents),하단(footer)의 구성으로 이루어짐.

 

컨텐츠 최대 가로: 1200

사이트 최소 가로: 800

컨텐츠 가운데 정렬

 

-일반적인 방법

<!-- 1단 레이아웃 -->
<div class="header">header</div>
<div class="content">content</div>
<div class="footer">footer</div>

-HTML5 방법

<!-- html5의 태그를 이용한 1단 레이아웃 -->
<header>header</header>
<section>content</section>
<footer>footer</footer>

 

1단레이아웃

<!-- div를 이용한 1단 레이아웃 -->
<div class="wrap">
   <div class="header">header</div>
   <div class="content">content</div>
   <div class="footer">footer</div>
</div>

<!-- html5를 이용한 1단 레이아웃 -->
<div class="wrap">
    <header>header</header>
    <section>content</section>
    <footer>footer</footer>
</div>

 

- margin: auto로 좌우 수치를 균등하게 가져 가운데 정렬 가능

 

 

2. 가상선택자

실제로 웹 문서에 존재하지는 않지만 필요에 의해 가상으로 선택되는 요소

존재하지 않는 요소를 존재하는 것 처럼 만들 수 있다.

 

:hover, :active 외에도 다양한 추상 클래스 / 가상 선택자가 존재하는데

그 중 :after 라는 가상 선택자가 존재한다.

이는 컨테이너 요소 안 맨 마지막에 추가시킬 태그를 지정할 수 있다.
Internet Explorer 7 이하 버전은 after 가상 선택자를 지원 하지 않는다.

 

https://www.w3schools.com/cssref/css_selectors.asp