728x90
1. HTML Color
<!DOCTYPE html>
<html>
<head></head>
<body>
<!-- background color -->
<h1 style="background-color: bisque;">Hello world!</h1>
<br>
<!-- text color -->
<h1 style="color: brown;">Hello world!</h1>
<br>
<!-- Border color -->
<h1 style="border: 2px solid Tomato;">Hello world!</h1>
</body>
</html>
2. HTML CSS
- CSS: Cascading Style Sheets
- Inline: Using the style attribute
single HTML element
<h1 style="background-color: bisque;">Hello world!</h1>
- Internal: Using <style> element in the <head> section
<head>에서 사용 style element
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: bisque;}
h1 {background-color: tomato; color: blue;}
p {background-color: cornflowerblue; color: chartreuse;}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>Hello world!</p>
</body>
</html>
- External: Using <link> element link to an external CSS File
<!-- html file -->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="practice.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>/* css file */
body{
background-color: cornflowerblue;
}
h1{
color: tomato
}
p{
background-color: darkgrey;
text-align: center;
}728x90
- Internal HTML CSS 총정리
<!-- html file -->
<!DOCTYPE html>
<html>
<head>
<style>
/* border: 테두리
padding: 줄 간격
margin: border 사이의 간격 */
h1 {
background-color: darkgrey;
font-family: fantasy;
border: 2px solid hotpink;
padding: 20px;
}
p{
color: darkgoldenrod;
border: 2px solid hotpink;
margin: 20px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>
- External HTML CSS 총정리
<!-- html file -->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
<!-- <link rel="stylesheet" href="practice.css"> -->
</head>
<body>
<h1>This is a heading</h1>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>
728x90
'Programming Language > HTML | CSS | JS' 카테고리의 다른 글
| HTML 7일차 공부 (0) | 2022.01.18 |
|---|---|
| HTML 6일차 공부 (0) | 2022.01.13 |
| HTML 4일차 공부 (0) | 2022.01.10 |
| HTML 3일차 공부 (0) | 2022.01.10 |
| HTML 2일차 공부 (0) | 2022.01.08 |
