#3.6 Paddings and IDs
ID 는 고유한 값.
padding: border(경계)로부터 안쪽.
#3.7 Border
border: box의 경계.
#3.8 Classes
inline은 모든 속성이 다 적용되지 않고, 일부만 적용되는 경우도 있다. block으로 바꿔주면 된다.
요소를 가리킬 수 있으면서도 겹쳐도 되는 방법. 여러 요소들이 사용할 수 있도록. => class
.(classname) 로 사용하면 된다.
#tomato는 id="tomato"라는 뜻과 같다.
.tomato는 class="tomato"라는 뜻과 같다. class는 유일할 필요가 없다. 여러 개의 class명을 가질 수도 있다. <span class=tomato hello honey potato> id는 여러 개를 가질 수 없다.
#3.9 Inline Block
div는 기본적으로 block. display: inline; 으로 바꿔주면 브라우저에 아무것도 보이지 않게 된다. inline은 너비랑 높이를 가질 수 없기 때문.
inline-block은 block으로 인식하게 한다. 높이도 가질 수 있고, 사방에 margin도 가질 수 있다. 그리고 바로 옆에 다른 요소가 올 수 있다.
그러나 문제가 많다. 우선 default 값으로 주어진 것에 문제가 있다. 요소들 사이에 빈 공간이 있다. 이유는 모른다.
⬆️ margin, padding 없는데 공간이 있다. 우리는 이 공간을 만들지 않았다.
또 다른 단점은 정해진 형식이 없다는 것이다. 박스를 크게하면 요소들 사이에 빈 공간이 좁아졌다. 이유는 모른다.
inline-block은 responsive design(반응형 디자인)을 지원하지 않는다. 창 크기가 달라지면 영향을 받는다는 것이다. 모니터의 크기에 따라 달라진다는 것이다. (한 줄에 박스들을 넣기 위해 margin-right: 10.015px; 로 지정했는데, 창 크기가 달라지면 아무 소용없다. ) inline-block에 대해서는 display 속성 중에 이런 옵션도 있다는 정도로 알아두면 된다.
<정리>
block을 inline속성으로 바꾸면 오류가 발생한다.
대신 display : inline-block을 활용하면 inline으로 block을 사용할 수 있음.
하지만
1. 정해진 형식이 없으며
2. 개체간 거리가 있음
3. respponsive design(반응형 디자인)을 지원하지 않음. => 개인마다 통일된 디자인이 아님.
=> suck
flex로 해결할 수 있음.
