box-sizing
box-sizing 속성을 사용해 이 방식을 바꿀 수 있습니다.
-
content-box : 기본 CSS 박스 크기 결정법을 사용합니다. 요소의 너비를 100 픽셀로 설정하면 콘텐츠 영역이 100 픽셀 너비를 가지고, 테두리와 안쪽 여백은 이에 더해집니다.
-
border-box : 테두리와 안쪽 여백의 크기도 요소의 크기로 고려합니다. 너비를 100 픽셀로 설정하고 테두리와 안쪽 여백을 추가하면, 콘텐츠 영역이 줄어들어 총 너비 100 픽셀을 유지합니다. 대부분의 경우 이 편이 크기를 조절할 때 쉽습니다.
block VS inline
block 요소
<address>, <article>, <aside>, <blockgquote>, <canvas>, <dd>, <div>, <dl>, <hr>, <header>, <form>,<h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <table>, <pre>, <ul>, <p>, <ol>, <video>- 사용 가능한 최대 가로 너비를 사용함 ( 기본 너비값은 100% )
- 전체를 차지하기 때문에 각 요소들이 수직으로 쌓임 ( 한 줄에 한개만 배치 )
- 크기값 가질 수 있음 ( 가로 너비 & 세로 길이 지정 가능 )
- 상하좌우 마진 & 패딩을 가질 수 있음
- 레이아웃을 작업하는 요소로 적합
inline 요소
<a>, <i>, <span>, <abbr>, <img>, <strong>, <b>, <input>, <sub>, <br>, <code>, <em>, <small>, <tt>, <map>, <textarea>, <label>, <sup>, <q>, <button>, <cite>- 사용 가능한 필요한 만큼의 영역을 사용함 ( 컨텐츠 너비 만큼 )
- 요소들이 수평으로 쌓임 ( 한 줄에 여러개 배치 )
- 크기값 가질 수 없음 ( 사이즈 지정 불가능 )
- 상하 마진 적용 불가능
( *좌우마진은 가능한데 html에서 띄어쓰기가 두 칸이상 불가능하니 허용해준 것) - 텍스트를 작업하는 요소로 적합
td같은 경우는 특별하게 table-cell 이라는 속성을 갖고 있다. 신기하다! 직접 해보니 width값 적용도 되는데 기본은 inline이더라!
마진겹침현상 / 블록레벨의 요소들은 겹칠 때 하나를 무시하게 되어있는데 이것이 자연스럽고 편한 것이다. 생각해보면 안다! 블록과 블록 끼리만! 인라인블록도 X
h1안에 있는 txt
h1은 블럭요소지만 txt는 inline요소다. 그래서 그 txt 가운데정렬 하고 싶으면 text-align: center 하는 것이다. margin을 주는 것이 아니다.
initial
The initial CSS keyword applies the initial (or default) value of a property to an element.
The initial value of a CSS property is its default value, as listed in its definition table in the specification. The usage of the initial value depends on whether a property is inherited or not:
- For inherited properties, the initial value is used on the root element only, as long as no specified value is supplied.
- For non-inherited properties, the initial value is used on all elements, as long as no specified value is supplied.
If the cascaded value of a property is the initial keyword, the property’s specified value is its initial value.
example
height initial = auto; / 자식요소 기준
width: initial = auto; / 부모요소 기준
margin initial = 0;
태그 볼 때 상속이 되는 태그인지 확인하는 것도 좋은 습관입니다😃
unset property
CSS unset 키워드를 적용한 속성은, 부모로부터 상속할 값이 존재하면 상속값을, 그렇지 않다면 초깃값을 사용합니다. 다르게 표현하자면, 전자일 땐 inherit 키워드처럼, 후자일 땐 initial 키워드처럼 동작합니다. all 단축 속성을 포함한 모든 속성에 사용할 수 있습니다.
IE에서 지원안해서 쓰기 까다로움.
쓰면 천국.
