CSS 기본 지식 3

CSS 기본 지식 3

root.css

• 모든 페이지에서 반복해서 적용되는 부분을 처리하는 CSS를 모아두기 위한 용도.
  • 예) 주로 색상과 글씨 크기
• :root 선택자: 최상위 요소를 가리킴.
• --변수명 형태로, CSS 변수를 정의해서 모아둠.

  :root {
    --main-bg-color-blue: #363fc9;
    --main-bg-color-blue2: #6bc0f8;
    --main-bg-color-gray: #a8a8a8;
    --border: 1px solid #d4d4d4;
    --main-width: 1280px;
  }
  

• 정의한 CSS 변수는 var(--변수명) 형태로 사용 가능.

  .wrapper {
    color: var(--main-bg-color-blue);
  }
  

---

reset.css

• 레이아웃의 css의 초기설정을 위한 용도.
• meyerweb.com의 css Tool 참고 meyerweb.com

---

별도의 CSS 개념

• 특정 줄 수까지만 텍스트를 표시하도록

  -webkit-line-clamp: 2;
  

• 줄 높이 x 특정 줄수

  height: calc(1.4em * 2);
  

• flex 컨테이너를 세로 정렬

  -webkit-box-orient: vertical;
  

• webkit box로 동작

  display: -webkit-box;