CSS의 레이아웃 display

728x90

*위 드림코딩 엘리님의 무료 유튜브 영상을 보고 학습한 기록을 남긴 포스팅입니다.*(엘리님께 언제나 무한 감사..)

Block블록레벨(대표주자 div)과 Inline인라인레벨(대표주자 span)에 대해서 알아보자

div,
span {
  width: 80px;
  height: 80px;
  margin: 20px;
  background-color: pink;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="style.css" rel="stylesheet" type="text/css" />
    <title>Document</title>
  </head>
  <body>
    <!--Block-Level-->
    <div></div>
    <div></div>
    <div></div>
    <!--Inlin-Level-->
    <span></span>
    <span></span>
    <span></span>
  </body>
</html>

위의 코드에서 span이 출력되지 않은 이유는 span은 안에 내용이 있어야 표기되기 때문이다!

span은 기본적으로 Inline-Level이기 때문에 한 줄에 공간이 많으면 여러개가 나올 수 있다.

    <span>1초라도 안 보이면</span>
    <span>2렇게 서운한데</span>
    <span>3초는 어떻게 기다려~</span>

구분을 위하여 각각 다른 스타일을 입혀보자

span은 기본적으로 Inline-Level이기 때문에 한 줄에 공간이 많으면 여러개가 나올 수 있다. 이러한 기본값 역시도 css를 통해서 변경이 가능하다. display로 가능

div,
span {
  width: 80px;
  height: 80px;
  margin: 20px;
  background-color: pink;
}

div {
  background-color: blueviolet;
}
span {
  background-color: tomato;
}

display를 통해서 block 속성으로 바꿔주면 다음과 같이 렌더링된다.

마치 div와 같이 한줄에 하나씩 나오고 있다.

div,
span {
  width: 80px;
  height: 80px;
  margin: 20px;
  background-color: pink;
}

div {
  background-color: blueviolet;
}
span {
  background-color: tomato;
  display: block;
}

div도 inline-block 값으로 바꾸면... 짜쨔쟌

한줄에 여러개가 표시되는 것을 확인할 수가 있다.

div,
span {
  width: 80px;
  height: 80px;
  margin: 20px;
  background-color: pink;
}

div {
  background-color: blueviolet;
  display: inline-block;
}
span {
  background-color: tomato;
  display: block;
}

심지어 현재 div태그 안에 아무런 ㄴㅐ용이 없기 때문에 display값을 inline으로 바꾸면 아예 렌더링되지 않는 모습을 관찰 가능하다!

div,
span {
  width: 80px;
  height: 80px;
  margin: 20px;
  background-color: pink;
}

div {
  background-color: blueviolet;
  display: inline;
}
span {
  background-color: tomato;
  display: block;
}

inline은 컨텐츠(내용)자체만을 꾸며주는 것이다.(기존에 width, height 설정한 것으 무시하고 오로지 컨텐츠의 길이, 크기에 맞춰서 변경된다.)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="style.css" rel="stylesheet" type="text/css" />
    <title>Document</title>
  </head>
  <body>
    <!--Block-Level-->
    <div>인라인은</div>
    <div>css에서 태그값 width나 height값 설정한 것을 무시하고</div>
    <div>오로지 내용의 크기를 따른다! ㅎㅎ</div>
    <!--Inlin-Level-->
    <span>1초라도 안 보이면</span>
    <span>2렇게 서운한데</span>
    <span>3초는 어떻게 기다려~</span>
  </body>
</html>

div,
span {
  width: 80px;
  height: 80px;
  margin: 20px;
  background-color: pink;
}

div {
  background-color: blueviolet;
  display: inline;
}
span {
  background-color: tomato;
  display: block;
}

<Display 정리>

- inline(물건 자체) : inline은 컨텐츠(내용)자체만을 꾸며주는 것이다.(기존에 width, height 설정한 것으 무시하고 오로지 컨텐츠의 길이, 크기에 맞춰서 변경된다.) 따라서 내용이 없으면 아무 것도 렌더링되지 않는다.

- inline-block(상자인데, 한 줄에 여러개 진열 가능) : 한 줄에 박스 여러개를 다 넣는데, 안의 컨텐츠 자체의 사이즈와 상관없이 css에서 width와 height 설정한 블록 크기만큼 표기가 된다고 보면 된다.

- block(상자이긴 한데, 한 줄에 단 하나 진열 가능한...) : 역시 css에서 width와 height 설정한 블록 크기만큼 표기가 되는데, 각 줄에 박스 하나씩! 한 줄에 one!