HTML #2 -인라인요소와 블록요소-

8505 단어 htmlhtml

안녕하세요😊
오늘은 인라인요소와 블록요소에 대해서 보려고해요.
아직은 저도 많이 헷갈리고 어려운 부분이 있고
틀린 부분도 있겠지만 앞으로도 공부하면서 채워볼게요👊

시작하기전에!

"블록요소와 인라인 요소가 무엇인지 왜 알아야 할까?"라는 생각을 하기 쉽다.
나 또한 그런 생각을 했고, 각 요소를 알아야 css사용에서 헷갈리지 않는다는 것을 알아냈다.
그럼 이제 HTML의 블록요소(block element)와인라인요소(inline element)에 대해서 알아보자.

블록요소(block element)

블록요소의 특징(대표적으로 div, h1, p태그)

1) 사용가능한 최대 가로 너비를 사용한다.
2)크기를 지정할 수 있다.

기본적으로 width값과 height값이 "width:100% height:0;"로 시작하며
값을 0으로 한다고 해서 아무것도 없는 것이 아니라 글자를 쓰면 그 글자 만큼 높이 값이 자동으로 지정된다.

3)수직으로 쌓이는 구조이다.

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>div</title>
    <div>안녕하세요</div>
    <div>안녕하세요</div>
    <div>안녕하세요</div>

위에 보이는 것처럼 작성한다면 "안녕하세요"라는 글이 세로로 쌓이는 것을 볼 수 있다.

4) margin과 padding 둘다 사용 가능
5) 레이아웃에 특화되어있다고 생각하면 된다

인라인요소(in-line element)

인라인요소의 특징(대표적으로 span, img태그)
1)필요한 만큼의 너비를 사용한다

이 말은 span태그를 이용하고 css를 이용해서 백그라운드에 색을 입히면 알 수 있다
그 결과로 글자의 크기에 맞게 뒷배경 색상이 들어간 것을 확인할 수 있다.

2) 크기를 지정할 수 없다.

가로와 세로 사이즈를 설정할 수 없다 width와 height속성을 넣어도 크기를 지정할 수 없다

3)수평으로 쌓임

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>span</title>
    <span>안녕하세요</span>
    <span>안녕하세요</span>
    <span>안녕하세요</span>

또한 만약 밑줄이 아니라 붙여서 쓰면 띄어쓰기가 안되어있다 이것도 인라인요소의 특징이다.
💡여기서 붙여서 쓴다는 것은 위처럼 3줄에 걸쳐서 쓰는 것이 아니라 한 줄로 쭉 이어서 쓰는 것을 말한다.

4)margin,padding 이용시 위, 아래는 사용할 수 없다.

5)text에 최적화되어있다.

마지막으로

이렇게 인라인요소와 블록요소의 특징을 볼 수 있다.
인라인 요소와 블록요소가 정말 헷갈리지만 후에 css를 적절하게 사용하려면 알아야한다!
다음에는 블록요소와 인라인요소에 해당하는 태그들을 알아보자.

목록 유도list(x* x for x in range(10)
Find K Closest Elements K 최근 원소 발견

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage