요소의 위치를 정하는 속성 (Position)

요소의 위치를 정하는 속성 (Position)

▶위치라는 개념을 요소에 부여하기 위한 속성값으로 요소(element)의 좌표값을 부여하기 위해서 필수로 우선 부여해야된다.

▶브라우저의 좌표 : URL 창을 제외한 브라우저의 좌측 상단 지점이 기준점(0,0)이고 수평축(가로)을 X, 수직축(세로)을 Y로 둔다.

▶위치는 x, y, z 축의 개념이 있으며, x 는 left, rigth y 는 top, bottom 이 있고 z 는 z index 라는 요소가 있다.

▶sticky : 기본값, 움직임X

▶relative : 기준을 부여해줌. 브라우저의 좌상단이 항상 기준이라고 했는데 어느 위치에서 해당 요소를 기준점이라고 부여하면 기준점이 이동한다. 해당 요소에 아무런 영향을 끼치지 않음. 단순히 기준점만 가지고 온다.

▶absolute : 엄청 중요한 요소! 해당 요소에 지대한 영향을 끼친다. 자식 요소에 사용할 경우 부모요소가 인식을 하지 못한다. 해당 요소를 뜯어내 기준점 위에다 붙힌다.

▶fixed : 브라우저에 해당 요소를 고정. 유지시키는 속성. ex)네이버 웹 사이트에서 스크롤을 내려도 검색창은 고정된다. 단순히 포지션만 부여할 경우 사용

 

강제 줄 바꿈

▶br은 HTML에서 강제 줄 바꿈 태그이다.

▶CSS에서 white-space : 공백 문자 처리 방식을 지정 할 수 있다. css로 더 깔끔하게 줄 바꿈 지정 가능

EX) div {white-space : pre-line;} = <br>