레이아웃

웹 사이트를 보기 좋게 만드는 레이아웃을 만드는 방법에는 다음과 같이 몇 가지의 방법이 있다.

1.<table> 요소를 사용한 레이아웃 : 아주 편리한 방법이지만 테이블의 월래 용도와 어긋난다.

2.<div> 요소를 사용한 레이아웃 : <div> 요소를 생성하고 요소의 위치를 지정해서 다른 요소를 그룹핑하는 데 사용된다. CSS를 사용해 요소의 위치를 잡고 배경이나 색상을 지정한다.

3.HTML5의 <nav>,<section>,<aside> 등의 시멘틱 요소를 사용한 레이아웃 : 최근에 HTML에서 추가된 레이아웃 방법 근본은 <div>요소와 유사하다.

의미적 요소를 이용한 레이아웃

의미적 요소는 브라우저에게 요소의 의미나 목적을 명확하게 알려주는 요소

<div>태그는 단순히 컨테이너 역활만 하기에 브라우저는 이것을 인식하지 못한다.

HTML5에서는 이러한 문제점을 해결하기위해 시맨틱 요소를 정의 했다\

시멘틱 요소 

<header>	HTML 문서나 섹션(section) 부분에 대한 헤더(header)를 나타낼 때 사용한다.
<nav>	HTML 문서 사이를 탐색할 수 있는 링크(link)의 집합을 나타낼 때 사용한다.
<main>	HTML 문서의 주요 콘텐츠(content)를 정의함.
<section>	HTML 문서에서 섹션(section) 부분으로 내용의 컨텐츠를 나타낼 때 사용한다.
<article>	HTML 문서에서 내용의 컨텐츠 중에 독립적인 하나의 글(article) 부분을 나타낼 때 사용한다.
<aside>	HTML 문서에서 페이지 부분 이외의 컨텐츠(content)를 나타낼 때 사용한다.
<figure>	HTML 문서에서 그래픽과 비디오 등의 독립적인 컨텐츠(content)를 나타낼 때 사용한다.
<figcaption>	figure 요소를 위한 캡션을 나타낼 때 사용한다.
<footer>	HTML 문서나 섹션(section) 부분에 대한 푸터(footer)를 나타낼 때 사용한다.
<bdi>	기본 출력방향과는 다른 방향으로 출력되는 텍스트를 나타낼 때 사용한다.
<mark>	하이라이팅된 텍스트를 정의함.
<details>	사용자가 보거나 숨길 수 있는 추가적인 설명문을 나타낼 때 사용한다.
<summary>	details 요소에 나타날 내용을 정의함.
<dialog>	다이얼로그(dialog) 박스나 다이얼로그 윈도우를 정의함.
<menuitem>	사용자가 팝업 메뉴(popup menu)를 통해 선택할 수 있는 메뉴의 아이템(menu item)을 나타낼 때 사용한다.
<meter>	정해진 범위 내의 스칼라 치수를 나타낼 때 사용한다.
<progress>	작업에 대한 진행 정도를 나타낼 때 사용한다.
<ruby>	루비(ruby) 문자를 나타낼 때 사용한다. 루비란? 임의의 문자(보통은 한자)에 대해 읽는 법을 알려주는 문자를 말한다.
<rt>	본문 위에 나타날 문자를 나타낼 때 사용한다.
<rp>	루비(ruby) 문자를 지원하지 않는 브라우저에서만 나타날 내용을 나타낼 때 사용한다.
<time>	날짜와 시간을 나타낼 때 사용한다.
<wbr>	br 요소와는 달리 긴 단어가 화면의 맨 끝에 오면 상황에 따라 줄 바꿈 할 곳을 미리 나타낼 때 사용한다.

 

<aside>와 <section> 배치할때  float:left와 float:right를 사용해도 되지만 높이가 다를경우 어색하게 되니

이 점을 해결하기 위해서는 display 속성에 table-cell을 지정하였다 이 값이 컨테이너에 지정되면 

자식 요소를 테이블의 셀처럼 배치한다.display: table ,display: table-cell

속성을 지정하면 화면에 가상 테이블을 작성한다. 테이블을 이용하여 레이아웃을 하는 것이다.

장점

테이블 형태로 레이아웃하는 데 float나 절대 위치 설정이 필요하지 않다.

컬럼의 높이가 달라도 문제가 발생하지 않는다.

IE8+버전과 Fifefox,CHrome,Safari,Opera가 모두 지원한다.

CSS 코딩이 간결해짐

단점

소스에 적힌 순서대로 테이블의 셀이 생성된다.

효과

CSS의 많은 기능 중 가장 대표적인 기능

투명도

opacity 속성을 이용 0.0에서 1.0 으로 갈수록 불투명해진다.

예)

img { opacity : 0.4; }

img: hover { opacity :1.0 }

가시성

어떤 요소를 보이거나 안보이게 하는 것 visibility 속성을 사용

hidden : 요소를 보이지 않게 한다.

visible(기본값) : 요소를 보이게 한다.

비슷한것으론 dispaly:none 이있지만 화면에서 자리차지도 하지않고 완전히 제외 되기때문에

일시적으로는 visibility 속성을 이용하기에 둘다 적절히 사용하면 된다.