| : 또는
[포지셔닝(레이아웃)]
- 브라우저 화면 안에 박스 형태의 각 콘텐츠를 원하는 위치에 배치하는 것
- 수평, 수직, 그리드 방향으로 배치 할 수 있다
- position : "static | relative | fixed | absolute | sticky"
● [화면 레이아웃 기법]
- position속성 : 배치 방법을 지정
- float속성 : 레이어를 왼쪽 또는 오른쪽 위치 지정. 수평을 기준으로 정렬하기
요소가 부모요소 기준으로 왼쪽 또는 오른쪽에 배치할 때 지정
- clear속성 : float속성을 해제
- z-index속성 : 레이어 순서를 정함
o static; 아무것도 추가하지 않았을 때의 기본값
o absolute
<!--절대적 위치 position:absolute-->
<!-- position:absolute는 원래 자신이 있던 위치를 버리고 이동-->
<!--부모에 대한 언급 없으면 바디 전체를 영역으로 잡고 그 안에서 위치 정해짐-->
/*연습2; 부모언급 없이 위치 적용(바디 전체를 기준으로 위치 적용)
#s1 li:nth-child(1) {
background-color: brown;
position: absolute;
left: 0px;
top: 0px;
}
#s1 li:nth-child(2) {
background-color: blanchedalmond;
}
*/
/*연습3 부모 영역을 기준으로 position:absolute*/
/*부모 ul, 자식 li*/
/*부모 position:ralative주고 자식에 absolute 주면 부모기준으로 위치 정함*/
/* #s1 ul {
background-color: chartreuse;
position: relative;
height: 300px;
}
#s1 li:nth-child(1){
background-color: lightpink;
position: absolute;
--left: 100px;
--top: 20px;
right: 0;
bottom: 0;
}
#s1 li:nth-child(2) {
background-color: dodgerblue;
}
#s1 li:nth-child(3) {
background-color: hotpink;
}*/
o relative
/*relative 및 위치지정시 원래의 자기 자리가 살아있음*/
/*absolute 및 위치지정시 원래의 자기 자리 사라짐*/
o fixed
<!--고정 위치 position:fixed-->
<!--absolute, relative는 문서 영역 기준(부모 미지정시 바디기준)-->
<!--fixed는 브라우저 전체를 기준으로 위치 지정-->
/*3) 부모포지션 지정해도 fixed는 브라우저 전체를 기준으로 보기 때문에 어떠한 부모에게도 종속되지 않음
#s1 li:nth-child(2) {
background-color: green;
--position:absolute;
--position:relative;
position:fixed;
left: 100px;
top:100px;
o sticky
/*1) fixed 주면 다른 요소를 덮어버림
-> 다른 요소 덮지 않고 고정하고 싶을 때 sticky
#header {
position: sticky;
top: 0;
height: 70px;
background-color: black;
width: 100%;
color: white;
font-size: 50px;
font-weight: bold;
text-align: center;
o z-index
<!--레이어 순서 정하기 (가장 큰 수가 위로, 레이어 순서값은 음수도 허용)-->
/*따로 언급 없으면 레이어는 위에서부터 쌓임*/
/*z-index 뒤의 정수가 큰 순서대로 앞에 온다, 음수도 가능*/
#aa {z-index: -3;}
#bb {z-index: -5;}
#cc {z-index: -1;}
o float
/*2) div 블럭요소의 세로 배치를 가로 배치로 변경*/
div {border:1px solid blue; width: 100px; height: 100px; float: left;}
/*float속성은 전 요소 속성을 상속받는 특징이 있음.
/* 6)에서 상속받은 float:left속성을 지워야 함*/
/**/
/*footer { border: 5px solid orange; height: 100px; clear: left; --clear:rigth;}*/
/*cler:both는 left, right 모두 해제*/
o 어떤 부모요소 내 자식요소의 위치 지정
body는 style="position:relative"속성이 이미 있는 상태
부모요소: relative / 자식요소: absolute
o box-sizing: border-box;
/*선 굵기나 여백 등으로 인해 늘어난 부분은 부모 크기에 맞게 알아서 해결하라*/
o 지정영역보다 내용이 넘칠 때
1) 스크롤로 출력: overflow: scroll;
2) 감추기: overflow: hidden; /*hidden | scroll*/
o 대상 감추기
<!-- CSS Layout - The display Property -->
<!--팝업창은 새 탭에서 열리는 것
한 탭에서 추가적으로 뜨는 페이지는 팝업창 아님-->
<!-- display: none은 visivility:hidden은 거의같은것-->
display: none; /*none | block*/
visibility: visible; /*visible | hidden*/
o block과 inline 차이
<!--block요소: 가로영역 전부 채움 width와 height 크기 지정 가능-->
<!--inline요소 : -->
<!--내용만큼만 영역이 존재. 줄바꿈 되지 않음. width와 height지정 불가능-->
<!--inline-block 줄바꿈이 되지 않지만 크기 지정 가능: 인라인과 블럭의 중간형태-->
o css에 이미지삽입
/*background-image로 넣고 백그라운드 사이즈와 이미지사이즈 일치시켜야*/
#menu>.gear:nth-child(2) {
position: absolute;
background-image: url(../images/gear-gray.png);
background-size: 80px 80px;
width: 80px;
height: 80px;
left: 123px;
top: 95px;
transform: rotate(25deg);
o transition(움직임)과 transform(변화)
#menu:hover>.gear:nth-child(1) {
transition: .4s linear; /*천천히 4초간 움직임*/
transition: .4s ease; /*빠르게 4초간 움직임*/
transform: rotate(-180deg); /*반시계 반바퀴 회전*/
}
o transform
<!--2D transforms -->
<!--translate()
rotate()
scaleX()
scaleY()
scale()
skewX()
skewY()
skew()
matrix()-->
