요소 선택 도구를 선택한 상태로 자세히 보고 싶은 요소를 클릭하면 해당 요소가 선택되고 개발자 도구 아래쪽에서 선택한 요소의 박스 모델을 보여 줍니다.
그림 6-20 원하는 요소를 선택해 박스 모델 확인
이처럼 개발자 도구를 사용해, HTML 태그로 작성된 요소들이 박스 모델을 가지고 있음을 확인할 수 있습니다. 박스 모델을 적절하게 제어하면 HTML 요소를 원하는 위치에 배치할 수 있습니다. 지금부터 자세히 배워 보겠습니다.
요소 선택 도구를 선택한 상태로 자세히 보고 싶은 요소를 클릭하면 해당 요소가 선택되고 개발자 도구 아래쪽에서 선택한 요소의 박스 모델을 보여 줍니다.
그림 6-20 원하는 요소를 선택해 박스 모델 확인
이처럼 개발자 도구를 사용해, HTML 태그로 작성된 요소들이 박스 모델을 가지고 있음을 확인할 수 있습니다. 박스 모델을 적절하게 제어하면 HTML 요소를 원하는 위치에 배치할 수 있습니다. 지금부터 자세히 배워 보겠습니다.