CSS 소개
- Cascading Style Sheets의 준말, font, table, animation 등 다양한 스타일이 존재함
- 이 역시 HTML처럼 버전이 다름, 그러기에 어떤 웹 브라우저인지 속성이 지원이 가능한지 확인을 잘해야함
- Cascading의 의미는 여러 개의 스타일이 하나의 요소에 작성이 될 수 있는데 법칙이 정해져 있지 않다면 의도대로 나오지 않음
- 위에서 정의한 스타일이 아래의 요소에도 전파가 되는 의미로 Cascading이라는 의미를 담고 있음
CSS는 어떻게 생겼을까?
- CSS는 룰 기반(Rule-based)의 언어임
- CSS를 통해 특정 요소, 혹은 특정 요소들의 집합의 스타일 규칙을 정의할 수 있음(h1에는 red를 li에는 green을 이런식으로 규칙을 정하듯이)
- 아래에서 h1을 selector 선택자라고 함, 태그 뿐 아니라 다른 요소들도 선택자가 될 수 있음
- 특정 요소들의 집합이라는게 아래처럼 하게 된 경우 모든 h1 태그의 적용되기 떄문임
- 중괄호 안을 선언부 선언 블록이라고 하는데 스타일로 쓸 선언이 들어가서 작성됨
- 그리고
속성:값;으로 적용시키며 값을 처리함 - 주석의 경우도
/* 내용 */의 형식으로 작성함 - css도 개행을 무시함
- 예시
h1 {
color:red;
font-size:12px;
}
/* 주석 */
/*
여러
줄을
차지할 수 있음
*/
/*
h1 {
color:red;
font-size:12px;
}
*/CSS를 적용하는 방법
- 내부 스타일(embedded)
- html 내부의 style 태그를 활용해서 처리한 방법(전체 html에 적용하는 것)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이곳은 a 페이지입니다.</title>
<style>
h1 {
color: red;
}
</style>
</head>
<body>
<h1>Another page</h1>
</body>
</html>- 인라인 스타일(inline)
- 딱 하나의 요소에만 스타일을 적용함(특정 속성을 사용해서 처리함)
- 특정 상황에서만 쓰는걸 권장함
<body>
<h1 style="color:red">Welcome!</h1>
</body>- 외부 스타일(external)
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
<link rel="stylesheet" href="style/main.css" />
</head>
<body>
<h1>Welcome!</h1>
</body>
</html>캐스캐이딩 원칙
- 스타일 우선순위
- 동일한 스타일이라도 선언된 곳에 따라 우선순위가 정해짐.
- 브라우저에 의해 정의된 스타일 < 개발자가 선언한 스타일 < 사용자가 구성한 스타일
- 적용 범위가 적을수록 우선시 됨.
- tag 스타일 < class 스타일 < id 스타일 < 인라인 스타일
- 소스코드의 순서가 뒤에 있으면 덮어씀.
- 스타일 상속
- 부모 요소에 있는 스타일 속성들이 자식 요소로 전달됨.
- 자식 요소에서 재 정의 할 경우, 부모의 스타일을 덮어쓴다.
- 상속이 되지 않는 속성도 있다.(예: 배경 이미지, 배경색 등)
MDN 활용하기
- text color css mdn 이런식으로 css를 적용할 스타일을 포함해서 mdn을 검색하면 유용하게 쓸 수 있음
측정할 수 없으면 관리할 수 없고, 관리할 수 없으면 개선시킬 수도 없다