1. Responsive Web Design - Basic HTML and HTML5

리뷰 시리즈 첫 글입니다. 대체로 블로그 글로 리뷰란 논평의 의미를 갖지만 이 글에서 리뷰의 의미는 복습의 의미가 강합니다. freecodecamp의 경우 코딩 문제를 풀기만 하면 바로 넘어가기 때문에 내용을 제대로 이해하지 않고 넘어가는 경우도 많고, 한 주제를 빠르게 끝낼 수 있기 때문에 기억에 잘 남지 않는 문제가 있습니다. 저와 함께 freecodecamp에서 공부한 내용을 복습하여 내용이 머리 속 깊이 자리 잡을 수 있도록 해보려 합니다.

Basic HTML and HTML5는 총 28개의 Subject를 갖고 있으나, 첫 주제 답게 내용이 상당히 쉽습니다. 영어라는 장벽만 넘으신다면, 처음 하시는 분이더라도 3시간 이내에 하실 수 있을 것으로 보입니다. 시간을 정확히 기록하지 않았으나, 저는 예전에 모두 다 했고, W3school로 HTML을 복습한 상태여서 30분에서 1시간 정도 걸렸던 것으로 기억합니다. 그래서 일단 대략적으로 2시간으로 시간을 산정했습니다. 앞으로도 초보자와 개발자 사이의 시간으로 너무 타이트하지 않게 시간을 적어두도록 하겠습니다.

여기 아래서 부터는 각 Subject에 대한 링크인데 링크 아래에 복습할 내용이나 더 알아두면 좋을 만한 내용을 달아 두겠습니다. 아 그리고 각 Subject의 제목을 읽으면서 어떤 내용이었는지 생각을 한 번 해보는 것도 좋을 것 같습니다. 기억이 나지 않는다면 해당 Subject를 클릭하여 되새김 하시면 됩니다.

일단 아래 글을 먼저 읽기 보다는 freecodecamp가 제공하는 학습 자료를 순서대로 따라 하시고 나서 아래 글을 보시길 바랍니다. 아, 그리고 참고로 freecodecamp에 동영상 자료가 없는 줄 알았는데 Get Help > Watch Video 에 들어가면 풀이를 볼 수 있습니다.

---

• Say Hello to HTML Elements
• Headline with the h2 Element
  • <h1>~<h6>는 글씨 크기를 변경하는 목적으로 사용하는게 아니라(처음엔 대체로 그렇게 쓰지만..) 원래는 글의 구조를 정해주기 위해 사용하는 tag입니다.
• Inform with the Paragraph Element
  • <p>는 paragraph의 p입니다. 각각의 문단이 p가 됩니다. 티스토리 블로그 글도 HTML로 만들면 각각의 문단이 p로 이루어져있습니다.
• Fill in the Blank with Placeholder Text
• Uncomment HTML
• Comment out HTML
• Delete HTML Elements
• Introduction to HTML5 Elements
  • HTML5 는 의미 요소(semantic element)라는 것을 도입했습니다. 본문에서 제공하고 있는 main, header, footer, nav, video, article, section 외에도 여러 tag가 있습니다. 이러한 sematic tag로 html 파일을 구성할 시에 검색에 있어 도움이 된다고 합니다.
• Add Images to Your Website
  • src로 image의 주소를 넣을 수 있습니다. 참고로 자기 자신의 asset을 사용하는 경우에는 앞의 도메인 주소를 생략하고 할 수 있습니다.(express static file routing으로 쉽게 할 수 있습니다.)
  • alt는 2가지 역할을 합니다. 접근성 향상을 위해 시각 장애인 들에게 읽어주는 내용이 되기도 하고, src가 없는 경우 그림을 대체해주기도 합니다.
• Link to External Pages with Anchor Elements
  • a는 anchor의 약자로 링크를 나타냅니다.
  • href는 Hypertext REFerence의 줄임말입니다.
• Link to Internal Sections of a Page with Anchor Elements
  • a tag의 target attribute에는 _blank외에도 _self(default), _parent, _top, framename 이 올 수 있습니다.
  • 위의 링크를 보시면 아시겠지만 download 속성을 사용하면 링크 뿐만 아니라 파일 다운로드도 가능합니다.
• Nest an Anchor Element within a Paragraph
  • 또한 a tag 사이의 innerHTML(Tag 사이의 공간)로는 글씨가 올 수도 있고 그림, 버튼 등 다양한 element를 넣을 수 있습니다.
• Make Dead Links Using the Hash Symbol
  • <a href="#"></a> 와 같은 형태로 dead link를 만들 수 있는데 dead link의 목적은 place holder로 볼 수 있습니다. 먼저 "#"으로 써놓고 나중에 링크 주소를 넣으면 됩니다.
• Turn an Image into a Link
  • a tag 사이에 img tag를 넣으면 link 연결을 해주는 img element를 html 문서에 넣을 수 있습니다.
  • 참고로, img tag 사이에 a tag를 넣는 것은 동작하지 않습니다.
• Create a Bulleted Unordered List
• Create an Ordered List
• Create a Text Field
• Add Placeholder Text to a Text Field
• Create a Form Element
  • form은 action이라는 attirubute를 갖고 있습니다. action이라는 attribute에는 url을 할당할 수 있습니다.
  • <input type="submt></input>과 함께 쓰여 form의 data를 보낼 곳을 정해주는 attribute입니다.
  • 나중에 나올 내용이지만, form action method를 잘 쓰면 axios, ajax같은 서버 통신 프레임워크 없이 html 만으로도 서버와 통신이 가능합니다. 물론 이렇게 하기 위해서는 input의 name과 value를 잘 설정해주어야 합니다.
  • form tag는 매우 중요하므로 자세히 아셔야 합니다. 자세한 내용은 tcp school의 form 항목을 참고 바랍니다.
• Add a Submit Button to a Form
• Use HTML5 to Require a Field
  • required attribute를 사용한 input에 적절한 값이 채워지지 않으면 form action이 동작하지 않습니다.
  • required는 true/false 값인데 존재하면 true 그렇지 않으면 false로 간주됩니다. 다른 attribute도 마찬가지로 true/false 값인 경우로는 존재하거나 존재하지 않거나로 값을 구분합니다.
• Create a Set of Radio Buttons
  • radio input은 선택 option 안에 드는 것들은 모두 name이 같아야 합니다. 실제 form action으로 전송되어 질때 이 이름으로 전송되기 때문입니다. 만약 이름이 다르다면 해당 radio input간에는 관계가 없게 됩니다.
• Create a Set of Checkboxes
  • label의 for는 input의 id값입니다. 이렇게 하는 경우에는 label 글씨 부분을 클릭 하더라도 해당 input을 선택할 수 있게 됩니다.(checkbox, radio 동일)
• Use the value attribute with Radio Buttons and Checkboxes
  • value 값을 넣으면 name=value와 같은 형식이 되어 action url의 뒤에 붙습니다. 여러 input이 있는 경우에는, name1=value1&name2=value2&... 와 같은 형식이 됩니다.
  • 따라서 복잡한 object나 array등을 전달해야 하는 경우에는 form 형식은 맞지 않습니다. 이 경우에는 axios, ajax 등의 library로 data를 전달해야 합니다.
• Check Radio Buttons and Checkboxes by Default
  • checked attribute도 required와 마찬가지로 boolean값을 갖습니다.
• Nest Many Elements within a Single div Element
• Declare the Doctype of an HTML Document
• Define the Head and Body of an HTML Document

---

1번째 리뷰가 끝났습니다. freecodecamp의 내용은 실습 위주로 되어 있어서 자세한 내용이 생략된 경우가 많습니다. 이러한 경우에 저는 주로 한국어로 보고 싶을 때는 tcpschool라는 사이트를 이용하여 궁금한 내용들을 찾아보곤 합니다. freecodecamp로 공부하고 tcpschool로 심화 내용을 공부하면 web 개발 공부를 정말 효율적으로 할 수 있을 것입니다.  단, 리액트 등의 라이브러리 관련 내용은 없고 HTML, CSS, JavaScript에 대한 내용만 있습니다.