[HTML] 4. 요소(Elements) 와 속성(Attributes)

Web Basic/HTML

SeongJo 2022. 4. 13. 23:32

안녕하세요 성조입니다.

지난 포스팅입니다.

[HTML] 3. 태그

2021.12.08 - [Web/HTML & CSS] - HTML) 2. HTML 기본 용어와 구조 HTML) 2. HTML 기본 용어와 구조 안녕하세요. 이번 포스팅은 다음과 같은 구성으로 진행하려 합니다. ① 웹 용어 정리 ② HTML 용어 기본 ③ HTM..

okeybox.tistory.com

이번 포스팅 영역에서는 본인이 학습한 것도 있지만 타인에게 설명할 수 있도록 최대한 초점을 맞추고 학습을 할 예정이므로 존대 위주의 표현을 사용할 예정입니다.

ㆍ 요소(Elements)란?

ㆍ 속성(Attributes)이란?

ㆍ 주석

요소를 언급하기 전에 이전 포스팅에 대해서 언급 후 나아가는 것이 좋을 것 같다고 생각이 됐습니다.

요소와 태그가 같다는 표기가 많이 있지만 본인이 학습한 후 명확하게 구분을 나눴을 때는 [요소 === 태그]가 아닌 [요소 > 태그] 관계가 됐습니다.

요소에는 텍스트에 들어가는 태그(tag) 내부의 Contents 요소와 태그(tag)의 시작과 내용 그리고 종료를 포함한 요소(Elements)가 존재합니다.

요소(Elements)

[ 요소 = <시작 태그> 내용(Contents, (요소)) </종료 태그> ]

html에서 위와 같은 구성으로 되어 있으며, HTML은 요소를 포함하는 것이 아닌 구문 분석 단계를 끝낸 후에 태그들이 의미를 갖게 된 이후로부터 html에서 사용되는 요소라는 개념이 생성되는 것입니다.

요소(Contents)

<시작 태그> 내용(Contents, (요소)) </종료 태그>

태그의 하위 요소로 들어가는 것이며, 태그가 하나의 내용을 이루기 위해 내용물에 가까운 것을 요소라고 혼동되는 경우입니다.

웹(web)에서 속성이란 태그에 기본 정보가 있다면 그 정보에 추가적인 정보를 부여하기 위해서 사용되는 것을 속성이라고 합니다.

기본 HTML 뼈대가 있습니다.

이런 뼈대에서 10번, 11번 라인을 보면 다음과 같은 태그가 보이실 것입니다.

예를 들면 다음과 같습니다.

1
2

<p class="test_point"> test입니다.</p>
<img src="이미지.png"/>

p 태그의 class라는 속성은 속성 값으로"test_point"라는 값을 가지고 있습니다.

img 태그의 src라는 속성은 속성 값으로 "이미지.png"라는 값을 가지고 있습니다.

즉 class, src는 속성이며, =""에 들어가는 값은 속성의 값이 됩니다.

여담으로 img 태그의 경우 닫는 태그는 존재하지 않으며, 그 태그 자체로 열고 닫을 수 있습니다.

src라는 속성을 활용하여 이미지 값을 태그의 속성인 src에 넣어서 출력할 수 있습니다.

주석이란?

코드가 실행 될 때 코드 실행에 영향을 미치지 않고 설명을 목적으로 사용되는 코드를 주석이라고 합니다.

1

<!-- 내용 -->

주석은 위의 형식 처럼  태그 안에 내용을 입력해서 사용하면 코드가 실행될 때 주석에 상관없이 작동 됩니다.

포스팅 작성에 텀이 많이 존재하는 것 같아서 더 노력해서 포스팅을 진행해야 할 것 같네요😂😂

짧고 부족한 글이지만 읽어주셔서 감사드립니다.

오타나 잘못된 지식 전달 사항이 있다면 댓글 부탁드리겠습니다.

다음 포스팅 때 뵙겠습니다!