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

 

안녕하세요 성조입니다.

 

지난 포스팅입니다.

2022.03.05 - [Web Basic/HTML & CSS] - [HTML] 3. 태그

[HTML] 3. 태그

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

 

---

INDEX

ㆍ 요소(Elements)란?

ㆍ 속성(Attributes)이란?

ㆍ 주석

---

요소(Elements)란?

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

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

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

 

요소(Elements)

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

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

 

요소(Contents)

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

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

 

 

속성(Attributes)이란?

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

 

HTML 기본 뼈대

기본 HTML 뼈대가 있습니다.

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

 

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

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

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

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

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

 

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

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

 

주석

주석이란?

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

<!-- 내용 -->

<!-- 내용 -->

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

 

 

---

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

 

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

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

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