-
개인공부 후 정리 목적의 글입니다.
CSS 레이아웃
레이아웃 : 웹사이트에서 정보와 내용을 보기 좋게 한 화면에 영역을 나누고 디자인한 것
레이아웃의 종류
고정형 레이아웃 : 전체 페이지의 너비를 정하고 콘텐츠에 따라 단을 나누어 정렬하는 방식
유동형 레이아웃 : 어떤 해상도의 모니터라도 좌우 공백 없이 콘텐츠 영역이 모니터 화면을
다 채우도록 하는 방식
반응형 레이아웃 : 기기에 따라 사용자 화면에 맞게 레이아웃이 변하는 것
레이아웃 속성
overflow
- 박스 모델 안의 내용이 박스의 범위를 초과할 때 어떤 형태로 출력할지를 결정한다.
visible : 박스 범위를 초과하는 내용도 보여진다.
scroll : 우측에 스크롤바를 이용하여 위, 아래로 이동하며 내용 확인 가능
hidden : 박스를 벗어나는 내용을 숨긴다.
auto : 내용이 박스를 벗어날 때에만 스크롤바가 생기도록 한다.
display
- 요소의 종류를 블록 또는 인라인으로 바꾸는 속성
- 해당 HTML 요소가 웹브라우저에서 어떻게 표현할지를 결정
- 웹페이지 레이아웃을 결정하는 중요한 속성
block : 줄바꿈 한 후 새로운 라인의 전체 영역을 확보(세로로 나열한다)
inline : 새로운 라인에서 시작하지 않고 너비도 해당 내용만큼만 영역을 확보
none : 박스를 생성하지 않는다.
inline-block : linline을 block처럼 만들어서 바로 옆에 나열(가로로 나열한다)
display 속성
block : <div>, <h>, <p>, <ul>, <ol>, <form>
Inline : <span>, <a>, <img>
visibility
- 요소를 보이게 할지 숨기게 할지 선택하는 속성
visible(기본값) : 요소를 보여준다.
hidden : 요소를 보여주지 않는다.
collapse : 테이블 요소에서만 쓸 수 있다.
position
- 레이아웃을 배치하거나 요소의 위치를 정할 때 사용하는 속성
static(기본값) : 무조건 요소를 순서대로 배치한다. 위치를 지정하더라도 적용되지 않는다.
absolute : 문서 내에서 절대 위치에 배치
relative : 직전 요소의 상대 위치에 배치
fixed : 현재 보이는 브라우저 화면 내에서 절대 위치에서 배치
z-index
- 어느 요소가 앞에 나올지 배치 순서를 정하는 속성
- position(relative, absolute, fixed) 속성을 적용한 요소에서만 동작한다.
- 정숫값을 사용해서 배치 순서를 정한다.
- 값이 높을수록 앞쪽에 배치하고 값이 작을수록 뒤쪽에 배치한다.
float
- 본문 중간에 이미지를 넣고자 할 때 주로 사용한다.
none(기본값) : 플로팅 박스 적용 없이 순서대로 배치
left : 플로팅 박스를 왼쪽 경계에 배치하며 주변 콘텐츠가 오른쪽에 나타난다.
right : 플로팅 박스를 오른쪽 경계에 배치하며 주변 콘텐츠가 왼쪽에 나타난다.
clear
- float를 사용해서 이미지를 넣었다가 이미지 옆이 아닌 아래에서 새로 시작하고 싶을 때 사용한다.
left : 왼쪽 요소를 취소
right : 오른쪽 요소를 취소
both : 모든 float(left, right)을 취소한다.
뷰포트의 속성
- 웹페이지에서 브라우저의 크기 및 배율을 변경할 때 사용하는 메타 태그
<HEAD></HEAD> 안에서 정의한다.
[형식] <meta name="viewport" content="width=device-width, user-scalable=no">
속성 설명 width 뷰포트의 가로(너비) height 뷰포트의 세로(높이), 기본값은 너비 속성 값과 기기의 비율에 따라 계산 initial-scale 배율로 설정하는 뷰포트의 초기 화면의 크기 값,
설정 범위 0~10.0 (기본값 : 1)minimum-scale 뷰포트의 최소 배율 값, 설정 범위 0~10.0(기본값 : 0.25) maximum-scale 뷰포트의 최대 배율 값, 설정 범위 0~10.0(기본값 : 1.6) user-scalable 사용자가 확대 또는 축소를 설정하는 속성(기본값 : yes) 웹 표준 검증 : HTML, XML과 같은 웹 문서의 표준 유효성을 검증하는 서비스
웹 표준 검증 사이트 : http://validator.kldp.org/
레이아웃
- 구성요소들을 규칙적으로 배치하면서도 주목성, 가독성, 창조성, 명쾌성, 조형성 등을 요구
[웹사이트를 제작할 때 기본이 되는 레이아웃]
Header Naviation Menu Side Bar Main Content Side Bar Footer