--- CSS를 배우며 ---
HTML학습을 하고 난 후, 이제 웹페이지를 꾸며줄 수 있는 CSS를 배울 차례가 되었습니다.
HTML만으로는 웹페이지를 스타일링하는데 한계가 있었는데, CSS의 존재로 보다 더 다채롭게 꾸밀 수 있다는 생각에 저는 기대가 됩니다.
[ CSS에 대하여 ]
CSS(Cascading Style Sheets)
웹페이지를 스타일링하기 위한 컴퓨터언어(확장자 : .css)
[CSS의 특징]
- 모듈별로 각자의 버전이 다름.(CSS 버전 3부터)
- 위에서 정의한 스타일이 아래에 있는 요소들에게도 전파
css 특징
- 룰 기반(rule-based)의 언어
- 특정 요소 또는 이들의 집합의 스타일 규칙 정의.
[CSS 규칙]
<!-- CSS 규칙 -->
selector(선택자) {
<!-- 선언블럭/선언부(declaration block) -->
속성(property) : 값(value);
}
<!-- ex -->
h1 {
color : red;
font-size : 5em;
}
-
선택자(selector) : 태그 또는 선택자가 들어감. 스타일을 지정할 HTML요소를 지정.
-
선언 블럭(declaration block) : 중괄호 내부에 여러 선언 작성
-
선언(declarations) : 속성, 값으로 이루어진 것
-
주석 입력 방법 : /* (내용) */
[ CSS 적용 방법 ]
- 내부 스타일 (embedded) : head태그 내에 style태그
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color : red;
}
</style>
<title>CSS</title>
</head>
<body>
<h1>빨간색 글자</h1>
</body>
<html>- 인라인 스타일 (inline) : 하나의 요소에 style속성
<body>
<h1 style="color:red">Welcome</h1>
</body>- 외부 스타일 (external) : 외부 css파일을 적용 (권장하는 방법)
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css" />
<title>CSS</title>
</head>
<body>
<h1>빨간색 글자</h1>
</body>
<html>
<!-- link 태그의 href 속성의 값으로 적용시킬 CSS파일 이름 작성 -->[ 캐스캐이딩 원칙 ]
- 스타일 우선순위
- 동일한 스타일이어도 선언된 곳 따라 우선순위 정해짐
- 브라우저 정의 스타일 - 개발자 선언 스타일 - 사용자 구성 스타일 - 적용 범위 적을 수록 우선시
- tag스타일 - class스타일 - id스타일 - 인라인스타일 - 소스코드 순서가 뒤에 있으면 덮어쓴다.
- 동일한 스타일이어도 선언된 곳 따라 우선순위 정해짐
- 스타일 상속
- 부모 요소에 있는 스타일 속성들이 자식 요소로 전달
- 자식 요소에 재정의 할 경우 부모 스타일을 덮어씀. - 상속 안 되는 속성도 존재 (배경 이미지, 배경 색 등)
- 부모 요소에 있는 스타일 속성들이 자식 요소로 전달
[ MDN 활용 ]
CSS 사용 중 모르는 것 있을 때 검색창에 'MDN' 검색하여 찾아보기.
또 다른 사이트 - 'Can I use'
저의 개발일지를 담은 블로그입니다.