web/css

[css] 1. CSS개념

jeri 2024. 4. 30. 09:31
반응형
 

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;}

반응형