반응형
CSS Reference
CSS Reference is a free visual guide to CSS. It features the most popular properties, and explains them with illustrated and animated examples.
cssreference.io
1. CSS의 등장
1) <font>태그
- CSS를 사용하기 전에는 디자인 관련 HTML 태그와 속성을 사용하여 웹문서 작성 - <font>
- 웹문서에 생산성 및 유지보수의 효율성이 낮음
01_old.html
<body>
<h1 align="center">Old Style</h1>
<hr>
<p align="center"><font size="5" color="red">브라우저에 출력될 아주 중요한 내용입니다.</font></p>
<p align="center"><font size="5" color="green">브라우저에 출력될 아주 중요한 내용입니다.</font></p>
<p align="center"><font size="5" color="red">브라우저에 출력될 아주 중요한 내용입니다.</font></p>
<p align="center"><font size="5" color="green">브라우저에 출력될 아주 중요한 내용입니다.</font></p>
<p align="center"><font size="5" color="red">브라우저에 출력될 아주 중요한 내용입니다.</font></p>
<p align="center"><font size="5" color="green">브라우저에 출력될 아주 중요한 내용입니다.</font></p>
<p align="center"><font size="5" color="red">브라우저에 출력될 아주 중요한 내용입니다.</font></p>
</body>
2) CSS의 등장
CSS(Cascading Style Sheets)의 개념
- HTML 언어로 작성된 웹문서에 모양과 서식을 제공하기 위한 스타일 시트 언어
- HMTL 태그(박스모델)를 이용하여 웹문서를 구성하고, CSS 언어로 태그의 디자인 적용
- 웹문서 작성에 대한 생산성 및 유지보수의 효율성 증가
- HTML : 태그 (박스모델)
- CSS : 엘리먼트 (Element) → 같은 뜻
<style> 태그
- 웹문서에 작성된 태그(박스모델)에 CSS 스타일을 적용하기 위한 태그
<style type="text/css">
</style>
CSS 주석문
/* CSS 주석문 */
CSS 선택자(Selector)
- 태그(박스모델 - 엘리먼트 : Element)를 선택하기 위한 표현식
Selector [,Selector,...][:paduo-class]{
Property : Value [Value Value ...];
Property : Value [Value Value ...];
}
CSS 적용 예시
02_css.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
h1 {text-align: center; }
p {font-size: 25px;color: red;}
p:nth-child(2n) {color: green;}
</style>
</head>
<body>
<h1>CSS Style</h1>
<hr>
<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
</body>
</html>
2. CSS 스타일 적용 순서 특징
1) CSS 스타일의 상속
- 부모 엘리먼트에 적용된 스타일은 자식엘리먼트에 상속되어 적용
- but, 자식 엘리먼트에게 상속되지 않는 스타일 속성도 존재
/*<body> 상속 받는 엘리먼트들 모두 red 적용*/
body {color: red;}2) CSS 스타일의 단계적 적용
- CSS 선언 순서에 의해 스타일은 단계적으로 적용
- HTML 해석 순서에 의해 스타일이 단계적으로 적용 가능
/* <p>에 green 적용 */
p {color: green;}3) CSS 스타일의 단계적 적용 예외
- HTML 태그의 계층 순서에 의해 스타일 적용
- 자식 엘리먼트의 CSS 스타일이 나중에 적용
/* <li>에 blue 적용 */
li {color: blue;}
/* 단계적 적용의 예외 : <ul>이 나중에 나왔지만 자식 엘리먼트가 있기에 lime 적용 안됨 */
ul {color: lime;}4) CSS 스타일 단계적 적용 무시
- 단계적 적용을 무시하고 초우선적으로 CSS 스타일을 적용할수도 있음
- !important속성값
/* 다 필요없고!!! <li>는 무조건 aqua 적용 */
li {color: aqua !important;}5) 예시
03_cascade.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
body {color: red;}
p {color: green;}
li {color: blue !important;}
ul {color: lime;}
li {color: aqua;}
</style>
</head>
<body>
<h1>CSS 스타일의 단계적 적용과 상속</h1>
<hr>
<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
<hr>
<ul>
<li>아주 중요한 내용-1</li>
<li>아주 중요한 내용-2</li>
<li>아주 중요한 내용-3</li>
</ul>
</body>
</html>
6) 개발자도구로 확인 가능
- 단계적 적용에 의해 스타일 적용되지 않았음을 확인 가능
- ex) <li> 엘리먼트
3. CSS 스타일이 적용되는 3가지 방법
04_format.html
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<!-- <link rel="stylesheet-스타일시트" "search-검색" "help-도움말" "icon-아이콘" ...> -->
<!--
1. 외부파일을 불러와 내용을 연결하는 기능을 제공하는 태그
=> CSS 파일을 불러와 웹문서에 연결하여 CSS 스타일 적용
2. CSS 파일에 설정된 스타일을 사이트를 구성하는 모든 웹문서에 동일하게 적용하기 위해 사용
=> 웹사이트 작성 시 모든 페이지에 일관성 있는 스타일 적용 가능
[href 속성] : 웹문서에 연결될 외부파일의 URL 주소를 속성값으로 설정
[type 속성] : 웹문서에 연결될 외부파일의 파일형식(MimeType)을 속성값으로 설정
[rel 속성] : 파일 연결 관계를 속성값으로 설정 - CSS 파일의 속성값 : stylesheet
-->
<!-- [🎀방법1] 모든 웹문서가 가진 공통적 스타일 적용 -->
<link href="04_style.css" type="text/css" rel="stylesheet">
<!-- [🎀방법2] style 태그를 사용하여 현재 웹문서에만 가진 CSS 스타일 적용 -->
<style type="text/css">
h2 { color: skyblue; }
h3 { color: blue; }
h4 { color: lime; }
</style>
</head>
<body>
<h1>웹문서에 CSS 스타일을 적용하는 방법</h1>
<hr>
<h2>브라우저에 출력될 아주 중요한 내용입니다.</h2>
<h3>브라우저에 출력될 아주 중요한 내용입니다.</h3>
<!-- [🎀방법3] 태그의 style 속성을 사용하여 해당 태그에만 CSS 스타일 적용 -->
<h4 style="color: maroon;">브라우저에 출력될 아주 중요한 내용입니다.</h4>
</body>
</html>
04_style.css - 주의) 모든 웹문서가 가진 "공통적 스타일 파일" 만들기 : style.css 파일은 모든 웹문서에 적용할 것임
@charset "UTF-8";
h1 {color: red;}
h2 {color: green;}
반응형
'web > css' 카테고리의 다른 글
| [css] 6. 박스모델 관련 스타일 속성 (0) | 2024.05.02 |
|---|---|
| [css] 5. 배경 관련 스타일 속성 (0) | 2024.05.02 |
| [css] 4. 문장(텍스트) | 목록 | 글자색 관련 스타일 속성 (0) | 2024.05.01 |
| [css] 3. 글꼴 | 글자 | 글자간격 | 공백 관련 스타일 속성 (0) | 2024.05.01 |
| [css] 2. 선택자(selector) (1) | 2024.04.30 |
