[HTML&CSS] Block , Inline , Margin, Border, Padding, Flex

 

 

 

 

 

[HTML&CSS] Block , Inline , Margin, Border, Padding, Flex

( UPDATE  2023 - 05 - 25 )

 

---

블록과 인라인

---

 

• 블록은 한 줄을 온전히 차지한다. (옆에 못옴)

 

• 인라인은  한 줄 안에 같이 있다.

 

• 블록에 display: inline 을 하면 박스 속성을 유지하면서 옆에 다른 블록이 올 수 있다.

 

• 인라인에 display: block을 하면 블록처럼 한 줄을 온전히 차지한다.

 

• 인라인은 높이(height)와 너비(width)가 없다.

 

• 브라우저는 요소들에게 자체적으로 style을 주기도한다. (예를 들면, 원치않는 공간=margin)

 

• 블록은 박스이다.

 

 

 

---

margin , border , padding

---

 

 

• 박스는 세 가지 특징이 있다. : margin,border,padding

 

• margin은 border(경계) 밖의 공간이다.

 

• margin 값 줄 때 전체 혹은 상하/좌우 (padding 동일)

 

• collapsing margins 현상 경계가 같다면 부모와자식이 같이 마진이 동일하게 적용됨. 자식과 부모 간의 마진이 적용이안됨. 상하 margin에서만 일어남. 이때 padding 이용해서 해결

 

 

 

• padding은 border 안의 공간이다.

 

• border은 인라인과 블록 모두에 적용

 

• 인라인 요소는 margin의 좌우만 적용됨 . margin 상하 적용 안됨 (높이가 없기때문). 인라인을 블록요소로 바꿔줘야 적용됨

 

• id는 유일해야함. class는 중복 가능.

 

• inline-block은 블록으로 인식되지만 , 옆에 올 수 있음 (문제가 많음. 다른 걸 쓰는 게 좋음)

 

• inline-block은 반응형 디자인을 지원하지 않음. (문제)따라서 해상도에 따라 박스 들의 위치가 의도했던 곳이 아니라 이상한 곳에 위치할 수 있음

 

 

 

---

Flex

---

 

 

• inline-block의 해결방법 : flex-box 👉🏻display : flex;

 

 

• flex box의 규칙: 자식 요소에게 말하지 않는다. 즉, 부모 요소를 통해서만 자식 요소를 통제한다. 예) justify-content(주축) , align-items(교차축), height (100vh로 하면 화면을 꽉 채우게 됨) 등

 

---

주축과 교차축

---

 

 

 

• display : flex를 했을 때 flex-direction은 디폴트는 row(수평)이다.

 

• flex-direction을 column(수직)으로 하면 주축과 교차축을 바꿔버린다.

 

• column(또는 row)-reverse는 순서를 바꾼다.

 

• flexbox의 자식에게도 flex를 주고 자손들에게도 줄 수 있다 그렇지만 부모의 flex를 없애면 적용되지않는다.

 

• flexbox는 초기사이즈의 width만 신경쓰고 모든 엘리먼트를 같은 줄에 있게 하기위해 width를 변경하기도한다. (화면을 작게하면 짜부됨)

 

• 짜부 되기 싫다면 ‘flex-wrap: wrap;’ 을 줘서 해결가능. 짜부 되기 전에 아랫 줄로 밀어 버린다.

 

• wrap-reverse를 하면 짜부할 때 내려가는 순서를 변경하는 것.

 

 

 

---

출처

---

 

노마드 코더 코코아톡 클론코딩