Language/HTML&CSS

display 속성

Seogineer 2020. 12. 4. 21:13
반응형

display 주요 속성

  • block : 블록 처럼 쌓는다.
  • inline : 한 줄로 나란히 배치된다.
  • inline-block : 크기를 유지하면서 나란히 배치된다.

소스

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>

    <div class="exam1">div1</div>
    <div class="exam1">div2</div>
    <div class="exam1">div3</div>

    <p>

    <div class="exam2">div1</div>
    <div class="exam2">div2</div>
    <div class="exam2">div3</div>

    <p>

    <div class="exam3">div1</div>
    <div class="exam3">div2</div>
    <div class="exam3">div3</div>

    <script src="script.js"></script>
  </body>
</html>

CSS

.exam1 {
  border: 1px solid gray;
  width: 100px;
  height: 100px;
  display: block;
}

.exam2 {
  border: 1px solid gray;
  width: 100px;
  height: 100px;
  display: inline;
}

.exam3 {
  border: 1px solid gray;
  width: 100px;
  height: 100px;
  display: inline-block;
}

결과

반응형