온라인 강의/웹사이트 레이아웃에 영향을 미치는 요소
Block요소와 Inline요소
onebeans
2023. 4. 15. 14:46
Block 요소는 줄바꿈 현상이 일어나는 y축 정렬 형태인 반면, Inline 요소는 줄바꿈 현상이 일어나지 않는 x축 정렬 형태입니다.
Block 요소는 Inline 요소와 다르게 width와 height를 지정하여 공간을 만들 수 있습니다. 또한, margin과 padding을 사용하여 상하배치 작업이 가능합니다.
width, height, margin, padding을 사용하여 두 요소의 차이를 확인해 봅시다!
- <p>와 <a> 모두 width과 height를 각각 200px로 설정합니다.
- 두 태그를 구분하기 위해 <p>의 배경색은 노란색(yellow), <a>의 배경색은 분홍색(pink) 으로 설정합니다.
- <p>와 <a> 모두 margin-top으로 100px를 설정합니다.
- 두 태그들이 어떻게 다르게 출력되는지 확인해보세요!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Block 요소와 Inline 요소</title>
<style>
p{width:200px; height:200px; background-color:yellow; margin-top:100px;}
a{width:200px; height:200px; background-color:pink; margin-top:100px}
</style>
</head>
<body>
<!-- Block 요소 -->
<p>Block 요소</p>
<p>Block 요소</p>
<p>Block 요소</p>
<!-- Inline 요소 -->
<a href="#">Inline 요소</a>
<a href="#">Inline 요소</a>
<a href="#">Inline 요소</a>
</body>
</html>
결과화면
