본문 바로가기
학원/복기

[CSS] CSS 언어란? / style 태그 / CSS의 상속 / HTML 문서에 스타일 시트를 적용하는 방법

조가루 2023. 5. 28. 17:59

CSS(Cascading Style Sheet)

  • HTML 문서에 모양과 서식을 제공하기 위한 스타일 시트 언어
  • HTML 태그를 사용하여 웹문서를 구성하고 CSS를 사용하여 웹문서에 스타일(디자인) 적용 
    → 웹문서 작성에 대한 생산성 증가 및 유지보수의 효율성이 증가한다. 

CSS를 사용하기 전에는 디자인 관련 HTML 태그와 속성을 사용해 웹문서를 작성했다.
하지만 CSS를 사용하지 않고 HTML 태그와 속성을 사용해 디자인하면, 스타일을 바꿀 때 하나씩 다 바꿔줘야하기 때문에 매우 불편하다.
→ 웹문서 작성에 대한 생산성이 저하되고, 유지보수의 효율성이 감소한다. 

<body>
	<!-- CSS를 사용하기 전에는 디자인 관련 HTML 태그와 속성을 사용해 웹문서 작성 -->
	<h1 align="center">Old style</h1>
	<hr>
	<p><font size="5" color="green">브라우저에 출력될 아주 중요한 내용입니다.</font></p>
	<p><font size="5" color="blue">브라우저에 출력될 아주 중요한 내용입니다.</font></p>
	<p><font size="5" color="green">브라우저에 출력될 아주 중요한 내용입니다.</font></p>
	<p><font size="5" color="blue">브라우저에 출력될 아주 중요한 내용입니다.</font></p>
	<p><font size="5" color="green">브라우저에 출력될 아주 중요한 내용입니다.</font></p>	
</body>

style 태그 

: HTML 문서에 CSS를 사용하여 스타일 시트를 적용하기 위한 태그 - type 은 생략 가능 

<style type="text/css"></style>

CSS 주석문 

/* CSS 주석문 처리 */

선택자(Selector) 

: 태그(박스모델)를 선택하기 위한 표현식 
→ 선택자에 의해 선택된 태그(박스모델)를 엘리먼트(Element)로 표현한다. 

선택자를 통해 특정 요소들을 선택하여 스타일을 적용할 수 있다. 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>

<style type="text/css">
/* CSS 주석문 */

h1 {  /*h1 태그를 사용하는 속성 찾아 스타일 적용*/
	text-align: center;  /*가운데 정렬*/
}
/* p 태그를 사용하는 모든 엘리먼트에 동일한 스타일 적용 - 묵시적 반복 */
p { 
	font-size: 25px;
	color: green; 
}

p:nth-child(2n) { /*가상 선택자 (p태그 중 짝수번째 행)*/
 color: blue;	
}

</style>
</head>
<body>
	<h1>CSS Style</h1>
	<hr>
	<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
	<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
	<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
	<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
	<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
</body>
</html>

CSS에서의 상속 

부모 엘리먼트에 적용된 스타일은 자식 엘리먼트에 상속되어 적용된다.
→ 단, 자식 엘리먼트에 상속되지 않는 스타일도 존재한다. 

스타일 선언 순서에 의해 단계적으로 적용이 되고, 기존 스타일은 폐기된다. (오버라이드)

단계적 적용의 예외가 존재할 수 있다. (HTML 태그의 계층적 순서에 의해 스타일이 적용된다.)
→ 자식 엘리먼트의 CSS 스타일이 나중에 적용된다. 

!important : 단계적 적용을 무시하고 최우선적으로 스타일을 적용하기 위한 속성값 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
/* 부모 엘리먼트에 적용된 스타일은 자식 엘리먼트에 상속되어 적용 */
/* => 자식 엘리먼트에 상속되지 않는 스타일도 존재 */
body {
	color: red; 
}

/* 스타일 선언 순서에 의해 단계적으로 적용이 된다. - 기존 스타일 폐기(오버라이드) */
p { 
	color: green;
}
/* !important : 단계적 적용을 무시하고 최우선적으로 스타일을 적용하기 위한 속성값 */
li {  
	color: blue !important;   
}

/* 단계적 적용의 예외 - HTML 태그의 계층적 순서에 의해 스타일 적용 */
ul { 
	font-size : 20px;  
	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>

HTML 문서에 스타일 시트를 적용하는 방법

1)

style 태그를 사용하여 현재 HTML 문서에 스타일 시트를 적용할 수 있다. 

<style type="text/css">

2)

link 태그 

  • 외부 파일을 불러와 내용을 연결하는 기능을 제공한다. (CSS 파일 뿐만 아니라, 다른 파일도 불러올 수 있다.)
  • 일반적으로, CSS 파일을 불러와 HTML 문서에 연결하여 스타일 시트를 적용할 때 사용한다.
  • CSS 파일에 설정된 스타일을 사이트를 구성하는 모든 HTML 문서에 동일하게 적용하기 위해서 사용한다.
    → 사이트 구현시 모든 페이지에 일관성 있는 스타일을 적용한다. 
  • 단계적 적용에 의해 먼저 link를 이용해 CSS 파일을 불러와 HTML 문서에 연결하여 스타일 시트를 적용하고, 나중에 현재 HTML 문서에 필요한 스타일을 적용할 수 있도록 하는 것을 권장한다. 

link 태그의 속성 

  • href 속성 : 연결할 외부파일의 URL 주소를 속성값으로 설정한다.
  • type 속성 : 연결할 외부파일의 파일 형태(MimeType)를 속성값으로 설정한다. 
  • rel 속성 : 파일 연결 관계를 속성값으로 설정한다. - CSS 파일을 연결하기 위해서는 [stylesheet] 속성값을 사용하면 된다.  
<link href="/web/css/04_style.css" type="text/css" rel="stylesheet">

 

3)

link 태그 대신 @import 시스템 속성을 이용하여 CSS 파일의 스타일 시트를 HTML 문서에 적용시킬 수 있다. 

url 함수를 사용하여 HTML 문서에 포함시킬 CSS 파일의 URL 주소를 설정한다.  

@import url("/web/css/04_style.css");


import를 자주 사용하면 속도가 느려지기 때문에 import 보다는 link를 더 권장한다. 

4)

태그의 style 속성을 사용하여 해당 태그에 스타일 시트를 적용할 수 있다. 

<h4 style="color: maroon;">브라우저에 출력될 아주 중요한 내용입니다.</h4>

전체코드

04_style.css 
@charset "UTF-8";
h1 {
	color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML</title>

<!-- <link href="/web/css/04_style.css" type="text/css" rel="stylesheet"> -->
<!-- style 태그를 사용하여 현재 HTML 문서에 스타일 시트를 적용 -->
<style type="text/css">

@import url("/web/css/04_style.css"); 

h2 {
	color: skyblue;
}

h3 {
	color: blue;
}

h4 {
	color: lime;
} 
</style>
</head>
<body>
	<h1>HTML 문서에 스타일 시트를 적용하는 방법</h1>
	<hr>
	<h2>브라우저에 출력될 아주 중요한 내용입니다.</h2>
	<h3>브라우저에 출력될 아주 중요한 내용입니다.</h3>
	<h4 style="color: maroon;">브라우저에 출력될 아주 중요한 내용입니다.</h4>
</body>
</html>

저작자표시

'학원 > 복기' 카테고리의 다른 글

[CSS] 글자, 공백, 문장 관련 스타일 속성  (0) 2023.05.30
[CSS] 선택자(Selector)  (0) 2023.05.28
[HTML] 제출이벤트 / label태그 / textarea 태그 / select 태그 / datalist 태그 / fieldset 태그  (0) 2023.05.28
[HTML] 리퀘스트 메세지 / form 태그 / input 태그  (0) 2023.05.25
[HTML] HTML 언어란? / HTML 태그와 속성  (0) 2023.05.24

'학원/복기' Related Articles

티스토리툴바