2018. 1. 1. 15:00ㆍ화면 속/HTML5
오늘은 기본 문법인 요소(element)와 속성(attribute)에 대해
이야기 해보겠습니다.
이는 계속해서 헷갈릴 수 있는 부분이지만, 차차 눈에 익게 될 테니
한 번에 외우는 느낌 보다, 조금씩 이해해 가는 느낌을 받으면 좋을 것 같습니다.
먼저, '요소(element)'란?
요소란 시작 태그와 종료 태그(여는 태그와 닫는 태그) 그리고
그 사이에 존재하는 contents를 말합니다.
*추가, 태그는 대소문자를 가리지 않지만, 소문자 사용을 권장하고 있습니다.
'요소'는 중첩이 가능합니다.
하나의 태그 안에 여러 요소가 들어갈 수 있다는 것이죠.
<body>태그의 사이에 <h1>태그, <p>태그와 그의 contents들이
들어가있는 모습을 확인할 수 있습니다.
이런 관계를 부자관계(parents-child)라고 표현합니다.
더 상위의 요소가 부모가 되는 것이고, 하위의 요소가 자식이 되는 개념입니다.
이를 통해 HTML구조를 나타내고, 특정 태그를 찾아가는 데 사용되기도 합니다.
반면에, contents가 없는 요소들 도 존재 합니다.
위와같이 contents는 존재하지 않고
'어트리뷰트(Attribute, 속성)'만 존재하는 요소들이 있습니다.
'빈 요소'라고도 하는데요,
어트리뷰트(속성)을 취하게 됩니다.
대표적인 빈 요소들은
<br>
<hr>
<img>
<meta>
<link>
<input>
등이 있습니다.
어트리뷰트(Attribute, 속성)란, 요소의 성질, 특징을 정의하는 것입니다.
요소에 필요한/추가적인 정보를 제공하는 것이며, 시작 태그와 닫는 태그 대신,
'어트리뷰트 명(Attribute name)' 과 '어트리뷰트 값(Attribute value)' 을 갖습니다.
빈 요소인 <img>태그에 src 라는 어트리뷰트 명을,
그리고 ehofo-world.png라는 값을 주었습니다.
값은 큰 따옴표 안에 들어가게 되며, 이름은 무엇이라는 기호 '='가 들어갑니다.
각각의 요소에 따라 사용할 수 있는 어트리뷰트가 별도로 존재하지만,
공통적으로 사용할 수 있는 어트리뷰트도 있습니다.
이를, 글로벌 어트리뷰트라 합니다.
대표적으로는
id
class
hidden
style
title
등이 있습니다.
요소(태그)와 마찬가지로, 지금 모든 종류를 외울 필요는 없고,
존재 한다, 사용이 위와 같은 방식으로 된다. 정도만 이해하시면
천천히, 자연스레 외워질 것입니다.
'화면 속 > HTML5' 카테고리의 다른 글
| HTML5 Tag의 기본, 다양한 HTML의 tag들(with head) (0) | 2018.01.04 |
|---|---|
| HTML5의 특징, 시맨틱 웹(Semantic Web) (0) | 2018.01.02 |
| HTML5로 웹 페이지 만들기, 'html 태그(html tag)' 란? (0) | 2017.12.31 |
| HTMl5활용하기, VSCode 설치 방법 (0) | 2017.12.30 |
| HTML5 입문, HTML5란? (0) | 2017.12.30 |