[HTML] 1. HTML5 기초

728x90

웹을 공부하고자 하시는 분들이 몇천 번이고 문턱을 밟았다 돌아가시는 그 부분(사실 제 경험담입니다), 바로 HTML에 대해 오늘 다뤄보려고 합니다. HTML은 HyperText Markup Language의 약자로, WWW(world wide web)의 핵심 언어이기도 합니다. 이후에 다뤄질 CSS, JavaScript도 결국 HTML에 기본 토대를 두고 그 안에서 더해지고 작동하게 되죠. 이번 포스팅에서는 HTML의 기초에 대해서 다뤄보려고 합니다.

1. HTML 구성

HTML은 지금 다섯번째 버전을 맞이했습니다. HTML5라고 불리는 이유도 거기에 있습니다. HTML은 Tag로 이루어져 있습니다. HTML5는 아래와 같은 기본 형식을 가지고 있습니다.

<!DOCTYPE html>
<html>
    <head>
        <title>My first Website</title>
    </head>
    <body>
	hello there!
    </body>
</html>

가장 위에 이 문서가 어떤 파일인지를 알려주는 DOCTYPE이 적혀 있습니다. 그리고 html의 최상위 태그인 <html>태그가 보이네요. 그 아래로 두 개의 태그가 더 있습니다. <head>와 <body> 부분입니다. 하나 주목해아할 점은 html 태그에서는 거의 모든 경우에 닫는 태그가 있어야한다는 점입니다.

만일 <deny>라는 태그가 있다면, 이 태그의 짝꿍인 </deny> 태그가 존재합니다. 닫지 않아도 되는 태그도 종종 있지만, 모든 태그를 착각해서 안 닫는 것은 에러가 나지만 모든 태그를 닫아주는 것은 에러가 나지 않으므로 HTML 태그는 닫아주어야한다 라는 것만 기억해주세요.

2. HTML 대표 태그

HTML에는 정말 많은 태그들이 있습니다. 하지만 이 많은 태그를 다 외울 필요도 없을 뿐더러, 애초에 다 쓰지도 않습니다. 우리에게는 구글이라는 착하고 좋은 친구가 있으므로, 코드를 작성하기 편하게 자주 쓰는 태그 몇 개만 잘 알고 있으면 됩니다. 오늘 소개드릴 태그는 아래와 같습니다.

<div> : 가장 많이 쓰는 태그로, div 태그 자체는 별다른 뜻이 있지는 않으나 기능적/의미적 구분을 위해 자주 사용합니다. 클래스나 아이디를 이용해서 스타일 혹은 스크립트를 적용하는데에 많이 사용됩니다.
<h0> : header 태그. 크기와 굵기가 정해진 제목 양식입니다.
<p> : 단락 태그. 단락을 나누어주며, 구조화를 시켜줍니다. 워드 기본 줄바꿈과 유사합니다.
<strong> : 글씨를 굵게 나타내줍니다.
<li> : ol, ul과 같은 리스트의 내부 요소를 작성하는 하위 태그입니다.
<ol> : ordered list, 순서가 있는 리스트입니다.
<ul> : unordered list, 순서가 없는 리스트입니다.

<!-- 리스트 예제 -->
<ol> 
	<li>banana</li>
	<li>apple</li>
</ol>
<ul>
	<li>banana</li>
	<li>apple</li>
</ul>

위의 태그들은 리스트 예제 처럼 닫는 태그가 필요한 태그들이며, 매우 자주 쓰이는 태그입니다. 짝 태그가 있는 태그들은 주로 태그와 태그 사이에 어떤 내용이 들어가는 것이 일반적입니다. 이 다음에 쓰인 태그들은 별다른 내용 없이도 제 역할을 해낼 수 있는 태그들입니다. 이러한 태그들을 self-closing 태그라고 부릅니다.

<br> : 줄바꿈을 의미합니다.
<hr> : 수평선을 생성합니다.
<img> : 이미지를 삽입합니다.

<img src="https://i.pinimg.com/originals/62/87/47/6287478d2ffc85c28d9a91be54812e3e.jpg" alt="pop woman image" width="500" height="800">

위 코드는 self-closing 태그의 대표적인 예시인 img 태그입니다. src는 삽입할 이미지 소스의 위치를, alt는 대체 텍스트를, width와 height는 각각 폭과 높이를 의미하는 properties 입니다. 일부 태그에는 이와 같이 properties를 다룰 수가 있는데요, 대표적인 예시로 input 태그가 있습니다.

<input
          type="text"
          name="username"
          placeholder="enter name"
          onchange={this.handleChange}
        />

이것은 대표적인 input 태그 예시입니다. input 태그는 정말 많은 properties를 가지고 있는데, 그 중에서 4가지만 쓰여 있습니다. type은 input에 들어올 데이터 type을 의미하고, name은 이 input 태그의 이름을, placeholder는 대체 텍스트를 의미하며 onChange는 input에 무언가가 들어왔을 때 실행할 것을 가리킵니다.

다음으로 소개해드릴 태그는 a 태그입니다. a 태그는 anchor의 약자로, 웹의 커다란 기능 중 하나인 링크를 걸어주는 역할을 합니다. a 태그가 연결해주는 링크는 단순히 타 웹 페이지 뿐만 아니라 다른 html 페이지로 넘겨주는 것도 가능합니다.

<a href="https://dani-deny.tistory.com">this part of course</a>
<a href = "NewPage.html">New Page</a>

첫 번째 줄은 어떤 웹 페이지로 가는 링크를 만든 것이고(이 경우엔 제 블로그 메인 페이지가 되겠습니다) 그리고 두 번째 줄은 제 로컬에 저장된 다른 html 페이지와 연결하는 링크를 만든 것입니다.

이렇게 간단한 html 기본 태그들에 대한 이야기를 해보았습니다. 다음 포스팅에서는 form을 이용한 input 태그의 자세한 내용을 조금 더 다뤄보고, 웹 페이지의 데이터 전송 방식에 대해서도 간단히 소개해보려고 합니다. 그럼 다음 포스팅에서 뵙겠습니다 :)

728x90

저작자표시 (새창열림)

'🐥 Web > 🎨 Front-end' 카테고리의 다른 글

[SciChart] Vanilla Javascript에서 SciChart 사용하기 (0)	2023.11.17
[CSS] 3. CSS 기초 총정리 (0)	2021.09.01
[HTML] 2. HTML5 2 (0)	2021.01.25

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

[HTML] 1. HTML5 기초

1. HTML 구성

2. HTML 대표 태그

'🐥 Web > 🎨 Front-end' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역