[HTML,CSS기초]5-2.디자인 추가하기(2)

결과물

주요 코드

<head>
    <style>
      @import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap');
      @import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap');
    </style>
</head>

#css
h1 span{
  font-family: 'Nanum Pen Script', cursive;
  background-color:yellow;
  font-size: 50px;
}
p{
  text-align: center;
  font-family: 'Nanum Pen Script', cursive;
  font-size: 20px;
}

: 글꼴 추가 코드

<div><h1><span>🐧자이언트</span> <span></span> <span>TV🐧</span></h1></div>
h1 span:nth-child(1){
  color:rgb(132, 132, 139)
}
h1 span:nth-child(2){
  color:rgb(212, 67, 208)
}
h1 span:nth-child(3){
  color:rgb(49, 148, 191)
}

:글자 마다 색깔 다르게 적용

좋은 웹페이지 즐겨찾기