고정 헤더 영역
상세 컨텐츠
본문
요소와 속성
html은 하나의 문서라 볼수 있습니다.
문서는 제목,네비게이션,본문,리스트 등 다양한 요소로 구성되어 있는데,
이를 element(요소)라고 표시합니다.
html안에서 요소는 태그로 표시되며,
브라우저가 요소를 인식할 수 있도록 태그의 열고 닫음을 표시해주어야 합니다.
시작태그와 종료태그를 사용해주며 ,< > </>이렇게 사용합니다.
이 시작태그과 종료태그는 단순히 요소의 범위가 어디까지인지 알려줍니다.
요소의 범위만을 알려주기 때문에
이 요소를 정확하게 파악하기가 힘들어서 추가해주는 것이 ‘속성’입니다.
이 속성은 요소의 정보를 나타내 주며 속성이름과 속성값이 한 쌍으로 작성되야 합니다.
예를 하나 들어보자면
<a href="www.naver.com"></a>
위의 코드는 a태그입니다.
a라는 링크이동 요소에 이동할 위치를 알려주는 href 속성이 들어가 있으며 www.naver.com라는 속성값이 적혀있습니다.
부모요소와 자식요소
html의 요소들은 모두 하나 이상의 다른 요소를 포함할 수 있습니다.
포함하는 요소를 부모요소, 포함되는 요소를 자식요소라고 부릅니다.
부모요소는 상위레벨, 자식요소는 하위레벨 요소입니다.
그냥 상위,하위 요소로 지칭해도 되는데 굳이 부모자식요소로 불리는 이유는
마치 부모님의 유전자를 물려받는 자식처럼 요소를 포함하고 있는 상위요소의 속성이 하위요소에도 적용되기 때문입니다.
상위레벨 요소의 속성은 하위레벨 요소의 속성에 상속되지만 ,
하위레벨 요소의 속성은 상위레벨 요소의 속성에 상속될수 없습니다.
이처럼 요소들의 속성이 부모자식의 상속관계와 같기때문에 명칭에서도 부모, 자식이라고 부르고 있습니다.
<html>
<head>
<title>제목</title>
</head>
</html>위 코드를 보면
head태그는 title태그의 부모요소이며 title태그는 head태그의 자식요소입니다.
만약 하나의 속성을 head태그에 적용을 시켰다면 title태그(자식요소)는 head태그(부모요소)의 속성을 물려받기 때문에
head태그과 title태그 모두에 속성이 적용되며,
title태그에만 적용시켰다면 title태그(자식요소)에 적용한 속성을 head태그(부모요소)가 물려받을순 없기 때문에
title태그에만 적용됩니다.
'HTML 시멘틱' 카테고리의 다른 글
| 시멘틱태그의 기본구조 (0) | 2019.05.27 |
|---|
댓글 영역