HTML : 컨테이너 요소 div, span
div : The Content Division - 구획
- HTML <div>는 플로우 콘텐츠를 위한 블록 컨테이너 이다.
- "순수"컨테이너로서 아무것도 표현하지 않는다.→ 의미를 갖고 있지않음
- 아무런 내용을 담고 있지 않으면, 보이지않음
- class나 id로 여러 요소를 묶어서 스타일링 하기 쉽다.
예제 :
div 블록요소이며, 한줄을 모두 사용합니다.
<html>
<style>
#main{
background-color:pink}
</style>
<body>
<div id=main>
div 블록요소이며, 한줄을 모두 사용합니다.
</div>
</body>
</html>기술 요약
- 콘텐츠 카테고리 : 플로우 콘텐츠
- 가능한 카테고리 : 플로우 콘텐츠
- 태그 생략 : 종료태그 생략 불가능
- 가능한 상위 요소 : 플로우 콘텐츠를 허용하는 모든 요소
span : The Content Span 폭이나 넓이
- HTML <span>은 구문 콘텐츠를 위한 인라인 콘테이너
- "순수"컨테이너로서 아무것도 표현하지않는다. → 의미를 갖고 있지 않음
- class나 id 로 요소를 묶어서 스타일링한다.
예제 :
span1 인라인 요소입니다.span2 인라인 요소입니다.
span3 인라인 요소입니다.
<html>
<style>
#main{
background-color:pink}
</style>
<body>
<span id=main>
span1 인라인 요소입니다.
</span><br/>
<span id=main>
span2 인라인 요소입니다.
</span><br/>
<span id=main>
span3 인라인 요소입니다.
</span><br/>
</body>
</html>기술 요약
- 콘텐츠 카테고리 : 플로우 콘텐츠
- 가은한 콘텐츠 : 구문 콘텐츠
- 태그 생략 : 종료태그 생략 불가능
- 가능한 상위요소 : 구문콘텐츠 또는 플로우콘텐츠를 허용하는 모든요소
'STUDY > HTML' 카테고리의 다른 글
| HTML : 엔티티 (Entity) HTML 내에서 특수문자 작성하기 (0) | 2022.07.07 |
|---|---|
| HTML : a 와 하이퍼링크 (0) | 2022.06.15 |
| HTML : 시맨틱 웹(Semantic Web) - <section> (0) | 2022.06.10 |
| HTML : 시맨틱 웹(Semantic Web) - <article> (0) | 2022.05.31 |
| HTML : 시맨틱 웹(Semantic Web) - <aside> (0) | 2022.05.31 |