HTML 요소 타입
HTML의 모든 요소는 해당 요소가 웹 브라우저에 어떻게 보이는지 결정 짓는 DISPLAY 속성을 가진다. 대부분의 HTML 요소는 이러한 DISPLAY 속성 값으로 다음 두 가지 값 중 하나를 가지게 된다.
1. 블록(BLOCK)
2. 인라인(INLINE)
블록(BLOCK) 타입의 요소
display 속성값이 블록(BLOCK)인 요소는 언제나 새로운 라인에서 시작하며, 해당 라인의 가로크기를 가득 차게 차지한다.
- 예제
<body>
<h1>Block요소를 이용한 스타일 적용</h1>
<p style="background-color: aquamarine">
블록 요소 확인하기
</p>
</body>
- 결과화면
Block요소를 이용한 스타일 적용
블록 요소 확인하기
\위의 예시를 보면 블록요소를 색깔을 주어 가로 크기가 가득차도록 차지하는 것을 볼 수 있다.
▶ <p>, <div>, <h>, <ul>, <ol>, <form>요소는 display 속성값이 블록(block)인 대표적인 요소이다.
<div>요소
<div>요소는 다른 HTML요소들을 하나로 묶는 데 자주 사용되는 대표적인 블록(BLOCK) 요소이다. 주로 여러 요소들의 스타일을 한 번에 적용하기 위해 사용된다.
- 예제
<body>
<div style="background-color: aquamarine">
<h1>div요소를 이용한 스타일 적용</h1>
<p>
div요소로 여러 요소들을 묶은 다음 style속상이나 클래스를 이용해 한 번에 스타일을 적용할 수 있다.
</p>
</div>
</body>
- 결과화면
div요소를 이용한 스타일 적용
div요소로 여러 요소들을 묶은 다음 style속상이나 클래스를 이용해 한 번에 스타일을 적용할 수 있다.
인라인(INLINE) 타입의 요소
DISPLAY 속성값이 인라인(INLINE)인 요소는 새로운 라인에서 시작하지 않는다. 또한, 요소의 너비도 해당 라인 전체가 아닌 해당 HTML요소의 내용(CONTENT)만큼만 차지한다.
- 예제
<body>
<h1>Inline요소를 이용한 스타일 적용</h1>
<p>
파라그래프 요소
<span style="background-color: rgb(230, 160, 180);">인라인 요소</span>
파라그래프 요소
</p>
</body>
- 결과화면
Inline요소를 이용한 스타일 적용
파라그래프 요소 인라인 요소 파라그래프 요소
▶ <span>,<a>,<img>요소는 display 속상값이 인라인(inline)인 대표적인 요소이다.
<span>요소
<span>요소는 텍스트의 특정 부분을 묶는 데 자주 사용되는 인라인(INLINE) 요소이다. 주로 텍스트의 특정 부분에 따로 스타일을 적용하기 위해 사용된다.
- 예시
<body>
<h1>span요소를 이용한 스타일 적용</h1>
<p>이렇게
<span style="border: 3px solid red">span요소로 텍스트의 일부분</span>
만을 따로 묶은 후에 스타일을 적용할 수 있습니다.</p>
</body>
- 결과화면
span요소를 이용한 스타일 적용
이렇게 span요소로 텍스트의 일부분 만을 따로 묶은 후에 스타일을 적용할 수 있습니다.
'html' 카테고리의 다른 글
| HTML - <link>태그 (0) | 2023.01.17 |
|---|---|
| HTML - <input>태그 (0) | 2023.01.17 |
| HTML - strong태그 vs b태그 / em태그 vs i태그 (0) | 2023.01.16 |
| HTML - 이미지삽입방법 (0) | 2023.01.16 |
| HTML - 하이퍼링크(Hyperlink) (0) | 2023.01.16 |