#1. HTML란 무엇인가
오늘은 HTML에 대해서 알아보겠습니다. 👀 어디선가 들어본 HTML. 정확하게 어떤 것을 의미하는 걸까요? HTML은 의 약자입니다. 먼저 Hyper Text란 정해져있는 기존의 목차대로 읽어나갔던 텍스트의
choirim.tistory.com
저번 글인 <HTML란 무엇인가>에서 HTML은 링크와 태그를 통해 문서를 구조화하는 언어라고 한 것 기억나시나요? 오늘은 태그에 대해 자세히 알아보겠습니다.
html 태그란?
웹사이트는 실제로 태그로 이루어진 문서들로 구성되어 있습니다.
우리가 자주 쓰는 구글 홈의 페이지 소스 화면입니다. <> </> 꺽쇠로 감싸져있는 태그들이 보이시나요?
태그들은 꺽쇠 갈호로 감싸져 있습니다(<>). 또한 태그는 시작 태그(<>)와 종료 태그(</>)로 구성되어 있습니다. (태그에 따라 종료 태그가 없는 태그도 존재합니다.)
<제목 tag> html란 무엇인가 </제목 tag>
<목차 tag> html의 개념 </목차 tag>
<단락1 tag> html란 hyper text markup language의 약자입니다. </단락1 tag>
위의 예시에 써져있는 <제목 tag> </제목 tag>가 보이시나요? 태그안에 있는 내용이 제목이라는 것을 나타내는 태그인데요. 너무 길다고 생각하지 않으신가요? 위의 예시는 이해를 돕기 위한 예시이고 사실 태그들은 각자 이름을 가지고 있답니다. 태그들의 진짜 이름을 찾아주겠습니다.
<h1> html란 무엇인가 </h1>
<li> html의 개념 </li>
<p> html란 hyper text markup language의 약자입니다. </p>
짠! 태그들이 진짜 이름을 찾았습니다. 제목 태그는 <h1></h1> 목차 태그는 <li></li> 단락 태그는 <p></p>로 변했습니다. 이 태그들을 웹 페이지에 적용하면 이렇게 됩니다.
우리가 보는 웹 페이지의 모습입니다. 우리가 일상적으로 보는 웹 페이지의 모습 뒤에는 사실 무수한 태그들이 숨어 있었답니다.
태그의 종류
태그들은 아주 아주 많습니다. 위에 나온 제목을 나타내는 태그, 목차를 나타내는 태그, 이미지 태그, 링크 태그 등 다양한 태그들이 있습니다. 그 중 자주 사용되는 몇개의 태그만 소개하도록 하겠습니다.
1. <a> 태그
<a> </a> 태그는 링크를 연결해주는 태그입니다. 그리고 'anchor' 의 첫글자를 따온 태그입니다. 우리가 정보의 바다에서 항해하고 있다면 <a>태그를 통해서 목적지에 닻을 내린다고 할 수 있겠네요. 멋지죠?
저번 'htmlf란 무엇인가' 글에서 html에서 링크와 태그는 중요한 요소였죠. 그 링크를 만들어주는 아주 중요한 태그라고 할 수 있겠죠. 이런 <a> 태그는 같이 다니는 짝꿍이 있습니다. 바로 href 속성인데요. 이 href 속성은 <a>태그가 닻을 내릴 목적지를 설정해주는 속성이라고 할 수 있습니다. 예를 들어볼까요?
<a href="https://choirim.tistory.com"> Way to developer </a>
<a>태그에 href 속성으로 글자(Way to developer)의 목적지를 설정해주면 링크를 클릭할 시 목적지로 이동하게 됩니다.
2. <img> 태그
<img> 태그는 말그대로 image를 삽입하는 태그입니다. 위에서 태그에 따라 종료 태그가 없는 태그도 존재한다고 했었죠. 이 태그는 종료 태그가 없는 태그입니다. 이렇게 시작 태그만 있는 태그들을 빈 태그(empty tag)라고 합니다.
<img>태그도 <a>태그처럼 목적지를 정해주는 속성이 존재합니다. 바로 src 속성입니다. source의 줄임말입니다.
<img src="1.jpg">
이렇게 이미지의 경로를 태그와 속성을 이용해 지정해주면 이미지가 나타나게 됩니다.
3. <p> 태그, <br> 태그
위에서 보았던 <p>태그와 <br>태그입니다. 두 태그 모두 사용시 줄바꿈이 되는 태그들인데요. 차이점이 있습니다. <p>태그는 한 단락을 표시하는 태그입니다. 문장이 한 단락임을 표시해야 하기 때문에 시작 태그와 종료 태그를 이용해야 합니다.
<p> way to developer </p>
<p>I'm developer</p>
하지만 <br>태그는 강제로 줄바꿈을 하는 용도의 태그기 때문에 시작 태그만 사용해주면 줄바꿈이 됩니다. <br>태그는 <p>태그와 달리 종료 태그가 없는 빈 태그(empty tag)입니다.
way to developer <br>
I'm developer
4. <ol>, <ul>, <li> 태그
위에서 <li>태그는 목차 태그라고 했습니다. 우리가 목차를 만들고 싶을 때 바로 이 태그를 사용합니다.
<li> first </li>
<li> second </li>
<li> third </li>result
- first
- second
- third
이 <li>태그를 항상 묶어주는 태그가 있습니다. <ol>태그와 <ul>태그입니다. 수많은 목차들을 구분해주는 역할을 합니다. <ol>태그와 <ul>태그가 항상 <li>태그를 감싸 안고 있습니다. 이것을 부모 자식 태그라고 부릅니다. <ol><ul>태그가 부모 <li>태그가 자식 태그겠죠.
<ol>은 order list의 약자, <ul>은 unorder list의 약자입니다. 목차들을 숫자로 만들고 싶다면 <li>태그를 <ol>태그로 묶어주면 되고 숫자가 필요없다면 <ul>태그로 묶어주면 됩니다.
<ol>
<li> first </li>
<li> second </li>
<li> third </li>
</ol>result
- first
- second
- third
<ul>
<li> first </li>
<li> second </li>
<li> third </li>
</ul>result
- first
- second
- third
오늘은 태그의 의미와 다양한 태그의 종류에 대해 알아보았습니다. 이위에 소개한 태그들도 자주 사용하는 태그들 중 하나들이지만 <html>, <head>, <body>, <title>등 가장 많이 사용되는 태그들이 있는데요. 이 태그들은 자주 사용되는 태그들의 순위 중 가장 최상위 권에 자리잡고 있습니다. 이 태그들은 바로 웹 페이지 기본 태그라고 부릅니다. 다음시간에는 html의 기본 구조와 관련된 이 태그들에 대해 함께 알아보겠습니다.
'HTML' 카테고리의 다른 글
| [HTML] HTML의 기본 구조 (0) | 2020.12.24 |
|---|---|
| [HTML] HTML란 무엇일까? (0) | 2020.12.23 |
