디스플레이
˙ 웹 페이지의 레이아웃을 결정하는 속성
˙ 해당 HTML 요소가 웹 부라우저에 언제, 어떻게 보이는가를 결정
˙ 대부분의 HTML 요소는 블록(block) / 인라인(inline) 두 가지 값 중 하나의 값을 가진다
블록 (block)
: 언제나 새로운 라인(line)에서 시작하며, 해당 라인의 모든 너비를 차지
인라인 (inline)
: 새로운 라인에서 시작하지 않고, 요소는 해당 HTML 요소의 content 만큼만 너비를 차지
인라인-블록 (inline-block)
: 요소 자체는 인라인처럼 동작, 해당 요소 내부에서는 블록처럼 동작
visibility
- 해당 요소가 웹 페이지에 표현될지 아닐지
- visible / hidden / collapse
HTML 요소 숨기는 방법
1. display 속성을 none으로 설정
2. visibility 속성값을 hidden으로 설정 : 웹 페이지의 레이아웃에는 존재
opacity
- 요소의 투명도를 조절
- 0.0(투명) ~ 1.0까지
포지션 (position)
static position
- top, right,... 속성값에 영향 받지 않음
- 단순히 웹 페이지 흐름에 따라 차례대로 요소들을 위치시키는 방식
- 모든 HTML 요소의 기본 설정값
relative position
- 기본 위치(정적 위치)를 기준으로 위치를 설정하는 방식
fixed position
- 뷰포트(viewport) 기준으로 위치 설정하는 방식
- 스크롤되어도 fixed position으로 지정된 요소는 항상 같은 곳에 위치
absolute position
- fixed position과 비슷하지만, view port가 아닌 위치가 설정된 조상(ancestor) 요소를 기준으로 위치를 설정
- 조상 요소를 가지지 않는다면, HTML 문서의 body를 기준으로
z-index 속성
- 겹치는 요소들이 쌓이는 스택(stack)의 순서를 설정
- 음수도 가능하며, 크기가 클수록 앞쪽에 위치한다
| 속성 | 설명 |
| clip | absolute position 방식으로 위치한 요소를 자름 |
| cursor | 마우스 커서 모양 설정 |
| overflow | 내용의 크기가 박스를 넘어갈 때 처리하는 방식 설정 |
| overflow-x | - 수평 방향 |
| overflow-y | - 수직 방향 |
Float
| 속성 | 설명 |
| float | HTML 요소가 주변 다른 요소들과 자연스럽게 어울리도록 설정 |
| clear | float 적용 후 나타나는 요소들이 더 이상 float 속성에 영향 받지 않도록 설정 |
| overflow | content의 크기가 해당 요소를 감싼 컨테이너 요소보다 클 때 어떻게 처리할지 설정 |
| overflow-x | - 수평 방향 박스 |
| overflow-y | - 수평 방향 박스 |
정렬 (align)
1. margin 속성을 이용한 가운데 정렬 : margin을 auto로 설정
- 해당 요소를 감싼 컨테이너 요소를 기준으로 수평 방향 가운데 정렬
- 해당 요소는 특정 너비를 가져야 하므로 width 속성값을 먼저 설정해야 함
2. position 속성을 이용한 좌우 정렬 : <body> 요소에 margin과 padding 속성값 설정
- 수평 방향 좌우 정렬
3. float 속성을 이용한 좌우 정렬 : <body> 요소에 margin과 padding 속성값 설정
- 수평 방향 좌우 정렬
[참고] http://tcpschool.com/css/intro
'HTML & CSS' 카테고리의 다른 글
| [CSS] CSS 고급 (1) : 내비게이션 바, 드롭다운, 툴팁 (0) | 2021.07.05 |
|---|---|
| [CSS] CSS 선택자 : 선택자, 의사 클래스, 의사 요소, 속성 선택자 (0) | 2021.07.05 |
| [CSS] CSS 박스 모델 : 크기, 패딩, 테두리, 마진, 아웃라인 (0) | 2021.07.05 |
| [CSS] CSS 기본 속성 : 색, 배경, 텍스트, 글꼴, 링크, 리스트, 테이블, 이미지 스프라이트 (0) | 2021.07.05 |
| [CSS] CSS 기초 : 개요, 문법, 적용 (0) | 2021.07.05 |