CSS
Cascading Style Sheets
CSS는
Level1,Level2,Level3를 거쳐오며 현재는 CSSLevel3가 사용되고 있다.
Level3부터는 모듈별로 버전이 다르게 적용된다.
-
CSS 내부에도 굉장히 많은 속성들이 있는데 특징에 따라 Categorized 즉, 모듈화 되어있다.
ex) font, table, animation, ... -
사용자들이 어떤 웹 브라우저를 선호하는지 파악하고,
신규 CSS 속성이 출시되면 브라우저들의 지원 여부를 알아보고 적용시켜야 한다. -
F12-개발자도구-Elements-Styles에서
태그마다 어떤 스타일이 적용되어있는지 확인할 수 있다. -
각 모듈별로 다른 버전을 갖고 있으며, 업데이트는 현재 진행형이다.
Q) 다른 버전을 갖는 이유는요? 🤔
A) 업데이트 할 게 적은 요소와 많은 요소들이 나누어져 있으며,
웹브라우저마다 지원하는 버전이 다를 수 있기 때문입니다.
예를 들어, 폰트와 관련된 스타일은 오래 되었기 때문에 추가할 것들이 별로 없지만
애니메이션과 같은 스타일은 계속해서 새로 출시되는 기능들이 있겠죠?
이것들을 한꺼번에 묶어서 배포하고 'versioning' 을 유지하려면 답도 없답니다!
Cascading 이란?
Cascading : '위에서 아래로 흐르는' 이라는 사전적 의미를 지닌다.
폭포가 흐르는 것처럼 '여러 개의 스타일이 하나의 요소에 있는 것'을 의미한다.
CSS는 상속의 상속의 상속의 연속 😂
CSS 생김새
-
CSS 는 룰 기반(Rule-based)의 언어이다.
-
CSS 를 통해 특정 요소, 혹은 특정 요소들의 집합의 스타일 규칙을 정의할 수 있다.
Example
<h1>Welcome!</h1>
<ul>
<li>Toy Story</li>
<li>Zootopia</li>
<li>Inside Out</li>
</ul>위 코드에서 <h1> 태그에는 빨간색, <li> 태그에는 초록색 글씨의 스타일링을 적용시키면
해당 태그에 전부 스타일을 적용시킨다.
Rule
h1 {
color: red;
font-size: 12px;
}
p {
color: black;
}=
<h1>태그의 글씨 색을 빨간색으로, 폰트 사이즈는 12픽셀로!!
-
h1: Selector (셀렉터) 로써 태그 혹은 **여러 가지 선택자가 될 수 있다. -
{...}: 선언부, 또는 선언 블럭으로써 하나 이상의 선언이 들어간다. -
[속성]: [값];: 선언이라고 지칭하는 속성과 값 쌍으로써 정확하게 입력해야 스타일이 오류없이 적용된다.
콜론과 세미콜론 등도 정확하게 작성해줘야 한다.
하나의 Rule 세트 구성
- 선택자 (Selector) : 스타일을 지정할 HTML 요소를 선택
- 선언 블록 (declation block) : 중괄호
{}내부에 여러 선언들을 작성- 선언 (declations) : 프로퍼티와 값으로 이루어진 쌍
선택자 {하나 이상의 선언}의 형태로 이루어진 하나의 Rule (혹은 Rule Set)
주석 (Comments)
/* 내용 */의 형식으로 작성한다.
Example
/* 한 줄 주석 */
/*
여러 줄을
차지하는
주석
*/- Rule 세트들 혹은 특정 선언 하나만 주석처리를 할 수도 있다.
CSS 적용법
- 내부 스타일 (embedded)
- 인라인 스타일 (inline)
- 외부 스타일 (external)
내부 스타일 (embedded)
<head>
...
<style>
h1 {
color: red;
}
</style>
</head><head>태그 내에<style>태그를 사용하여 작성한다.
인라인 스타일 (inline)
<body>
<h1 style="color: red;">Welcome!</h1>
</body>-
내부 스타일과는 달리 전체가 아닌 하나의 요소에만 특정 스타일을 지정할 때 사용한다.
✅ 태그에style속성을 지정해준다. -
여러 스타일을 나열할 때 반드시
;(세미콜론) 을 빼먹지 말자! -
웹 표준으로써 권장하는 방법은 아니다. '이렇게 사용할 수 있구나' 정도만 알아두자.
외부 스타일 (external)
<head>
...
<link rel="stylesheet" href="basic.css" />
</head>-
html 파일과 css 파일을 따로 만들어
<link>태그로 연결시켜준다. -
rel: relationship 으로, 현재 문서와 외부 파일이 어떤 관계에 있는지 입력한다.
위에서는 CSS 파일이기 때문에 'stylesheet' 를 사용했다. -
href: 파일의 경로를 입력한다. -
웹 표준에서 권장하는 사용 방법이다. 개발시에도 되도록 외부 스타일로 사용하도록 하자!
Cascading (캐스캐이딩) 원칙
- 스타일 우선순위
- 스타일 상속
스타일 우선순위
-
동일한 스타일이라도 선언된 곳에 따라 우선순위가 정해진다.
브라우저에 의해 정의된 스타일 < 개발자가 선언한 스타일 < 사용자가 구성한 스타일
✅ 브라우저에 의해 정의된 스타일 = user agent 에 의해 기본으로 설정된 스타일 -
적용 범위가 적을수록 우선시 된다.
tag 스타일 < class 스타일 < id 스타일 < 인라인 스타일 -
소스코드의 순서가 뒤에 있으면 덮어쓴다.
위에서 아래로 흐르기 때문에 나중에 읽는(더 아래쪽에 있는) 스타일이 이긴다!
스타일 상속
-
부모 요소에 있는 스타일 속성들이 자식 요소로 전달된다.
✅ 자식 요소에서 재 정의할 경우 --> 부모의 스타일을 덮어쓴다. -
상속이 되지 않는 속성도 있다.
ex) 배경 이미지, 배경 색, ...
CSS 연습 & 개발시 Tip
이름이 생각나지 않거나 다른 비슷한 속성들이 궁금하면
우리의 Google 신에게 물어보자.
-
MDN 사이트가 번역도 잘 되어있고 많은 자료들이 있다.
-
can i use 사이트에는 각 브라우저별 호환성을 한눈에 볼 수 있다.
특정 브라우저에서 이상하게 깨지는 현상이 나타나면 위 사이트에서 원인을 찾아보도록 하자!
