- 부모요쇼 : relative / 자식요소 : absolute

float레이어 배치하기 BOX1 BOX2 BOX3 BOX4 div 블럭요소의 세로 배치를 가로 배치로 변경 BOX1 BOX2 BOX3 BOX4

z-index- 레이어 순서를 정함- 숫자가 클수록 앞으로 옴  - 레이어 순서 정하기 (가장 큰 수가 위로, 레이어 순서값은 음수도 허용)

sticky스크롤 영역 기준으로 배치 1) position : fixted를 주면 다음 요소를 덮어버림 롯데타워 position:sticky 서울 부산 제주 KOREA KOREA KOREA KOREA KOREA KOREA KOREA KOREA KOREA KOREA KOR..

- absolute, relative : 문서영역 기준 (일단은 body영역을 기준) - fixed : 화면 영역 기준 (브라우저를 기준으로) ex) 위로, 아래로, 퀵메뉴 등등- relative : 본인의 자리가 살아있다. - absolute : 본인 자리는 사라진다. - fixed : 수직 스크롤으로 방향을 변경해도 자리는 고정 position:fixed 개나리 진달래 라일락 KOREA KOREA KOREA KOREA KOREA KOREA KOREA KOREA KOREA KOREA KOREA KOREA KOREA KOREA KOREA KOREA KOREA KOREA KOREA KOREA 화면하단에 고정 position:fixed 개나리 진달래 라일락 KOREA KOREA KOREA KOREA KORE..

1) 요소에 자기 위치가 살아있음 position:relative 손흥민 박지성 김연아 2) 부모의 위치를 지정 position:relative 손흥민 박지성 김연아 - position:relative -> 상대적인 위치

position: absolute 1) 본문영역이 기준 좌표 position:absolute position:absolute - position:abso..

position : static 가장 기본 수직으로만 배치 문서의 흐름에 맞추어 배치

화면 레이아웃 기법- position 속성 : 배치방법을 지정- float 속성 : 레이어를 왼쪽 또는 오른쪽 위치 지정.  수평을 기준으로 정렬하기                     요소가 부모요소 기준으로 왼쪽 또는 오른쪽에 배치할 때 지정- clear 속성 : float속성을 해제- z-index 속성 : 레이어 순서를 정함포지셔닝(레이아웃)- 브라우저 화면 안에 박스 형태의 각 콘텐츠를 원하는 위치에 배치하는 것- 수평, 수직, 그리드 방향으로 배치할 수 있다.- position : "static | relative | fixed | absolute | sticky"

브라우저들은 기본적인 스타일을 가지고 있다.그런데 이 브라우저들마다 각각 다른 스타일을 가지고 있기 때문에 같은 css를 적용해도 Edge, Chrome, Firefox 등의 브라우저에서 사용자들에게 비추어지는 모습이 모두 다를 수 있다.이러한 문제를 해결하기 위해서 브라우저의 스타일을 모두 초기화해서 동일하게 만든 뒤 스타일을 추가하여 나가 모든 브라우저에서 같은 화면을 볼 수 있게 해주는 것이다. 대한민국 무궁화 오필승 코리아 국어 영어 개나리 진달래