HTML 요소는 일반적으로 인라인 요소와 블록 요소로 구분할 수 있음
인라인 요소 예시
< a >: 링크 요소. 인라인 요소이며, 기본적으로 텍스트 색상을 지정할 수 있습니다.< img >: 이미지 요소. 인라인 요소이며, 이미지를 삽입할 수 있습니다.< input >: 입력 요소. 인라인 요소이며, 사용자 입력을 수집할 수 있습니다.< strong >: 강조 요소. 인라인 요소이며, 기본적으로 글꼴 무게를 지정할 수 있습니다.< span >: 일반 요소. 인라인 요소이며, 일반적으로 인라인 요소의 스타일을 지정하거나 콘텐츠를 그룹화할 때 사용합니다.
블록 요소 예시
< div >: 일반 요소. 블록 요소이며, 일반적으로 콘텐츠를 그룹화할 때 사용합니다.< h1 > ~ < h6 >: 제목 요소. 블록 요소이며, 제목을 나타낼 때 사용합니다.< p >: 단락 요소. 블록 요소이며, 문장을 구분할 때 사용합
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> 블록 요소와 인라인 요소 </title>
<style>
h1, h2, p {background-color : red;}
strong, a {background-color : green;}
</style>
</head>
<body>
<!-- 블록 요소는 줄바꿈 현상이 발생 -->
<h1> 블록 요소 </h1>
<h2> 블록 요소 성질 </h2>
<p> 앞 뒤로 줄 바꿈이 생김 </p>
<!-- 인라인 요소는 줄 바꿈 현상이 없고 한줄로 출력됨 -->
<h1> 인라인 요소 </h1>
<h2> 인라인 요소 성질 </h2>
<strong> 인라인 요소는 한 줄로 출력됩니다. </strong>
<a href = "#"> 인라인 요소 링크 </a>
</body>
</html>
블록 요소
- 줄 바꿈 일어남
- 블록 요소 안에는 텍스트와 인라인 요소를 포함할 수 있음
- 블록 요소 안에 또 다른 블록 요소를 포함 가능(예외는 있음)
인라인 요소
- 줄 바꿈이 일어나지 않음
- 인라인 요소 안에는 텍스트와 인라인 요소를 포함할 수 있음
- 인라인 요소 안에는
블록 요소 포함 불가 - 인라인 요소와 텍스트는 블록 요소안에 포함되어야 함
<a><h1> 이렇게는 불가능 </h1></a>
<h1><a> 이렇게는 가능 </a></h1><!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> 블록 요소와 인라인 요소 </title>
<style>
h1, h2, p {background-color : red; width : 500px; height: 100px;}
strong, a {background-color : green; width : 500px; height : 100px;}
</style>
</head>
<body>
<h1> 블록 요소 </h1>
<h2> 블록 요소 성질 </h2>
<p> 앞 뒤로 줄 바꿈이 생김 </p>
<h1> 인라인 요소 </h1>
<h2> 인라인 요소 성질 </h2>
<p>
<strong> 인라인 요소는 한 줄로 출력됩니다. </strong>
<a href = "#"> 인라인 요소 링크 </a>
</p>
</body>
</html>
스타일 적용 시 블록요소는 영향을 다 받는 반면, 인라인 요소는 일부만 영향을 받음
또한 p라는 블록 요소로 strong,a 등의 인라인 요소를 감쌀 수 있다
Journey for Backend Developer