box
박스
html 엘리먼트 구분
-block element : 화면 전체를 사용하는 태그
->한 개의 독립된 덩어리 = 하나의 큰 그룹
->블록 레벨 요소는 다른 블록 레벨 요소와 인라인 레벨 요소를 포함할 수 있다.
-inline level element : 화면 일부를 차지하는 태그
->"행 안의 일부"라는 의미로,"텍스트와 동격의 요소"이기 때문에 "텍스트 레벨요소"라 부르기도 한다.
->블록 레벨 요소는 포함할 수 없으며, 인라인 레벨 요소는 반드시 블록 레벨 요소 안에 포함되어 있어야 한다.
-
박스의 기본 크기를 결정하는 특성
-가로축:부모를 가득 채운다
-세로축:자신이 포함하고 있는 내용만큼 설정이 된다. 내용이 없으면 높이가 형성되지 않는다. -
박스의 크기를 구성하는 속성의 종류
-
padding 속성
-
값의 지정 형식
-4개 : 공백으로 구분하여 4개의 값을 지정할 경우 첫번째 값이 상단여백, 그 후 우측, 하단, 왼쪽 순서로 시계방향으로 적용된다.
-2개 : 공백으로 구분하여 2개의 값을 지정할 경우 첫 번째 값은 "상/하", 두 번째 값은 "좌/우"로 지정한다.
-1개: 상/하/좌/우 모두 같은 크기의 여백을 지정한다. -
auto값의 사용
-남은 공간을 계산하여 자식 요소를 부모의 가운데로 위치하도록 하기에는 너무 많은 수식이 필요하다.
-width,height,margin에 대해 적용할 수 있는 특수한 값으로 어떤 속성에 적용되느냐에 따라 동작하는 원리가 달라진다.
-width: auto
->부모 요소의 width값으로부터 padding과 border의 크기를 뺀 나머지 값을 자동으로 계산하여 width에 적용
->부모요소의 width-(border - left +padding-left+ padding-right+border-right)
-height:auto
->자신이 포함하고 있는 내용 영역에 대한 높이만큼 height를 설정
코드 예시
<style>
#box1{background-color: tomato;}
#box2{background-color: green;}
#box3{background-color: powderblue;}
</style>
</head>
<body>
<div id = "box1">빨강박스</div>
<div id = "box2"></div>
<div id = "box3">파랑박스</div>
</body>
이러한 형태로 출력된다. background-color를 통해 배경색의 지정. style태그를 이용한다.
<body>
<div class = "box1">박스1</div><br/>
<div class = "box2">박스2</div><br/>
<div class = "box3">박스3</div><br/>
<div class = "box4">박스4</div><br/>
<style>
div{width: 200px; height: 50 px;}
.box1{background-color: rgb(251, 59, 115);}
.box2{background-color: #00ff00; border: 10px solid #000000;}
.box3{background-color: orange; padding: 10px;}
.box4{background-color: powderblue;
border: 10px solid black; padding:10px;}
</style>
</body>
이 코드에서 주목해야 할 점은 border를 지정했다는 점이다. border를 통해 테두리를 만들어 준다. width는 좌우 길이, height는 높이를 말한다.
<style>
p{
border:10px dotted tomato;
padding: 30px;
margin:100px;
}
</style>
</head>
<body>
<p>
t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of
using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using
'Content here, content here', making it look like readable English. Many desktop publishing packages and web
</p>
<p>
t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of
using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using
'Content here, content here', making it look like readable English. Many desktop publishing packages and web
</p>이 코드에서 주목해야 할 부분은 당연히도 padding과 margin이다.
현재 모양은 이것이다. 이제 padding을 바꿔보자.
30px이던 패딩 값을 100으로 바꿔봤다. 차이가 보이는가? 전체 네모칸의 크기가 변했다. 그럼 margin을 바꿔보자.
margin값을 100에서 10으로 바꿔봤다. 두 칸의 거리가 줄어들지 않았는가?
margin은 선과 바깥과의 여백값을 말한다.
더 명확히 padding과 margin을 보여주는 코드가 있다.
<style>
/*HTML은 body안에서 높이에 대한 100%가 정의되지 않는다.
height값을 100%로 부여하기 위해서는 그 부모 요소에 대한 크기가 명시되어야 기준으로 삼을 수 있기 때문이다.*/
div{
background-color:tomato;
width: 100%;
height: 100%
}
/*body태그에 기본적으로 적용된 padding,margin을 off시킨다.*/
body{
padding:0px;
margin:0px;
}
</style>
</head>
현재는 padding과 margin값이 0이다. 둘 다 100을 줘보자.
이렇게 변하는 걸 알 수 있다. 개발자 도구로 더 자세히 보면
margin과 padding값이 100으로 변경되어 있는 것을 알 수 있다.
기존과는 확연히 다름을 알 수 있다.
좋은 정보 얻어갑니다, 감사합니다.