css 단위와 박스모델

px: css에 값을 설정할 때 점을 이용해 화면에 출력하는 가장 작은 단위 (고정값)
ex1)

<style>
    .container{
      width: 600px;
      background-color: red;
    }
    .parent{
      width: 300px;
      background-color: blue;
    }
    .child1{
      width: 150px;
      background-color: black;
    }
    .child2{
      width: 150px;
      background-color: green;
    }
  </style>
<div class="container">
  container
  <div class="parent">
    parent
    <div class="child1">child1</div>
    <div class="child2">child2</div>
  </div>
</div>

 

위 코드와 같이 가로너비를 고정하여 출력할 수 있음을 알 수 있다.

%: css에 값을 설정할 때 부모 요소의 값을 참조하는 상대 값
ex2) 

 <style>
    .container{
      width: 600px;
      background-color: red;
    }
    .parent{
      width: 50%;
      background-color: blue;
    }
    .child1{
      width: 50%;
      background-color: black;
    }
    .child2{
      width: 50%;
      background-color: green;
    }
  </style>
<div class="container">
  container
  <div class="parent">
    parent
    <div class="child1">child1</div>
    <div class="child2">child2</div>
  </div>
</div>

위 코드에서 % 는 부모 요소의 값을 참조하기에. parent는 부모인 container에 가로나비 600px에 50%인 300px
chlid1,2는 부모 요소인 parent의 가로너비 300px에 50%인 150px를 가져가 ex1)과 동일한 값을 출력함을 알 수 있다 

em : 자기 자신의 글자크기로 값을 설정한다.
ex)

<style>
 .container{
     font-size: 10px;
     width: 60em;
   }
  </style>
<div class="container">

위 코드에서 style부분에 class가 container인 태그에 글자크기를 10px로 설정했다 width값이 60em인데 이때 em은 자기 자신의 글자크기 10px이기 때문에 
총 600px로 값이 설정되게 된다.  이때 em은 상위 요소에 font-size에 영향을 받는다 즉. class안에  어떤 요소를 만들었을 때 따로 font-size를 명시하지 않아도
글자크기가 10px로 상속된다 

vw, vh:
vw: 뷰포트 즉  브라우저 화면에 가로너비를 나타낸다  1~100에 vw로 설정 비율만큼 너비 값이 설정된다 
vh:  뷰포트 즉 브라우저 화면에 세로 너비를 나타낸다  1~100에 vh로 설정 비율만큼  높이값이 설정된다 
ex)

<style>
   .container{
    width: 50vw;
    height: 50vh;
    background-color: red;
   }
  </style>
<div class="container"></div>

위 코드를 확인해보면 class가 container인 div태그가 화면상 너비 값 50% 높잇값 50%를 가져갔음을 확인할 수 있다.

width: 요소의 가로 너비를 지정한다.
기본값 = auto이다 

height: 요소의 세로 너비를 지정한다 
기본값 = auto이다 

width와 height의 예시

ex)

<style>
   .box1{
     background-color: red;
     width: 200px; 
     height:100px
   
  </style>
<div class="box1">안녕</div>

위 코드를 확인해보면 가로너비 200px에 세로 너비 100px의 빨간색 직사각형이 출력되는 것을 확인할 수 있다.

부가적으로 블록 요소는 width =100% height = 0으로 시작하고 inline요소는 width=0 height=0으로 시작하고 width값과 height값을 설정할 수 없기 때문에 display를 inline-block으로
변경시켜줘야 width와 height값을 가질 수 있다 는 점을 참조해야 한다.  

max-width: 요소의 최대 가로 너비를 지정한다
min-width: 요소의 최소 가로 너비를 지정한다
max-height: 요소의 최대 세로 너비를 지정한다.
min-height:요소의 최소 세로 너비를 지정한다.

 <style>
  div.parent{
    width: 500px;
    height: 300px;
    border: 1px solid red;
  }
  div.child{
    max-width: 400px;
    min-width: 200px;
    height: 150px;
    background-color: royalblue;
  }
  </style>

<div class="parent">
  <div class="child"></div>
</div>

위 코드에서 w값은 500px h는 150px로 설정한 div태그 안에 자식으로 max-w가 400px이고 min-w가 200px인  div태그를 넣어봤다 
이때  부모 요소인 class가 parent인 div태그의 w를 100px로 줄여도 class가 child인 div태그는 w값이 200px 이하로 줄지 않고 
class가 parent인  div태그에 w값을 1000px로 늘려도 class가 child인 div태그의 w값은 400px이상 늘지 않는다 
min, max-height도 똑같은 방식이다.

margin : 요소의 테두리(border) 기준  바깥 여백을 의미한다.
기본값 = 0이다.
속성 값을 auto로 설정하면 브라우저가 너비를 계산하여 자동으로 margin값을 설정한다
margin에 속성 값으로 %를 사용하면 부모 요소의 width값을 참조하여 비율만큼 계산한 값이 설정된다.

margin은 단계적으로 작성하여 사용할 수 있다.
ex1)

.box{
margin: 10px 20px 30px 40px ->왼쪽부터 위, 아래 ,좌, 우에 설정값이  적용된다.
margin: 10px 20px 40px -> 왼쪽부터 위 ,{좌,우},아래에 설정값이  적용된다
margin: 10px 20px  ->왼쪽부터 {위,아래}, {좌,우}에 설정값이 적용된다
margin: 10px ->{위,아래,좌,우}에 설정값이 적용된다.
}

magin은 개별적으로 작성하여 사용할 수 있다.

margin-top: 요소의 위쪽에만 바깥 여백을 지정한다
margin-right:요소의 오른쪽에만 바깥여백을 지정한다
margin-bottom:요소의 아래쪽에만 바깥 여백을 지정한다.
margin-top : 요소의 위쪽에만 바깥 여백을 지정한다.

ex2)

.box2{
margin-top: 10px;
margin-right: 10px
margin-bottom: 20px
margin-top : 30px
}

padding: 요소의 테두리(border) 기준 안쪽 여백을 의미한다
기본값=0이다
속성 값을 auto로 설정하면 브라우저가 너비를 계산하여 자동으로 padding값을 설정한다.

padding은 margin처럼 단계적, 개별적으로 작성 가능하다 방법은 margin과 같다

ex1) 단계적으로 padding을 작성

.box{
padding: 10px 20px 30px 40px ->왼쪽부터 위, 아래 ,좌, 우에 설정값이  적용된다.
padding: 10px 20px 40px -> 왼쪽부터 위 ,{좌,우},아래에 설정값이  적용된다
padding: 10px 20px  ->왼쪽부터 {위,아래}, {좌,우}에 설정값이 적용된다
padding: 10px ->{위,아래,좌,우}에 설정값이 적용된다.
}

padding은 개별적으로 작성하여 사용할 수 있다.

padding-top: 요소의 위쪽에만 안쪽 여백을 지정한다
padding-right:요소의 오른쪽에만 안쪽여백을 지정한다
padding-bottom:요소의 아래쪽에만 안쪽 여백을 지정한다.
padding-top : 요소의 위쪽에만 안쪽 여백을 지정한다.

ex2) 개별적으로 padding을 작성

.box2{
padding-top: 10px;
padding-right: 10px
padding-bottom: 20px
padding-top : 30px
}

padding은 추가 값만큼 요소의 크기가 커진다 
ex)

<style>
    .box1 {
      width: 200px;
      height: 200px;
      padding: 20px;
      background-color: blue;
    }
  </style>

  <div class="box1"></div>

위 코드를 확인해보면 class가 box 1인 div태그는 width=200px, height=200px의 크기를 가져야 하지만 계발자 도구를 통해 확인해보면
w=240px h=240인 것을 확인할 수 있을 것이다 안쪽 여백이 늘어나면서 요소의 좌, 우 padding값 즉 20px+20px가 되어 w=240이 되고 위, 아래의 padding값 즉 20px+20px가 되어 h=240이 되는 것이다.

이렇게 요소의 크기가 커지는 것을 방지하기 위해서 box-sizing: border-box;라는 속성과 속성 값을 사용하면 패딩 값으로 안쪽 여백이 늘어나도 w와 h의 크기가 늘어나는 현상을 방지하며 padding 20px라는 값을 적용할 수 있다.

border: 요소의 테두리 선을 의미한다.

border-width: 선의 두께를 의미한다 기본값 medium
주로 px라는 단위를 이용해 두께를 지정한다

border-style: 선의 종류를 의미한다 기본값 :none
선의 종류 : 
none: 선 없음
solid: 실선  
dashed:파선 ex) ------------
dotted:점선 ex)...........................
double: 두 줄선

border-color: 선의 색상을 의미한다 기본값:black
가 존재한다 하지만 3가지를 전부 작성해야 하기 때문에 단축 속성으로 사용하는 것을 권한다
ex)

<style>
.box1
{
 width: 200px;
      height: 200px;
      border: 1px solid red;
    }
</style>
<div class="box1"></div>

위와 같이 테두리를 설정할 땐 3가지 속성이 전부 필요하기 때문에 위 코드처럼 border라는 속성에 3가지를 전부 적어 테두리를 표현하는 것이 효율적이다.

border은 개별적으로 작성할 수 있다.

border-top: 요소의 위쪽에만 테두리를 지정한다
border-right:요소의 오른쪽에만 테두리를 지정한다
border-bottom:요소의 아래쪽에만 테두리를 지정한다.
border-top : 요소의 위쪽에만 테두리를 지정한다.

box-sizing:요소의 크기 계산 기준을 설정한다

 

content-box: 요소 크기 계산 시 width와 height만으로 크기를 계산한다 즉 padding과 border의 설정값을 고려하지 않고 width와 height값을 설정한다.
border-box : 요소 크기 계산 시 width와 height padding과 border의 크기를 포함하여 계산한다 즉 padding과 border의 설정값을 고려하여 width와 height를 설정한다

기본값 : content-box

ex)

 <style>
    .box1 {
      width: 200px;
      height: 200px;
      border: 1px solid red;
      padding: 10px;
      box-sizing: border-box;
    }
  </style>

  <div class="box1"></div>

box-sizing을 사용하지 않은 경우 즉 box-sizing이 content-box인 경우 = padding과 border의 설정값이 고려되지 않아 w=222px h=222px가 된다
반면 box-sizing:border-box;를 사용했을 때 padding과 border의 설정값이 고려되어 w=200px h=200px가 된다 
계발자 도구를 통해 확인해 보기를 권한다

display : 요소의 유형(block, lnline, lnline-block, flex, grid, none 등등)을 설정한다
block : 기본값으로 w=100% h=0으로 시작한다 w, h margin, padding 등등의 값을 설정할 수 있다 주로 화면에 레이아웃을 잡는데 특화되어있다
lnline : 기본값으로 w=0 h=0으로 시작한다 w, h값 margin, padding의 위 아랫 값을 설정할 수없다 주로 text를 작성하는데 특화되어있다.
lnline-blcok: 기본적으로 lnline에 특성을 가지지만 w, h값 margin, padding의 위아래 좌 우에 값을 설정할 수 있다. 즉lnline이면서 block요소의 장점을 가미한 유형이다
none: 요소를 존재하지 않는 개념으로 바꿔버린다 display가 none이면 화면에도 나타나지 않는다

overflow:요소의 크기 이상으로 내용이 넘쳤을 때 넘치는 내용을 제어한다.

overflow의 속성 값
visible(기본값):넘치는 부분을 그대로 보여줌
scroll:넘치는 부분을 잘라내고, 스크롤바를 이용하여 볼 수 있도록 함 (가로, 세로 scroll바가 생성됨)
auto:넘치는 부분이 있는 경우만 잘라내고, 스크롤바를 이용하여 볼 수 있도록 함 (세로 scroll바가 생성됨)
hidden:넘치는 내용이 보이지 않는다.

ex)

<style>
    .box1 {
      width: 200px;
      height: 200px;
      background-color:red;
      overflow: scroll;
    }
  </style>

  <div class="box1">
  Lorem ipsum dolor, sit amet consectetur adipisicing elit.
  Fugiat reprehenderit natus voluptas recusandae architecto qui perspiciatis, 
  ea sit, alias repudiandae omnis nostrum consequuntur voluptatem ullam, 
  repellendus enim obcaecati. Dicta, illo. Lorem ipsum dolor sit, amet consectetur 
  adipisicing elit. Et enim vero reprehenderit corrupti temporibus iure nam esse inventore.
  In necessitatibus, 
  neque obcaecati deserunt molestias perferendis dolor vel ducimus atque unde.
  </div>

위 코드를 확인해보면서 auto, hidden visible도 한 번씩 적용해 보기를 권한다

opacity:요소의 투명도를 지정함
0~1 사이 소수를 이용해 투명도를 지정하는데 이때 1=100% 0.3=30% 로서 소수점 1번째 숫자에 따라 투명도에 비율을 설정한다 이때 1은 불투명을 나타낸다 
비율이 낮아질수록 투명해진다 만약 opacity가 0이면 요소가 완전히 사라진 것처럼 보이지만 존재하되 보이지 않는 것이 정확하다 존재하지 않는 개념으로 변하는 display:none과 헷갈리지 말자 
ex)

 <style>
    .box1 {
      width: 200px;
      height: 200px;
      background-color:red;
      opacity: 0.3;
    }
  </style>

  <div class="box1"></div>

위 코드에서 opacity를 0.3으로 설정하여 가로, 세로 너비 200px의 빨간색 상자가 30%의 투명도를 가진 것을 확인할 수 있다.