728x90
<!DOCTYPE html>
<html>
<body>
<h1>The span element</h1>
<p>My mother has <span style="color:blue;font-weight:bold">blue</span> eyes and my father has <span style="color:darkolivegreen;font-weight:bold">dark green</span> eyes.</p>
<!--css가 아니더라도 비주얼 정보를 변경할 수 있다. 하지만 바디와 스타일이 섞이게 되어 가독성 떨어진다.-->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<!--The <style> tag is used to define style information (CSS) for a document.-->
<style>
p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<!--p 태그한테 컬러 레드를 넣어준다. -->
<p>Every paragraph will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<!--paral에 붙은 id만 스타일을 붙여주겠다.-->
<style>
#para1 {
text-align: center;
color: green;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<!--center를 선언하면 class를 받아 쓸 수 있다.-->
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<!--전체의 스타일에 영향을 주겠다-->
<style>
* {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>Every element on the page will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightgrey;
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
</style>
</head>
<body>
<h2>Demonstrating the Box Model</h2>
<p>The CSS box model is essentially a box that wraps around every HTML element. It consists of: borders, padding, margins, and the actual content.</p>
<div>This text is the content of the box. We have added a 50px padding, 20px margin and a 15px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</body>
</html>'공부 > 웹서버' 카테고리의 다른 글
| MVC (0) | 2022.05.14 |
|---|---|
| Asp.net (0) | 2022.04.30 |
| LINQ (0) | 2022.04.29 |
| HTML 기초 # List / Table (0) | 2022.03.29 |
| HTML 기초 #1 (0) | 2022.03.25 |