◆ position의 이해
◆ static
- position 미설정시 자동 부여
- 어떠한 위치 조정도 불가
◆ relative
미세 위치 조정이 가능하며 속성명을 top, left, right, bottom, z-index 이다.
- relative부터는 겹침 현상이 발생한다.
- z-index는 겹쳤을 때 누가 먼저 나와야 하는지를 정하는 속성
- z-index:1 이면 1순위가 아니라 1층에 배치한다는 뜻
- static 인덱스는 겹치기 않으므로 z-index를 사용해도 적용되지 않는다.
◆ position:absolute
-
position:absolute;로 설정하면 어떠한 태그의 영향도 받지 않고 위치 설정이 가능하다. -
위치 설정과 배치 순서 키워드(top, left, right, bottom, z-index) 사용 가능
-
relative는 static일 때의 위치가 기준이지만, absolute는 페이지가 기준이다.
-
(중요) 만약 relative, absolute, fixed 포지션 내부에 위치한다면 해당 영역이 기준이 된다.
-
한 번 위치가 정해지면 변경되지 않으므로 스크롤을 굴리면 이동한다.
◆ position:fixed
-
position:fixed역시 절대 배치 중 하나이다. -
페이지를 기준으로 하는 absolute와 다르게
-
fixed는 브라우저(화면)를 기준으로 한다.
-
위치 조정 모두 가능하다.
◆ static position
position에 대한 언급이 없으면 static position이라고 부른다.
- 위치가 변하지 않는다.
- 현재 태그의 위치는 앞 태그의 위치에 영향을 받는다.
◆ 화면 보호기
(참고) z-index가 없어도 fixed가 가장 높게 나온다.
opacity는 내부의 모든 항목의 불투명도를 조절
일반적으로 전체화면에서는 backgroud-color로 불투명도를 조절
◆ 가운데 배치하는 방법
크기의 절반만큼 반대 방향으로 이동시킨다.
1. margin 사용
- 장점 : 안되는 브라우저가 없다.
- 단점 : 크기를 알아야 한다.
margin-left: -150px;
margin-top: -200px;- transform 함수 사용
위치, 각도, 기울기, 확대 등을 처리하는 함수
페이지에서 내 크기 기준
- 장점 이동 크기 계산이 필요하지 않다.
transform: translate(-50%, -50%);- 단점 : 구저번 IE에서 사용 불가능
transform: rotate(45deg);- display:flex; 사용
- display:grid; 사용
- 번외)
- 페이지에서 내가 있을 수 있는 공간 기준
top: 50%;
left: 50%;◆ 체크박스를 이용한 토글(toggle) 디자인
◆ 연계 선택자
+는 "바로 뒤"라는 의미를 가진다.~은 "뒤 전체" 라는 의미를 가진다.- (앞)과 같이 반대는 없다
◆ span
- inline div이다.
- inline 이어서 폭 설정이 안된다.
◆ label
- inline div이다.
- for 속성을 통해서 특정 입력창을 타겟으로 삼을 수 있다.
- 대상에 반드시 ID가 부여되어 있어야 한다.
Backend Developer