HTML의 <p>
태그를 가리키고 있는 p
를 CSS에서는 선택자(selector)라고 부름
font-size
color
에 해당하는 부분을 CSS에서는 속성(property)라고 부름
14px
yellow
에 해당하는 부분을 CSS에서는 값(value)라고 부름
값은 프로퍼티와 짝을 이루어 사용됨. 보통 각 프로퍼티에 허용되는 값의 종류가 정해져있음
width
, height
속성을 사용하여 스타일을 컨트롤 할 수 있음<header>
, <footer>
, <p>
, <li>
, <table>
, <div>
, <h1>
width
, height
속성을 사용 불가!span
, <a>
, <img>
<style>
h1 {
/* box-sizing: border-box; */
width: 300px;
height: 200px;
padding: 30px 30px 30px 30px;
border: 3px solid black;
margin: 50px 50px 50px 50px;
}
strong {
border: 10px solid black;
padding: 100px;
}
</style>
<body>
<h1>안녕하세요 여러분!!</h1>
<strong>여러분은 강합니다!!</strong>
<strong>만나서 반가워요!!</strong>
<strong>배고파요 ㅠㅠ</strong>
</body>
<strong>
태그는 인라인 요소이기에 패딩이 다른요소를 밀어내지않고 겹쳐서 보이게 함!div{ display:inline }
div{ display:block }
div{ display:inline-block }
<div class="first"></div>
<div class="second"></div>
div{
width:100px;
height:100px;
border:1px solid black;
}
.first{
margin-bottom:30px;
}
.second{
margin-top:60px;
}
/* 마진 값이 높은 쪽의 마진만 적용됩니다. */
<div class="parent">
<div class="child"></div>
</div>
.parent{
background-color:yellow;
}
.child{
width:100px;
height:100px;
margin-top:50px;
background-color:red;
}
/* 부모의 높이를 따로 지정하지 않으면 자식의 높이만큼 부모의 높이가 지정됩니다.
하지만 위와 같은 경우 자식의 마진 탑, 바텀 값이 부모의 높이에 영향을 미치지 않게 됩니다. */
이 세 가지 방법 중에 상황에 가장 알맞는 방법을 이용하기!
/*[1]*/
border-color: red;
/*[2]*/
border-color: red green;
/*[3]*/
border-color : red green blue;
/*[4]*/
border-color : red green blue yellow;
[1] : 네 면에 동일하게 적용
[2] : (top bottom), (left right)
[3] : (top), (left right), (bottom)
[4] : top, right, bottom, left
<style>
* {
margin: 0;
}
h1 {
width: 200px;
height: 130px;
border: 3px solid #228b22;
padding: 10px;
/* box-sizing: border-box; */
}
</style>
</head>
<body>
<h1>hello</h1>
</body>
Q. h1 box의 크기는?
A. 226이다.
why? width 200 + padding (102) + border (32)
Q. 박스의 크기를 200으로 맞추고 싶으면 ?
A. <style>
에 box-sizing: border-box; 해주면 content크기에 맞춰짐!