<!DOCTYPE html>
<html>
<head>
<style type="text/css">
/* 전체선택자 *
* {
color: red;
font-size: 60px;
} */
/* 타입(태그) 선택자 */
ul {
color: blue;
}
/* 아이디선택자 # , html문서 안에서 딱 한번만 사용함*/
#id1{
font-size: 100px;
}
/* 클래스선택자 , html문서 안에서 여러번 사용함*/
.class1{
font-size: 100px;
}
</style>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<h1 id="id1">소방서</h1>
<p class="class1">경찰서</p>
<font>교도소</font>
<ul>
<li>국세청</li>
<li>청와대</li>
</ul>
</body>
</html>
=========================================
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
background-color: #607D8B;
font-size: 20px;
font-weight: bold;
}
p {
font-size: 20px; /* 글자의 크기 */
font-style: italic; /* 글자의 스타일 */
font-weight: 900; /* 글자 굵기 */
font-family: '나눔고딕'; /* 글씨채 */
}
summary {
font-size: 20px;
font-weight: bold;
}
ul {
font-size: 15px;
color: white;
}
ol{
font-weight: normal;
color: yellow;
font-size: 15px;
}
mark{
background-color: white;
}
table{
border-color: red;
border-spacing: 0.1px;
}
</style>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<p>구보니</p>
<p>김다영</p>
<details>
<summary>밥먹은 후 피해야 할 행동</summary>
<ul>
<li>바로 누워서 잔다</li>
<li>물을 많이 마신다.</li>
<li>과격한 운동을 한다.</li>
<li>꿈나라로 여행을 떠난다.</li>
</ul>
</details>
<br>
<table border="1">
<tr>
<td>
건강한 식습관
</td>
</tr>
</table>
<ol>
<li>과식하지 않기</li>
<li>자극적인 <mark>음식</mark> 피하기</li>
<li>균형적인 식단으로 섭취하기</li>
</ol>
</body>
</html>
================================
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.div1 {
font-size: 20px;
}
.div2 {
font-size: 2em;/* em은 나의 부모의 크기의 배수가 된다. */
}
.div3 {
font-size: 2rem;
}
</style>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<div class="div1">
구보니입니다.
<div class="div2">
Baam입니다.
<div class="div3">
박근혜입니다.
</div>
</div>
</div>
</body>
</html>
================================
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p {
letter-spacing: 30px;/* 글자간의 간격 */
line-height: 70px;/* 줄의 간격 */
text-decoration: underline;/* 줄의 위치 지정 */
text-shadow: 13px 10px 8px red;/* 글자의 그림자 */
text-align: center;/* 글자 정렬 */
color: gray;/* 글자 색깔 */
text-indent: 30px;/* 들여쓰기 */
}
</style>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<p>이명박</p>
<p>박근혜</p>
<p>우병우</p>
<p>안철수</p>
<p>홍준표</p>
</body>
</html>
================
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
background: gray;
}
p {
text-align: center;
line-height: 50px;
text-align: center;
}
.p1 {
font-size: 40px;
color: pink;
}
.p2 {
letter-spacing: 19px;
text-decoration: underline;
}
.p3 {
font-style: italic;
font-size:
}
</style>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<p class="p1">친애하는 국민 여러분 박근혜입니다.</p>
<p class="p2">오늘 구속이 되었습니다.</p>
<p class="p3">국민 여러분께 많은 폐를 끼치게 되어 송구스럽게 생각하고 있습니다.</p>
<p>제가 지은 모든 죄에 대한 벌을 달게 받겠습니다.</p>
</body>
</html>
하다가 말았음
============================================
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.div1 {
border-right-width: 5px;
border-right-color: red;
border-right-style: dotted;
border-left-width : 5px;
border-left-color : blue;
border-left-style: solid;
border-top-width: 3px;
border-top-color: yellow;
border-top-style: double;
border-bottom-width: 5px;
border-bottom-color: black;
border-bottom-style: groove;
height: 100px;
width: 100px;
}
.div2 {
/* 두께, 스타일, 색상 순이다. */
border: 1px solid red;
width: 100px;
height: 100px;
}
.div3 {
border: 1px solid green;
width: 100px;
height: 100px;
margin: 50px;
margin-top: 10px;
padding: 20px;
}
</style>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<div class="div1"></div><br>
<div class="div2"></div><br>
<div class="div3">김옥띠</div>
</body>
</html>
=============================
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
background: blue;
}
div {
width: 404px;
height: 405px;
background: white;
}
.div1 {
border: 1px solid red;
width: 100px;
height: 100px;
background: red;
}
.div2 {
border: 1px solid blue;
width: 100px;
height: 100px;
background: blue;
margin-left: 100px;
}
.div3 {
border: 1px solid green;
width: 100px;
height: 100px;
background: green;
margin-left: 100px;
margin-top: 100px;
}
.div4 {
border: 1px solid gray;
width: 100px;
height: 100px;
background: gray;
margin-left: 100px;
margin-top: 100px;
}
</style>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<div>
<div class="div1"></div>
<div class="div2">
<div class="div3">
<div class="div4"></div>
</div>
</div>
</div>
</body>
</html>
========================
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
background: whitesmoke;
text-align: center;
}
img {
width: 200px;
heigth: 40px;
margin-top: 50px;
}
input {
width: 400px;
height: 45px;
line-height: 50px;
border: 1px solid lightgray;
font-size: 15px;
}
.input1 {
margin-top: 50px;
}
.input2 {
margin-top: 10px;
}
.input3 {
background: green;
width: 400px;
height: 60px;
margin-top: 20px;
border: 0px;
font-size: 20px;
color: white;
background: limegreen;
}
</style>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<img alt="네이버로고" src="naver.png">
<br>
<input type="text" class="input1" placeholder="아이디">
<br>
<input type="text" class="input2" placeholder="비밀번호">
<br>
<input type="button" class="input3" value="로그인">
</body>
</html>
'노트필기' 카테고리의 다른 글
| [Web] class 0713-2 (0) | 2017.07.13 |
|---|---|
| [Web] class 0713-1 (0) | 2017.07.13 |
| [Web] class 0712-1 (0) | 2017.07.12 |
| [Web] class1-2 (0) | 2017.07.11 |
| [Web] Class01 (0) | 2017.07.11 |
