[웹(Web) HTML/CSS] style 예제

츄르사려고 코딩하는 코집사입니다.

1. Style에서 id를 이용

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Yongku's</title>
<style type="text/css">
	#first {
		color : red;
	}
	#second {
		color : blue;
	}
</style>
</head>
<body>
<p id="first">여기는 p 태그입니다. 빨갛게 변하고 싶어요.</p>
<p id="second">여기는 p 태그 2번째입니다. 파랗게 변하고 싶어요.</p>
안녕하세요. Yongku's Blog 입니다.
</body>
</html>

2. 부분을 색깔을 표현할 때 span id 사용

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Yongku's</title>
<style type="text/css">
	#first {
		color : red;
	}
	#second {
		color : blue;
	}
</style>
</head>
<body>
<p id="first">여기는 p 태그입니다. 빨갛게 변하고 싶어요.</p>
<p id="second">여기는 p 태그 2번째입니다. 파랗게 변하고 싶어요.</p>
안녕하세요. <span id="first">Yongku's Blog</span> 입니다.
</body>
</html>

3. Style에서 class를 만들어 사용

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Yongku's</title>
<style type="text/css">
	.red_Color{
		color : red;
	}
	#first {
		color : red;
	}
	#second {
		color : blue;
	}
</style>
</head>
<body>
<p id="first">여기는 p 태그입니다. 빨갛게 변하고 싶어요.</p>
<p id="second">여기는 p 태그 2번째입니다. 파랗게 변하고 싶어요.</p>
안녕하세요. <span class="red_Color">Yongku's Blog</span> 입니다.
</body>
</html>

저작자표시

'IT > 웹' 카테고리의 다른 글

X-Frame-Options 옵션 정리 (0)	2022.03.13
MyBatis 동적 쿼리 사용 방법 (0)	2021.12.27
IBatis와 MyBatis의 설정 방식 차이점 (0)	2021.12.27
Dto, Dao, Service, Controller (0)	2021.04.26
[Web/BackEnd] 백엔드 내용 정리 (0)	2021.04.04
윈도우 10(Windows 10) 운영체제에서 APM(Apache + PHP + MySQL) 설치 및 웹서버 구축하기(3) - MySQL 설치 (8)	2019.03.11
윈도우 10(Windows 10) 운영체제에서 APM(Apache + PHP + MySQL) 설치 및 웹서버 구축하기(2) - PHP 설치 (21)	2019.01.15
윈도우 10(Windows 10) 운영체제에서 APM(Apache + PHP + MySQL) 설치 및 웹서버 구축하기(1) - Apache 설치 (12)	2019.01.14