인터넷 활용 2차시

1. 위치설정 absolute, relative

10px;`을 설정하면 그 요소는 원래 위치에서 10픽셀 아래로 이동하게 되며, 이때 다른 요소들은 그 자리를 차지하기 때문에 해당 요소의 원래 위치에 여전히 자리를 차지하고 있는 것처럼 작동한다. 이러한 방식은 요소의 배치를 조정하면서도 문서의 구조를 그대로 유지할 수 있다는 장점이 있다. 즉, ‘relative’ 위치 설정을 사용하면 상위 요소들은 여전히 그 요소가 있는 자리를 인식하기 때문에 전체적인 레이아웃에 영향을 주지 않게 된다. 반면 ‘absolute’ 위치 설정은 요소를 문서의 normal flow에서 완전히 분리시켜 배치하는 방식이다. relative;’가 설정된 부모 요소를 기준으로 이동하며, 이로 인해 요소는 문서 흐름의 영향을 받지 않게 된다. 다시 말해, ‘absolute’로 설정된 요소는 다른 요소들과 겹칠 수 있으며, 그 위치는 ‘top’, ‘right’, ‘bottom’, ‘left’ 속성으로 완벽하게 제어할 수 있다. 이 경우, 요소가 문서에서 차지하는 공간은 실제로 그 요소가 위치한 곳에 적용되지 않기 때문에 다른 요소들은 그 요소의 자리를 인식하지 못한다. 예를 들어, 배경 이미지 위에 텍스트를 겹쳐놓거나, 특정 …