햄찌개

CSS 연습 - 외부, 내부 본문

UI설계 및 구현 -웹프로그래밍

CSS 연습 - 외부, 내부

햄찌개 2020. 9. 16. 12:07

내부 CSS

EX _1)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
h1{
	color:skyblue;	
	
}
p{
	color:blue;
	background-color: red;
}

</style>
<title>내부 css 연습</title>
</head>
<body>
	<h1>This is a headlind</h1>
	<p>This is a paragraph</p>
</body>
</html>

 

EX _2)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>myWebPasge</title>
<style>
h1{
	background-color:pink;
	border : 2px solid red;
}
</style>
</head>
<body>
	<h1>THIS IS A HEADING.</h1>
</body>
</html>

 

외부 CSS

CSS

@charset "UTF-8";


h1{
	color:red;
	display: inline;	
}
h2{
	color:red;
}
p{
	color:blue;
	display: inline;
}
body{
	background-color: pink;
}

 

EX _3)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>외부 css 연습</title>
<style type="text/css">
</style>
<link type="text/css" rel="stylesheet" href="..\css\sampleStyle.css">
</head>
<body>
	<h1>This is a headlind</h1>
	<p>This is a paragraph</p>
</body>
</html>

 

EX _4)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 연습</title>
<link type="text/css" rel="stylesheet" href="..\css\sampleStyle.css">
</head>
<body>
	<h1>Welcome to Web Coffee~!</h1>
	<hr>
	<img alt="" src="../image/coffee.jpg"><br>
	<p>하우스 로스팅 원두의 </p><h1>신선한 커피</h1><p>를 맛보세요.</p>
	<h2>메뉴</h2>
	<p>에스프레소, 아메리카노, 카페라떼, 카푸치노, 카페모카.</p>
</body>
</html>

 

 

저작자표시

'UI설계 및 구현 -웹프로그래밍' 카테고리의 다른 글

CSS - margin, padding 연습  (0) 2020.09.17
CSS연습 - 속성들  (0) 2020.09.16
하이퍼링크 -> id연습  (0) 2020.09.16
2020-09-14 HTML 테그 연습(2)  (0) 2020.09.15
2020-09-14 HTML 테그 연습(1)  (0) 2020.09.14
'UI설계 및 구현 -웹프로그래밍' Related Articles more