자 이제 <body>에 대해 알아보자.
하나씩 뜯어보기 전에 어떤 큰 박스들로 구성되어 있는지 부터 보자.
가장 위에서 부터
- a
- header
- main
- footer
- 그리고 20개 정도의 Javascript
를 연결해 놓았다.
그런데 찾아보니 가장 위의 링크 a는 class = "skip"으로 묶여 표시되지 않는다.
position은 absolute(절대)이니 아마 화면좌표값을 이용해 표시하는 거라 짐작이되고,
화면 왼쪽 위가 (0, 0)의 좌표일 것이다, 오른쪽 아래 방향으로 랜더링 하니까
근데 한눈에도 top: -100px;은 이상하게 보여 값을 수정해 보았다.
그랬더니 바로 skip 클래스로 묶여서 안보이던 a링크가 나타났다.
심지어 height가 50px이라 top:-50px; 이 되면 완전히 사라지고,
그 이상의 수를 줄 경우 아래쪽으로 내려오는 것을 알 수 있었다.
즉 화면 왼쪽 위가 (0,0) 내 맥북의 경우 오른쪽 아래 끝점이 (2879, 1799)인 것으로 생각된다.
여기서 skip class를 주면 높이 100px 이하의 태그들은 화면에서 표시되지 않게 된다는 것을 알 수 있다.
다시 돌아오보면 이 웹은 크게 3가지 박스로 이루어져있다. 바로
- <header>
- <main class ="contents" class="index">
- <footer>
이다.
여기서 짐작되면서 재미있는 것은 위 태그들은 아마도 css에 의한 커스텀 태그라는 것
그리고 main태그는 class가 두개를 동시에 설정했다는 것이다.
펼처진 가지들을 아래 그림에서 확인하자.
3개의 큰 박스가 보이는가.
이 페이지의 숲을 보았고, 이제 나무를 보자.
다음 시간으로는 첫번째 <header> 라는 이 페이지의 상단바를 공부해보자.
