728x90
반응형
HTML 요소의 타입
HTML의 모든 요소는 해당 요소가 웹 브라우저에 어떻게 보이는가를 결정짓는 display 속성을 가집니다.
대부분의 HTML 요소는 이러한 display 속성값으로 다음 두 가지 값 중 하나를 가지게 됩니다.
1. 블록(block)
2. 인라인(inline)
블록(block) 타입의 요소
display 속성값이 블록(block)인 요소는 언제나 새로운 라인(line)에서 시작하며, 해당 라인의 모든 너비를 차지합니다.
예제
<p style="border: 3px solid red">
p요소는 display 속성값이 블록인 요소입니다.
</p><p>, <div>, <h>, <ul>, <ol>, <form>요소는 display 속성값이 블록(block)인 대표적인 요소입니다.
<div>요소
<div>요소는 다른 HTML 요소들을 하나로 묶는 데 자주 사용되는 대표적인 블록(block) 요소입니다.
<div>요소는 주로 여러 요소들의 스타일을 한 번에 적용하기 위해 사용됩니다.
예제
<div style="background-color:lightgrey; color:green; text-align:center">
<h1>div요소를 이용한 스타일 적용</h1>
<p>이렇게 div요소로 여러 요소들을 묶은 다음에 style 속성과 클래스 등을 이용하여
한 번에 스타일을 적용할 수 있습니다.</p>
</div>
인라인(inline) 타입의 요소
display 속성값이 인라인(inline)인 요소는 새로운 라인(line)에서 시작하지 않습니다.
또한, 요소의 너비도 해당 라인 전체가 아닌 해당 HTML 요소의 내용(content)만큼만 차지합니다.
예제
<p>
<span style="background-color:grey; color:orange">span태그</span>는 display 속성값이 인라인인 요소입니다.
</p><span>, <a>, <img>요소는 display 속성값이 인라인(inline)인 대표적인 요소입니다.
<span>요소
<span>요소는 텍스트(text)의 특정 부분을 묶는 데 자주 사용되는 인라인(inline) 요소입니다.
<span>요소는 주로 텍스트의 특정 부분에 따로 스타일을 적용하기 위해 사용됩니다.
예제
<p>이렇게
<span style="border: 3px solid red">span요소로 텍스트의 일부분</span>
만을 따로 묶은 후에 스타일을 적용할 수 있습니다.</p>https://www.tcpschool.com/html/html_space_blockInline
test15.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p style="border: 3px solid blue">
p요소는 display 속성값이 볼록인 요소입니다.
<p style="border: 3px double blue">
<p style="border: 2px dotted blue">
<p style="border: 2px dashdot blue">
<p style="border: 2px dashed blue">
</p>
<div style="border :1px solid blue">
<h1>div요소를 이용한 스타일 적용</h1>
<p>이렇게 div요소로 여러 요소들을 묶는 다음에 style 속성과 클레스 등을
한 번에 스타일을 적용할 수 있습니다.</p>
</div>
<h1 style="border :1px solid red; color:chocolate">div 요소를 이용한 스타일</h1>
<div style="border :1px solid blue; color:blueviolet; background-color:azure">
<h1>div요소를 이용한 스타일 적용</h1>
<p>이렇게 div요소로 여러 요소들을 묶는 다음에 style 속성과 클레스 등을
한 번에 스타일을 적용할 수 있습니다.</p>
</div>
<div style="border :1px solid blue; width:500px; height:150px; text-align:center">
<p>안녕하세요</p>
</div>
<p>
<span style="color:blue; border:1px solid red">span태그</span>는 display 속성값이 인라인인 요소입니다.<br>
<strong style="color:red">span태그</strong>는 display 속성값이 인라인인 요소입니다.
</p>
</body>
</html>
728x90
반응형
'HTML' 카테고리의 다른 글
| HTML(link_태그의 rel 속성)_2024-07-04 (0) | 2024.07.04 |
|---|---|
| HTML(iframe)_2024-07-03 (2) | 2024.07.03 |
| HTML(연습문제)_2024-07-03 (0) | 2024.07.03 |
| HTML(이미지)_2024-07-02 (0) | 2024.07.02 |
| HTML(테이블)_2024-07-01 (0) | 2024.07.01 |
