K_blueprint
HTML로 박스 만들기 본문
반응형
[ HTML 태그는 사각형 박스로 다루어진다. ]
- CSS에서의 '사각형'은 콘텐츠를 둘러싸고 있는 '패딩(padding)', '테두리(border)', '여백(margin)'으로 구성된다.
- 콘텐츠 : HTML 태그의 텍스트나 이미지 부분
- 패딩 : 콘텐츠를 직접 둘러싸고 있는 내부의 여백
- 테두리 : 패딩 외부의 외곽선으로 직선, 점선이나 이미지로 입히는 것이 가능
- 여백 : 박스의 맨 바깥 영역으로 테두리 바깥 공간으로 아래위 인접한 태그와 만나는 공간이다.
- 쉽게 그림으로 설명하자면 아래와 같다.
[ 박스를 제어하는 CSS3 프로퍼티 ]
- 박스의 색 또는 모양도 프로퍼티에 적절한 값을 부여함으로써 조절이 가능하다.
- 아래는 각각의 프로퍼티에 값을 부여해서 박스의 크기를 조절하는 예시 코드와 출력 결과이다.
(소스코드)
<!DOCTYPE html>
<html lang="en">
<head>
<title>박스 가지고 놀기</title>
<!--Div에 부여할 클래스 속성 선언(박스 모양 설정)-->
<style>
div.box{
width : 100px;
height : 50px;
margin : 40px;
border-width : 30px;
padding : 20px;
}
</style>
</head>
<body>
<div class = "box">
Contents Section
</div>
</p>
</body>
</html>
(출력결과)
육안으로 보기에는 구역마다 배경색을 입히지 않아 잘 모르겠지만
'개발자 도구'를 통해서 영역이 정상적으로 할당된 크기만큼 분할되어 있는 것을 확인할 수 있다.
★ 해당 게시물은 "HTML5 + CSS3 + Javascript 웹 프로그래밍"도서를 참고하여 작성하였습니다. ★
728x90
반응형
'HTML & CSS & Java script' 카테고리의 다른 글
| HTML5로 테두리 꾸미기(2) (1) | 2024.11.23 |
|---|---|
| HTML5로 테두리 꾸미기(1) (4) | 2024.11.22 |
| HTML5로 텍스트 꾸미기 (1) | 2024.11.19 |
| HTML5로 색 꾸미기 (0) | 2024.11.18 |
| CSS3 규칙과 셀렉터 (0) | 2024.11.15 |
'HTML & CSS & Java script' Related Articles
more
