💅✨Decorate from CSS : inline block

💅CSS/⚡ver.0

💅✨Decorate from CSS : inline block

4:Bee 2024. 2. 19. 13:51

728x90

이번 포스팅에서는 inline block에 관한 포스팅을 할 것이다. block으로 이루어진 태그와 inline으로 이루어져 있는 태그가 있는데 어떤 태그들이 있는지 한번 살펴 보겠다.

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<h1>Hello World</h1>

개발 공부는

즐겁습니다.

</body>

</html>

해당 html을 작성하면 h1태그는 자동으로 줄 바꿈이 된다. 아무리 '개발 공부는 즐겁습니다.'를 내부에서 줄 바꿈이 되어 있어도 웹브라우저에선 한 줄로 표현이 된다. 이 코드를 살짝 변형을 해보면 아래와 같다.

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<h1>Hello World</h1>

개발 공부는 <a href="https://hi-code.tistory.com">즐겁습니다.</a>

</body>

</html>

위와 같이 a태그를 삽입해도 줄은 여전히 바뀌지 않는다. 즉, a태그를 h1태그와 동일한 속성을 가진 태그가 아니라는 것을 알 수 있다. 그렇다면 css를 적용해보면 어떻게 되는지 살펴보자.

h1,

a {

border: 1px solid red;

}

위와 같이 css를 작성하면 결과는 아래와 같다.

박스를 보면 h1태그는 웹브라우저의 화면만큼의 박스가 전체를 차지하고 있고 a태그는 본인만의 크기 박스만 차지하고 있음을 알 수 있다.

a태그는 자신과 자신을 둘러싸고 있는 다른 텍스트나, 다른 정보들과 하나의 같은 줄에 위치하는 형태의 저런 태그들을 inline element라고 한다. 반면 h1처럼 혼자 화면 전체를 다 사용하고 있는 태그를 block level element라고 한다. 태그들의 쓰임에 따라서 합리적인게 있는 것이 있고 없는게 있기에 이러한 구조를 가지고 있는 것이다. 하지만 css에서 이 소성들을 우리는 조절 할 수 있다. 아래 코드를 살펴보자.

h1,

a {

border: 1px solid red;

}

h1 {

display: inline;

}

a {

display: block;

}

이처럼 h1은 block 속성을 가지고 있는 block level element이지만 display라는 문법을 사용해서 inline 속성으로 변경했다. a태그도 마찬가지고 inline element 속성이지만 display를 통해서 block 속성으로 변경 했다. 결과는 아래와 같이 나온다.

이렇게 우리가 태그들의 고유 속성들을 자유자재로 변경할 수 있다는 것을 알아두자.

728x90

저작자표시 (새창열림)