html & css/개념
인라인 VS 블럭레벨
Doo Hee
2023. 11. 21. 14:10
각각의 태그들은 태그의 성격에 따라서 화면 전체를 쓰는 태그와 자기 자신의 크기만큼만 사용하는 태그가 존재한다.
inline
- 자신과 자신을 둘러싸고있는 다른 텍스트나, 정보들과 하나의 같은 줄에 위치하는 형태의 태그를 inline element라고 한다. (ex. a태그)
block element tag
- 혼자 화면 한줄을 다쓰는 태그를 block element tag라고 한다. (ex. h1태그)
존재하는 이유?
- block element tag가 합리적인 것이 있고, inline element가 합리적인 것들이 존재하기 때문에
요소 변경하기
inline element을 block element tag으로, block element tag을 inline element로 변경할 수 있다.
- display 속성을 이용하면 가능하다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
h1,
a {
border: 1px solid black;
}
h1 {
display: inline;
}
a {
display: block;
}
</style>
</head>
<body>
<h1>Hello World</h1>
안녕하세요. <a href="">강두희</a>입니다.
</body>
</html>