170920 #009

display

block level

<div> :

width와 height만 지정해도 구현된다.

그러나, display: inline 의 attr을 부여하면, span과 같은 기능을 수행한다.

한 줄에 한 개.

 

inline level

<span> :

width와 height를 지정해도, 안에 내용이 있어야 구현된다.

부여된 span 자체의 attr를 무시하고, 그 안에 있는 content에 맞춰서 구현된다. 

그러나, display: block 의 attr을 부여하면, div와 같은 기능을 수행한다.

 

inline-block level

: block단위지만, 가능한한 한 줄에 구현되게 만든다.

 

 

position

div에게 이 attr만 부여한다고 위치가 변하지 않는 이유는 position 의 default값이 static이기 때문이다.

먼저 position: relative의 attr를 부여하면 부여한 left, top과 같은 attr가 적용되는 것을 확인할 수 있다.

relative는 원래 있어야하는 자리(inherit)에서 또 움직이게 하는 거라, 

예를 들어 body안에 article이 있고, 그 article 안에 div가 있다고 가정할 때, article이 relative로 top에서 10px, left에서 10px 떨어져 있다. 그렇다면 div역시 아무런 attr가 없어도 article이 이동한 만큼 움직이게 되는데,

 

여기서 div도 relative로 다른 위치 변환 attr를 주면 0 base에서부터 이동하는 것이 아니라, article에서 원래 자기가 있던 '상대적' 위치에서 움직이게 된다.

 

하지만 div에 absolute를 주게 되면, 가장 '가까운' 상위 태그 (여기선 article) 안에서 움직이게 된다. 즉, article의 맨 왼쪽 상단에서부터 움직이게 된다.

 

div에 fixed를 주게 되면, 아예 article에서 벗어나 window의 처음부터 움직이게 된다.

 

div에 sticky를 주게 되면, 원래 있던 자리 거기에 있는데 scolling되어도 원래있던 자리에 그대로 붙어있는 것이다.

 

 

 

---

CSS 관련 공부가 덜 된 것 같아서, 먼저 아직 개념이 제대로 잡히지 않는 부분들을 집고 가야겠다.

 

먼저 display

 

display 종류에는

 

display: inline;

display: block;

display: inline-block;

이렇게 3가지가 존재한다.아니네 더 많다

inline	Displays an element as an inline element (like <span>). Any height and width properties will have no effect
block	Displays an element as a block element (like <p>). It starts on a new line, and takes up the whole width
contents	Makes the container disappear, making the child elements children of the element the next level up in the DOM
flex	Displays an element as a block-level flex container
grid	Displays an element as a block-level grid container
inline-block	Displays an element as an inline-level block container. The element itself is formatted as an inline element, but you can apply height and width values
inline-flex	Displays an element as an inline-level flex container
inline-grid	Displays an element as an inline-level grid container
inline-table	The element is displayed as an inline-level table
list-item	Let the element behave like a <li> element
run-in	Displays an element as either block or inline, depending on context
table	Let the element behave like a <table> element
table-caption	Let the element behave like a <caption> element
table-column-group	Let the element behave like a <colgroup> element
table-header-group	Let the element behave like a <thead> element
table-footer-group	Let the element behave like a <tfoot> element
table-row-group	Let the element behave like a <tbody> element
table-cell	Let the element behave like a <td> element
table-column	Let the element behave like a <col> element
table-row	Let the element behave like a <tr> element
none	The element is completely removed
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.

 

 

position: relative ?

 

position: static

HTML elements are positioned static by default.

Static positioned elements are not affected by the top, bottom, left, and right properties.

An element with position: static; is not positioned in any special way; it is always positioned according to the normal flow of the page:

 

position: relative > 이제 포지션을 나를 기준으로 해! 라는 명령

An element with position: relative; is positioned relative to its normal position.

Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.

 

position: fixed

An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.

A fixed element does not leave a gap in the page where it would normally have been located.

 

position: absolute

An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).

However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.

 

position: sticky

An element with position: sticky; is positioned based on the user's scroll position.

A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed).

 

 

margin: 0 auto ?

 

If the margin property has two values:

• margin: 10px 5px;
  • top and bottom margins are 10px
  • right and left margins are 5px

margin: auto 

The browser calculates a margin

 

 

box-sizing: border-box ?

The box-sizing property allows us to include the padding and border in an element's total width and height.

Defines how the width and height of an element are calculated: should they include padding and borders, or not