드디어 첫번째 Project입니다. 처음으로 본인 힘으로 아무 것도 없는 상태에서 HTML 문서를 만들게 되어 굉장히 오래 걸렸을 것으로 생각합니다. 이제 저와 같이 프로젝트를 하면서 중요한 포인트를 놓치진 않았는지, 그리고 일단 패스하였더라도 세부 사항을 놓치지 않았는지 확인을 해봅시다.
본래 프리코드캠프는 User Story에 있는 요구 조건만 충족 시키면 패스를 하지만, 저는 디테일한 부분인 블록의 미세한 크기나 폰트 같은 것을 제외하고 나머지 것들을 제공되는 예시랑 동일하게 하는 것을 목표로 할 생각입니다. 이렇게 하시고 나서 본인이 생각하기에 좋은 내용과 디자인으로 한 번 더 프로젝트를 하시면 실력이 쑥쑥 오를 겁니다.
또한, 제가 한게 하나뿐인 정답이 아니기 때문에 다른 방법도 가능하다는 점을 염두에 두시고 부족한 점이 있거나 하다면 댓글로 남겨주시면 참고하여 반영하도록 하겠습니다.
1. 박스 모양으로 HTML 문서 구조 분석하기
먼저 구조를 잡고 시작하면 프로젝트 전체 수행 시간이 줄어듭니다. 하나 하나 하다보면 어떤 요소와 특성이 어떻게 다른 요소와 특성에 영향을 미쳤는지 생각하느라 했던 일을 자꾸 다시 하게 됩니다. 먼저 전체를 보고 어떤 구조로 이루어져 있는지 생각해봅시다.
전체 페이지를 box 모양으로 나누어 보았습니다. 이렇게 눈으로 보고 box로 나누면 각 요소를 지나치게 감싸고 또 감싸지 않게 됩니다. 일단 박스를 나누는 기준은 하나의 block이라고 생각하시면 됩니다. 글자 내에 있는 것(inline 속성)에 영향을 주는 태그까지 포함하다 보면 box를 그리기가 힘들어 지기 때문에 일차적으로 박스를 그릴 때는 해당 부분은 제외하고 생각하시는 게 좋습니다.
그림을 잘 보면 가장 깊은 레벨의 박스는 녹색, 그 윗단계는 파란색, 최상단에는 붉은색으로 그렸습니다. 최상단 위에는 body가 있는데 body는 항상 있기 때문에 생략하도록 하겠습니다. 또한 list의 경우 ul, ol 정도만 치고 그 이하는 생략합니다. 일단 전체적인 구조를 보기 위한 그림이기 때문에 너무 세부 내용까지 그리면 오히려 확인하기 힘들게 됩니다. 이렇게 네모 친 상태에서 각각의 box가 가져야할 tag를 생각해보고 user story에 맞게 id를 붙여 봅시다.
참고로 box를 가리키는 요소는 박스 안에 넣으려고 했지만 공간이 여의치 않을 때는 글씨에 걸치게 놓았습니다. 또한 main#main 이렇게 되어 있는 경우 #앞에 있는 것이 tag이고 #뒤에 있는 것이 아이디입니다. #이 없는 경우에는 당연히 tag가 되겠습니다. 나중에 tagName.className 과 같은 것도 등장할 수 있고 더 길어진다면 tagName.className#id 이렇게 표현할 수도 있습니다. 순서는 구체적이어 지는 순서에 따라 저렇게 정했습니다.
이제 이 그림을 가지고 HTML 문서를 작성하시면 됩니다. 하실 일은 그림 그린 걸 코드로 바꾸는 것 뿐입니다. 그러고 나서 안에 있는 내용물인 글과 그림 모두 넣어주시면 됩니다.
2. HTML 세부 사항 설명하기
- HTML5 semantic 태그를 사용했습니다. 전체 내용은 <main>으로 사용하고 제목이 들어가는 부분은 header, 마지막에 링크를 넣어준 부분은 footer로 만들었습니다. header로 넣은 이유는 전체 내용을 소개하는 글이기 때문이고 footer로 넣은 이유는 링크에 있는 사유 중 마지막인 related document가 들어가 있기 때문입니다. 참고로 header에는 네비게이션 바가 들어가야 된다고 착각할 수 있으나 네비게이션 바를 위한 tag인 <nav>가 따로 있습니다.
- 그림을 담는 곳에는 <figure>를 사용했습니다. 문서의 주요 흐름과는 독립적인 콘텐츠이기 때문입니다. 이 때문에 <figure>자체는 block 요소이므로 글 안에 넣어지는게 아니라 별도의 공간을 차지하게 됩니다. 하지만 이 안에 들어가는 img 태그는 여전히 inline 속성을 갖게 됩니다.
- 계속 block, inline에 대한 언급이 나오고 있는데 자세한 사항은 블록과 인라인을 확인해보시기 바랍니다.
- figcaption도 함께 사용하여 그림에 대한 설명을 넣어줍니다.
- #tribute-info는 실제 내용이 들어가는 부분입니다. box 그림과 실제 그림을 잘 보면 다른 요소와 달리 리스트 부분과 인용 부분이 같은 width를 갖는 다는 걸 알 수 있으므로 제목부터 인용 까지 하나의 div로 묶어주도록 합니다.
- footer 안에 있는 a 태그를 따로 하지 않았는데 이 부분도 해주셔야 합니다. id값으로 tribute-link를 넣어주는 걸 잊지 마시길 바랍니다.(#7)
3. CSS로 스타일 입히기
- 이번 Project에서 가장 중요한 포인트 중 하나가 바로 이 image를 원래 크기까지만 커지게 하고 width가 좁아지면 좁아진 크기 까지만 커지도록 하는 것입니다. 여기선 max-width: 100% 를 img 태그에 주면 됩니다. max-width: 100% 라는 것은 width는 최대 100%까지 커질 수 있다는 의미입니다. width값은 원래 img의 크기에 맞춰져 있기 때문에, 이 둘을 조합해서 생각해본다면, 기본적으로 원래 사이즈이지만, 부모 요소가 작아져서 image가 차지할 공간이 작아진다면 원래 크기인 width와 부모 요소의 100%인 width를 비교하여 100% width가 작을 경우 그 걸 적용한다는 얘기입니다. (#8)
- 박스 모델 크기에 대한 설명을 참고하시면 좋습니다.
- 참고자료: https://stackoverflow.com/questions/24197730/css-image-max-width-set-to-original-image-size/24198922
- <img> 뿐만 아니라 전반적으로 글이나 그림 모두 가운데로 몰려 있습니다. 글의 경우 간단히 text-align: center; 를 <body>에 주면 됩니다. text-align과 같은 text관련 특성은 상속이 되므로 최상단에 넣어주면 하위의 모든 요소에 영향을 줍니다. 따라서 text-align: center를 주면 <img>는 text와 같은 content로 여겨지기 때문에 가운데로 이동하게 됩니다. (#9)
- 중요한 포인트는 앞으로 가운데로 모아줄 요소 들은 text와 같은 content이거나 content로 취급을 받는 inline속성의 tag(img, span 등) 입니다. block 속성을 갖는 tag 자체는 width가 100%인 상태라 어디로 이동하지 못하게 되어 있습니다. 그러나 text-align: center 를 주면 그 안에 있는 내용물 들은 가운데로 정렬할 수 있습니다. block 자체를 가운데로 넣기 위해선 flex 속성을 사용하는 방법이 가장 쉬워 보이는데, 이번 Project에서는 사용하지 않으므로 다음 Project에서 설명드리겠습니다.
4. 예제 따라하기
- h1 요소 부분이 h1 기본값에 비해 커보입니다. font-size: 2.5em; 을 주어 크기를 키워줍시다. 1em은 16px로 2.5em은 40px이 됩니다. 대신 em은 브라우저에서 글씨를 키울 수 있어 accessibility에 도움이 되므로 왠만하면 em 단위를 쓰시길 바랍니다.
- 크기 단위에 대한 글을 참고하시길 바랍니다.
- figure는 자세히 보면 다른 부분과 다릅니다. 하얀색 배경을 갖고 있으면서 가운데로 위치하고 있습니다. 그런데 figure는 기본적으로 block 속성을 갖기 때문에 width가 100%라 배경색이 전체에 영향을 미치게 됩니다. 따라서 이 부분을 inline-block 속성으로 만든 후에 약간의 패딩을 주면 됩니다. inline-block을 사용하는 이유는 내부적으로는 block으로 나머지 inline 요소를 감싸면서 외부적으로는 inline으로 여겨져야 하기 때문입니다.
- 자세한 사항은 디스플레이 inline-block을 참고하시길 바랍니다.
- #tribute-info의 경우 타이틀 역할을 하는 부분을 제외하고는 글자가 좌측 정렬되어 있습니다. 해당 요소에 text-align: left 를 주시면 됩니다.
- 연도를 나타내는 부분은 굵게 표현 되어 있고 인용 부분은 기울어져 있습니다. 이렇게 하는 방법은 2가지가 있는데 첫번째는 html tag를 주는 방법이고 두번째는 CSS 특성을 주는 것입니다. <strong>으로 감싸면 글씨가 굵어지고 <em>으로 감싸면 이탤릭체가 됩니다. 물론 <i> 로 감싸도 이탤릭체가 되지만 <i>가 icon을 위해 많이 쓰이니 <em> 를 사용하시는게 좋습니다. 또는 text-weight: bold 로 글씨를 굵게 하거나, text-style: italic 을 이용해 이탤릭체로 만드셔도 됩니다.
- #tribute-info의 경우 위에 있는 그림보다 너비가 좁습니다. 여기에 max-width: 700px 을 주면 최대 700px까지 커지게 만들 수 있습니다. 이 때 width값은 100%이므로(block 속성인 경우 width default값이 100%) 기본적으로 100%이지만 최대 700px까지만 커질 수 있기 때문입니다.
- #tribute-info는 크기를 갖는 div 요소이기 때문에 일단 좌측에서 부터 공간을 차지하게 됩니다.(혹시 궁금하신 경우 해당 요소에 background-color를 주어 확인해보세요~!) 이 차지하는 공간 자체를 가운데로 만들기 위해서는 margin: auto 를 주면 됩니다. 참고로 margin-auto는 inline 요소에게는 동작하지 않습니다. inline 요소의 경우 위에 나온 방식처럼 text-align: center로 가운데로 옮겨주셔야 합니다.
- 왜 그렇게 되는지는 margin 속성값에 auto를 사용하는 이유를 읽어 주시길 바랍니다.
- margin: auto 가 정상적으로 동작하기 위한 조건이 궁금하다면 https://stackoverflow.com/questions/4955122/what-exactly-is-needed-for-margin-0-auto-to-work
- 자잘한 margin값들을 고쳐서 조금 더 예쁘게 만들어 봅시다. 사실 margin은 별일이 없는 경우 그냥 써주시면 됩니다. 또한 각각 margin값을 다르게 적용해야되는 경우가 있다면 그 경우에도 같이 넣어주면 됩니다. 서로 겹치는 부분이 있는 경우 합쳐져서 적용되는게 아니라 그 중 큰 값만 적용되기 때문입니다. 눈으로 보기에 적당한 크기 만큼 margin을 잘 넣으면 됩니다.
첫번째 Project가 이걸로 마무리 되었습니다. 제가 작성한 코드가 궁금하신 경우에는 제 코드펜 워크 스페이스를 참고하시길 바랍니다. 이렇게 Tribute Page를 다 만드셨다면 그 다음으로는 본인이 생각하는 디자인으로 바꿔보는 것입니다. 예를 들어 float을 이용하여 그림을 왼쪽에 두면서 글이 감싸게 두는 방식도 가능합니다. 여러 아이디어를 발휘해 새로운 걸 시도하면 할 수록 나중에 정말 도움될 것입니다.
'TUTORIALS' 카테고리의 다른 글
| 10. Responsive Web Design Projects - Build a Product Landing Page (0) | 2021.08.13 |
|---|---|
| 9. Responsive Web Design Projects - Build Survey Form (0) | 2021.07.29 |
| 7. Responsive Web Design - CSS Grid (0) | 2021.07.25 |
| 6. Responsive Web Design - CSS Flexbox (0) | 2021.07.24 |
| 5. Responsive Web Design - Responsive Web Design (0) | 2021.07.24 |