728x90
ALT+b를 눌러서 사이트 열고 F5눌러서 변경사항 확인하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{ //-> .box의 style 을 꾸미겠다
background-color: green; //-> 배경색 지정
width: 800px; //-> 넓이
height: 800px; //-> 높이
display: flex; |
flex-direction: column; | box를 기준으로 안에들은 것들을 가운데로 정렬
justify-content: center; |(4줄을 항상 같이 쓴다고 생각)
align-items: center; |
}
.first{ ->box 안의 first라 이름붙은 애를 꾸미겠다
background-color: red; ->배경색 지정
width: 300px; ->넓이
height: 300px; ->높이
margin-bottom: 10px; ->first의 아래로 10px띄우기
margin-bottom /top /right /left 가 있다.
}
.second{ ->box 안의 first라 이름붙은 애를 꾸미겠다
background-color: blue; ->배경색 지정
width: 400px; ->넓이
height: 400px; ->높이
}
</style>
</head>
<body>
<div class="box"> -><div class="box"></div> : 이름표 box 지정
<div class="first">첫 번째 박스</div> ->box 안에 속하는 이름표 first
<div class="second">첫 번째 박스</div> ->box 안에 속하는 이름표 second
</div>
</body>
</html>
728x90
'• program > 스파르타코딩클럽' 카테고리의 다른 글
| [CSS 기본내용] html:5 문법4 (제목만들기) (0) | 2022.01.29 |
|---|---|
| [CSS 기본내용] html:5 문법3 (배경채우기) (0) | 2022.01.29 |
| [CSS 기본내용] html:5 문법1 (0) | 2022.01.29 |
| [HTML 기본내용] VS code에서 html 파일생성/ 기본틀 (0) | 2022.01.29 |
| [스파르타코딩클럽] 덕담 공유 코딩 패키지 (0) | 2022.01.29 |