HTML 기초(2) div, span, a, img, ul, ol, li, dl, dt, dd 태그

HTML 기초(2)

---

저번 시간에는 HTML 페이지에서 head 태그 안에 있는 메타 태그에 대해 설명드렸습니다.

이번 시간에는 HTML 태그를 사용하여 직접 텍스트를 작성해 보도록 하겠습니다.

 

HTML 태그를 작성할 때 팁을 드리면

부모 태그와 자식 태그, 형재 태그를 잘 사용해야 한다는 것입니다.

 

여기서 부모 태그와 자식 태그, 형태 태그란 어떤 태그로 감싸는지, 어떤 태그와 함께 감싸 졌는지로 나눌 수 있습니다.

먼저 부모 태그와 자식 태그는 코드로 예시를 보여 드리면

<div>

<h1><.h1>

</div>

 

이 코드를 보시면 div 태그 안에 h1 태그가 감싸져 있습니다. 여기서 부모 태그는 h1 태그를 감싸고 있는 div 태그이고

자식 태그는 div 태그에 감싸져 있는 h1 태그라고 할 수 있습니다.

 

이런 방식으로 형재 태그는 같은 부모 태그 안에 감싸져 있는 자식 태그를 형재 태그라고 칭합니다.

이렇게 부모 태그, 자식 태그, 형재 태그를 활용하여 정리를 한다면 가독성도 높일 수 있고

CSS 스타일을 적용할 때도 더 깔끔하게 적용할 수 있습니다.

 

위에 정보를 이해하시고 오늘의 본론으로 넘어가겠습니다.

오늘은 HTML body 태그에 들어가는 태그에 대해서 설명드리겠습니다.

 

(1)

<div>, <span>

div 태그와 span 태그는 많이 사용되는 부모 태그로

태그들의 전체적인 틀을 구성하는 데 사용되는 태그들입니다.

 

이 두 태그들의 가장 큰 차이점은 줄바꿈이 있는데

먼저 div 태그는 줄바꿈이 되지만 span 태그는 줄바꿈이 되지 않습니다.

 

div 태그와 span 태그

결과값

이것은 저번 CSS 기초에 대해 설명드렸을 때 설명드렸던

HTML 태그의 기본으로 적용되는 스타일로

CSS에서는 줄바꿈이 되는 경우를 block, 줄바꿈이 안 되는 경우를 inline이라고 부르고 있습니다.

추후 CSS 강의에서 더 자세히 다루도록 하고 오늘은 이 정도로 넘어가도록 하겠습니다.

 

(2)

<p>

p 태그는 하나의 텍스트 문단을 작성할 때 사용되는 태그입니다.

 

(3)

<a>

a 태그는 링크를 담당하는 태그로 href와 함께 사용됩니다.

a 태그에 href를 작성하여 링크를 입력하고 이미지나 텍스트를 a태그 안에 작성하면

작성된 이미지나 텍스트를 누르면 해당 링크로 이동할 수 있는 효과가 있습니다.

 

(4)

<img>

img 태그는 이미지를 나타내는 태그로 src와 함께 사용합니다.

src에 해당 이미지가 있는 링크 주소를 작성하면 해당 이미지를 불러올 수 있습니다.

 

(5)

<ol>, <ul>, <li>, <dl>, <dt>, <dd>

ol, ul, li, dl, dt, dd태그는 리스트 태그라고 불리며 리스트 형식으로 텍스트나 이미지를 정렬할 수 있습니다.

 

ol 태그는 순서가 없는 리스트 태그이고

ul 태그는 순서가 있는 리스트 태그입니다.

그리고 li 태그는 이 리스트 태그 안에 목록을 나타내는 태그입니다.

작성 방식은 ol 태그나 ul 태그로 li 태그를 감싸서 원하는 만큼 텍스트를 작성하시면 됩니다.

 

그리고 마지막으로 dl 태그도 있는데 이 태그는 제목과 목록을 함께 사용하는 리스트 태그로

목록 태그를 li 태그 대신 제목을 나타내는 dt 태그와 목록을 나타내는 dd 태그를 사용하여 작성합니다. 

 

보통은 ol 태그와 ul 태그를 많이 사용하며

리스트 태그를 왜 많이 사용하는지 궁금하실 수 있지만

목록의 기능을 제외하고 이미지나 텍스트를 배치하는데 깔끔하게 배치할 수 있어서

리스트의 용도 이외에도 텍스트, 이미지 배치에도 많이 사용됩니다.

 

오늘 배운 태그들 집합

결과값

오늘 배운 내용들을 모아서 작성한 결과값을 보여드렸고

 

태그를 보시면 a태그 안에 img 태그를 넣어 이미지에 링크를 넣는 방식으로 응용해봤습니다.

그래서 이미지를 누르면 해당 링크로 이동할 수 있습니다.

 

---

 

오늘은 HTML body 태그에 사용되는 몇 가지 태그들에 대해 알아보았습니다.

아직 설명드릴 태그가 몇가지 더 있지만 글이 너무 길어지면 루즈해질 것 같아 이 정도로 마치겠습니다.

다음 글에서 몇 가지 태그를 더 소개해드리도록 하겠습니다.

 

제가 설명드리는 태그가 전부가 아닌 일부의 태그이지만

정말 많이 사용되고 알아두시면 추후에 작업을 하실 때 많은 도움을 줄 수 있는

태그들을 소개해 드린 거라서 꼭 알아두시고 공부를 진행하셨으면 좋겠습니다.

 

감사합니다!!

https://jjong-wiki-bigdia.tistory.com/10

HTML 기초(1)