Section1 Unit2 HTML 기초

 코드스테이츠 프론트엔드 부트캠프 본격적인 시작!!

 어제는 거의 OT라 오늘부터 강의가 시작되었다. 하루종일 줌으로 수업하는 형식이 아니라 스스로 공부하는데 초점이 맞춰진 듯했다. 어제 OT때 구글 캘린더를 공유받아서 전체 일정을 확인할 수 있었다. 오늘 내일은 오후 5시에 라이브 세션이 있고, 금요일부터 페어 프로그래밍이 시작되었다. 두근두근 🥰

 블로그 챌린지가 있어 앞으로 2주 동안은 수업한 내용을 꾸준히 기록할 생각이고, 그 다음부터는 내 학습 속도와 이해도를 보고 기록할 계획이다. 화이팅 👍🏻

---

Section1 Unit2 [HTML] 기초

 

📌 Chapter1. 웹 개발 이해하기

첫 시작은 간략하게 웹 개발에 대한 소개 타임~

HTML은 구조를, CSS는 스타일을, JavaScripts는 상호작용을 담당한다.

 

코드에디터는 Visual Studio Code 😊

 

📌 Chapter2. HTML 기초

• HTML은 트리구조로 이루어져 문서의 구조를 표현한다. 나는 이 '트리구조', 'DOM Tree' 라는 걸 나의 언어로 뭐라고 설명해야 할지 항상 헷갈렸는데 자세히 찾아본 적이 없었던 것 같아 이번 기회에 찾아서 정리해볼까 한다. 📎 아마 조만간 링크로 블로그 게시글이 달릴듯!

 

• 자주 사용하는 HTML 요소로는 아래와 같은 요소들이 있다.

  divspanimgaul li

 

• 입력 폼을 위한 태그로는 아래와 같은 태그들이 있다.

  inputtextareabutton

 

• HTML5 에서 등장한 시맨틱 요소(Semantic Element). 중요하다고 생각되어 따로 정리를 해보았다. 

HTML5 시맨틱 요소 (Semantic Element)

 시맨틱 태그의 등장 배경을 잠깐 살펴보면,

 HTML5에서는 시맨틱 웹을 중요시하여 여러가지 태그를 새롭게 만들었는데, 이러한 태그들을 시맨틱 태그라고 한다.

 2000년대 초반까지만 해도 테이블 관련 태그로 웹 페이지를 여러 구획으로 나눠서 레이아웃을 만드는 방식인 Table Layout이 일반화되어 어 있었지만, 2000년대 초반부터 시맨틱 웹이 중시되면서 HTML은 문서 구조와 의미, CSS는 디자인으로 확연히 분리되었으며, 테이블 레이아웃은 박스 모델 레이아웃으로 변화되었다. 그러나 당시 표준이었던 HTML 4.01과 XHTML 1.0으로는 시맨틱 웹을 구현하기에는 어려움이 있었고, 이 때문에 레이아웃에서 각 영역을 지정하기 위해 <div> 태그가 많이 쓰였던 것이다. 이 때문에 HTML5 에서 관련 태그를 추가한 것이라고 한다.

 시맨틱 태그를 사용한 레이아웃은 컴퓨터가 읽어낼 수 있으며, 이는 검색 노출을 용이하게 하고, 궁극적으로 시각장애인에게 사이트의 어디가 본문인지 아닌지 알려줄 수 있다는 장점이 있다.

 출처: 나무위키

 

📌 Chapter3. HTML 심화

• 정말 많이 쓰이고, 무조건 알아야 하는 id와 class에 대한 내용도 다뤘다.

  → id는 고유한 요소의 이름을 붙일 때 사용하기 때문에 한 문서에 단 하나의 요소에만 적용시킨다.

  → class는 반복되는 영역을 분류할 때 사용하므로 동일한 값을 갖는 요소가 많을 수 있다.

---

🌙  오늘의 회고

 이미 HTML을 알고 있었기 때문에 복기하자는 생각으로 빠르게 봤다. 아마 HTML과 CSS 파트는 무난하게 볼 수 있지 않을까 싶어서 노션 정리도 좀 더 깔끔하게 하고, 공부하면서 필요할 세팅도 조금씩 해두었다.

 줌으로 실시간 수업을 아침부터 하는게 아니다 보니(오늘은 오후 5시에 라이브세션이 있었다) 온라인 수업을 하고 있는게 맞는건지 긴가민가 하기도 하고 좀 쳐지는 느낌이 들기는 했는데, 에디터를 열고 간단하게나마 무언가를 쓰기 시작하니 기운이 돌아온 것 같은 느낌이 드니 신기했다. 이 텐션, 앞으로 10년은 더 유지하고 싶다.