위치(position) 조정 속성
position 속성은 요소들이 화면에 어떻게 배치될지를 지정, 자식 요소에게 대물되지 않는다는 특징을 가진다.
static : 디폴트 값이며 코드 흐름에서 자신의 위치.
** top, bottom, left, right 속성에 영향을 받지 않음
relative : 원래 위치에서 상대적인 위치 지정.
**top, bottom, left, right 속성을 지정하여 원래 위치로부터 변경한다.
CSS의 좌표계는 기준점이 x,y,z축 (0,0,0) 에 따라 요소가 배치되는 개념.
위 예시처럼 left 속성을 100으로 주면 오른쪽으로 밀려나고,top 100을 주면 아래로 밀려난다.
relative는 기준점이 요소의 왼쪽 모서리인 점을 기억하자.
absolute : 자신을 감싸고 있는 Tag에서 상대적인 위치 지정.
**자신을 감싸는 Tag가 없을 경우 body Tag를 기준으로 한다.
단 , 자신을 감싸는 Tag가 static 위치 속성을 가지면 해당하지 않는다
absolute일 때는 웹 브라우저의 왼쪽 위 모서리가 기준이다.
fixed : 전체 보여지는 화면에서 고정된 위치.
**페이지가 스크롤되더라도 항상 같은 영역 (스크롤에 영향 x)
sticky : 스크롤로 이동할 수 있는 공간을 top~right 속성으로 제한
css 어렵다,,,디자인 감각 제로인건가,,,,
레이아웃 순성 지정 / 숨김
순서지정
Z-index : 숫자(정수): 숫자가 높을수록 위로 올라온다.
position과 함께 사용해야한다.
숨김
visibility속성을 이용하면 해당 요소를 보이게 하거나 숨길 수 있다.
속성값
eg
cursor: pointer;
opacity: 0; -> 0으로 하면 모습만 감춤
visibility: hidden; -> 마우스 효과 등도 무효
display:none; -> 자리도 차지 하지 않게 됨
+++ 08.07
float
이미지 요소와 텍스트 요소 배치하기 위한 속성
블록 성격 요소를 인라인 성격 요소처럼 배치할 수 있음
float 속성이 적용 대상을 공중에 띄어 배치하기 때문에 대상이 있던 위치를 빈 공간으로 인식하기에 파란색 요소는 마치 빨간색 요소가 없는 것처럼 인식하고 해당 공간을 파란색 요소의 배경이 차지하는 것.
다만 부모 요소가 자식인 빨간색과 파란색 요소의 공간을 제대로 인식하지 못하는 경우가 있다. 즉, float 속성을 적용하면 해당 자식 요소를 부모 요소가 제대로 인식하지 못한다. 이를 해결하기 위해 clear 속성을 사용하거나 overflow 속성을 이용한다.
clear 속성
float 속성을 해제할 때 사용하는 속성
