HtmlCss. 7. 문제//글자 꾸미기

문제

정답

내 풀이

<div>안녕</div>
<section>안 녕</section>

nav {
  font-weight:bold;
  letter-spacing:-10px;
  /*
  rgba 함수의 인자
  인자 1(red) : 0 ~ 255 까지 넣어서 실험
  인자 2(green) : 0 ~ 255 까지 넣어서 실험
  인자 3(blue) : 0 ~ 255 까지 넣어서 실험
  인자 4(alpha, 투명도) : 0 ~ 1 까지 넣어서 실험
  */
  color:rgba(0,0,0,0.5);
}

div {
  font-weight : bold;
  font-size : 100px;
  color:rgba(0,0,0,0.5);
}

section {
  font-weight : bold;
  font-size : 100px;
  color:rgba(150, 0, 0, 0.1);
}

선생님 풀이

<div>안녕</div>
<section>안녕</section>

nav {
  font-weight:bold;
  letter-spacing:-10px;
  /*
  rgba 함수의 인자
  인자 1(red) : 0 ~ 255 까지 넣어서 실험
  인자 2(green) : 0 ~ 255 까지 넣어서 실험
  인자 3(blue) : 0 ~ 255 까지 넣어서 실험
  인자 4(alpha, 투명도) : 0 ~ 1 까지 넣어서 실험
  */
  color:rgba(0,0,0,0.5);
}
div {
    font-weight:bold;
    color:rgba(0,0,0,0.5);
    font-size:3rem;
    letter-spacing:-10px;
}

section {
    color:rgba(255,0,0,0.5);
    font-size:4rem;
    letter-spacing:20px;
}

핵심 사항

rgba

• 빨간색(R): 색상의 빨간색 강도를 나타내며, 0에서 255 사이의 값을 가진다.
• 녹색(G): 색상의 녹색 강도를 나타내며, 역시 0에서 255 사이의 값을 가진다.
• 파란색(B): 색상의 파란색 강도를 나타내며, 0에서 255 사이의 값을 가진다.
• 알파(A): 색상의 투명도를 나타내며, 0에서 1 사이의 값을 가진다. 0은 완전히 투명하고, 1은 완전히 불투명한 상태를 가진다.

알파(A)

• 알파(Alpha) 값이 낮아질수록 색상이 투명해지며, 이를 통해 배경과 혼합되어 "탁해지는" 효과를 느낄 수 있다.
• 알파 값에 따른 색상 변화:
  • 0: 완전히 투명합니다. 색상이 보이지 않습니다.
  • 0.5: 반투명으로, 배경이 약간 비쳐 보이면서 색상이 흐릿하게 나타납니다.
  • 1: 완전히 불투명하여 색상이 선명하게 보입니다.

• font-weight:글자의 굵기를 나타냄
• letter-spacing : 글자 간격을 나타냄