최근 업데이트된 속성들은 브라우저에서 지원을 하지 않을 수 있다. 브라우저 별로 확인하기!
CSS는 룰 기반의 언어이다.
Cascading
위에서 아래로 흐르는 의미를 뜻한다.
특정 요소를 고를 수 있다.
여러개의 스타일이 있을 때 어떤 스타일을 적용할지.
위에서 정의한 스타일이 아래에 전파가 된다.
1. 선택자(Selector) : Mdn에서 확인해보기 많은 선택자가 있다.
특정 요소를 선택할 수 있다. 스타일 규칙을 정의할 수 있다.
동적인 요소를 추가 or 이벤트 지정이 가능하다.
속성과 값이 쌍으로 되어있다.
- 주요셀렉터 3가지
Type Selector = 요소선택자
상단부에 주로 작성을 한다. 처음 적용되는 css여서 그렇다.
이것이 css Selector이다.
h1 {
color: red;
font-size: 12px;
}
h2 {
color: red;
}
- ID Selector
요소 하나에 id를 정해준다.
unique한 요소이다. 중복 없이 이 값만 사용한다.
<h1 id="hello-title">hello</h1>
- CSS에서 사용할 때
#hello-title {
color: red;
}- Class selector
id와 다르게 여러요소에 중복으로 사용이 가능하다.
blue red처럼 spacing을 통해 두 개의 이름으로 사용도 가능하다. 둘 중에 하나만 사용해도 상관없다.
<h1 class="blue red">blue</h1>
- CSS에서 사용할 때
.blue {
color: red;
}
.을 찍어서 사용해야 한다.- 주석
/* 내용 */의 형태로 작성한다. - CSS를 적용하기
- 내부 스타일(embedded)
head태그 안에 스타일을 적용할 수 있다.
<head>
<style>
h1 {
color: red;
}
</style>
</head>- 인라인 스타일(inline)
하나의 요소만 스타일 속성을 넣기 위해 사용한다.
<body>
<h1 style="color:red">hi</h1>
</body>- 외부 스타일
CSS파일을 따로 생성하여 링크로 연결을 한다.
<head>
<link rel="stylesheet" href="style/main.css" />
</head>head태그 안에 파일의 경로를 입력하게 된다.
4. 캐스캐이딩 원칙
- 스타일 우선순위
동일한 스타일이어도 선언된 곳에 따라 우선순위 결정
브라우저에 의해 정의된 스타일 < 개발자가 선언한 스타일 < 사용자가 구성한 스타일이다.
적용 범위가 적을수록 우선시 된다.
tag < class < id < 인라인 스타일(하나의 요소만 스타일 속성)
소스코드의 순서가 뒤에 있으면 덮어쓴다.
- 스타일 상속
부모 요소에 있는 스타일 속성들이 자식 요소로 전달된다.
자식 요소에서 재 정의 할 경우, 부모의 스타일을 덮어쓴다.
<ul>
<li> ~~~ </li>
</ul>상속이 되지 않는 속성도 있다. (배경 이미지, 배경 색)
공부 기록