[CSS] 콧수염 만들기 (box-shadow, transform, ...) by. Coding Tech

해당 페이지는 Coding Tech의 CSS로 기술 영상을 보고 정리한 글입니다.

See the Pen [CSS] mustache icon by hyuna lee (@leehyun-a) on CodePen.

사용된 CSS

currentColor

currentColor는 element의 현재 text color를 의미하며, color 값을 사용하는 모든 선언에 사용할 수 있습니다.

<div class="mustache"></div>

.mustache {
  width: 180px;
  height: 180px;
  color: black;
  background-color: currentColor;
}

box-shadow

element에 한개 이상의 그림자를 추가하는 속성이다.

box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;

그림자를 여러개 넣고 싶은 경우 콤마(,)로 구분하여 여러개 작성해 주면 된다.

::before

선택된 element(s)의 각 content 전에 생성된다.

::before {
  css declarations;
}

::after

선택된 element(s)의 각 content 뒤에 생성된다.

p::after { 
  content: " - Remember this";
}

CSS icon

이 곳에 가시면 CSS로 만든 여러 icon을 볼 수 있다. icon을 클릭하면 각 html, css, js 를 볼 수 있다.

. . .