HTML은 Hyper Text Markup Language의 약자입니다.
웹페이지의 구성을 나타내는 마크업 언어입니다.
HTML은 확장자가 .html로 끝나는 파일로 작성이 가능합니다.
기본적으로는 다음과 같은 코드에서 <body> 태그 안에서 작성을 시작해야합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>그러나 Visual Studio Code Editor를 사용한다면 전부 적을 필요 없이 html:5나 !를 치고 Tab을 눌러서 아래와 같은 기본 코드를 자동 완성할 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>HTML은 XML의 형식과 매우 유사합니다.
HTML의 기초를 알아보기 전에 XML이란 CSV, JSON처럼 데이터를 저장하는 형식인데 다음과 같이 저장이 가능합니다.
<데이터-이름>데이터 값</데이터-이름>그리고 HTML의 기본 코드를 분석해 보자면 먼저 맨 첫 번째 줄의 DOCTYPE을 알아보겠습니다.
<!DOCTYPE html>이 코드는 해당 문서가 HTML로 작성되었음을 알려주는 코드입니다.
그리고 <html lang="en">의 lang은 HTML 문서의 언어를 나타냅니다.
<html lang="en">
</html>그리고 head 태그와 body 태그가 있는데 주로 화면에 보여주는 작업은 body 태그에서 진행하게 됩니다.
head 태그는 meta나 title 또는 css나 javascript 파일을 불러오는 역할을 합니다.
<meta charset="UTF-8">위 코드는 그저 브라우저에게 "텍스트 형식을 UTF-8로 해줘"라고 알려주는 내용입니다.
외울 필요는 전혀 없습니다.
<meta http-equiv="X-UA-Compatible" content="IE=edge">위 코드는 Internet Explorer 브라우저의 호환성 문제를 해결하기 위해서 가장 최신의 Internet Explorer 엔진을 사용해서 페이지를 렌더링해달라는 뜻입니다.
마찬가지로 외울 필요는 없습니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">이 코드는 나중에 배우게 될 반응형 웹 작업을 하기 위해서 필요한 코드입니다. 외울 필요 없습니다.
반응형 웹이란?
간단하게 설명하면 브라우저의 폭에 따라서 디자인을 바꿔주는 웹이라고 보시면 됩니다.
CSS의 Media Query로 반응형 웹 제작이 가능합니다.
head 안에 있는 title은 웹 브라우저 탭의 제목을 나타내는 부분입니다.
출력 화면
그리고 body 태그에서는 문자를 그대로 다음과 같이 작성해도 웹 화면에 출력됩니다.
하지만 주로 p태그와 같은 태그를 사용해서 문자열을 출력하는 것을 권장하고 있습니다.
<body>
HTML Basic!
</body>출력 화면
글을 제목처럼 사용하고 싶으면 h 태그를 사용하면 됩니다.
h 태그 종류에는 h1부터 h6까지 있으며, h1이 가장 큰 글씨, h6가 가장 작은 글씨입니다.
예제를 확인해 보자면 다음과 같습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>It's a title!</h1>
HTML Basic!
</body>
</html>출력 화면
그리고 p 태그는 기본 문서의 역할을 담당합니다.
p 태그도 예제를 확인해 보자면 다음과 같습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>It's a title!</h1>
<p>This is a paragraph.</p>
HTML Basic!
</body>
</html>출력 화면
div 태그란?
브라우저의 개발자 도구를 사용해서 웹 페이지를 분석해보면 거의 대부분이 div 태그로 이루어져있습니다.
div 태그는 division의 약자인데, 간단하게 말하면 그냥 박스입니다. 특정 UI를 묶고 싶을 때 사용하는 것이죠.
예를 들어서
<h1>안녕하세요.</h1>
<p>저는 개발자입니다.</p>이러한 속성들에 전부 font-size: 16px; 속성을 부여해주고 싶다고 치면 두 속성에 각각 스타일을 부여해줘야하는 일이 발생합니다.
개발자는 귀찮은 일을 참을 수 없기 때문에 div 박스로 위에 있는 태그를 묶고 해당 div 박스에만 스타일을 부여해서 해결할 수 있습니다.
사실 이 기능만 있는 것이 아니라 나중에 배울 Flex Box에서도 부분을 나눌 때 사용하는 아주 유용한 태그입니다.
a 태그란?
a 태그는 anchor의 약자입니다.
사이트를 구경하다보면 클릭했을 때 다른 페이지로 이동하는 것을 본적이 있을겁니다.
그러한 기능을 구현하고 싶을 때 사용하는 것이 a 태그입니다.
<a href="url">이동하기</a>url 부분에 이동할 URL을 적으면 됩니다.
예제를 보여드리면 다음과 같습니다.
<a href="https://google.com/">Google로 이동하기</a>아마 Google로 이동하기를 누르면 실제로 Google로 이동되는 것을 볼 수 있을겁니다.
만약 현재 창에서 열리는 것이 아니라 새 창에서 열리도록 하고 싶다면 a 태그 속성에 target="_blank"를 추가해주시면 됩니다.
<a href="https://google.com/" target="_blank">Google로 이동하기</a>button 태그
button을 만들고 싶으면 button 태그나 input 태그를 사용해서 만들 수 있습니다.
<button>My Button</button>
<!-- 또는 -->
<input type="button">My Button</input>input 태그
입력할 수 있는 창을 만들고 싶으면 input 태그를 사용하시면 됩니다.
<input>type으로 input의 타입을 입력할 수 있습니다. type에는 button, checkbox, text, password, number 등이 있습니다.
추가로 placeholder 속성을 사용해서 input의 설명도 적을 수 있습니다.
input 태그에 제목을 사용하고 싶다면 label 태그를 사용하면 됩니다.
<label for="my-input">내 인풋</label>
<input id="my-input">label에는 for 속성을 설정할 수 있는데 해당 제목이 가리키는 input 태그의 id를 적으면 됩니다.
class, id는 더 아래에서 알아보도록 하겠습니다.
간단한 스타일링 태그들
<br />- 줄바꿈
<hr />- 선
<i>- 글꼴 기울임
<b>or<strong>- 글꼴 강조 (진하게)
span 태그란?
span 태그는 특정 부분만 스타일을 바꾸고 싶을 때 주로 사용합니다.
예를 들어서 아래와 같은 코드가 있다고 가정해봅시다.
<h1>안녕하세요. 저는 개발자입니다.</h1>저 부분에서 개발자 부분만 색깔을 빨간색으로 하고
싶으면 다음과 같이 하면 됩니다.
html
<h1>안녕하세요. 저는 <span id="dev">개발자</span>입니다.</h1>css
#dev {
color: red;
}img, audio, video 태그란?
img, audio, video 태그를 통해서 자신이 원하는 이미지와 오디오, 영상을 웹에 적용할 수 있습니다.
<img src="이미지 경로" alt="이미지가 오류로 안보일 때 보여질 텍스트">
<audio src="이미지 경로">
<video src="이미지 경로">audio 태그와 video 태그는 오류로 안보여질 때를 대비해서 다른 영상을 더 추가할 수 있습니다.
<audio controls>
<source src="오디오1 경로">
<source src="오디오2 경로">
</audio><video controls>
<source src="영상1 경로">
<source src="영상2 경로">
</video>먼저 첫 번째 source 태그의 오디오나 영상을 보여준 후에 여러 가지 이유(브라우저가 해당 오디오나 영상의 형식을 지원하지 않을 때, 네트워크 오류 등)로 렌더링이 불가능할 때 그 아래 source를 렌더링해줍니다.
form 태그란?
예제 파일
<form action="/add" method="post">
<input type="text" name="title">
<button type="submit">전송</button>
</form>이런식으로 구성하고 name="title"인 input에 내용을 입력한 후에 버튼을 누르면 /add라는 API로 POST 메서드로 데이터를 전송할 수 있습니다.
method에는 get와 post를 입력할 수 있는데 지금 당장은 get은 읽기, post는 쓰기에 사용된다고 이해하시면 됩니다.
action에는 요청을 보낼 주소를 적으면 됩니다.
list
예제 파일
<ul>
<li>내용 1</li>
<li>내용 2</li>
<li>내용 3</li>
</ul>ul이나 ol 안에 li 태그를 입력할 수 있습니다.
li 태그는 내용을 의미합니다.
- ul: unordered list (항목 앞이 그냥 점으로 표시됨.)
- ol: ordered list (항목 앞이 숫자로 표시됨.)
id와 class
- id
- 중복 불가능
- CSS 선택자
#으로 선택 가능 - 주로 특정 부분에만 입히고 싶은 스타일이 있거나 특정 부분에만 자바스크립트를 적용하고 싶을 때 사용
- class
- 중복 가능
- CSS 선택자
.으로 선택 가능 - 주로 중복되는 UI에 같은 클래스를 적용 시켜서 해당 클래스에만 스타일을 적용하는 식으로 개발함.
지금까지 HTML의 기초를 알아보았습니다.
