[css]_5(unit)

CSS 배우기

목차

• CSS단위 px과 %
• CSS단위 em,rem
• CSS단위 vw,vh
• CSS단위 vmin,vmax
• CSS단위 width,height
• Block요소와 Inline 요소
• max,min height,widht
• margin
• margin사용법
• margin중복
• padding

  px

  %는 부모요소의 px을 활용한다. 단위로 %를 활용한다.
  부모요소는 자신보다 한단계 사위에 있는 요소를 말한다.

  em rem

  em : 자기자신의 폰트 사이즈에 영향을 받는다. 부모요소,조상요소에게 상속 받을 수 있다.
  rem : html태그에서 지정된 font-size를 활용한다.

  vw vh

  웹페이지의 크기인 viewport의 비율을 활용하는 방법이다.0~100의 값을 사용한다.
  vw : viewport의 가로값을 활용한다.
  vh : viewport의 세로값을 활용한다.

  vmin vmax

  viewport에서 vw,vh중 가장 크거나 작은 값을 활용한다. 이또한 viewport값의 비율을 활용한다.
  vmin : vh와 vw중 작은 값의 비율을 활용한다.
  vmax : vh와 vw중 큰 값의 비율을 활용한다.

  width height

  초반에 CSS를 작성하지 않아도 기본 값이 적용이 된다. (리셋을 하는 이유가 될 수 있다.)

  Block요소와 Inline요소

  Block요소 : 초반 height값이 auto이지만 0부터 시작한다. width값은 100%이다.
  Inline요소 : 가로와 세로값을 갖을 수 없다. ex) span태그

  max&min height&width

  max-xxx : 기본 값은 none이다.
  min-xxx : 기본 값은 0이다.

  margin

  요소의 바깥쪽 여백을 지정한다. 기본 값은 0이다.
  단위 값으로 %를 활용할때 %는 부모요소의 가로크기를 활용한다.

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

.parent {
    width:400px;
    height:200px;
    border: 4px solid red;
}
.child {
    width:100px;
    height:100px;
    border: 4px solid;
    margin: 50%;

}

margin사용법

margin: 1px 1px 1px 1px; 위 우 아래 좌
margin: 1px 1px 1px; 위 (좌우) 아래
margin: 1px 1px; (위 아래) (좌 우)
margin: 1px;(위 아래 좌 우)

margin 중복 (collapse)

마진들의 특정 값들이 중복되어 합쳐지는 현상.

1. 형제 요소들의 top과 bottom이 만났을 때
2. 부모 요소의 top과 자식요소의 top이 만났을 때
3. 부모 요소의 bottom과 자식요소의 bottom이 만났을 때

부모 요소의 top 또는 bottom이 만나는 점이 같으면 중복되어서
부모 요소에 margin을 넣은 것과 같은 모습을 보여준다.

마진 중복 계산법

margin 값이 둘 다 양수 일때는 더 큰 값으로 중복된다.
margin 값이 둘 다 음수 일때는 더 작은 값으로 중복된다.
margin 값이 음수,양수 일때는 더한값 만큼 중복된다.

padding

요소의 내부 여백을 지정한다.
속성값 : px,em,cm등을 사용하며 % 는 부모요소의 너비를 사용한다.
사용법은 margin사용법과 같다.
padding을 추가하면 크기가 증가한다.

<div class="studybox">
        Hello world!
    </div>

.studybox{
   width: 100px;
   height: 100px;
   background: tomato;
  padding: 20px;
}

Hello world!

개발자 도구를 보면 class가 studybox인 박스의 width,height가
원하던 100ox이 아닌 140px인 것을 알 수 있다.
그렇기 때문에 이렇게 늘어나는 것을 막을려면
box-sizing:border-box;을 입력하면 된다.