반응형
1. HTML Code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 1일차</title>
<!--외부 스타일 방식-->
<link href="css/ex02.css" rel="stylesheet">
</head>
<body>
<p class="bbb" id="bbb">아리가또 감사합니다</p>
<p>CSS 속성 이해하기</p>
<div>
<p id="abc">글자 관련 속성</p>
<p id="abc1">welcome to my world</p>
<p id="abc2">welcome to my world</p>
<p id="abc3">welcome to my world</p>
<p id="abc4">welcome to my world</p>
</div>
<div id="box">
<h1>안녕하세요</h1>
</div>
<!--
<p>
<h1>안되요</h1>
</p>
<h1>
<p>안되요</p>
</h1>
-->
</body>
</html>
2. CSS Code
@charset "utf-8";
/* CSS Document */
* {
margin: 0;
padding: 0;
}
p.bbb{
border:5px double red;
}
p#bbb{
text-align:center;
}
p#bbb.bbb{
font-style:italic;
}
p.bbb#bbb{
font-weight:bold;
}
div>p{
font-family:"궁서", sans-serif;
}
p#abc1{
font-family:sans-serif;
}
p#abc{
font-size:1.5em;
font-weight:bold;
}
#abc2{
font-variant:small-caps;
font-style:italic;
line-height:2;
background:pink;
}
div p#abc3{
font:italic small-caps bold 12px/24px "돋움";
}
div #abc4{
font:normal 24px/30px "맑은 고딕";
}
div#box{
width:200px;
height:200px;
background:cyan;
line-height:200px;
}
div#box h1{
text-align:center;
border:1px solid red;
margin-top:75px;
}
3. HTML / CSS 파일
ex02.html
0.00MB
ex02.css
0.00MB
4. HTML 미리보기
반응형
'Python_WEB > HTML' 카테고리의 다른 글
| HTML5 - 190608 Basic Study 19(CSS 구조 선택자) (0) | 2019.06.08 |
|---|---|
| HTML5 - 190608 Basic Study 18(CSS- Navigation Bar / 링크 바) (0) | 2019.06.08 |
| HTML5 - 190608 Basic Study 16(CSS Basic 1) (0) | 2019.06.08 |
| HTML5 - 190607 Basic Study 15(SNS 공유 Meta 태그) (0) | 2019.06.07 |
| HTML5 - 190607 Basic Study 14(학습지 개별 과정 Form - CSS) (0) | 2019.06.07 |
