생활코딩 따라하기

<body> 대충 파악하기

자 이제 <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> 라는 이 페이지의 상단바를 공부해보자.

모바일

데스크탑

 

댓글

댓글 본문
작성자
비밀번호
  1. devhyun
    지나가던길에 봤는데 잘 정리하신거 같아요 ㅎㅎ
    궁금하신 부분있으시면 언제든지 메일 주세요 !
    opzyra@gmail.com
버전 관리
아빠늑대
현재 버전
선택 버전
graphittie 자세히 보기