오늘의 학습

---

웹 개발 이해하기

HTML
웹페이지의 구조(structure)를 담당하는 마크업 언어

CSS
디자인 요소를 시각화하는 스타일시트 언어

JavaScript
단순한 웹페이지를 프로그램으로 만들어 유저와 상호작용할 수 있게 해주는 프로그래밍 언어

서로의 관심사를 분리하기 위해 구조, 스타일, 상호작용으로 나누어 작성한 것

---

HTML

왜 배울까?

HTML은 웹 페이지를 구성하는 뼈대가 되는 언어로서, HTML의 구조를 잘 짜놓으면 JavaScript로 개발을 할 때 더욱 직관적인 코드를 작성할 수 있다.

어디에 쓰일까?

HTML을 엘리먼트의 본래 목적에 맞게 잘 사용하면 웹에서 검색우위를 가져갈 수 있다.
웹페이지에서 제목을 작성할 때 아래의 두 방법은 시각적으로 완전히 같다.

<H3> HTML </H3>
<strong><span style = "font-size:22px;"> HTML </span></strong>

하지만 H3으로 감싼 태그가 제목으로써 더 큰 우위를 갖게 되어 더 많은 사용자에게 노출된다.

또한, HTML은 시각 및 청각 장애를 가진 사람이 편리하게 웹에 접근하는 방법을 제공한다.

어떻게 쓰일까?

HTML의 구조

• HTML 문서 시작
  • html
    • head
      • title: Page Title
    • body
      • h1: Hello World
      • div: Contents here
        • span: Here too!

Self Closing tag
태그 내부에 내용이 없다면(와 같이 표현되는 경우),
와 같이 표현할 수 있다.

자주 쓰이는 HTML 요소(elemtnt)

요소(element)	설명
div	div태그는 한 줄을 차지
span	span 태그는 컨텐츠 크기만큼 공간 차지
a	링크 삽입 href, target 속성과 사용
ul & ol	Unordered List & Ordered List
input	입력 폼 type 속성으로 다양한 형태의 입력 폼으로 설정 가능
textarea	input과 달리 줄바꿈이 가능한 텍스트 입력폼

HTML 요소 구성 예시

<p class = 'paragraph'> This is a paragraph. </p>
<!--
<p></p> 시작, 종료 태그(opening, closing tag)
class = "paragraph" 속성(attribute). 각각 attribute name, attribute value
This is a paragraph. 콘텐츠(contents)
 -->

추가 학습

section 엘리먼트
HTML5에 새롭게 추가된 요소로, 웹 페이지의 큰 의미 단위가 될 수 있는 어떤 것이든 묶어서 하나의 구역을 구분하는데 사용한다.

↑ 네이버 메인 페이지의 section 요소로 광고. 이미지와 텍스트 링크가 하나의 구역으로 묶여있다.

---

오늘의 생각

HTML과 CSS는 다 외워야하는 것으로 생각했다.
그래서 이론 위주로 학습할 때는 그다지 흥미를 느끼지 못했다.
그러나 velog 작성을 위해 table을 만들어보고, section 엘리먼트 예시를 찾기 위해 개발자도구에서 section을 찾아 한 구역으로 묶인 것까지 확인하니, 각 요소가 실제 어떻게 작동하는지를 눈으로 확인할 수 있어 신기했다.