CSS - 레이아웃

레이아웃은 문서를 구성하는 요소들을 어디에 배치할 지 결정하는 것

- 특정 공간에 여러 구성 요소를 효과적으로 배치하는 작업

- 웹 사이트의 외관을 결정짓는 중요 요소

 

* display 속성

속성 값	설명
block	블럭 요소로 표시하며, 새 줄에서 시작해 전체 너비 차지
inline	인라인 요소로 표시 , 높이 및 너비 속성에 영향을 받지 않음
inline-block	인라인 요소 수준의 블록으로 표시 ( 기본적으로 인라인 요소지만 높이, 너비 속성 적용 가능)
none	요소 완전 제거 (화면에서 보이지 않음)

display와 visibility의 차이

{display : none;} - 요소가 숨겨지고 페이지에 해당 요소가 없는 것처럼 표시

{visibility: hidden;} - 요소가 숨겨지지만 공간은 차지

 

position 속성 : 요소의 위치를 지정하는 유형 설정

static (정적 위치) - 정적으로 배치된다. (기본 값) [ top,bottom,left,right 속성의 영향을 받지 않는다]
relative (상대 위치) - 정적인 위치를 기준으로 배치된다. 
absolute (절대 위치) - 특정한 부모를 기준으로 배치된다. 
fixed (고정 위치) - 항상 같은 위치(컨테이너 원점)에 배치된다. 

 

overflow 속성 : 영역에 맞지 않는 콘텐츠 제어

- hidden : 과적된 부분은 보이지 않는 상태

- scroll : 스크롤 바가 추가되어 내용을 볼수 있는 상태

- auto - 필요 시 스크롤 바 생성

 

clear:float : 속성 중단시 사용

해당 속성을 적용하고 싶지 않응 경우 사용

 

 

시멘틱 요소 - 웹 페이지의 구조를 쉽게 이해할 수 있도록 정의된 태그. 단순 컨테이너 역할

 

태그	설명
<header>	문서의 머리말로 홈페이지 상단에 로고나 메인 메뉴를 포함  headline tag 하나를 가지고 있어야 함
<footer>	문서의 꼬리말(바닥글)로서 한 페이지에 한 번만 작성 제작자의 정보, 연락처 정보, 저작권 정보 등을 나타냄
<section>	제목이 있는 주제별 콘텐츠 영역 (headline tag 하나를 가지고 있어야 함)
<article>	웹 사이트와 독립적인 콘텐츠 정의 시 사용  | 블로그의 포스트, 신문기사 등
<nav>	내비게이션 링크 | 메뉴, 목차, 인덱스 등을 표현
<aside>	좌우측 사이드 바 | 페이지 콘텐츠 외 콘텐츠 (배너, 퀵 메뉴 등)를 정의
<figure>	그림, 사진, 도표 등의 멀티미디어 콘텐츠 표시
<figcaption>	<figure>요소에 대한 캡션을 정의