8 - CSS START!!
Selector, Property, Value
Selector
HTML의 <p>
태그를 가리키고 있는 p
를 CSS에서는 선택자(selector)라고 부름
Property
font-size
color
에 해당하는 부분을 CSS에서는 속성(property)라고 부름
Value
14px
yellow
에 해당하는 부분을 CSS에서는 값(value)라고 부름
값은 프로퍼티와 짝을 이루어 사용됨. 보통 각 프로퍼티에 허용되는 값의 종류가 정해져있음
Box모델
block box vs inline-block
block
- 사용 가능한 공간을 양 옆으로 100% 사용하며, 사용하지 못하는 공간은 마진 영역으로 채움
width
, height
속성을 사용하여 스타일을 컨트롤 할 수 있음
- 패딩과 마진, 보더 속성을 사용하여 스타일을 컨트롤 할 수 있으며 해당 속성들이 다른 요소들을 밀어냄
- 대표적인 Block element :
<header>
, <footer>
, <p>
, <li>
, <table>
, <div>
, <h1>
inline-block
- 컨텐츠 박스만큼의 크기를 갖는다. 때문에 새 줄로 행을 바꾸지 않음
width
, height
속성을 사용 불가!
- 패딩과 , 보더 속성을 사용할 수 있지만 마진 속성은 좌우만 조절할 수 있다.
해당 속성들의 상하 값(top, bottom)들은 다른 요소들을 밀어내지 않는다.
- 대표적 inline 요소 :
span
, <a>
, <img>
width
, height
속성을 사용하여 스타일을 컨트롤 할 수 있음<header>
, <footer>
, <p>
, <li>
, <table>
, <div>
, <h1>
width
, height
속성을 사용 불가!해당 속성들의 상하 값(top, bottom)들은 다른 요소들을 밀어내지 않는다.
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>
태그는 인라인 요소이기에 패딩이 다른요소를 밀어내지않고 겹쳐서 보이게 함!
외부 디스플레이 타입
inline
div{ display:inline }
block
div{ display:block }
inline-block
div{ display:inline-block }
- inline 처럼 한 줄에 여러 요소가 존재할수 있다.
- block 처럼 width, height, margin, padding 등 모든 값을 지정할 수 있다.
- inline 속성의 특징과 block 속성의 특징이 함께 존재하는 박스
마진겹침
1. 서로상반된 요소
- 인접해있는 block요소 끼리만 일어난다. 상하단만 해당사항이있다.
- 요소와 요소의 사이에 마진 탑(margin-top) 혹은 마진 바텀(margin-bottom)의 공간이 있을 경우 더 높은 값의 마진 값이 적용되는 현상
<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;
}
/* 마진 값이 높은 쪽의 마진만 적용됩니다. */
2. 부모 자식요소
- 부모 요소와 자식 요소가 존재할 때, 자식 요소의 마진 탑 혹은 마진 바텀 값이 부모의 높이에 영향을 미치지 않는 현상
<div class="parent">
<div class="child"></div>
</div>
.parent{
background-color:yellow;
}
.child{
width:100px;
height:100px;
margin-top:50px;
background-color:red;
}
/* 부모의 높이를 따로 지정하지 않으면 자식의 높이만큼 부모의 높이가 지정됩니다.
하지만 위와 같은 경우 자식의 마진 탑, 바텀 값이 부모의 높이에 영향을 미치지 않게 됩니다. */
- parent의 margin-top이 적용안됨을 볼 수 있음
- 위 그림처럼 .child 요소의 마진 값이 부모 영역을 넘어서고 있는 모습을 확인할 수 있다.
- 이런 현상을 해결하지 않는다면 여러분의 생각과 다른 UI가 구성될 가능성이 있다.
- 예를 들어 부모와 자식요소 모두에게 마진탑을 주고 싶은 경우 낮은 값의 마진 탑 값이 상쇄되어 버림.
해결방법!!
- 부모 요소에 overflow 속성 값을 적용 (overflow: hidden)
- 부모 요소에 display: inline-block 값을 적용
- 부모 요소에 border 값을 적용 (border: 1px solid transparent)
이 세 가지 방법 중에 상황에 가장 알맞는 방법을 이용하기!
기타
맨날 헷갈렸던 margin, padding, border 한줄에 쓰기!
/*[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
border-box
<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크기에 맞춰짐!
Author And Source
이 문제에 관하여(8 - CSS START!!), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@sgsg9447/TIL8-CSS-START저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)