앱 만들기/HTML5

HTML 태그 와 속성 이란?

나도 처음이야 2023. 5. 31.

HTML의 기본 문법은 하기와 같습니다.

<태그> 내용 </태그>

예를 들어보면 하기처럼 표기할 수 있습니다

<h1> hello </h1>

<태그> 은 시작 태그라 부르며

</태그>는 종료 태그 라고 부릅니다. 태그 사이의 값은 "내용", "content"라고 불립니다.

태그는 기본적으로 시작 태그와 종료 태그 그리고 중간의 내용으로 구성되어 있으며,

이 덩어리를 요소(element)라고 합니다.

태그 중에는 닫힌 태그가 없는 비어있는 태그도 있습니다.

예를 들면, <br> <img> <input> <link> 등등이 있습니다. 닫힌 태그가 없는 대신

마지막 부분에 / 를 적어도 되고 적지 않아도 됩니다.

이렇게 적어도 되고 안 적어도 되는 자유로운 방식은 html5 버전부터 적용되기 시작했습니다.

태그는 태그자체의 기능이 있습니다.

<h1> 태그는 가장 큰 제목 크기를 설정하며 h6 은 가장 작은 제목 크기를 설정해줍니다.

<br>은 한 줄 띄워쓰기라는 기본 기능을 지원합니다.

태그의 기본 기능 이외에 추가 기능 등을 설정할 수 있는 것이 바로 속성입니다.

예를 들자면, img 태그의 경우 VSC에서 img까지 치고 탭을 하면 필수 속성값으로 요소를 구성해 줍니다.

vsc에서 제공해 주는 Emmet이라는 자동완성 확장 기능 덕분이죠.

 <body>
   <h1>첫번째 예제 입니다.</h1>  
   <img src="" alt="">
</body>

img 태그는 이미지를 나타내기 위한 기능이지만

src 이미지 소스의 위치와 alt 대체 텍스트 등이 필수 속성으로 들어가 있습니다. 이미지의 위치와 인터넷이 단락 되었을 때 혹은 브라우저에게 해당 이미지에 대한 정보값을 필수로 전달하기 위해서 개발자에게 해당 속성값이 필수임을 알려주고 있습니다.

이렇듯 태그의 기본 속성 이외에 추가기능을 지원하기 위해서 속성이라는 것을 사용합니다.

속성은 시작태그에 코딩하여 줍니다.

오늘은 html 태그와 요소 그리고 속성에 대해서 정리해 보았습니다.

감사합니다.

댓글