김평범's OrdinaryCode

  • 홈
  • 태그
  • 방명록

2021/08/14 1

css 선택자 반복 코드를 줄여주는 :is 사용 방법 (css 코드 줄이기)

css를 이용하다보면, 공통적으로 사용하는 코드들이 발생된다. 이러한 경우 어쩔수 없이 불필요한 코드가 늘어나는 경우가 있다. 이럴 경우 코드를 줄여주는 방법중 하나가 가상클래스를 이용하는 방법이다. 오늘은 가상클래스 중 :is 에 대해서 정리해보려고 한다. Depth가 깊은 엘리먼트에 CSS를 적용할 경우 만약 li에 color를 red로 지정해주고 싶다고하자. 하지만 그 li의 조건이 div 안에 들어있는 li일 경우, header안에 있는 li일 경우가 조건이라고 하자. 그럼 코드는 위 처럼 작성된다. div ul li, div ol li, header ul li, header ol li { color:red; } 해당 조건에 맞춰 코드를 작성하다보니 css가 4줄이 넘어가게 된다. Depth 선택..

FrontEnd/css 2021.08.14
1
더보기
  • 분류 전체보기 (203)
    • Diary (4)
    • FrontEnd (109)
      • Javascript (20)
      • Vue.js (34)
      • css (17)
      • React (11)
    • etc. (88)
      • Notion (71)

Tag

노션템플릿공유, 노션사용법, JavaScript, Notion템플릿공유, 노션, 노션템플릿, 노션가이드, 노션유용한템플릿, NUXT, 노션가계부, 노션수식, react, Vue, 노션데이터베이스, 노션활용법, 리액트, CSS, 노션무료템플릿, notion, 노션표,

최근글과 인기글

  • 최근글
  • 인기글

최근댓글

공지사항

페이스북 트위터 플러그인

  • Facebook
  • Twitter

Archives

Calendar

«   2021/08   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31

Copyright © Kakao Corp. All rights reserved.

티스토리툴바