D-2

2일 차가 시작되었다.
내용은 HTML,
작년 12월에 간단하게 배웠던 부분이라 가물가물했지만
마법의 단어 HOW TO로 자기소개 페이지 작성 진행에 문제없었다.
욕심이 많아 태그가 지저분하게 쌓였을 뿐...
동영상 강의 내용도 과거 노베이스 비전공자의 시선에서 감회가 새로웠다.
설레는 순간이었고 뛰어들 준비가 끝났다.

🔍 프론트엔드의 기본

위 3가지의 역할을 사진에서 알 수 있다.

HTML은 구조 CSS는 스타일 JAVASCRIPT는 상호작용을 돕는다
쉽게 말해 HTML로 집을 세울 뼈대를 만들고
CSS로 집을 꾸미며
JS로 불을 켜거나 문을 열 수 있는 등 많은 상호작용을 하게 한다.

🔍 HTML

HTML은 TAG 들의 집합으로 트리구조로 이루어져 있다.
TAG란 부등호 (<>)로 묶은 HTML의 기본 구성 요소라고 할 수 있다.

HTML RANKING
위 사이트는 개인 공부를 하다 유용하게 사용했던 사이트이다
전 세계 웹사이트들이 몇 가지 종류의 HTML 태그로 이루어져 있는지 보여주는 지표이다.
가끔 참고하면 좋을 것 같다.

🔍 로그인 화면 구현

로그인 화면의 전체적인 구조는 대부분 비슷하다.
아이디 혹은 이메일 주소 입력폼, 비밀번호 입력폼, 로그인 버튼으로
기본적인 로그인 페이지를 만들 수 있다.
필요에 따라 자동 로그인을 선택할 체크박스, 회원가입, 아이디, 비밀번호 찾기 페이지로
이동 가능한 링크를 넣으면 더 완벽한 페이지를 만들 수 있다.

<input type="text" placeholder="ID" />
<input type="password" placeholder="password" />
<button>Login</button>
<label> <input type="checkbox" />Keep Login </label>

CSS와 JS없이 확인만 가능한 HTML 태그이다.

👨‍🏫 시맨틱 요소의 종류

<article>: 독립적이고 자체 포함된 콘텐츠를 지정합니다.
<aside> : 본문의 주요 부분을 표시하고 남은 부분을 설명하는 요소입니다. 특별한 일이 아니면 사이드바나 광고창 등 중요하지 않은 부분에 사용됩니다.
<footer> : 일반적으로 페이지나 해당 파트의 가장 아랫부분에 위치하며, 사이트의 라이선스, 주소, 연락처 등을 넣을 때 사용합니다.
<header> : 일반적으로 페이지나 해당 섹션의 가장 윗부분에 위치하며, 사이트의 제목이 보통 들어갑니다. 선택적으로 상단바나 검색창 등이 안에 들어갈 수 있습니다.
<nav> : 내비게이션(navigation)의 약자로, 일반적으로 상단바 등 사이트를 안내하는 요소에 사용됩니다. 보통은 안에 <ul>을 넣어 목록 형태로 사용합니다.
<main> : 문서의 주된 콘텐츠를 표시합니다.
<section> : 웹 페이지의 큰 의미 단위가 될 수 있는 어떤 것이든 묶어 하나의 구역을 구분할 때 사용

시맨틱은 '의미가 있는'으로 해석된다.
시맨틱 요소가 사용되기 전에는 각 영역을 지정하기 위해 <div>요소를 사용했지만
div가 중첩되면 구분하기 어려운 단점으로 시맨틱 요소의 중요성을 알 수 있다.

🔍 id와 class를 목적에 맞게 사용하기

id : 고유한 이름을 붙일 때
class : 반복되는 영역을 유형별로 분류할 때

모든 태그에는 id 속성과 class 속성을 지정해 줄 수 있는데,
이를 이용하면 CSS나 JavaScript에서 태그를 좀 더 쉽게 다룰 수 있다.
id는 원칙상 하나의 id 당 하나의 태그에만 적용할 수 있으며,
class는 하나의 class를 여러 태그에 적용할 수 있다.

<div id="my-box1"></div>
<div id="my-box2" class="boxes"></div>
<div id="my-box3" class="boxes"></div>
<div class="boxes"></div>

HTML은 외우기보다 필요할 때 찾아 쓰는게 좋다.
오늘 수업은 끝났지만, 하루는 안 끝났다.
잠시 운동하고 내일 있을 CSS 수업에 대비해 예습해야겠다.