TIL: 2022-08-25

⚙️ 오늘 배운 언어

HTML

 

🐹 오늘의 기분

웹개발을 한다면 기본으로 알고 있어야 하는 3대장 중 하나인 html을 배웠다. 아예 처음 접한 것은 아니었지만 독학할때부터 사이트의 구조를 짜는 것이 유독 어렵게 느껴졌어서 그 부분에 집중해서 학습했다. 아직 더 공부해야겠지만 전보다는 조금 눈이 떠진 기분이다. 

vscode prettier가 잘 적용되지 않는 것 같아서 불편했는데 오늘 그 부분도 고쳤다. 또 확장자별로 인덴트를 다르게 설정할 수 있는 법도 알아내서 바로 적용했다. 4로 설정하면 html, css, js 파일에서 가독성이 안 좋아지고, 그렇다고 싹 다 2로 설정하자니 알고리즘 풀 때 파이썬 파일의 가독성이 구려져서 불편했는데 방법을 찾아서 속시원하다!

오늘은 프론트엔드, 백엔드 과정 전부 모여서 동기부여 세션을 했는데 재밌었다. 내 목표도 다시 한 번 생각해볼 수 있었다. 앞으로 힘든 부분이 많겠지만 좋은 기회를 얻은 만큼 열심히 해야겠다고 생각했다. 

내일은 대망의 CSS를 배우는데 정말 머리터질 것 같아서 무섭다..^^ CSS는 잘못 이해하고 쓰면 하나를 수정했을때 다른 것까지 같이 수정되거나 아예 수정이 안되는 불상사가 자주 발생하기에... 처음부터 다시 배운다고 생각하고 정신 똑디 차리고 학습하기! 

 

🗝 키워드

태그, <div>, <span>, 속성, class, id, 와이어프레임, 시맨틱

 

🗣 스스로에게 설명

HTML은 웹사이트의 뼈대를 만드는 마크업 언어이다. 

HTML에는 여는 태그와 닫는 태그가 쌍으로 다닌다.

하지만 어디에나 늘 예외는 존재한다. 여는 태그만 존재하는 것들이 있는데, img나 input 태그가 그 예이다.

만들고 싶은 웹앱이나 웹사이트가 있을 때, 무작정 만들기를 시작하기보다는 와이어프레임을 작성해보면서 전체적인 구조를 구상하는 것이 효율적이다. 

id는 고유한 이름, class는 반복적으로 나오는 요소를 구별할 때 사용한다. 

만약 파일이 id와 class 없이 오로지 html 태그로만 작성된다면 후에 css 파일을 작성할 때 원하는 부분에만 스타일을 정하는 것이 어려워지고, 후에 파일을 수정할 때에도 혼란스러워진다. 

label 태그는 처음봐서 검색해봤다. (참고 링크: http://www.tcpschool.com/html-tags/label )

label 태그를 씌우면 텍스트를 클릭해도 label이 감싸고 있는 요소의 기능이 실행된다.

 

1. label이 없을 때

체크박스를 직접 눌러야만 기능이 실행된다.

<input type="checkbox">Keep Login

 

2. label이 있을 때

텍스트를 클릭해도 체크박스를 누른 것과 같이 동작한다.

<label> <input type="checkbox">Keep Login </label>

우리가 사용하는 대부분의 웹사이트에서는 아마 레이블이 적용되어있지 않을까 생각한다.

이게 없다면 정확히 그 영역만을 눌러야 하기 때문에 조금 불편한 웹이 될 것이다.

 

레이블 코드의 for 속성을 결합하고자 하는 요소의 id와 일치시켜주는 방식으로 작성할 수도 있다.

<!-- 최종 학력을 선택하는 폼을 작성한다고 가정 -->
<input type="radio" name="education" id="high_school" value="grad_high_school">
<label for="high_school">고등학교 졸업</label>
<input type="radio" name="education" id="univ" value="grad_univ">
<label for="univ">대학교 졸업</label>

 

<div>와 <span>은 둘 다 여러 태그를 묶어 영역을 지정하는 역할을 한다.

<div>는 화면의 한 줄을 통째로 차지하지만, <span>은 콘텐츠의 크기만큼만 공간을 차지한다는 차이가 있다.

 

여러 선택지 중 하나를 고르도록 radio 버튼을 사용할 때에는 해당 선택지들에 name을 같게 설정해 그룹화해야 한다. 

 

시맨틱을 사용하면 검색엔진이 효과적으로 정보를 탐색할 수 있으며, 여러 개발자와 코드를 읽을 때 의미 있는 코드를 찾기 더 쉬워진다.

주요 시맨틱 요소는 아래와 같다. 이 외에도 다양한 시맨틱 요소가 있지만 전부 다 외워둘 필요는 없다. 

<!-- 독립적이고 자체 포함된 콘텐츠 -->
<article> 

<!-- 주요 부분 외 남은 페이지 / ex: 사이드바나 광고창 -->
<aside> 

<!-- 페이지의 가장 아랫부분 / ex: 라이선스, 주소, 연락처 등 -->
<footer>

<!-- 상단바 등 사이트 안내 요소 / ex: ul을 넣어 목록 형태로 사용 -->
<nav>

<!-- 문서의 주된 콘텐츠 표시 -->
<main>

 

❓ 막히는 or 막혔던 부분

웹사이트를 보고 영역이 어떻게 나뉠지 예상하는 것 -> 개발자 도구 켜놓고 실제 웹사이트를 보면서 감 기르기

<div>와 <span>을 이용해 그룹화하는 기준

<main>과 <article>의 차이 ( 🔗 TCP School: 코딩 연습 눌러서 개발자도구 켜놓고 영역 나뉘는 거 직접 보면 조금 도움된다. main에 대한 설명은 짧게만 나와있음. / 🔗 이 블로그도 이해하는데 도움됐다.)

 

🛠 질문 만들기

• 왜 시맨틱 요소를 사용해야 하는가?
• <div>와 <span>의 차이는 무엇인가?
• id와 class의 차이는 무엇인가?