인라인 VS 블럭레벨

각각의 태그들은 태그의 성격에 따라서 화면 전체를 쓰는 태그와 자기 자신의 크기만큼만 사용하는 태그가 존재한다.

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>

<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>

Frontend repository!