왜 스타일을 사용할까?
| HTML 은 내용 나열, CSS 는 디자인 구성 |
| ( 그래서 css만 바꾸면 디자인을 바꿀 수 있음 ) |
| 다양한 기기에 맞게 탄력적으로 바뀌는 문서를 만들 수 있다 ( 반응형 웹 디자인 ) |
Rule
선택자 { 속성1 : 속성값1 ; 속성2 : 속성2값 }
주석
/* 주석내용 */
CSS 분류
| 브라우저 기본 스타일 |
css 를 사용하지 않은 웹 문서라고 하더라도 웹 브라우저에 표시할 때는 기본 스타일을 사용 | |
| 사용자 스타일 | 인라인 스타일 | 스타일을 적용할 대상에 직접 표시 |
| ex. html | <p style="color: red">빨강</p> | |
| 내부 스타일 시트 | 웹 문서 안에 스타일을 작성한 것. <head> 내에 <style> 태그에 작성 |
|
| ex. html | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>상품 소개 페이지</title> <style> h1 { color: red } </style> </head> <body> <h1>빨강</h1> </body> </html> |
|
| 외부 스타일 시트 | 스타일을 따로 파일로 작성한 것. *. css 확장자 사용. <head> 내에 <link> 태그로 파일 연결 |
|
| rule. html | <head> <link rel="stylesheet" href="외부 스타일 시트 파일 경로"> </head> |
|
기본 선택자 종류
| 전체 | rule | * { 스타일규칙 } |
| ex. | * { color: pink; background-color: gray; } | |
| 태그 | rule | 태그명 { 스타일규칙 } |
| ex. | h1 { text-align: center; } | |
| class | rule | .개발자가_정한_클래스명 { 스타일규칙 } |
| ex. | .ca { color: green; } | |
| id | rule | #개발자가_정한_id명 { 스타일규칙 } |
| ex. | #ia { color: yellow; } | |
| 그룹 | rule | 선택자1, 선택자2, 선택자3 { 스타일규칙 } |
| ex. | p, b { color: blue; } |
예제:
<h1>고양이</h1>
<p>고양이의 하루</p>
다음</a>
<ol>
<li>개</li>
<li class="ca">고양이</li>
<li id="ia">토끼</li>
</ol>
<div>
<b>aa</b>
</div>
CSS
| cascading style sheet | 웹 페이지 디자인 설정 | |
| cascading | 뜻: 폭포같은, 의미: 우선순위에 따라 적용할 스타일을 결정하는 | |
| style | 뜻: 옷 머리 등의 모양 | |
| sheet | 뜻: 종이나 판 한장. 시트. |
| 스타일 우선순위 | 우선순위 규칙 1 | 스타일규칙에 !important 를 사용한 것 > 인라인 스타일 > id 스타일 > class 스타일 > 타입 스타일 |
| 우선순위 규칙 2 | 나중에 작성한 것 > 먼저 작성한 것 |
| 상속 | 부모 요소의 스타일이 자식 요소로 전달됨 | |
| ex. | body 태그에 설정 시 문서 전체에 적용 됨 ) | |
| 주의. | 스타일의 모든 속성이 부모에서 자식으로 상속되지는 않음. | |
| ex. | 글자 색은 상속되지만 배경 색은 상속되지 않음 | |
728x90
'구트아카데미 > 2. CSS' 카테고리의 다른 글
| [CSS] 기초 6 (0) | 2021.06.11 |
|---|---|
| [CSS] 기초 5 (0) | 2021.06.10 |
| [CSS] 기초 4 (0) | 2021.06.10 |
| [CSS] 기초 3 (0) | 2021.06.10 |
| [CSS] 기초 2 (0) | 2021.06.10 |