[Day 5] Html 기초

동기부여 세션이 좋았다.

오늘은 HTML 기초에 대한 내용과 동기부여 라이브 세션이 있었다. HTML은 예전에 노마드코더 카카오톡 클론코딩 강의를 들으면서 재밌게 공부했는데, 오늘 강의를 통해 tag에 대해 다시 생각해보는 계기가 되었다. 어떤 목적으로 어떻게 작성하는가에 대해서 등등... 특히 self closing tag에 대해서, 별 생각 없었는데 다시 보니 자식 노드를 가질 수 없는 요소이기 때문에 명확하게 닫는 태그를 쓰지 않는다는 것을 새롭게 알게 되었다.

오후의 동기부여 세션에서는, 1일차에 공부했던 자기주도 학습, 메타인지에 대해서 다시금 상기시키고 포기하지 않도록 응원을 해주는(?) 그런 시간이었다.인상적이었던 내용은, 현재 가진것에 감사하는 마음을 잊지 말라는 것이었다. 생각해보니 내가 이렇게 코드스테이츠 코스에 들어와 공부를 하는 것도 감사한 일이고, 당분간 일하지 않고 공부에 몰두할 수 있다는 것도 감사한 일이다.

다만 어제부터 몸이 너무 안좋아서 공부를 해야되는데 힘이 든다 ㅜ. 몸이 물을 먹은 스펀지처럼 너무 무겁다,,,

오늘 배운 내용

• 웹페이지의 세가지 구성요소 Html, Css, JavaScript
  • html은 마크업 언어로 기획단계에서 제작된 와이어프레임을 바탕으로 웹페이지의 구조를 만들 수 있다.
  • 목적에 맞는 semantic tag (의미가 있는 태그)를 정확하게 사용하도록 해야한다
    • 목적에 맞도록 사용했을 때 코드를 더 직관적으로 표현할 수 있다.
    • 태그를 구조적으로 정확하게 사용했을 때, 의도대로 렌더링되며 검색 엔진에 빠르게 색인된다.
    • 웹은 전 세계인들이 사용하는 기술인만큼, 모든 사람들에게 최적의 접근성을 제공할 수 있도록 세부적인 내용을 고려하여 작성해야 한다. (ex - img 태그 내의 alt 속성)
• Html 태그 일부 정리
  • tag 내부에 컨텐츠를 가지지 않는 빈 요소(void element)에 한하여 self closing 할 수 있다.
  • <img src = 'url...' /> 태그에 대하여, src = 'url...' 은 어트리뷰트 (속성), src는 어트리뷰트 네임 그리고 'url...'은 어트리뷰트 값(value) 라고 한다.
  • <form>태그 : 사용자 입력 정보 전달을 위한 태그 (입력 양식) form 태그 내에서 활용할 수 있는 태그 요소는 아래와 같다.
    • <input /> 입력창, 속성으로는 type - 종류, name - 데이터 이름 , value - 기본 값을 지정할 수 있다.
    • input 의 radio type 같은 경우, name 속성에 같은 이름을 넣어 그룹화 하여 단일 선택을 위한 컴포넌트를 만들 수 있다.
    • <select> <option> </select> : 드롭다운 리스트 + <optgroup> 태그로 <select> 태그 내의 <option>태그들을 그룹화할 수 있다.
    • <label> : for 속성을 통해 다른 요소와 결합하여 사용할 수 있다.
    • <textarea> <button> <fieldset>(<input>과 결합된 <label>태그들을 그룹화할 수 있다.)
  • Html 태그와 함께 id, class 선택자를 사용할 수 있다.

참고자료

https://xo.dev/why-html-is-important-than-you-think/

HTML이 당신의 생각보다 더 중요한 이유 | ~/xo.dev

https://developer.mozilla.org/ko/docs/Glossary/Empty_element

빈 요소 - 용어 사전 | MDN

https://stackoverflow.com/questions/13232121/closing-html-input-tag-issue

Closing HTML <input> tag issue

https://developer.mozilla.org/ko/docs/Glossary/Semantics#html_%EC%8B%9C%EB%A7%A8%ED%8B%B1

Semantics - 용어 사전 | MDN

https://stackoverflow.com/questions/9741328/why-do-we-need-a-fieldset-tag

Why do we need a fieldset tag?

https://ofcourse.kr/html-course/form-%ED%83%9C%EA%B7%B8

HTML <form> 태그 - ofcourse