*Html은 뼈대, Css는 꾸미기
-html은 구역이나 텍스트, Css는 구역을 꾸며주는것
html안에 style 속성으로 꾸미기 가능 > 이 속성들을 모아놓은 것이 Css
Html
html은 head 와 body로 구성
-head : 페이지의 속성 정보
-body에는 페이지의 내용
Css
html의 head 안에 <style> ~ </style> 사용
예)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.title{
background-color: gray; /* 배경 회색*/
width: 300px; /*가로길이*/
height: 300px; /*세로길이*/
margin: auto; /*가운데정렬*/
}
.head {
color: red;
background-color: blue;
}
.cont{
color: white;
background-color: black;
}
</style>
</head>
<body>
<div class = title>
<h1 class=head>제목</h1>
<h2>부제목</h2>
<div class = cont>
<li>1</li>
<li>2</li>
<li>3</li>
</div>
<button>
저장
</button>
</div>
</body>
</html>*<head>~</head> 안에있는 <style> ~</style>부분 >> Css
'Front-end' 카테고리의 다른 글
| Front-end] Ajax (0) | 2022.11.01 |
|---|---|
| Front-end] Javascript (0) | 2022.11.01 |
