[TIL - 4] CSS - 2

기본 스타일 시트

각각의 웹 브라우저가 기본으로 가지고 스타일 시트(CSS)가 있다. 모든 브라우저에서 같은 UI UX 경험을 주기 위해서는 이를 초기화 시켜주는 작업이 필요하다. 초기화 CSS 중에 가장 유명한 것은, 에릭 마이어의 reset css이다. 최근에는 여러 CSS 라이브러리들이 있기 때문에, 실무에서는 사용할 일이 적다. 

 

CSS 적용 우선순위

CSS는 겹치는 속성이 있을 때, 가장 우선순위가 높은 하나 이외에는 무시하는 특징이 있다. 그렇다면, CSS는 가장 우선순위가 높은 것을 어떻게 판단할까? 정확한 가중치는 알 수 없지만, 아래의 점수표와 비슷한 방식으로 우선순위에 점수를 매겨 판단한다고 생각하면 편하다.

 

1. !important : ???점
   • 다른 어떠한 것보다도 우선순위가 높다.
   • 만약 important가 2개가 맞붙는다면, 아래의 배점을 계산하여 더 큰 important가 적용된다.
2. 인라인 스타일 : 1000점
   • style 속성을 통해 태그에 직접 스타일을 적는 경우이다.
   • 사용 시 스타일 버그가 날 수 있기 때문에, 이 방식은 권장되지 않는다.
3. 아이디 선택자 : 100점
   • "#" 선택자를 이용해 스타일을 지정한 경우이다.
   • 이 방식으로 스타일을 지정하는 것도 가능은하지만, 실무에서는 잘 사용되지 않는다.
4. 클래스 선택자, 가상 클래스 선택자 : 10점
   • "." 선택자, 혹은 ":hover", ":visited"과 같은 가상 클래스 선택자로 스타일을 지정한 경우이다.
   • 이 레벨부터 실무에서 자주 사용하게 된다.
5. 태그 선택자, 가상 요소 선택자 : 1점
   • "div"와 같은 태그 선택자, 혹은 "::before", "::after"과 같은 가상 요소 선택자로 스타일을 지정한 경우이다.
6. 전체 선택자 : 0점
   
   • asterisk로 불리는 ( * ) 별표로 스타일을 지정한 경우이다.
   • 속성이 중복되는 경우에, 무조건 대체 1순위이다.

 

텍스트 관련 속성

• font-family : 폰트를 지정
• font-size : 폰트 크기 지정
• color : 텍스트 색상 지정
• font-weight : 폰트 크기 지정
  • 400 - normal
  • 700 - bold
• font-style : 폰트체 지정
  • normal
  • italic
  • oblique
• font-variant : 텍스트 변형
  • normal
  • small-caps - 영문을 크기가 작은 대문자로 변경할 때 사용
• text-align : 텍스트 정렬
  • left
  • center
  • right
  • justify - 여러 줄을 포함하고 있을 때, width에 맞춰 간격이 늘어나게 할 때 사용
• text-decoration : 텍스트 꾸밈
  • normal
  • underline
  • line-through
  • overline
  • none - a 태그의 밑줄을 삭제할 때도 사용
• letter-spacing : 자간 지정
• line-height : 행간 지정

 

배경 관련 속성

• background-image
  • url(”이미지 URL”) 과 같이 사용
• background-color
• background-position : 이미지의 일부분이 보여질 때, 어떤 부분을 보여줄 지 설정
  • center - 정중앙
  • top left - 왼쪽 위
• background-repeat: 이미지 반복을 할 것인지 설정
  • 기본값은 반복되도록 되어있음
  • no-repeat 옵션을 통해 반복되지 않도록 설정
• backgroud-size:
  • contain: 가로 세로 비율 유지하면서 가로나 세로 중, 하나가 가득 찰 때까지 화면 비율을 확장
  • cover: 비율을 유지하지 않고, 화면이 가득찰 때까지 화면 비율을 확장

 

🤔 :  background 속성을 통해 지정한 이미지는 SEO에 반영될까요? 
✅ :  아쉽게도 그렇진 않아요. 검색엔진은 HTML 문서는 읽지만 CSS의 속성은 하나하나 읽지 않기 때문에, 반영되지 않아요.

 

 

참조자료

• https://meyerweb.com/eric/tools/css/reset/
• 프로그래머스 데브코스 2기 강의