[HTML Tutorial] 4. HTML Styles CSS

driedmin 2025. 3. 4. 17:12

2025. 3. 4. 17:12

HTML 색 이름

	<h3> Color Name </h3>
	<p style = "color : Tomato">Tomato color</p>
	<p style = "color : rgb(255, 99, 71)">rgb(255, 99, 71) color (RGB)</p>
	<p style = "color : #ff6347">#ff6347 (HEX)</p>
	<p style = "color : hsl(9, 100%, 64%)">hsl(9, 100%, 64%) color (HSL)</p>
	
	<p style = "color : rgb(255, 99, 71, 0.5)">rgb(255, 99, 71, 0.5)</p>
	<p style = "color : hsl(9, 100%, 64%, 0.5)">hsl(9, 100%, 64%, 0.5)</p>

- HTML에서 색은 웹페이지의 텍스트, 배경, 테두리 등에 적용할 수 있다.

- 색상은 색상 이름, HEX 코드, RGB, RGBA, HSL, HSLA 등으로 지정할 수 있다.

- RGB에 투명도를 추가한 것이 RGBA(alpha). HSL에 투명도를 추가한 것이 HSLA.

- HSL은 색상(Hue), 채도(Saturation), 밝기(Lightness) 값이다. HEX 색상코드는 16진수 값을 사용하여 색상을 표현한다. (Hexadecimal color) #RRGGBB

CSS

- CSS: Cascading Style Sheets. cascading

- CSS는 HTML 요소의 디자인(스타일)을 지정하는 스타일 언어이다. HTML이 웹페이지의 구조(뼈대)를 담당한다면, CSS는 색상, 글꼴, 레이아웃 등 디자인을 담당한다.

- CSS를 사용하면 색상, 글꼴, 텍스트 크기, 요소 사이의 간격, 요소의 위치 및 배치 방법, 사용할 배경 이미지 또는 배경색 디바이스 및 화면 크기가 다른 여러 화면에서의 디스플레이를 제어할 수 있다.

- Cascading: 계단식. 부모 요소에 적용된 스타일이 부모 내의 모든 자식 요소에서도 적용된다.

1. CSS를 HTML에 적용하는 방법

1) Inline CSS 인라인 스타일: 각 HTML의 요소에 직접 Style 속성을 사용하여 적용하는 방식

<p style = "color : blue; font-size : 12px">Inline CSS</p>

- 특정 요소에 빠르게 스타일을 적용할 수 있지만 유지 보수가 어렵다. (여러 개의 요소에 같은 스타일을 적용할 경우 일일히 써줘야 한다.

2) Internal CSS 내부 스타일 시트: HTML 문서의 <head> 태그 내부에서 <style> 태그를 사용하여 스타일을 지정하는 방식

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>HTML Tutorial</title>
	<style>
		p{
			color: red;
			font-size : 14px;
		}
	</style>
</head>
<body>
	<p> Internal CSS </p>
</body>
</html>

- 여러 요소에 동일한 스타일을 한 번에 적용시킬 수 있지만 HTML 파일과 스타일 코드가 섞여 유지보수가 어려울 수 있다.

3) External CSS 외부 스타일 시트: .css파일을 만들어 HTML과 분리하여 스타일을 적용하는 방식

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>HTML Tutorial</title>
	<link rel = "stylesheet" href = "stylesheet1.css">
</head>
<body>
	<p> External CSS </p>
</body>
</html>

밑의 파일은 stylesheet1.css 파일이다.

@charset "UTF-8";

p {
	color: pink;
	font-size: 20px
}

- 유지보수 및 재사용성이 뛰어나지만 별도의 CSS 파일을 관리해야 한다.

rel 속성

<link rel = "stylesheet" href = "stylesheet1.css">

- 여기서 rel은 relationship의 줄임말로 link 태그에서 rel 속성은 현재 문서와 링크된 문서(파일) 간의 관계를 정의함

- rel 속성의 예시들

1) stylesheet : 외부 css 파일을 연결

2) icon: 웹사이트의 favicon 지정

3) alternate: 대체 페이지(다른 언어, 형식) 지정

4) preload: 리소스를 미리 불러오기 (성능 최적화)

5) canonical: 검색 엔진 최적화를 위한 정식 url 지정

CSS의 기본 문법은 아래와 같다.

선택자 {
	속성명: 속성값;
}

2. 선택자 (selectors)

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>HTML Tutorial</title>
	<style>
		*{
			background-color : LavenderBlush; 
		}

		p{
			color: PaleVioletRed;
			font-size : 14px;
		}
		
		.title{
			color: pink;
			font-size : 20px;
		}
		
		#header {
			color: Purple;
			font-size : 24px;
		}
	</style> 
</head>
<body>
	<h3 id = "header"> HTML Tutorial </h3>
	<h2 class = "title"> style title : color: pink, font-size : 20px; </h2>
	<p> style p : color: PaleVioletRed, font-size : 14px;</p>
</body>
</html>

*	모든 요소 선택	*{background-color : LavenderBlush;}
태그명	특정태그 선택	p{color: PaleVioletRed; font-size : 14px;}
.클래스명	특정 클래스 선택	.title{color: pink; font-size : 20px;}
#아이디명	특정 ID 선택	#header {color: Purple; font-size : 24px;}

- 그룹 선택자: ,를 통해 여러 개의 요소를 한 번에 선택할 수도 있다.

- 후손 & 자식 선택자

A B	A 요소 내부의 모든 B 선택	div p{color : red;}
A > B	A 직계 자식인 B만 선택	div > p {color : blue;}

3. CSS 주요 속성

1) 글자 스타일 관련 속성

color	글자 색
font-size	글자 크기	20px
font-family	폰트	verdana, courier
font-weight	글자 굵기	bold
text-align	텍스트 정렬	center
text-decoration	밑줄, 취소선 등	underline

2) 박스 모델(Box Model) 관련 속성

width	너비 지정
height	높이 지정
padding	내부 여백(text와 border 사이)
margin	외부 여백(border 외부의 여백)
border	테두리	border : 1px solid black;

3) 배경& 테두리 스타일

background-color	배경색
background-image	배경 이미지	background-image: url('../imgs/a.jpg')
border-radius	테두리 둥글게

4. CSS 적용 우선순위 (priority)

1) 인라인 스타일

2) id 선택자 (#id)

3) 클래스 선택자 (.class)

4) 태그 선택자 (p, h1, div)

5) 기본 스타일 (브라우저 기본값)

클래스 (.클래스명)	아이디 (#아이디명)
여러 요소에 공통 적용 가능 중복 사용 가능 유지 보수가 편리	문서에서 단 한 번만 사용 가능 (고유해야 함) 특정 요소에만 스타일을 적용할 때사용 JavaScript에서 특정 요소를 선택할 때 주로 사용
document.querySelectorAll(".class"))	document.getElementById("id")
<p class="text">이 문장은 클래스가 적용된 문장입니다.</p> <p class="text">이 문장도 같은 클래스가 적용됨!</p>	<p id="unique">이 문장은 아이디가 적용된 문장입니다.</p>

- 일반적으로 클래스를 기본적으로 사용하고, 아이디는 특정요소를 JavaScript로 조작할 때 주로 사용

'국비 > HTML' 카테고리의 다른 글

[HTML Tutorial] 3. HTML 기초 - Text Formatting, 인용 및 출처 표시, 주석 (1)	2025.03.04
[HTML Tutorial] 2. HTML 기초 - 기본적인 구성과 태그, 속성들 (0)	2025.03.04
[HTML Tutorial] 1. HTML 소개 (0)	2025.02.27

driedmin 님의 블로그

[HTML Tutorial] 4. HTML Styles CSS

'국비 > HTML' 카테고리의 다른 글

+ Recent posts

티스토리툴바