728x90
블록/인라인
HTML에 존재하는 모든 요소는 어떻게 보일지 각 display를 지니게 되어있는데 , 블록과 인라인 두가지로 정해진다.
01. 블록 요소
블록 요소는 한 라인을 모두 차지하는 속성을 지니고 있습니다.
{
<!DOCTYPE html>
<html lang="ko">
lt;head>
<meta charset="UTF-8">
<title>블록 레벨 요소</title>
</head>
<body>
<h1>블록 레벨 요소</h1>
<h2>블록 레벨 요소 성질</h1>
<p>줄 바꿈이 생깁니다.</p>
</body>
</html>
}
<h1>,<h2>,<p> 요소들은 블록의 성질을 지니고 있어 화면상 줄 바꿈 현상이 일어남
02. 인라인 요소
인라인 요소는 블록 레벨 요소와 달리 줄 바꿈 특성이 없고 행이 바뀌지 않고 한줄 출력을 하며, 요소의 너비도 해당 라인의 전체가 아닌 HTML 요소의 내용 만큼만 차지
{
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>인라인 요소</title>
</head>
<body>
<strong>인라인 요소</strong>
<span>인라인 요소는 한 줄로 출력됩니다.</span>
</body>
</html>
}
<strong>,<span> 요소들은 인라인 성질을 지니고 있어 행이 안바뀌고 한줄 출력 됨
| 요소 유형 | 특징 |
|---|---|
| 블록 레벨 요소 |
1. 줄바꿈 있음 2.텍스트와 인라인요소만 자식 요소로 포함 가능 3.블록레벨요소를 자식 요소로 포함할 수 있는 요소와 아닌 요소가 있다. |
| 인라인 요소 | 1. 줄바꿈이 일어나지 않음 2. 텍스트와 인라인 요소를 자식 요소로 포함 가능 3.블록레벨요소를 자식 요소로 포함 못함 |
728x90
반응형
'HTML' 카테고리의 다른 글
| 벡터/비트맵 (5) | 2022.08.09 |
|---|---|
| W3C 웹 표준에 대하여 알아보자~~~!!! (7) | 2022.08.08 |
| 시멘틱 마크업에 대하여 (3) | 2022.07.27 |
| 기본 규칙 (5) | 2022.07.26 |
| HTML : 기초 (6) | 2022.07.26 |
댓글