[CSS] 1. CSS 개요

in CSS on Css



1. CSS 개요

CSS : Cascading Style Sheets

개요

  • 버전 3 부터는 모듈화가 되었다.
  • 모듈별로 버전이 계속해서 업데이트 되고 있다.
  • 최근 업데이트된 속성들은 적용 안되는 웹브라우저 있을 수 있으니 Can I Use 검색해보기

cascading

  • cascade : 폭포가 흐른다. (위에서 아래로 흐른다.)
  • 여러개의 스타일이 하나의 요소에 적용될 수 있다. 어떤 것이 적용될지?
  • 폭포가 흐르듯 “위에서 적용한 것이 아래에서도 적용된다” 라는 의미.



2. CSS는 어떻게 생겼을까

  • CSS는 룰 기반(Rule-based)의 언어이다.
  • CSS를 통해 특정 요소, 혹은 특정 요소들의 집합의 스타일 규칙을 정의할 수 있다. (by selector)
h1 {
    color:red;
    font-size: 12px;
}
  • h1 : selector 선택자
  • {} 선언블럭 (선언부호) 하나이상의 내용이 선언된다.
  • 선언부 : 속성(property) : 값(value) 의 조합, ;으로 구분
  • 개행이 무시된다.

주석

/* 내용 */ 의 형식으로 작성



3. CSS 를 적용하는 방법

  1. 내부 스타일 (embedded)
<head>
    <style>
        h1 {
            color: red;
        }
    </style>
</head>


  1. 인라인 스타일 (inline)
<body>
    <h1 style="color:red; font-size: 80px;">Welocome!</h1>
</body>
  • 특정 요소를 선택할 필요가 없으므로 선택자 지정하지 않는다.
  • 태그가 아닌 속성으로 사용된다.
  • 될 수 있으면 지양한다.


  1. 외부 스타일 (external)
<head>
    <link rel="stylesheet" href="style/main.css />
</head>
  • css 파일을 별도로 만들어서 연결하는 방법
  • 가장 👍👍



4. 캐스캐이딩 원칙

여기저기서 같은 속성이 지정되었을 때 도대체 어떤 속성을 pick 하느냐의 문제

스타일 우선순위

  • 동일한 스타일이라도 선언된 곳에 따라 우선순위가 정해진다.
  • 브라우저에 의해 정의된 스타일 < 개발자가 선언한 스타일 < 사용자가 구성한 스타일
  • 적용 범위가 적을 수록 우선시 된다.
  • tag 스타일 < class 스타일 < id 스타일 < 인라인 스타일
  • 소스코드의 순서가 뒤에 있으면 덮어 쓴다.


스타일 상속

  • 부모 요소에 있는 스타일 속성들이 자식 요소로 전달된다.
  • 자식 요소에서 재 정의 할 경우, 부모의 스타일을 덮어 쓴다.
  • 상속이 되지 않는 속성도 있다. (ex. 배경이미지, 배경색 등)



5. MDN 활용하기

  • 사용해야할 css 가 궁금하다면 MDN 공식문서 활용하기
  • 검색 : 요소 + css + mdn
  • 브라우저 호환성 잊지 말고 참고하기
  • can i use 활용하기!



나의 회고 🤫

사이드 플젝을 하다보면 웹 브라우저를 크롬에 맞춰서 개발해와서 css 속성별 다른 웹브라우저의 호환성을 주의깊게 살피지 않고 갔던 것 같다.
앞으로는 css 속성을 사용할 때마다 그 속성의 브라우저 호환성을 살펴보고 사용해야겠다.
또한 모르는 내용이 있다면 공식문서를 보기보다 구글링하여 tistory 나 stackoverflow 를 많이 참고했었는데 앞으로는 꼭!! 공식문서부터 보는 습관을 가져야겠다.
css 는 mdn!!