728x90
Box 다루기
- 기초 단축키
- 주석 : ctrl + /
- 라이브 서버 실행 : ALT + L + O
- HTML 기본 구성 요소 꺼내기 : ! + Enter
HTML 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width : 300px;
height : 300px;
border : 15px solid gray;
padding : 20px;
background-color: moccasin;
}
.bb{
box-sizing: border-box;
background-color: skyblue;
}
</style>
</head>
<body>
<div class = 'cb'>
</div>
<p>content-box</p>
<div class = 'bb'>
<p>border-box</p>
</div>
</body>
</html>
<div></div>에서 전체 컨텐츠에 대한 형식을 지정합니다.
이 경우에는 너비, 높이, 테두리 넓이, padding, 배경색을 지정했습니다.
.bb 클래스에 대해서는 box-sizing을 별로도 border-box로 만들고, 색도 다르게 설정했습니다.
이렇게 꾸미는 과정을 진행하기 위해서는 <head></head> 안에 <style></style>을 만들고 진행합니다.
출력 결과
출력 결과는 위와 같습니다.
cb 클래스는 별도의 꾸미는 과정을 진행하지 않아 div의 내용이 그대로 적용되었고, 그 안에 p 태그를 통해 대입한 content-box 텍스트가 삽입되었습니다.
bb 클래스에는 div 외에 새롭게 정의한 내용인 border-box가 적용되었음을 확인할 수 있습니다.
위의 box와 마찬가지로 p 태그를 통해 텍스트를 추가했습니다.
728x90
'HTML 기초' 카테고리의 다른 글
| HTML - Table 다루기 (0) | 2024.04.14 |
|---|