Published on

HTML 태그와 속성

Authors
  • 테크버킷
    Name
    테크버킷
    Twitter

목차

요약

html에 대해서 알아봅시다.

HTML이란

HTML은 HyperText Markup Language의 약자로, 웹 페이지를 만들기 위해 사용되는 마크업 언어입니다. HTML은 웹 페이지의 구조와 콘텐츠를 정의하는 데 사용됩니다. 웹 페이지를 좀더 고급스럽게 만들기 위해서 CSS, JavaScript와 같은 언어와 종종 함께 사용됩니다.

HTML 문서는 태그(tag), 속성(attribute), 값(value)으로 구성됩니다. 태그는 < >로 묶여 있으며, 이것은 해당 요소가 시작되었음을 나타냅니다. 예를 들어, <html> 태그는 HTML 문서의 시작을 나타냅니다. 태그는 "종료 태그" 로 끝나는데, 시작 태그에 /를 붙입니다. 이것은 해당 요소가 끝났음을 나타냅니다. 예를 들어, <html> 태그는 </html>로 끝납니다.

HTML 문서는 또한 속성과 값을 가질 수 있습니다. 속성은 태그에 대한 추가 정보를 제공합니다. 예를 들어, <img> 태그는 src 속성을 사용하여 이미지 파일의 URL을 지정합니다. 속성 값은 속성에 대한 구체적인 정보를 제공합니다. 예를 들어, src 속성 값은 이미지 파일의 URL입니다.

태그

HTML에서 태그는 각 요소(element)를 식별하고, 해당 요소가 어떤 형태로 구성되어야 하는지를 브라우저에 알려주는 역할을 합니다. 간단하게 말하면, 태그는 HTML 문서에서 요소를 만드는 데 사용되는 코드입니다. 태그는 각각 <와 >로 둘러싸여 있으며, 이를 이용하여 브라우저에게 해당 요소의 시작과 끝을 알려줍니다.

시작 태그와 끝 태그

"시작 태그"는 요소의 이름으로 구성되어 있으며, "끝 태그"는 이름 앞에 슬래시 /를 추가하여 표시됩니다. 예를 들어 시작태그가 <h1>라면, 끝 태그는 </h1>입니다. 시작 태그와 끝 태그를 통해, 태그가 적용될 범위를 알려주는 것입니다.

예시

<h1> 태그는 HTML 문서에서 큰 제목을 만들 때 사용됩니다. 다음은 간단한 HTML 문서에서 <h1> 태그를 사용한 예시입니다.

<h1>어서오세요</h1>

이렇게 쓰면, <h1> 태그가 적용되는 부분은 "어서오세요" 가 되는 것입니다.

1-tag

예시2

이번엔 더 많은 태그가 한꺼번에 쓰이는 예시를 살펴보겠습니다.

<body>
  <h1>어서오세요</h1>
  <p>여기는 제 홈페이지입니다.</p>
</body>
h1-p-tag

위 예시에서 <h1> 태그는 "어서오세요"라는 큰 제목을 나타내며, <p> 태그는 "여기는 제 홈페이지입니다."라는 단락을 나타냅니다.

또, <body>라는 태그가 <h1>태그와 <p> 태그를 감싸고 있죠. 이처럼 태그는 중첩으로 쓰일 수도 있습니다.

속성과 값

HTML에서 속성(attribute)은 태그에 추가적인 정보를 제공하는 방법입니다.

속성은 이름(name)과 값(value)의 쌍으로 구성됩니다.

속성은 추가할 때에는 시작 태그에 이름과 값을 = 기호와 함께 표시합니다.

이미지를 표시하는 태그인 <img>에 속성을 추가하는 예시를 살펴보겠습니다.

<img> 태그에는 src 속성이 있으며, 이 속성은 이미지 파일의 URL을 지정합니다. 다음은 src 속성을 사용하여 이미지를 표시하는 간단한 HTML 예시입니다.

<img src="myimage.jpg" />
img-tag

위 예시에서는 src라는 속성을 사용해서 <img>태그가 어떤 이미지를 표시할 것인지에 대한 추가적인 정보를 지정했습니다. 이 예시에서 "myimage.jpg"가 src 속성의 "값"입니다.

다른 HTML 태그에도 여러 속성이 있습니다. 예를 들어, <a> 태그는 하이퍼링크를 만드는 데 사용됩니다. <a> 태그에는 href 속성이 있으며, 이 속성은 링크 대상의 URL을 지정합니다.

<a href="http://google.com">구글</a>
href

위 예시에서 href 속성은 http://google.com이라는 링크 대상의 URL을 지정합니다.

HTML문서

그러면 이제 html문서의 간단한 예시를 살펴봅시다. 이 HTML 코드를 텍스트 편집기 등을 사용하여 .html 확장자로 파일로 저장한 다음, 웹 브라우저에서 파일을 열면 실행할 수 있습니다.

example.html
<!DOCTYPE html>
<html>
<head>
	<title>제목</title>
</head>
<body>
	<h1>안녕하세요!</h1>
	<p>이것은 간단한 HTML 예시입니다.</p>
	<img src="이미지파일.jpg" alt="이미지 설명">
</body>
</html>
example.html

이 예시는 다음과 같은 구조를 가지고 있습니다.

  • <!DOCTYPE html> : 이 문서가 HTML5 문서임을 선언합니다.
  • <html> : HTML 문서의 시작을 나타냅니다.
  • <head> : 문서의 메타데이터와 타이틀을 포함하는 영역입니다.
  • <title> : 문서의 타이틀을 나타냅니다.
  • <body> : 실제 콘텐츠가 들어가는 영역입니다.
  • <h1> : 큰 제목을 나타냅니다.
  • <p> : 단락을 나타냅니다.
  • <img> : 이미지를 나타냅니다. src 속성은 이미지 파일의 URL을, alt 속성은 이미지에 대한 대체 텍스트를 제공합니다.

마무리

HTML은 웹 페이지를 만드는 데 가장 기본이 되는 언어입니다. 이번에는 기본적인 HTML 태그와 속성에 대해 배웠으며, 다음에는 더 다양한 HTML 태그와 속성을 활용하여 더욱 다양하고 복잡한 웹 페이지를 만들어 볼 예정입니다. HTML을 잘 활용하면, 다양한 컨텐츠를 보다 쉽고 효율적으로 표현할 수 있습니다. 앞으로도 HTML을 배우고 발전시켜 나가는 과정에서, 다양한 웹 페이지를 만들어보며 새로운 경험을 쌓아보는 것이 목표입니다.