1. HTML이란
우선 html은 hypertext markup language의 줄임말이다. 여기서 hypertext란 링크를 연결하기 위함을 뜻하고, markup은 문서나 데이터의 구조를 명기하는 것이라고 한다.(명기하다: 분명하게 밝히어 적다. 출처: 네이버 사전) 즉, 웹페이지를 연결하고 구조화하는 언어라고 볼 수 있다.
2. HTML의 기본 구조
! + tab: html 기본 구조 자동 완성
위와 같은 단축키를 입력하면 html의 기본 구조가 나온다. <!DOCTYPE html>은 문서 형식을 최신 버전인 HTML5로 지정하는 것이라고 한다. 그 이후 <html>과 </html>안에 head와 body 구조를 갖게 된다. 이때 head와 body는 같은 수준의 들여 쓰기를 가진다. 이와 같은 들여 쓰기는 대표적인 컴퓨팅 언어의 구조로 어떤 것 안에 들어있는 것을 중첩(Nested)라고 한다.
1) head 태그
head 는 메타 데이터(데이터에 대한 정보를 제공하는 데이터)와 문서 정보를 알려주는 정보를 갖는다. 예를 들어 제목, 저장 방식 등이 있다. 컴퓨터의 이해를 돕기 위한 영역이랄까. 대표적인 태그로는 title, style, link script, meta가 있다.
2) body 태그
html 문서의 실제 내용이 담기는 영역이다. 이 부분이 사용자에게 보이는 영역이다.
3) 주석
주석은 개발자에게 제공되는 정보로 컴퓨터는 건너 뛰게 되는 정보이다. <!-- -->의 형태로 쓰이게 된다. 단축키는 ctrl +/. html에 작성된 주석은 웹에서 열게 되면 보이기 때문에 보안이 문제 되는 중요한 정보는 적지 않는 것이 좋고, 다른 개발자의 이해를 위한 간단한 설명을 적는 것이 좋다.
3. html의 구성요소(element)
html의 구성요소로 세 가지가 존재한다. 빈 요소(Empty Element), 블록 요소(Block Element), 인라인 요소(Inline Element)이다.
1) 블록 요소
html의 가장 기본적인 형태이다. 예로 <h1></h1>, <div></div>, <p></p>등이 있다.
<p class = "foo">내용</p>
<시작 태그>와 </종료 태그> 사이에 내용이 들어가고 시작 태그 안에 어떤 속성을 지정해 줄 수 있다. 위의 예에서 class는 속성명이고 " "안에 속성 값이 들어간다. 위의 형태를 하나의 element라 칭한다.
2) 인라인 요소
텍스트 혹은 이미지 크기에 맞는 필요한 공간만을 차지하는 요소이다. 반면 블록 요소는 부모 요소의 전체 너비 100%를 차지한다.
예를 들어 아래와 같이 블록 요소와 인라인 요소의 영역을 색깔로 나타내는 코드를 작성한다고 하면
블록 요소인 div 같은 경우 화면 너비 전체의 영역을 차지하지만, 인라인 요소는 지정한 'div의 child'의 영역만 파란색이 표시된 것을 확인할 수 있다. 또한 인라인 요소가 블록 요소 안에만 존재할 수 있는 것은 아니다.(뭔가 설명이 안되는데?)
3) 빈 요소
내용이 없이 구조적인 기능을 하는 요소이다. 대표적으로 <br>은 줄 바꿈을 해주고 <hr>은 선을 그어 영역을 분리해 준다. 이 요소는 별도로 종료 태그가 없는 것이 특징이다.
4. HTML의 기본 태그
기본적인 <h1> </h1> <p> </p> <br> /링크를 거는 <img> <a> </a>/ 내용을 나누는 <div> </div> <span> </span> 태그/리스트 태그인 <ul> <ul> <ol> </ol> <li></li>등이 존재한다.
<ul>은 순서 없는 목록, <ol>은 순서가 있는 목록이다. 해당 목록 안의 내용은 <li></li>로 표시해 준다.
<img>를 넣어주는 태그로 src와 alt 속성을 이용한다. 이미지 링크는 컴퓨터 내 상대경로나 절대경로로 지정해 주거나 인터넷의 링크를 넣어줄 수 있다. src의 경로가 틀리면 이미지가 업로드되지 않는데 이때 alt는 원래 이미지가 어떤 정보였는지 표시해 준다.
<a> 링크를 거는 태그로 href와 target을 이용한다. target = "_blank"를 이용하면 새 탭에서 연결된 링크를 확인할 수 있다.
5. Semantic
HTML은 Semantic 하게 작성되어야 한다고 한다. 각각의 구성요소에 맞는 태그를 사용하자는 의미이다. 예를 들어 <div>라는 태그로 홈페이지를 구현한다고 하자. 구현 자체는 가능하나, 코드만 보면 직관적으로 어떤 부분인지 파악이 어렵다. 하지만 semantic tag인 <header>, <nav>, <aside> 등을 사용하면 코드의 구현된 부분의 위치를 빠르게 알 수 있다.
또한 검색엔진은 html 코드를 분석해 사이트를 노출시키는데 이는 semantic 코드를 사용하면 이해하기 용이해 노출에 유리하다.
=) 별개의 tip?
파일명에 숫자, 영어, _, -만 사용할 것.
+) 오늘의 VS Code 확장 프로그램
live server: 별도의 새로고침 없이 변경 사항을 바로 확인할 수 있다.
material icon theme: VS Code 내 icon이 보기 좋게 바뀐다.
code spell checker : 오타를 자동으로 확인해 준다.
auto rename tag: 시작 태그 수정 시 닫는 코드를 자동으로 일치시켜 준다.
오늘 수업의 주제는 html이었다.
수업에 앞서 html을 아는 사람은 손을 들라 해서 긴가민가하며 들었었다. 내가 안다고 할 수 있나? 역시 내가 모르는 부분이 거대했음을 알게 된 수업이었다. 많이 쓰이는 html의 여러 기능을 직접 사용해 봐서 좋았다. (정말 많은 기능이 있었다...) id나 class의 개념은 아직 생소해서 css를 배워야 확실히 알고 수 있을 것 같다. 적용에 급급해 태그 안의 속성이 뭔지 모르고 썼었다. 알고 쓰는 게 맞는 것 같다. 또한 form에서 input의 id와 label의 for 값이 일치해야 한다고 배웠는데, 나중에 데이터를 다루게 되면 알게 될 것이라고 하셨다. 빨리 배우고 싶다. 마지막으로 Semantic tag에 대해서도 배웠는데, 혼자서 div로만 코드를 짜다가 비효율적이어서 이상하다 싶었는데, 역시 다른 방법이 있었다. 약간의 지식으로도 효율이 엄청 달라진다. 개발자가 평생 공부해야 한다는 말이 조금은 실감이 됐다. 빨리 지식의 뼈대를 세우고 기본을 갖추어 효율성까지 추구할 수 있는 개발자가 되고 싶다.