박코딩

박코딩

공부기록 블로그

레이아웃_1

2 minute read

레이아웃

정보를 정리해서 일관된 모습으로 보여지도록 하는 것은 디자인에서 매우 중요한 주제이다.

구획을 나누고 적절히 정보를 배치하는 것을 레이아웃(layout)이라고 한다.


인라인 vs 블럭 레벨

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      h1,a{border:1px solid red;}
        /*h1{display: inline;}
        a{display:block;}*/
    </style>
  </head>
  <body>
    <h1>Hello world</h1>
    This page is <a href="https://bakcoding.github.io/">bakcoding's blog.</a>
  </body>
</html>

h1, a 태그에 테두리를 적용시켰다.

h1은 제목의 역할을 하기 때문에 그 구간 전체를 블록 레벨로 지정해 자동으로 줄이 띄워지게 된다.

반면에 링크 부분은 인라인 레벨로 컨텐츠 크기만큼의 레벨을 가진다.

이렇게 기본적으로 용도에 맞게 인라인, 블럭 레벨을 가지고 있지만 css를 사용해 display 속성으로 inline과 block을 직접 지정할 수 있다.


박스 모델

태그들이 웹 페이지에 표현될 때 부피감을 지정하는 것을 말한다.

이와 관련된 속성의 사용빈도가 아주 많은 만큼 중요한 개념이다.

<!DOCTYPE html>
<html>
  <head>
  </head>
  <style>
    p,a{
      /*border-width:10px;
      border-style:solid;
      border-color:red;*/
      border:10px solid red;
      padding:20px;
      margin:40px;
      width:120px;
      height:50px;
    }
  </style>
  <body>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
    
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>

    This page is <a href="https://bakcoding.github.io/">bakcoding's blog.</a>
  </body>
</html>

p태그는 기본적으로 블럭 레벨이다.

border로 현재 레벨 범위를 확인할 수 있다.

padding은 컨텐츠의 영역과 테두리 사이의 여백이다.

margin은 요소 주변의 여백을 뜻한다. 마진의 크기를 조절해 브라우저 창으로 부터 거리나 요소간의 거리를 정할 수 있다.

블럭 레벨이기 때문에 화면 전체를 사용하게 되는데 width 속성값을 주게되면 화면 전체를 사용하지 않게 된다.

height 속성값도 부여할 수 있지만 컨텐츠가 박스를 벗어날 수 있다.

블럭 레벨과 다르게 인라인 레벨의 경우에는 padding, margin은 동일하게 적용이 되지만 width, height의 속성은 영향을 받지 않는다.

box_model


box-sizing

박스의 크기를 화면에 표시하는 방식을 변경하는 속성이다.

<!DOCTYPE html>
<html>
  <head>
  </head>
  <style>
    div{
      margin:10px;
      width:150px;
    }
    #small{
      border:10px solid black;
    }
    #large{
      border:30px solid black;
    }
  </style>
  <body>
    <div id="small">Hello</div>
    <div id="large">Hello</div>
  </body>
</html>

See the Pen Untitled by Bakcoding (@bakcoding) on CodePen.


div의 실제 요소의 크기는 테두리 안의 영역으로 두 태그는 현재 동일하다. 하지만 테두리의 굵기 때문에 요소의 크기를 파악하는데 어려움이 있다.

이럴 때 box-sizing의 속성을 통해서 요소의 크기를 파악하기 편하게 바꾼다.

<!DOCTYPE html>
<html>
  <head>
  </head>
  <style>
    div{
      margin:10px;
      width:150px;
      /*box-sizing:content-box;*/
      box-sizing:border-box;
    }
    #small{
      border:10px solid black;
    }
    #large{
      border:30px solid black;
    }
  </style>
  <body>
    <div id="small">Hello</div>
    <div id="large">Hello</div>
  </body>
</html>

box-sizing의 값은 기본적으로 content-box이며 이걸 border-box로 설정하면 두 요소의 크기가 border의 경계에 맞춰서 만들어진다.

이렇게 설정한 값이 요소를 이해하고 예측하는게 쉽기 때문에 모든 요소에 이 값을 지정하는 경우가 많다.


마진 겹침 현상

margin-collapsing

두 요소가 마진값을 가질 때

상하 마진값이 어떤 상황에서 사라지게 되는 현상을 말한다.

<!DOCTYPE html>
<html>
  <head>
  </head>
  <style>
    h1{
      border:1px solid red;
      margin:100px;
    }
  </style>
  <body>
    <h1>Hello World</h1>
    <h1>Hello World</h1>
  </body>
</html>

margin_collapsing

두 마진값을 가지는 두 요소가 있을 때 둘 중 더 큰 마진값으로 간격이 정해진다.


부모와 자식이 마진값을 가질 때

<!DOCTYPE html>
<html>
  <head>
  </head>
  <style>
    #parent{
      /* border:1px solid tomato; */
      margin-top:100px;
    }
    #child{
      background-color: powderblue;
      margin-top:50px;
    }
  </style>
  <body>
    <div id="parent">
      <div id="child">
        Hello World
      </div>
    </div>
  </body>
</html>

테두리가 있을 때는 부모와 자식의 마진값을 합친 150px만큼의 여백이 존재했지만 테두리가 사라지게 되면 마진 겹치기 현상이 발생하여 더 큰 값인 100px만큼의 여백만 적용이된다.

즉 부모요소가 시각적인 디자인이 없는 투명상태일 때 부모와 자식의 마진값중에 큰 쪽의 마진값이 자식 요소의 마진값이 된다.

시각적 효과 없을 때 겹침

<!DOCTYPE html>
<html>
  <head>
  </head>
  <style>
    #empty{
      margin-top:50px;
      margin-bottom:100px;
      /* border:1px solid tomato; */
    }
    #normal{
      background-color: powderblue;
    }
  </style>
  <body>
    <div id="empty">

    </div>
    <div id="normal">
      normal
    </div>
  </body>
</html>

empty의 마진값은 위아래 합쳐서 150px이 존재하여 normal 요소의 위치는 150px아래에 존재하게 된다.

하지만 시각적 효과를 꺼버리면 empty태그의 위아래 마진값이 서로 겹치는 현상이 생기면서 둘 중 더 큰 값인 100px만 남게된다.

You may also enjoy