[CSS] 전체 선택자(*) 와 box-sizing

CSS 전체 선택자

 - 전체 선택자(the Universal Selector)는 HTML의 모든 요소를 선택하는 기능

 - 태그, 속성명, 속성값, 클래스, 아이디 등 모든 요소를 선택

 - 아래는 전체 선택자를 통해 효과를 적용했고, 추가로 body 선택자를 통해 효과를 적용한 예

*{
  margin:0; padding: 0; box-sizing: border-box;
}

body{
  font-family: 'Silkscreen';
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: url("login_image.jpg") no-repeat center;
  background-size: cover;
}

 

 

box-sizing

   - width: 200px, height: 100px, padding: 20px, border: 5px solid black 을 적용한 박스를 작성한다면 어떻게 표현될까?

    * 기본적으로는 오른쪽과 같이 content-box 속성이 적용.

    ** 따라서 CSS에서 box-sizing: border-box 로 계산해달라고 선언하면 왼쪽과 같이 디자인이 가능

왼: border-box 속성 / 오:content-box 속성

content-box 예제

See the Pen CSS - content box by hbkuk (@hbkuk) on CodePen.

 

 

border-box 예제

See the Pen Untitled by hbkuk (@hbkuk) on CodePen.