Dev-Tino 6주차(1) :: HTML이란? 태그란?
지금 당장 F12를 눌러보자. 콘솔창 하나가 딱 뜬다. (이는 ‘개발자 도구’ 창으로 스크립트를 실시간으로 실행하거나 로컬에서 변경 가능하다.) 그 곳의 요소창을 누르면 보이는 것은 꺽쇠 괄호(표준어는 홑화살괄호이다.) 와 영문을 알 수 없는 문자들이다….
이건 HTML로 이루어진 코드이다. HTML, 웹을 이루는 데에 꼭 필요한 요소.
HTML
HTML은 Hyper Text Markup Language의 약어로 HyperText(웹 페이지에서 다른 페이지로 이동할 수 있도록 하는 것) 기능을 가진 문서를 만들기 위한 언어이다. 구조를 설계할 때 사용되며 hyper link 시스템을 가진다.
이는 ‘마크업 언어’라고도 불리는데 HTML이 태그(<>)를 이용해 서로 다른 부분을 씌우거나 감싸는 언어이기 때문이다. 이를 통해 다른 형식으로 보이게 하거나 특정한 방식으로 동작하도록 만들 수도 있다. 우리는 태그(<>)를 통해 단어와 이미지 등을 클릭하면 다른 어딘가로 이동하도록 하이퍼링크하거나, 이탤릭체로 표기하고 크게, 작게 바꿀 수 있다.
이 HTML은 태그를 이용해 구분된다. 다음 사진을 보자.
HTML은 다음과 같은 요소로 정리된다::
1. 여는 태그 (Opening Tag): 꺽쇠 괄호로 감싸진다. 요소나 효과가 시작됨을 보인다.
2. 닫는 태그 (Closing Tag): 역시 꺽쇠 괄호로 감싼다. 요소가 끝남을 보인다. ‘/’ 표시가 필수이다.
3. 콘텐츠 (Contents): 태그 내에 표시될 내용, 텍스트 등이 이 곳에 포함된다. 태그의 종류에 따라 다양한 방식으로 표출된다.
4. 요소 (Element): … 위 모든 것이 포함되는 것!!
이 때 신경써야 할 것은 ‘여는 괄호’, ‘닫는 괄호’이다. 여는 것은 그냥 꺽쇠로 감싸면 되지만, 닫는 경우에는 무조건 슬래시를 포함하여야 한다. 제대로 열고 닫지 않으면 오류가 발생하므로 주의하여야 한다.
예시로 나온 태그는 <p> 태그이다. paragraph, 즉 문단의 약자인 이것은 하나의 문단을 만들 때에 쓰이며, 태그를 닫으면 자동적으로 한 문장 띄워낸다.
만약 특정 문단 혹은 문장을, 태그로 감싸고도 한 줄 띄우고 싶지 않다면 <span> 태그를 사용하여야 한다. 자체적으로 특별한 의미가 없는 인라인 컨테이너인 이것은, 단순 텍스트나 인라인 콘텐츠 등에 스타일이나 속성, 스크립트를 위한 범위를 위해 감싸주는 태그이다. 영어 span을 떠올리면 쉽다. (이것은 스타일을 적용하기 위한 선택자로 쓰이거나, HTML 속성을 적용하기 위한 범위, 자바스크립트에서 특정 부분을 선택하거나 조작, 혹은 시각적 스타일을 위한 장식용 태그로 사용된다.)
<p>와 비슷한 동작을 하는 태그로는 <div>가 있다. division, 레이아웃을 만들거나 컨텐츠를 나누는 컨테이너로 사용되는 태그인 이것은 ‘블록’이나 ‘구획’을 구성하는 데에 사용한다. 경우에 따라 적당한 것을 선택하는 게 좋을 것이다.
이 html은 <> 로 시작하고 </>로 종료할 때까지 계속 이어진다. 그 만큼 어느 요소 안에 다른 요소를 넣을 수 있다. 중첩(nesting)이라는 이 방식을 이용해 우리는 다양한 형태를 구현할 수 있다. 예를 들어 <strong>이라는 태그가 있다. 이는 글자를 bold처리하는 태그이다.
<p>My Cat is <strong>very</strong> cute </p>
p 태그 안에 strong 태그를 넣으면, strong 태그로 감싼 부분은 storng과 p의 효과를 모두 받는다.
또, HTML 태그를 이용하는 다른 방식이 있다. ‘빈 요소’이다.
빈 요소
내용을 가지지 않는 요소. 한 태그(<>) 내에 내용과 ‘/’가 공존한다.
가장 큰 예시는 <img>이다. img 태그는 이미지를 삽입하기 위한 태그로, src 속성(특성이라고도 한다. ‘속성’에 대해서는 나중에 후술한다.)에 이미지로의 경로를 지정하는 것이 필수이며 여는 태그와 닫는 태그를 두는 대신 태그 하나로 정리된다.
<img src="images/firefox-icon.png" alt="My test image" />
위 예시가 img 태그의 예시이다. ‘닫는 태그’ 대신 한 태그의 끝에 슬래시가 들어있다. src 속성은 이미지의 경로를 알리며, alt 태그는 사용자를 위한 설명을 삽입하는 태그이다. (이는 사용자의 경험을 높이기 위해 삽입한다.) 이 태그는 HTML 페이지에서 이미지가 나타날 위치에 이미지를 끼워넣는다.
이 HTML 문서를 작성할 때에 알면 좋은 태그를 추가적으로 설명한다::
HTML 문서 해부
다음은 HTML의 예시 코드이다.
<!DOCTYPE html>은 이 문서가 HTML 문서임을 보증하는 태그이다. 이는 이 문서가 HTML 규범을 지킴을 알리는 코드이다. ‘삽입해야만 한다’만 알면 좋다.
<html></html>은 페이지 전체를 감싸는 요소로, 이 곳에서는 루트 요소이다. 이 때 이것은 문서의 고유 언어를 설정하는 lang 속성을 넣기도 한다. 그 경우에는 <html lang=“ko”> </html> 로 작성하여야 한다.
<head></head>는 페이지를 조회하는 사람들에게 보여주는, 컨텐츠가 아닌, 당신이 HTML 요소 안에 넣어야 할 것들을 넣는 컨테이너 역할을 한다. 일반적으로 키워드(*내용을 설명하는 단어나 문구, 온라인 키워드는 검색 엔진에 대한 쿼리로 사용되거나 웹사이트의 콘텐츠를 식별하는 단어로 사용된다. 검색 엔진을 사용할 때 키워드를 사용하여 찾고 있는 내용을 지정하면 검색 엔진이 관련 웹페이지를 반환한다.)
<meta charset=“utf-8”> 이는 meta data(*웹페이지가 담고 있는 컨텐츠가 아닌, 웹페이지 자체의 정보를 뜻한다.) 이는 웹페이지의 정보를 알리거나 요약이 되어준다. 이는 이 웹페이지의 언어 인코딩 방식을 UTF-8 방식으로 사용한다는 의미를 가진다.
<meta name="viewport" content="width=device-width"> 이는 뷰포트 요소로, 뷰포트의 너비에서 페이지가 렌더링되도록 하며, 모바일 브라우저가 뷰포트보다 넓은 페이지를 렌더링한 후 축소하는 것을 방지한다.
<title></title>은 이 페이지의 제목을 상징한다. ‘로드된 페이지 브라우저 탭에 나타나는 제목’이 이 란에 들어간다. 이 요소는 북마크나 즐겨찾기에서 페이지를 설명하는 요소로도 사용된다.
이 부분에 나타나는 것이 <title> 태그 내의 것이다.
<body></body> 태그는 이 페이지에 방문한 모든 웹 사용자들에게 보여주길 원하는 컨텐츠를 담는다. 그것은 텍스트일수도, 이미지일수도, 비디오이거나 다른 것이 될 수도 있다.
모두 알기가 어렵다면, <!DOCTYPE>으로 시작하며 <head>에 대략적인 문서에 대한 정보를, <body>에 내용을 넣는다는 것을 알아두면 좋다.
HTML의 다양한 태그
HTML에게는 매우 다양한 태그가 존재한다. 1900년대에 나온 언어인 만큼 바리에이션은 끝없이 늘어났다.
<h1>~<h6>(*제목을 나타내는 태그이다. 이에 대해서는 검색해보면 좋다. 숫자가 작을수록 크기가 크다.) 태그, <ul>,<li>(*순서가 없는 list 를 정의하는 태그이다.) <input>(*사용자로부터 입력을 받을 수 있는 입력 필드를 정의할 때 사용한다. 속성으로 타입을 결정 가능하다.) 태그 등, 많은 태그들을 모두 이 곳에서 설명하기에는 무리가 있으므로 태그를 잘 설명해주는 몇몇 문서를 가져와보았다.
다음은 codingeverybody.kr이다. 이 문서는 HTML과 CSS, JS, PHP에 대한 내용을 설명한다. 맨 하단으로 내려보내면 HTML의 유용한 활용 팁이 적혀있으므로, html에 대해 어느정도 배웠다 싶은 이도 이를 확인해보면 좋을 것이다.
다음은 MDN이다. MDN web Docs는 일종의 무료 웹 플랫폼 리소스로, 개발자들이 웹 플랫폼 위에 프로젝트를 쉽게 만들 수 있도록 필요한 정보를 제공하는 곳이다. 전 세계를 대상자로 두는 사이트이므로 참고할 게 많을 것이다.
TCPSchool 역시 좋은 사이트이다. 이 사이트는 HTML 외에도 다양한 언어를 가르친다. 코딩 테스트에 대한 문제 역시 지원하므로 확인하는 것이 좋다 .
번외
설명하지 않은 태그 중 조금 더 신경쓰면 좋을 태그를 이야기하자면 역시 <input>이었겠다. 싶어 <input> 태그에 대한 설명을 추가하고자 이 란을 만들었다. <input> 태그는 사용자로부터 입력을 받을 수 있는 입력 필드(input field)를 정의할 때 사용한다. 대개 ‘사용자가 데이터를 입력할 수 있는 입력 필드를 선언하기 위해’ <form>(*입력 양식, 텍스트 필드에 글자를 입력하거나, 체크박스나 라디오 버튼을 클릭하고 제출 버튼을 누르면 백엔드 서버에 양식이 전달되어 정보를 처리하게 된다. ofcource.kr은 백엔드 공부를 진행할 때 <form> 태그에 대해 공부함을 추천한다고 한다.) 요소 내부에서 사용된다. 이 입력 필드는 <input> 요소의 type 속성 값을 달리함으로써 여러 모양으로 나타낼 수 있다. <input>역시 <img>와 같이 ‘빈 태그’이며 속성만을 포함할 수 있음을 알아야 한다. label 요소를 이용해 input 요소의 라벨(*사용자 인터페이스를 제공하는 컨트롤 요소들의 이름표를 나타내는 태그이다.) input 요소의 라벨을 정의할 수도 있다.
https://tcpschool.com/html-tags/input <<이 쪽을 참고하장.
이렇게 입력하면 위와 같이 뜬다.
[참고 자료]
-https://developer.mozilla.org/ko/docs/Learn/Getting_started_with_the_web/HTML_basics
-https://webclub.tistory.com/608
-https://developer.mozilla.org/ko/docs/Learn/Getting_started_with_the_web/HTML_basics
- 카테고리
- #기타
댓글 0
추천 포스트