먼지나는 블로그

CSS 박스모델 본문

프론트엔드 공부/css

CSS 박스모델

고먼지 2021. 7. 1. 01:35

1. 박스모델

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
  <h1>CSS</h1>
  Cascading Style Sheets (<a href="https://en.wikipedia.org/wiki/CSS">CSS</a>) is a style sheet language used for describing
  the presentation of a document written in a markup language such as HTML.
</body>
</html>

 

box.html 파일을 새로 만든 후 간단하게 코드를 적어보았다

여기서 h1태그가 감싸고 있는 CSS라는 문자는 웹페이지를 리로드 해보면

화면 전체를 쓰고 있는 모습을 볼 수 있다. (줄바꿈이 되어있는 상태)

 

반면에 같은 웹페이지 내에 있는 a태그는 같은 태그임에도 불구하고

줄바꿈이 되지 않고 다른 문장들과 같은 라인에 위치해있다

 

이런 차별점이 드러나는 이유를 보자면 h1태그는 제목태그로 화면전체를

쓰는 것이 기본적으로 더 편리하다는 점에 있다 반면 링크를 나타내는 a태그는

만약 링크를 삽입했을 경우 앞뒤 내용이 자동으로 줄바꿈이 되면

불편해지기 때문에 기본적으로 자기 콘텐츠 크기 만큼을 쓰게 된다

 

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title></title>
  <style>
  /*
  block level element
  */
    h1{
      border-width: 5px;
      border-color: red;
      border-style: solid;
    }
    /*
    inline element
    */
    a{
      border-width: 5px;
      border-color: red;
      border-style: solid;
    }
  </style>
</head>
<body>
  <h1>CSS</h1>
  Cascading Style Sheets (<a href="https://en.wikipedia.org/wiki/CSS">CSS</a>) is a style sheet language used for describing
  the presentation of a document written in a markup language such as HTML.
</body>
</html>

 

 

두 태그의 부피감이 어떤지 확인하기 위해 

각각 두 태그에 테두리를 씌어보았다

 

결과를 보자면 h1태그는 화면 전체를 사용

a태그는 자기 콘텐츠만큼의 부피만 사용하고 있다

 

이때 h1같이 화면 전체를 사용하는 태그들은 block level element

자기 콘텐츠만큼의 부피만 사용하는 태그는 inline element 로 불린다

 

하지만 block level element로도 자신의 부피만큼 사용하게 할 수 있다

반대인 경우인 inline element 도 마찬가지다

 

<style>
  /*
  block level element
  */
    h1{
      border-width: 5px;
      border-color: red;
      border-style: solid;
      display: inline
    }
    /*
    inline element
    */
    a{
      border-width: 5px;
      border-color: red;
      border-style: solid;
      display: block;
    }
  </style>

 

display 속성을 이용해 inline으로 정의 block으로

각각 정의하게 되면 반대로 적용되는 모습을 볼 수 있다

 

display 적용 후 모습

 

이것을 통해 기본값으로 지정되있을 뿐 언제든지

기본값은 css를 통해 변경할 수 있다는 것을 알 수 있다

 

논외로 display: none;을 추가하게 되면 해당 태그를

보이지 않게 할 수 있다 

 

 

코드의 가독성이냐 효율성을 위해서라도 중복은 피하는 편이 좋다

특히 style태그 내에 있는 h1태그와 a태그의 내용이 같기 때문에

이런 경우엔 h1, a로 표현하고 border 또한 5px solid red 이런식으로

순서에 상관없이 값을 적으면 웹페이지에 같은 내용으로 보이는 것을 볼 수 있다

 

<style>
    h1, a{
      border:5px solid red;
    }
  </style>

<코드 간략화>

 

css 박스 모델

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title></title>
  <style>
    h1, a{
      border:5px solid red;
      padding:20px;
      margin:20;
      display: block;
      width: 100px;
    }
  </style>
</head>
<body>
  <h1>CSS</h1>
  <h1>CSS</h1>
</body>
</html>

'프론트엔드 공부 > css' 카테고리의 다른 글

css 속성 알아보기  (0) 2021.06.30
생활코딩 WEB2 - CSS  (0) 2021.06.27
'프론트엔드 공부/css' Related Articles more