카테고리 없음
CSS 과제
장꾸꾸
2020. 10. 30. 09:40
1. 내부 스타일 시트 사용
<!DOCTYPE html>
<html>
<head>
<title>내부 스타일시트 사용하기 </title>
<style>
p.box {left:0px; border-style:dotted; border-color:blue;
padding-top : 12px;
padding-right : 12px;
padding-bottom : 12px;
padding-left : 12px;
}
</style>
</head>
<body>
<p class = "box">HTML 5 웹프로그래밍 입문</p>
<p class = "box">CSS란 문서의 style을 정의하는 속성을 모아놓은 언어이다</p>
</body>
</html>
2. 외부스타일시트 사용 CSS
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel = "stylesheet" type="text/css" href="myfont.css">
</head>
<body>
<p>HTML 5 웹프로그래밍 입문</p>
<p><a>CSS</a>
란 문서의
<b>style</b>을 정의하는 속성을 모아놓은
<a>언어</a>
이다
</p>
</body>
</html>@charset "EUC-KR";
a{
font-family: 'Comic Sans MS';
color: blue;
font-size: 30px;
}
b{
color: red;
font-size: 30px;
font-weight: bold;
text-decoration:underline;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>플로팅 박스</title>
<style>
h3 {
width:60%;
left: 10%;
padding: 5px;
border-style: double;
}
#w3c_float{
float: right;
border: 1px solid;
border-radius: 10px;
margin-bottom: 5px;
margin-top: 5px;
margin-left: 5px;
margin-right: 5px;
}
</style>
</head>
<body>
<h3 id="intro_title">5.5 새로운 문서 표준 HTML5 </h3>
<img src="WSC_logo.gif"
id="w3c_float"
width="72"
height="40">
<p>현재 W3C에서 표준안 개발을 하고 있는 HTML5는 차세대 웹문서 표준안으로 많은 관심이 집중되고 있다.
특히, 표준안 개발에 마이크로소프트, 모질라, 애플, 구글, 오페라 등 대다수 웹브라우저 개발사가 참여하고 있다. </p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
hgroup {
background-color: lightgray;
color: black;
padding: 20px 30px;
margin: 20px 20px;
border-top-right-radius: 40px;
border-bottom-left-radius: 40px;
box-shadow: 10px 10px 10px #888888;
}
</style>
</head>
<body>
<header class="MainTitle">
<hgroup>
<h1>HTML 5 웹프로그래밍 입문</h1>
<h2>5장. CSS3 스타일시트 기초</h2>
</hgroup>
</header>
<article>
<header>
<h1>CSS 개요</h1>
</header>
<p> CSS란 문서의 스타일을 정의하는 속성을 모아놓은 언어이다</p>
</article>
</body>
</html>