CSS #3
1. 요소 배치 (position)
1) display 속성
(1) 개념
요소를 어떻게 배치할지 제어가 가능한 속성
블럭레벨, 인라인레벨, 렌더링 방지, 인라인처럼 배치되지만 너비높이 지정 가능
display : block;
display : inline;
display : none; // 영역 유지 안 됨
display : inline-block;2) position 속성
(1) 개요
- display 속성은 요소가 배치되는 기본적인 규칙만 변경할 수 있다 (블럭레벨, 인라인레벨)
(2) 용어
배치 컨텍스트 (positioning context) : 누구를 기준으로 삼을건지를 결정하는 용어
문서 대열 (document flow, normal flow) : 브라우저에 요소가 기본적으로 배치되는 용어
(3) 종류
- position:static; (디폴트)
기본적인 문서 대열 (document flow, normal flow)를 따른다
따라서 임의적으로 위치 변경이 불가능함
-> top, left, right, bottom 속성 적용 X - position:relative;
배치 컨텍스트는 기본적인 문서 대열이다 (document flow, normal flow)
top, left, right, bottom 속성 적용 O - position:absolute;
배치 컨텍스트는 가장 가까운 부모(조상)이다 - position:fixed;
배치 컨텍스트는 뷰포트이다
top, left, right, bottom 속성 적용 O
스크롤해도 고정이 되어있다 - position:sticky;
최근 추가된 기능으로 caniuse.com에서 지원여부 확인할 것
static과 fixed가 합쳐진 기능
평상시에는 static이고 특정한 임계점에 오면 fixed처럼 동작됨
static, relative는 문서 대열에서 제외가 안 됨
absolute와 fixed는 문서 대열에서 제외됨. 따라서 요소들이 겹쳐서 렌더링될 수 있다
3) z-index 속성
(1) 개념
absolute와 fixed 문서 대열에서 제외됨. 따라서 요소들이 겹쳐서 렌더링 될 수 있다
(2) 배치 방법
x축 배치 : 왼쪽에서 오른쪽 배치 (인라인)
y축 배치 : 위에서 아래 배치 (블럭)
z축 배치 : 깊이
(3) 특징
- z-index:auto; (디폴트, z-index: 0 과 동일)
- 값이 작을수록 stack 밑에 배치된다
양수
0 (기본)
음수 - 반드시 position이 지정돼야한다 (static 제외)
2. 배경 (background) 관련
1) 배경 이미지
- background-image 속성 이용
- 문법
background-image:url("images/a"),url("images/b"); // a가 가장 위에 보임 - 기본적으로 이미지가 반복되고 텍스트의 배경으로 랜더링된다
2) 배경색
- background-color 속성
background-color:색상;
3) 배경 이미지 반복 설정
- background-repeat 속성
background-repeat: repeat-x | repeat-y | repeat | no-repeat; - 기본값은 repeat
4) 배경 사이즈
- background-size 속성
background-size : auto | px | contain | cover - auto : 기본값. 크기를 자동으로 설정
- px : 절대값
background-size : 10px, 20px; - contain : 주로 사용
화면을 작게하면 이미지도 같이 작아지고 크게하면 이미지가 무한정 커지지는 않고 이미지를 모두 볼 수 있는 정도까지만 커진다 - cover : 이미지의 비율을 관리하기 때문에 이미지 전체가 안 보여질 수 있다
5) 배경 위치
-
background-position 속성
background-position : top | right | bottom | left; -
이미지가 scroll 되는지 여부 설정
background-attachment 속성
background-attachment:scroll|fixed; -
이미지를 border, padding, content 영역까지 설정
background-clip 속성
background-clip:border-box|padding-box|content-box;
border-box: 기본, 배경이미지가 border(테두기)까지 차지함
z축 순서상 배경이미지와 border가 겹쳐서 보임
padding-box: 배경이미지가 padding(안쪽여백)까지 차지함
border까지 차지안함
content-box: 배경이미지가 content 까지 차지함
3. 크기 단위 (Units)
1) 단위 종류
- px
- %
- rem, em
- vw, vh (viewport width, viewport height)
2) 사용 가능한 속성
- width/height
- font-size
- margin/padding/border
- top/right/bottom/left
3) 크기 종류
(1) 절대 길이/크기
- px 만 사용하자 ( cm, inch,... )
(2) 상대 길이/크기
-
vw, vh ( viewport width, viewport height )
-
position 여부와 무관
-
뷰포트(viewport) 기준으로 너비 설정 방법 2가지
-
첫째:
position:fixed + width|height 로도 뷰포트 기준으로 길이(크기) 설정 가능
.x{
position:fixed;
width: 50%;
height: 50%;
}- 둘째:
.x{
position:fixed|relative|absolute 지정과 무관하게 동작됨
width: 50 vw;
height: 50 vh;
}4) max-width 속성
- % 사용시 화면크기가 커지면 비율로 설정했기 때문에 이미지가 계속 커질 수 있음
- 이미지의 부모 (컨테이너) 크기를 제한하면 더 이상 커지지 않을 수 있다
- 예>
< div > <== max-width:500px
< img > <=== width:100%
5) rem, em
- 글꼴 크기지정시 사용
- 기준은 웹브라우저에서 설정된 기본글꼴크기이다 ( 기본값은 16 px )
(1) em
- 부모 요소의 em값을 상속해서 글꼴크기가 정해짐
- 예>
<div> <-- 1.2 em ( 16 * 1.2 = 19.2px)
<div> <-- 1.3 em ( 16 * 1.2 * 1.3 = 24.96 )
<div> <--- ?(2) rem ( 권장 )
- root인 html 기준으로 글꼴크기가 정해짐
- 예>
<div> <-- 1.2 em ( 16 * 1.2 = 19.2px)
<div> <-- 1.3 em ( 16 * 1.3 = 20.8)
<div> <--- ?권장하는 단위 선택하기
font-size: rem
padding/margin: rem (*), %
border: px
width/height: %,vw,vh
top/right/bottom/left: %
