11. Responsive Web Design Projects - Build a Technical Documentation Page

1. 박스 모양으로 HTML 문서 구조 분석하기

User Story #1, #2, #3, #5, #7, #8, #9, #11, #12 는 박스를 확인해주시기 바랍니다.

User Story #6: The .main-section elements should contain at least 5 code elements total (not each).

전체를 스크롤링하기에는 너무 양이 커서 이 부분은 생략했습니다. code tag를 이 안에 5개 이상 만들기만 하면 됩니다.

2. HTML 세부 사항 설명하기

User Story #4: Each section element with the class of main-section should also have an id that corresponds with the text of each header contained within it. Any spaces should be replaced with underscores (e.g. The section that contains the header "JavaScript and Java" should have a corresponding id="JavaScript_and_Java").

User Story #10: Additionally, the navbar should contain link (a) elements with the class of nav-link. There should be one for every element with the class main-section.

User Story #13: When I click on a navbar element, the page should navigate to the corresponding section of the main-doc element (e.g. If I click on a nav-link element that contains the text "Hello world", the page navigates to a section element that has that id and contains the corresponding header.

사실상 4, 10, 13의 내용은 하나의 내용이라 할 수 있습니다. nav에 있는 a link를 main의 section과 연결 시켜 클릭 시 해당 위치로 이동하게 하면 됩니다.

<a href="#Introduction" class="nav-link">Introduction</a>

<section class="main-section" id="Introduction">
    <header>Introduction</header>
</section>

하나의 예만 보여드리자면 이렇게 href에 #id를 집어 넣으면 해당 id가 element로 있는 곳으로 이동하게 됩니다. 나머지 요소에 대해서도 동일하게 하시면 됩니다.

3. CSS로 스타일 입히기

User Story #14: On regular sized devices (laptops, desktops), the element with id="navbar" should be shown on the left side of the screen and should always be visible to the user.

항상 보이는 무언가를 만들려면 바로 생각나는게 있어야 합니다. position: fixed;를 사용하면 위치를 view port(웹의 경우 브라우저)에 고정시켜 주기 때문에 top, left를 적절히 조절했다면 화면 내에 계속 보이게 됩니다.

User Story #15: My Technical Documentation page should use at least one media query.

하나의 media query를 사용해야하므로 이번에도 tailwindcss의 1번째 breakpoint인 640px을 기준을 사용해봅시다. 그 중에서도 가장 두드러진 변화를 설명드리겠습니다. 좌측에 있던 nav를 상단 nav로 하는 것입니다.

@media (max-width: 640px) {
  nav {
    position: static;
    width: 100%;
    border-right: none;
    height: 256px;
    border-bottom: 3px solid DimGray;
  }
  nav header {
    position: static;
    text-align: center;
  }
  nav section {
    height: 200px;    
  }
  main {
    top: 256px;
    left 0;
    padding: 0;
  }
}

• 기존에 position: fixed;였던 nav를 default인 static으로 돌려주었습니다.
• media-query 적용 전에 width값이 고정되어 있던 까닭에 width는 100%로 변경하였습니다.
• main에서 기존 left 값으로 오른쪽으로 이동시키던 것을 left는 0을 주고 top으로 위의 nav를 피해 보여주도록 변경했습니다.
• 결과물은 다음과 같습니다.

4. 예제 따라하기

• 예제에서 viewport의 높이를 줄이면 nav 부분에서 JS Documentation이라고 써있는 부분인 header는 그대로 있는 채로 아래에 있는 링크 들만 스크롤이 됩니다. 이걸 하는 방법은 간단합니다. a link를 하나의 element(div, section, 경우에 따라서 ul, ol 등의 list)로 묶어주고 나서 overflow-y: auto;를 해당 element에게 건내주는 것입니다.

nav section {
  height: 100%;
  overflow-y: auto;
}

• 여기서 주의할 사항은 scroll을 만들고 싶으면 height값을 어떻게든 넣어야 한다는 것입니다. height가 정의 되야 scroll을 만들 수 있습니다.
• fixed를 사용하면 fixed가 된 element와 그렇지 않은 element가 겹치게 됩니다. 이걸 피하게 하는 방법은 fixed가 아닌 element의 위치를 조정하는 것입니다. 이 때 content-box보다 쉬운 방법이 있는데 그건 다음과 같습니다.

nav {
  box-sizing: border-box;
  padding: 0px;
  position: fixed;
  width: 300px;
  height: 100vh;
  border-right: 3px solid gray;
}

• 이렇게 box-sizing: border-box;를 사용하면 width값이 해당 element의 크기로 고정되게 됩니다. content의 width + padding + border까지 합친 것이 width가 되기 때문에 간단하게 left: 300px 만을 이용하여 fixed의 영역을 피해서 main element를 배치할 수 있습니다.

main {
  position: absolute;
  padding-top: 1.5em;
  left: 300px;
  padding: 30px;
}