data lab

HTML 기본 태그 모음 알아보기

LAB 관리자 2023. 12. 30. 23:00
반응형

저번에 HTML의 가장 기본적인 태그들을 다룬것에 이어서 이번 게시글에서는 연이은 기본 코드들을 설명해보겠습니다. 이번 내용은 2편에 해당하므로, 더 기본적인 태그들을 알아보고 싶으신 분들은 저번 글을 참고해주세요

[HTML 기본 태그 1]

 

HTML 기본 기능 태그 알아보기

html의 기본기능은 웹 브라우저에 보여 줄 내용에 마크업하고 문서끼리 링크하는 것이다. 글자를 보기좋게 꾸미거나 문서의 배치를 다양하게 바꾸는 것은 스타일시트의 기능이다. 문서유형을 지

successdatalab.com

 

 더하여, 저번 글에 작성했던 <br>은  break의 약자로 엔터와 같은 역할을 하며 단독으로 사용되므로 닫는 태그가 필요없습니다. 또 <p> </p> 태그는 paragraph의 약자로, 단락을 나타냅니다. <br> 태그로 단락을 나누게 되면 후에 CSS를 이용해 단락 스타일을 적용할 수 없으므로 단락을 나눌 때는 <p> 태그를 사용해주는 것이 좋습니다.

 

<blockquote> </blockquote>

위 태그는 단락보다 더 들여쓰기를 해서, 인용문을 작성할 수 있게 해주는 태그입니다.

 

<strong> </strong> & <b> </b> 

스트롱 태그와 b 태그는 글씨를 굵게 만들어줍니다. b는 bold를 의미하며 strong 태그는 단순히 텍스트를 굵게할 뿐 아니라 의미를 강조합니다. 이는 추후에 화면 낭독기를 사용할 때 스트롱 태그 내의 텍스트를 강조해서 읽을 수 있게 만들어줍니다.

 

<em> </em> & <i> </i>

위 태그는 글씨를 기울여 줍니다. em은 emphasize의 준말, i는 italic의 준말로, em은 스트롱과 같이 강조의 의미도 추가해줍니다.

 

<abbr> </abbr> 줄임말을 표시한다.

<cite> </cite> 참고 내용을 표시한다.

<code> </code> 컴퓨터 인식을 위한 소스코드이다.

<small> </small> 부가정보처럼, 작게 표시하는 코드이다.

<sub> </sub> 아래 첨자를 표시한다.

<sup> </sup> 위 첨자를 표시한다.

<s> </s> 취소선을 표시한다.

<u> </u> 밑줄을 표시한다.

<ins> </ins> 공동작업 문서에서 새 내용을 작성한다.

<del> </del> 공동작업 문서에서 기존 내용을 삭제한다.

 

<ol> </ol>  - 순서가 있는 리스트를 만들기 위한 태그

ol 이란 ordered list 의 준말이다. 순서가 있는 항목들을 만들려면

<ol> </ol>을 작성하고, ol 태그의 안쪽에 <li> </li>태그를 사용하여 작성하면 된다.

ol 태그 내부에서, type과 start 속성으로 순서가있는 리스트의 속성을 바꿀 수 있다. 
type 속성
<ol type="a"> </ol>을 한다면, 리스트의 순서가 a,b,c,d와 같은 형태로 나열된다.
이처럼 1,a,A,i,I의 타입을 선언할 수 있으며 각각 숫자, 영문 소문자, 영문 대문자, 로마숫자 소문자, 로마숫자 대문자를 나타낸다. 
start 속성
ex) <ol type="1" start="3"> </ol> 을 작성하게 되면 첫번째 순서가 3부터 시작하게 됩니다.

 

<ul> </ul> - 순서가 없는 리스트를 만들기 위한 태그

ul이란 unordered list의 준말이다. <ol> </ol> 과 같은데 순서만 없다고 생각하면 된다.

 

<dl> </dl> - 정의 목록  을 만들기 위한 태그

discription list의 준말이다. 설명목록은 이름과 값의 형태로 된 목록이다.

<dt>는 definition term, <dd>는 definition discription의 준말이다. <dt> </dt> 안에 들어가는 내용은 설명하고자하는 이름이고 <dd> </dd> 는 이에대한 설명이다.

 

 

 

반응형