파트 2 - 물건을 깨끗하게 유지하기

이 시리즈의 두 번째이자 마지막 부분에 다시 오신 것을 환영합니다. CSS로 간단한 도형을 그리는 기술을 마스터하셨기를 바랍니다. 모양을 결합하여 아름다운 물체를 만들어 보셨습니까? 그렇다면 주석에 CodePen 또는 JSFiddle에 대한 링크를 넣고 다른 사람들과 공유하십시오. 아직 해보지 않았다면 먼저 구름, 웃는 얼굴, 꽃, 간단한 자동차, 아이스크림 등과 같은 물체를 그려보는 것이 좋습니다. 가능한 한 많은 세부 사항을 추가하십시오. 당신이 좋아하는 것을 그립니다.

의사 요소

한 가지 알 수 있는 것은 HTML에 너무 많은 div가 포함되어 있다는 것입니다. 이것은 어수선 해 보일 수 있습니다. 또한 div가 너무 많으면 어느 시점에서 위치 지정 문제에 직면할 수 있습니다. 이 문제를 해결하고 코드를 정리하기 위해 의사 요소인 ::before 및 ::after 가 있습니다. MDN에 따르면,

A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s).

어디선가 본 적이 있다면 많은 곳에서 하나의 콜론( : ) 대신 두 개의 콜론( :: )이 사용된다는 것을 알아차렸을 것입니다. 지금은 모든 규칙을 사용할 수 있습니다. 두 개의 콜론 구문은 의사 요소와 의사 클래스를 구분하기 위해 CSS3에 도입되었습니다(예: :hover ). 이전 버전의 W3C 사양에는 이러한 구분이 없었기 때문에 대부분의 브라우저는 원래 의사 요소에 대해 두 구문을 모두 지원합니다. 이제 코드를 정리하는 방법을 살펴보겠습니다.

멋진 스마일리를 그려봅시다. 먼저 얼굴을 만듭니다.

<div class="face"></div>

body {
  background: #FFECB3;
}

.face {
  position: relative;
  height: 250px;
  width: 250px;
  border-radius: 50%;
  background: #FFDB57;
}

다음으로 눈을 추가합니다. 눈을 정의하는 div는 .face div 안에 있어야 하며 절대 위치 지정이 있어야 합니다. 눈 모양을 타원형으로 하고 싶어요. 타원을 그리는 방법을 알고 있다고 생각합니다. 이제 HTML은 다음과 같아야 합니다.

<div class="face">
  <div class="eye-grp">
    <div class="eye left"></div>
    <div class="eye right"></div>
  </div>
</div>

두 눈이 동일해야 하므로 클래스eye를 부여했습니다. eye 클래스에 스타일을 추가하기만 하면 됩니다. 그렇지 않으면 한쪽 눈의 스타일을 다른 쪽 눈으로 복사해야 합니다. 따라서 CSS는

body {
  background: #FFECB3;
}

.face {
  position: relative;
  height: 250px;
  width: 250px;
  border-radius: 50%;
  background: #FFDB57;
}

.eye {
  position: absolute;
  height: 40px;
  width: 30px;
  background: #191F45;
  border-radius: 50%;
  top: 70px;
}

.left {
  left: 60px;
}

.right {
  right: 60px;
}

이제 입을 그려야 합니다. 따라서 웃는 입은 반원 모양이어야 합니다. 이제 반원을 쉽게 그릴 수 있기를 바랍니다. mouth div가 eye-grp의 형제인지 확인합니다.

<div class="mouth"></div>

.mouth {
  width: 120px;
  height: 60px;
  border-radius: 5px 5px 60px 60px;
  background: #191F45;
  position: absolute;
  bottom: 45px;
  left: 50%;
  transform: translateX(-50%);
}

귀여운 스마일리네요😀 그렇죠? 좀 더 자세한 내용을 추가해 보겠습니다. 먼저 학생을 추가합니다. 따라서 pupil 및 left div 안에 클래스가 right인 div를 만듭니다.

<div class="eye left">
  <div class="pupil"></div>
</div>
<div class="eye right">
  <div class="pupil"></div>
</div>

.pupil {
  height: 20px;
  width: 15px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  left: 4px;
  top: 4px;
}

이제 혀를 추가하겠습니다. 혀는 또 다른 반원이어야 하지만 입에 대해 수평으로 뒤집혀 있어야 합니다. 혀를 만들기 전에 몇 가지 규칙을 mouth div에 추가해야 합니다.

.mouth {
  overflow: hidden
  border: 5px solid #191F45;
  box-sizing: border-box;
}

혀의 넘치는 부분은 가려야 하며, 혀와 입의 경계 사이에 좁은 틈을 만들기 위해 경계를 추가했습니다. 이제 tongue 내부에 mouth div를 추가한 다음 CSS 규칙을 추가합니다.

<div class="mouth">
  <div class="tongue"></div>
</div>

.tongue {
  width: 100px;
  height: 50px;
  background: #EE6055;
  border-radius: 50px 50px 0 0;
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
}

얼굴의 작은 그림자는 해를 끼치 지 않습니다.

.face {
  box-shadow: inset -10px -10px 0 0 #ffcb05;
}

더욱 아름답습니다!

일단 html을 보자.

<div class="face">
  <div class="eye-grp">
    <div class="eye left">
      <div class="pupil"></div>
    </div>
    <div class="eye right">
      <div class="pupil"></div>
    </div>
  </div>
  <div class="mouth">
    <div class="tongue"></div>
  </div>
</div>

웃는 얼굴이 행복해 보이지만 코드는 그렇지 않습니다. div가 너무 많습니다. 청소합시다. 그래서 이제 전장에 의사 요소를 가져올 것입니다.
tongue div를 제거하고 CSS를 .mouth::after로 바꾸는 것으로 시작하겠습니다.

<div class="face">
  <div class="eye-grp">
    <div class="eye left">
      <div class="pupil"></div>
    </div>
    <div class="eye right">
      <div class="pupil"></div>
    </div>
  </div>
  <div class="mouth"></div>
</div>

.mouth::after {
  content: "";  /* Important */
  width: 100px;
  height: 50px;
  background: #EE6055;
  border-radius: 50px 50px 0 0;
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
}

Note: When using pseudo-elements, we must add the content property. Otherwise, it won't produce any effects. Whatever you put within the quotes will be shown on the screen. Since we don't want any text here, we can leave it blank.

다음으로 CSS에서 pupil 클래스를 제거하고 eye::after로 교체합니다.

<div class="face">
  <div class="eye-grp">
    <div class="eye left"></div>
    <div class="eye right"></div>
  </div>
  <div class="mouth"></div>
</div>

.eye::after {
  content: "";
  height: 20px;
  width: 15px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  left: 4px;
  top: 4px;
}

스마일리처럼 HTML이 훨씬 더 행복해졌습니다! 이 게시물이 CSS에서 의사 요소가 어떻게 사용되는지, 그리고 이를 사용하여 HTML에서 불필요한 요소를 줄이는 방법을 이해하는 데 도움이 되었기를 바랍니다. 안전을 유지하고 계속 코딩하며 학습을 멈추지 마세요!😎


codepen에서 내 😀와 놀아요 .