HTML

1. HTML

Hyper Text Markup Language의 약자로 네트워크가 연결된 웹페이지에서 문서를 읽고, 작성, 공유하기 위해 만들어진 체계이다.

HTML은 웹 페이지를 만들기 위한 언어로 HTML로 웹페이지의 구조를 잡을 수 있다.
HTML 파일은 이미지, 텍스트, 비디오, 버튼 등 웹사이트에 보여줄 내용을 구성하고 있다.
브라우저(safari, chrome, ie..)는 HTML파일을 통해 어떻게 화면에 그려내면 되는지 파악한 후에 웹 페이지를 생성한다.

2. HTML 파일

HTML은 .html확장자가 붙은 텍스트 파일이다.
텍스트편집기(Text Editor)같은 간단한 메모작성 앱을 열고, .html 확장자로 저장한 후, 해당파일을 브라우저(크롬)에 drag & drop 하면 브라우저에서 HTML로 작성한것을 확인 할 수 있다.

3. HTML tag

브라우저는 HTML문서를 읽고 알아서 tag를 붙여주지만, 개발자라면 문법에 맞게 HTML 코드를 작성할 수 있어야 한다고한다.
HTML파일에 필요한 최소한의 태그는 아래와 같다.
추가하기
태그와 관련하여 HTML 기초 용어(tag, content, attribute, element)를 알아보자.

3-1.  <tag>(태그)

웹페이지에서 보여질 내용을 나타내며,  <> 로 감싸져 있다.

브라우저에서 태그(tag)(<태그이름>과 </태그이름>)은 보여주지 않는다.
즉, 내용(content) 부분만 보여준다.
내용의 왼쪽에 있는 것이 시작 태그(opening tag)이고, 내용 우측에 있는 것이 종료 태그(closing tag)이다.
종료태그 괄호를 닫기전에 /(slash)가 있다는 것을 꼭 기억하자.
대부분의 태그는 시작하면 꼭 끝맺음을 해야한다. 즉, 시작태그가 있으면 끝 태그도 꼭 있어야한다는 의미이다.

<tag> Hello World </tag>
<시작태그> content <종료태그>

위처럼 한줄로 완성된 태그를 요소(Element)라고 한다.

반면에 시작과 동시에 종료되는 태그도 존재한다.

 

3-2. 태그의 종류

태그는 약속된 명령어로 고유한 기능을 가지고 있다.

HTML에서는 이미지나 텍스트를 그려주려면 그에 맞는 태그가 필요하다.
그래야 브라우저에서 '아, 이것은 텍스트구나, 저것은 이미지구나'하고 알 수 있다.

-꾸며주는 태그 

		<img>	이미지
<strong>	굴게
<u>	밑줄
<i>	기울이기

 

-빈태그 

<br>

줄바꿈

<hr>

수평선 긋기

 

- 특정 기능이 있는 태그

<button>	버튼 기능	<textarea>	입력창 기능
<img>	이미지	<video>	동영상

 

위처럼 다양한 태그들이 존재하는데, 아래의 사이트에서 다양한 태그들을 확인할 수 있다.

https://www.w3schools.com/tags/tag_a.asp 에서 태그들을 확인 할 수 있다.

 

같은 태그이더라도  속성과 값으로 커스텀 하여 다른 기능을 가지도록 나타낼 수 있다.

<input type = "text"> →  문자열을 입력하는 input
<input type = "password"> → 입력된 문자열을 비밀번호로 마스킹
<input type = "checkbox"> → 체크를 했는지 않했는지 표시

 

이런 속성은 중첩해서 사용할 수 도 있다.

<input type = "text" placeholder = "내용을 입력해주세요"

타입이라는 속성과 placeholder라는 속성과 값을 중첩하여 안내하는 문구를 표시할 수 있다.

3-3. attribute(속성)

속성은 시작 태그에 위치하며 한 태그에 여러 속성을 지정할 수 있다.
div, a, img는 태그이고 class, href, src, alt는 속성이다.