12. Responsive Web Design Projects - Build a Personal Portfolio Webpage

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

User Story #1, #2, #3, #4, #6는 박스를 확인해주시기 바랍니다.

2. HTML 세부 사항 설명하기

User Story #5: The projects section should contain at least one link to a project.

User Story #7: The navbar should contain at least one link that I can click on to navigate to different sections of the page.

<nav id="navbar">
  <a href="#welcome-section">About</a>
</nav>
...
<section class="center" id="welcome-section">
  <h1>Hey I am Mimic</h1>
  <p>a web developer<p>
</section>

a element의 href에 #id를 넣으면 해당 위치로 바로 이동하게 됩니다. 이로서 nav와 section을 연결시켜 줍니다.

User Story #8: My portfolio should have a link with an id of profile-link, which opens my GitHub or FCC profile in a new tab.

<a class="profile-link" href="#" target="_blank">GitHub</a>

새로운 탭에서 링크를 열고 싶다면 target 특성에 _blank를 주시면 됩니다. 이 외에도 _self(default값, 자기 자신에서 열림), _parent, _top 을 넣을 수 있습니다. w3schools의 HTML Links > Links를 보시면서 직접 실행해보시면 이해하기 좋습니다.

3. CSS로 스타일 입히기

User Story #9: My portfolio should have at least one media query.

이번 예제에서는 꼭 media query를 사용해야할만한 게 보이지 않습니다. 프로젝트 타일의 갯수가 1~3개로 가변하는 것은 4. 예제 따라하기에서 다룰 예정입니다.

User Story #10: The height of the welcome section should be equal to the height of the viewport.

#welcome-section {
  height: 100vh;
}

vh는 viewport의 높이에 대한 100분위 비율을 의미합니다. 따라서 100vh는 viewport의 높이가 됩니다.(100vw는 viewport의 너비)

User Story #11: The navbar should always be at the top of the viewport.

display: fixed를 사용하면 viewport에 위치가 고정됩니다.

4. 예제 따라하기

이번 프로젝트에서 따라해볼만한 좋은 내용은 바로 가변 갯수의 grid 타일을 구현하는 것입니다. 프로젝트가 총 6개가 있는데 브라우저의 너비에 따라 3, 2, 1 개로 column 갯수가 변경됩니다. 미디어 쿼리를 이용해서도 이와 같이 구현할 수도 있지만 grid, auto-fit minmax 사용법

#tile-container {
  display: grid;
  margin: auto;
  grid-gap: 40px;
  grid-template-columns: repeat(auto-fit, minmax(320px, auto));
  max-width: 1280px;
}

저는 각각의 grid를 tile이라고 부르고 tile을 감싸고 있는 것에게 tile-container 라는 id를 주었습니다.

1. 이 css 코드에서 중요한 점은 바로 display: grid;입니다. 이로써 자식 요소 들을 grid element로 사용할 수 있게 됩니다.
2. grid-template-columns: repeat(auto-fit, minmax(320px, auto));의 의미는 grid column에 대한 제약 조건을 주겠다는 건데 auto-fit이라는 것은 grid로 현재 width를 모두 채우는 모양을 만들겠다는 의미입니다. minmax(320px, auto) 는 최소 320px의 크기를 가지고 커지는 건 자동으로 하겠다는 의미입니다.
3. 이렇게 auto-fit과 minmax가 조합이 되면 grid-gap을 포함하여 320px짜리 요소가 들어갈 공간이 3개 이상이 되는 경우 column이 3개가 되고, 2개 이상이 되면 2개가 되고 그게 되지 않는다면 1개만 보여주게 됩니다.
4. 여기서 max-width를 1280px로 했으므로 4개까지는 보여주지 않게 됩니다. 40px짜리 gap 3개와 320px짜리 element가 4개 있다면 총 1400px이 되기 때문입니다. (1400px, 1399px로 max-width를 변경시켜보면 1399px일 때는 3개까지만, 1400px일 때는 4개까지 늘어납니다.)

다음으로 한 번 더 보셔야할 부분은 타일 안에 그림이 가득 차는 모습입니다.

img {
  display: block;
  object-fit: cover;
  width: 100%;
  height: calc(100% - 50px);
}

• 이 코드 중에 잘 봐야 할 것이 바로 object-fit 입니다. w3schools의 css object-fit 에 자세한 설명이 나오긴 하지만 간단히 설명을 하자면 object-fit: cover;를 하시면 원래 그림의 비율을 손대지 않는다는 것입니다. width와 height를 어떻게 하든 해당 그림 원본의 비율 대로 보여주면서 clipped된 상태로 보여주게 됩니다. (object-fit은 img tag와 video tag에만 사용됩니다.)
• width: 100%를 한 이유는 원본의 그림 크기보다 커지는 경우나 그리드의 크기보다 작은 경우 현재 img의 parent의 크기에 맞추기 위함입니다.

제 코드펜 워크스페이스에 전체 코드가 있으니 참고바랍니다.