HTML에서 요소와 태그는 HTML의 전부라고 해도 과언이 아닙니다. 웹 페이지에 표시되는 모든 것들을 요소라고 하며 요소들을 작성하기 위해서는 태그가 필요합니다. 이 페이지에서 HTML의 요소와 태그에 대해 자세히 살펴보도록 하겠습니다.
HTML의 요소란?
우리가 웹 페이지에 방문했을 때 볼 수 있는 것에는 무엇이 있나요? 제목, 글, 이미지, 동영상, 목록 등등과 같이 많은 것들을 볼 수 있어요. 이러한 것들이 모두 웹페이지를 구성하는 요소입니다.
HTML의 태그란?
HTML의 태그는 위에서 설명한 웹 페이지에 표시되는 모든 요소를 HTML 문서에 정의하기 위한 도구입니다. "이것은 제목이고, 이것은 콘텐츠 내용이야."라고 컴퓨터에게 알려주는 것이죠.
태그를 작성하는 방법
<태그>...</태그>
- 태그는 보통 꺾쇠 괄호(<>) 안에 위치합니다.
- 여는 태그와 닫는 태그로 구성됩니다.
- 닫는 태그는 앞에 '/'를 붙입니다.
- 일부 태그는 닫는 태그가 필요없는 태그가 있습니다. 이러한 태그를 빈 태그(empty tag)라고 합니다.
태그의 중첩
HTML에서 태그 중첩은 한 요소 내부에 다른 요소가 포함되는 것을 의미합니다. 예를 들어, 우리가 책을 읽을 때, 책의 목차에서 한 항목 안에 다른 항목이 있을 수 있습니다. HTML에서도 이와 같이 부모와 자식 태그가 있습니다. 부모 태그는 다른 태그를 포함하고, 자식 태그는 부모 태그 안에 위치합니다.
예시:
<ul>
<li>사과</li>
<li>바나나</li>
<li>딸기</li>
</ul><div>
<h2>제목</h2>
<p>내용</p>
</div>태그의 속성
HTML 태그의 속성은 태그가 가지는 특성을 설정하는 역할을 합니다. 예를 들어, "
" 태그는 이미지를 삽입하는 태그입니다. 그러나 이미지의 경로를 지정해 주지 않으면 브라우저는 어떤 이미지를 표시해야 할지 알 수 없습니다. 따라서 "
" 태그에 "src" 속성을 추가하여 이미지 파일의 경로를 지정해 줘야 합니다.
<img src="image.jpg">위 코드에서 "src"는 "
" 태그의 속성 중 하나이며, 이미지 파일의 경로를 지정하는 역할을 합니다.
- 태그에 따라 사용할 수 있는 속성이 다릅니다.
- 하나의 태그에 여러개의 속성이 사용될 수 있습니다.
- 속성은 태그의 이름 뒤에 위치합니다.
- 속성의 값은 (=)으로 시작하고 (")로 감싸줍니다.
이게 HTML에서 지켜야할 전부입니다. 생각보다 양이 적죠?
이제 상상하고 계신 것을 웹 페이지에 표현하기 위해 어떤 태그를 사용하고 또 그 태그에 어떤 속성을 지정할지에 대해 배우기만 하면 됩니다. 이것이 HTML의 전부입니다!
HTML에서 요소와 태그는 HTML의 전부라고 해도 과언이 아닙니다. 웹 페이지에 표시되는 모든 것들을 요소라고 하며 요소들을 작성하기 위해서는 태그가 필요합니다. 이 페이지에서 HTML의 요소와 태그에 대해 자세히 살펴보도록 하겠습니다.
HTML의 요소란?
우리가 웹 페이지에 방문했을 때 볼 수 있는 것에는 무엇이 있나요? 제목, 글, 이미지, 동영상, 목록 등등과 같이 많은 것들을 볼 수 있어요. 이러한 것들이 모두 웹페이지를 구성하는 요소입니다.
HTML의 태그란?
HTML의 태그는 위에서 설명한 웹 페이지에 표시되는 모든 요소를 HTML 문서에 정의하기 위한 도구입니다. "이것은 제목이고, 이것은 콘텐츠 내용이야."라고 컴퓨터에게 알려주는 것이죠.
태그를 작성하는 방법
<태그>...</태그>
- 태그는 보통 꺾쇠 괄호(<>) 안에 위치합니다.
- 여는 태그와 닫는 태그로 구성됩니다.
- 닫는 태그는 앞에 '/'를 붙입니다.
- 일부 태그는 닫는 태그가 필요없는 태그가 있습니다. 이러한 태그를 빈 태그(empty tag)라고 합니다.
태그의 중첩
HTML에서 태그 중첩은 한 요소 내부에 다른 요소가 포함되는 것을 의미합니다. 예를 들어, 우리가 책을 읽을 때, 책의 목차에서 한 항목 안에 다른 항목이 있을 수 있습니다. HTML에서도 이와 같이 부모와 자식 태그가 있습니다. 부모 태그는 다른 태그를 포함하고, 자식 태그는 부모 태그 안에 위치합니다.
예시:
<ul>
<li>사과</li>
<li>바나나</li>
<li>딸기</li>
</ul><div>
<h2>제목</h2>
<p>내용</p>
</div>태그의 속성
HTML 태그의 속성은 태그가 가지는 특성을 설정하는 역할을 합니다. 예를 들어, "
" 태그는 이미지를 삽입하는 태그입니다. 그러나 이미지의 경로를 지정해 주지 않으면 브라우저는 어떤 이미지를 표시해야 할지 알 수 없습니다. 따라서 "
" 태그에 "src" 속성을 추가하여 이미지 파일의 경로를 지정해 줘야 합니다.
<img src="image.jpg">위 코드에서 "src"는 "
" 태그의 속성 중 하나이며, 이미지 파일의 경로를 지정하는 역할을 합니다.
- 태그에 따라 사용할 수 있는 속성이 다릅니다.
- 하나의 태그에 여러개의 속성이 사용될 수 있습니다.
- 속성은 태그의 이름 뒤에 위치합니다.
- 속성의 값은 (=)으로 시작하고 (")로 감싸줍니다.
이게 HTML에서 지켜야할 전부입니다. 생각보다 양이 적죠?
이제 상상하고 계신 것을 웹 페이지에 표현하기 위해 어떤 태그를 사용하고 또 그 태그에 어떤 속성을 지정할지에 대해 배우기만 하면 됩니다. 이것이 HTML의 전부입니다!
