CSS3 box-shadow: inset, 가상 요소 선택자, 웹폰트, transform(학습 28일차 TIL)

김영진·2021년 7월 16일
0

210716 어제에 이어 box-shadow의 inset 속성을 활용한 다양한 버튼을 꾸미는 방법, 가상 요소 선택자, 인접/형제 선택자, 웹폰트, transform에 대해 학습했다.

font tips

  • 정보를 전달할 때는 '고딕 계열'을 사용하자.

CSS3 tips

  • box-shadow에 inset을 활용해 innerglow효과를 낼 수 있다.
   box-shadow: 0 1px 2px #158a15, inset 0 5px 10px #ffc;
   /* 기본 위에서 밑으로, -면 아래에서 위로 */
  • border를 4방향 다른 컬러로 지정할 수 있다.
   border-width: 2px;
   border-style: solid;
   border-color: #8ba2c1 #5890bf #4f93ca #768fa5;
   /* top, right, bottom, left 순서 */
  • first-line 가상 요소 선택자 - 요소의 첫번째 줄에 있는 콘텐츠만 선택하여 스타일을 지정할 때 사용하는 선택자 방식으로 first-line 가상 요소 선택자라고 부른다.
   .line p::first-line {
      text-decoration: underline;
    }
  • first-letter 가상 요소 선택자 - 요소의 첫번째 글자만 선택하여 스타일을 지정할 때 사용하는 선택자 방식
   .letter p::first-letter {
      font-size: 5em;
    }
profile
UI개발자 in Hivelab

0개의 댓글