12. 요소 배치 ( position)
1) display 속성
가. 개념
요소를 어떻게 배치할지를 제어가 가능한 속성.
블럭레벨로 배치/인라인 레벨로 배치/랜더링 방지/인라인처럼 배치되지만widht와height지정가능
display:block;
display:inline;
display:none; // 영역유지 안됨.
display:inline-block(*****);
2) position 속성
가. 개요
- display 속성은 요소가 배치되는 기본적인 규칙만 변경할 수 있다. ( 블럭레벨, 인라인레벨)
- top,left,right,bottom 속성을 이용해서 요소의 실제위치를 바꿀수 있다.
나. 용어
배치 컨텍스트(positioning context): 누구를 기준으로 삼을건지를 결정하는 용어.
문서 대열 ( document flow, normal flow): 웹브라우저에 요소가 기본적으로 배치되는 용어.
다. 종류
position:static
==> 기본.
기본적인 문서 대열 ( document flow, normal flow)를 따른다.
따라서 임의적으로 위치변경이 불가능하다.
즉 top,left,right,bottom 속성이 적용이 안됨.
역으로 top,left,right,bottom 속성이 적용될려면 static이 아닌 다른값으로 지정해야 된다.
position:relative
==> 배치 컨텍스트(기준)는 기본적인 문서 대열(document flow, normal flow)이다.
top,left,right,bottom 속성이 적용이 됨.
position:absolute
==> 배치 컨텍스트(기준)는 가장 가까운 부모(조상)이다.
==> 2가지 상황이 있음
가. 부모(조상)에 position 없는 경우
예>
<body>
<div id="a"> <== position:static 또는 지정안한 경우
<div id="b"> <== position:absolute
- html(body) 기준
- top,left,right,bottom 속성이 적용이 됨.
나. 부모(조상)에 position:relative 있는 경우
예>
<body>
<div id="a"> <== position:relative
<div id="b"> <== position:absolute
- <div id="a"> 기준
- top,left,right,bottom 속성이 적용이 됨.
position:fixed
==> 배치 컨텍스트(기준)는 뷰포트(view port ) 이다.
top,left,right,bottom 속성이 적용이 됨.
스크롤해도 고정되어 있음.
* 정리
static와 relative는 문서 대열 (document flow, normal flow)에서 제외가 안됨.
absolute 와 fixed 문서 대열 (document flow, normal flow)에서 제외됨.
따라서 요소들이 겹쳐서 랜더링 될 수 있다.
position:sticky
==> 최근에 추가된 기능임. 따라서 caniuse.com 에서 지원여부 확인 할 것.
static 과 fixed 합쳐진 기능.
평상시에는 특정한 임계점에 오면 fixed 처럼 동작됨.
예>
position:sticky;
top:30px;
3) z-index 속성
가. 개념
absolute 와 fixed 문서 대열 (document flow, normal flow)에서 제외됨.
따라서 요소들이 겹쳐서 랜더링 될 수 있다.
stack에 요소들을 쌓게 된다.
나. 요소 배치하는 방식 3가지
x축으로 배치: 왼쪽에서 오른쪽 배치 ( 인라인 )
y축으로 배치: 위에서 아래 배치 ( 블럭 )
z축으로 배치: 깊이
다. 특징
- z-index:auto; 기본값임 ( z-index: 0 과 동일 )
- 값이 작을 수록 stack 밑에 배치된다.
(양수)
0 (기본)
(음수)
- 반드시 position이 지정되어야 한다. ( static 제외 )
##########################################
13. 배경(background) 관련
1) 배경 이미지
- background-image 속성이용
- 문법:
background-image:url("images/");
background-image:url("images/a"),url("images/b"); // a가 가장위에 보임.
- 특징은 기본적으로 이미지가 반복되고 텍스트의 배경으로 랜더링된다.
2) 배경색
- background-color 속성
- 문법:
background-color:색상;
* 정리
background-image 와 background-color 같이 사용하면 background-image가 보인다.
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; // widht:10px height:20px
contain: 이미지를 보여주는 컨테이너내에서 이미지 크기를 최대한 크게 설정한다.
화면을 작게하면 이미지도 같이 작아지고 크게하면 이미지가 무한정 커지지 않고
이미지를 모두 볼수 있는 정도까지만 커진다.
따라서 이미지를 전체를 볼수 있다.
cover: 이미지의 비율을 관리하기 때문에 이미지 전체가 안 보여질 수 있다.
화면을 작게하면 이미지가 일정부분까지만 작아지기 때문에 화면이 잘라져 보이고
화면을 크게하면 이미지가 비례해서 커지기 때문에 화면이 잘라져 보인다.
5) 배경 위치
- background-position 속성
- 문법:
background-position:top|right|bottom|left
px(x축)
px(x축) px(y축)
% (x축)
% (x축) %(y축)
6) 이미지가 scroll 여부 제어
- background-attachment 속성
- 문법:
background-attachment:scroll|fixed;
7) 이미지를 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 까지 차지함.
##########################################
14. 크기 단위 ( units, ******)
1) 단위 종류
- px
- %
- rem, em
- vw, vh ( viewport widht, viewport height )
2) 사용가능한 속성
- width/height
- font-size
- margin/padding/border
- top/right/bottom/left
3) 크기종류
가. 절대 길이(크기)
- px 만 사용하자. ( cm, inch,... )
나. 상대 길이(크기)
a. 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;
}
b. rem(*****), em
- 글꼴 길이에 사용할 때 웹브라우저의 기본 글꼴크기(기본: 16px)가 기준
예> 1rem = 16px
c. %
c-1) 기본은 부모요소 기준이다.
예>
<div> <== width:100px
<div> <== width:50% ( 부모인 width:100px의 50% 확보. 실제값은 50px이 됨 )
c-2) position:fixed + %
예>
<div> <== width:100px
<div> <== position:fixed; width:50% ( 뷰포트의 50% 확보.)
- 화면크기를 변경하면 자동으로 설정된 크기도 변경된다.
c-2) position:relative + %
예>
<div> <== width:100px
<div> <== position:relative; width:50% ( 부모인 width:100px의 50% 확보. 실제값은 50px이 됨 )
- 만약에 부모가 인라인 레벨이면 적용안됨
c-3) position:absolute + %
예>
<div> <== position:relative;width:100px
<div> <== position:absolute; width:50% ( 부모인 width:100px의 50% 확보. 실제값은 50px이 됨 )
- 부모를 position:relative 지정하고 사용해야됨.
지정하면 자식은 부모의 width를 참조하여 %가 적용됨.
4) max-width 속성
- % 사용시 화면크기가 커지면 비율로 설정했기 때문에
이미지가 계속 커질 수 있음.
그런데 이미지의 부모(컨테이너) 크기를 제한하면 더 이상 커지지 않을 수 있다.
이때 부모(컨테이너)에 max-width:500px 지정하여
지정된 500px 보다 더 커지지 않도록 제어가 가능하다.
예>
<div> <== max-width:500px
<img> <=== width:100%
5) rem, em
- 글꼴 크기지정시 사용
- 기준은 웹브라우저에서 설정된 기본글꼴크기이다. ( 기본값은 16 px )
가. em
- 부모 요소의 em값을 상속해서 글꼴크기가 정해짐.
예>
<div> <-- 1.2 em ( 16 * 1.2 = 19.2px)
<div> <-- 1.3 em ( 16 * 1.2 * 1.3 = 24.96 )
<div> <--- ?
나. 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: %
'Programming > HTML & CSS & JavaScript' 카테고리의 다른 글
| CSS 4일차 - FlexBox(1) (0) | 2024.04.25 |
|---|---|
| CSS 4일차 - 색상, visibility, opacity, font, google font, text (0) | 2024.04.25 |
| CSS 3일차 - 크기단위 ( units ) (0) | 2024.04.24 |
| CSS 3일차 - background (0) | 2024.04.24 |
| CSS 3일차 - 요소배치(position) (0) | 2024.04.24 |
