📝 CSS
🖥️ 1. 박스
1-1. html 엘리먼트 구분
- block element : 화면 전체를 사용하는 태그
✔️ 한 개의 독립된 덩어리 = 하나의 큰 그룹
✔️ 블록 레벨 요소는 다른 블록 레벨 요소와 인라인 레벨 요소를 포함할 수 있다.
- inline level element : 화면의 일부를 차지하는 태그
✔️ "행 안의 일부"라는 의미로, "텍스트와 동격의 요소"이기 때문에 "텍스트 레벨 요소"라 부르기도 한다.
✔️ 블록 레벨 요소는 포함할 수 없으며, 인라인 레벨 요소는 반드시 블록 레벨 안에 포함되어 있어야 한다.
1-2. 박스의 기본 크기를 결정하는 특성
- 가로축 : 부모를 가득 채운다.
- 세로축 : 자신이 포함하고 있는 내용만큼 설정이 된다. 내용이 없으면 높이가 형성되지 않는다.
EX)
<head>
...
<style>
#box1{ background-color: tomato; }
#box2{ background-color: greenyellow; }
#box3{ background-color: powderblue; }
</style>
</head>
<body>
<div id="box1">빨강 박스</div>
<!-- 내용이 없는 box2는 표시되지 않는다. -->
<div id="box2"></div>
<div id="box3">파랑 박스</div>
</body>
1-3. 박스의 크기를 구성하는 속성의 종류
EX)
<head>
...
<style>
div{ width: 200px; height: 50px; }
.box1{ background-color: rgb(124, 225, 142); }
.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>
</head>
<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/>
</body>
1-4. padding 속성
- 값의 지정 형식
- 4개 : 공백으로 구분하여 4개의 값을 지정할 경우 첫 번째 값이 상단 여백, 그 후 우측 / 하단 / 왼쪽 순서로 (시계방향) 적용된다.
- 2개 : 공백으로 구분하여 2개의 값을 지정할 경우 첫 번째 값은 "상/하", "좌/우"로 지정한다.
- 1개 : 상 / 하 / 좌 / 우 모두 같은 크기의 여백을 지정한다.
1-5. auto 값의 사용
- 남은 공간을 계산하여 자식 요소를 부모의 가운데로 위치하도록 하기에는 너무 많은 수식이 필요하다.
- width, height, margin에 대하여 적용할 수 있는 특수한 값으로, 어떤 속성에 적용되느냐에 따라 동작하는 원리가 달라진다.
width:auto✔️ 부모 요소의 width 값으로부터 padding과 border의 크기를 뺀 나머지 값을 자동으로 계산하여 width에 적용한다.
✔️ 부모 요소의 width-(border-left+padding-left+padding-right+border-right)
height:auto✔️ 자신이 포함하고 있는 내용 영역에 대한 높이만큼 height를 설정한다.
1-6. 위치 관련 속성의 특징
- + 값의 지정 : 원래 정해진 방향으로 이동한다.
- - 값의 지정 : 반대 방향으로 이동한다.
1-7. mar 속성의 -값
- + 값의 지정 : 반대방향으로 밀어낸다.
- - 값의 지정 : 안쪽으로 끌어당긴다.
📝 예제
EX)
<head>
...
<style>
p{ border: 10px dotted tomato;
padding: 40px;
margin: 40px; }
</style>
</head>
<body>
<p>
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
</p>
<p>
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
</p>
</body>
EX)
<head>
...
<style>
/* 전체적용 */
*{ box-sizing: border-box; }
div{ margin: 10px; width: 150px; /* box-sizing: border-box; */ }
#small{ border: 10px solid tomato; }
#large{ border: 30px solid powderblue; }
</style>
</head>
<body>
<div id="small">Hello</div>
<div id="large">Hello</div>
</body>
EX)
<head>
...
<style>
.parent{
background-color: powderblue;
border: 10px dotted blue;
width: 90%;
height: auto;
}
.child{
background-color: orange;
/* 부모의 width에서 자신의 padding 값과 border 값을 제외한
나머지를 자동으로 계산 */
width: auto;
padding: 10px 20px;
border: 5px solid red;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">HTML & CSS</div>
</div>
</body>
EX)
<head>
...
<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>
<body>
<div>
박스
</div>
</body>EX)
<head>
...
<style>
p.box{
background-color: tomato;
height: 100px;
width: 80%;
padding: 10px;
}
.corner1{ border-radius: 20px; }
.corner2{ border-bottom-left-radius: 20px;
border-top-right-radius: 20px; }
.corner3{ border-radius: 20px 0 20px 0; }
</style>
</head>
<body>
<section>
<p class="box corner1">박스1</p>
<p class="box corner2">박스2</p>
<p class="box corner3">박스3</p>
</section>
</body>
EX)
<head>
...
<style>
body{ padding: 0px; margin: 0px; }
#menu{
width: 100%;
height: 200px;
background-color: orange;
/* 부여된 값만큼 밖으로 벗어난다. */
margin-top: -180px;
transition: all 0.3s;
}
#menu:hover{
margin-top: 0px;
background-color: orangered;
}
</style>
</head>
<body>
<div id="menu">
메뉴영역
</div>
</body>EX)
<head>
...
<style>
div#parent{
background-color: orange;
width: 800px;
height: 500px;
border: 5px solid blue;
/* 가운데 정렬 */
margin: auto;
}
div#child{
background-color: tomato;
padding: 10px;
border: 5px solid red;
width: 500px;
/* parent를 기준으로 가운데 정렬 */
margin: auto;
}
</style>
</head>
<body>
<div id="parent">
<div id="child">박스2</div>
</div>
</body>
