[TIL] #4. HTML

2022.4.29. (금)

1. 오늘의 소감

• 오늘은 자바스크립트가 아닌 HTML 수업이었다. HTML은 웹문서의 구조를 짜는 마크업 언어이다 보니까, 복잡한 부분이 적었다. 물론 제공되는 강의는 매우 기초적인 부분이었기에 제대로 다루려면 더 깊은 공부가 필요하겠지만, 자바스크립트로 달궈진 뇌를 한 번 식혀주는 파트였다.
• 페어 프로그래밍 없이 솔로로 진행하는 날이었는데, 조금 반성하자면 딴짓을 많이 했다. 쉬운 파트라 그런지 오전 중으로 종합퀴즈도 일찍 풀어버리고, 딴짓하다가 공부하고, 또 딴짓하다가 공부하고를 반복했다. 아무래도 진도가 정해져있는 부분이 끝나면 뭘 할지 정해놓지 않아 생긴 문제인 것같아서, 시간이 남으면 저번 시간 거 복습 + 백준 알고리즘 풀기를 하기로 정했다. 백준 알고리즘을 자바스크립트로 풀려면 node.js를 깔아서 직접 입출력을 해야한다는데... 사실 정리글을 읽으면서도 무슨 말인지 잘 이해를 못했다. fs가 뭐고, readline은 또 뭐야? 찬찬히... 세팅해봐야겠다.

2. 학습한 키워드

• HTML, CSS, JavaScript, 구조, 표현, 상호작용(기능 구현), 시멘틱 웹, 태그, div, span, a, section, nav, header, footer, main, aside, input, button, 속성 id & class 목적에 맞게 사용하기, form, ul, ol, li, img

3. 키워드를 바탕으로 학습 내용 설명해보기

• 웹 문서를 만들 때는 기본적으로 HTML, CSS, JavaScript 가 영혼의 단짝처럼 같이 사용된다.
• HTML은 웹 문서의 구조를 만드는 마크업 언어이다.
• CSS는 웹 문서를 디자인하는 스타일시트 언어이다.
• 자바스크립트는 웹 문서에서 유저와의 상호작용 부분을 구현하는 프로그래밍 언어이다.
• 집을 짓는다고 하면, HTML은 집 설계도와 기본 골조이고. CSS는 외부 디자인과 인테리어이고. 자바스크립트는 전구 수도 가스 등을 연결하는 것이다.
• HTML은 트리 구조를 가진다.
• HTML은 태그(<>)들의 집합이고 ‘<여는 태그>콘텐츠</닫는 태그>’를 하나의 요소(element) 라고 한다.
• 시멘틱 웹이란, 의미가 있는 웹이라는 뜻으로. 가능한 의미를 가진 요소를 활용하여 웹을 구성해야된다는 뜻이다.
• 시멘틱 웹을 지향하기 위해서는, 항상 HTML 요소를 사용할 때 작성할 데이터를 가장 잘 설명할 수 있는 요소가 무엇인지 고려해야 한다.
• 시멘틱 웹을 지향하면 좋은 점
  • 검색엔진 최적화가 되기 때문에 검색결과 상위노출에 유리하다.
  • 개발자가 보기에 가독성이 좋다.
  • 태그 안에 들어갈 내용을 짐작하게 해준다.
• div 와 span 은 대표적인 논-시멘틱 요소이다. 무분별한 div 요소 사용은 삼가야한다.
• form 태그를 사용하면 화면을 전환하는 액션이 있으므로 주의가 필요하다. 잘 숙지한 뒤에 사용하는 게 좋다.
• img 태그는 빈 태그. 닫는 태그가 필요 없다.
• <img src=”이미지 링크” alt=”이미지 설명”/>
• id 와 class 속성 목적에 맞게 사용하기
  • id는 고유한 태그에 이름을 붙일 때 사용한다.
  • class는 반복적으로 사용하는 영역을 카테고리로 묶을 때 사용한다.
  • id는 중복을 허용하지 않는다. 웹 문서에서 오직 단 하나만 존재해야한다.
  • class는 중복을 허용한다.
  • class는 공백으로 구분하여 여러 개를 줄 수 있다. class=”box1 red text”
  • 고유성을 위해서는 id를. 연속성, 통일성을 위해서는 class를 부여하자.
  • id가 이름이라면, class는 별명이다.
• input 요소도 대표적인 빈 태그. 닫는 태그가 없다.
• input 요소는 타입을 바꿔서 여러 방식의 입력값을 입력할 수 있다.
• 대표적인 타입 : text, password, email, checkbox, radio 등
• <input type=”radio”/>의 경우 중복 선택을 막기위해선 name 속성의 값을 똑같이 줘야한다.
• checkbox 타입은 중복을 허용한다.
• 이제 시멘틱 웹의 뜻을 정확히 말할 수 있다!

 

 

(2022.12.5 코멘트)

이 때쯤에 백준 알고리즘을 풀기 시작했다. 지금은 입력 템플릿 만들어 두어서 바로 코딩을 시작하지만 당시에는 fs 모듈이 뭔지도 모를 때라 처음에 입력값을 어떻게 받아와야하는지 많이 헤맸다ㅎㅎ