Margin
HTML
<body>
<div class="box1">박스1</div>
<div class="box2">박스2</div>
</body>
CSS
.box1{
background-color: blue;
width: 80px;
height: 80px;
border: 10px solid black;
}
.box2{
background-color: red;
width: 100px;
height: 100px;
}
margin: top right bottom left;
margin: top-bottom left-right;
margin: 0 auto;
👉 top-bottom을 0으로, left-right을 자동으로
div.box1 입력하면
<div class="box1"></div>.mainbox{
border: 1px solid #ebebeb;
width: 610px;
text-align: right;
margin: 30px auto;
padding: 30px;
}- 메인박스 내의 텍스트를 오른쪽으로 옮기고,
전체적으로 30px을 띄워줌 - 박스 자체도 위아래는 30px로 띄워줌
🗒️ 정리
- HTML 파일을 만들고 한국어 파일로 설정
- Title, heading, paragraph, footer 적용
- CSS파일 만들고 HTML파일과 연결
- Footer : 텍스트 가운데로 옮기기, 배경색 - 검정, 글자색 - 흰색
- Footer : 3개 만들기
- Footer 1 : id를 이용해 큰 폰트
- Footer 2,3 : class를 이용해 작은 폰트
- Footer 한개 남기고 폰트 12로 맞추기
- 배경색(#1e1e1e), 글자색(#919191) 바꿔보기
- Footer를 제외하고 메인박스를 만든다.
- 메인박스 테두리 그리기 : 두께1, 직선, 글자색(#ebebeb)
- 넓이 610, 박스 가운데로, 텍스트 가운데로
- 새로운 html, css 파일에서 박스2개 만들기
(넓이 100, 높이 100, 배경-블루, 레드) - 박스1의 테두리 : 두께 10, 직선, 검정색
- 박스1&2의 크기를 맞추고, 삭제
(순서 외우기: margin, border, padding, content) - 메인박스 내의 텍스트를 오른쪽으로 옮기고,
전체적으로 30px을 띄워줌(padding) - 박스 자체도 위아래는 30px로 띄워줌 (margin)
- HTML/CSS 개발자 글씨(name-text) 변경
글크기 17, 글자색 #7c7c7c, 폰트두께 bold - footer의 padding : 20px
- footer태그 p안에 넣기 (HTML), CSS 정리하기
'프론트엔드 > 일단 만드는 HTML&CSS' 카테고리의 다른 글
| HTML/CSS Day 6 (0) | 2023.02.05 |
|---|---|
| HTML/CSS Day 5 (0) | 2023.02.03 |
| HTML/CSS Day 3 (0) | 2023.02.01 |
| HTML/CSS Day 2 (0) | 2023.01.31 |
| HTML/CSS Day 1 (0) | 2023.01.30 |
