css - display

기본적으로 body는 margin:8px;정도 가지고 있다.
그래서 background-color나 image를 주면 양쪽에 미세한 하얀여백이 보인다.
그럴 경우

body{
margin:0px;
}

하면 해결된다.

🟣 flexbox

🔹 display:block

• span tag에 하면 div와 같은 한줄에 하나씩 출력

🔹 display:inline-block

• div tag에 하면 한줄에 여러개 출력

🔹 display:inline

• text내용이 없으면 보여지지 않음. 컨텐츠 자체만 꾸며진다. 그래서 내용이 입력되어 있어야 한다.

🔹 float:이미지와 텍스트 배치

• float:left
  이미지가 왼쪽으로 오고 오른쪽에 텍스트
• float:right
  이미지가 오른쪽으로 왼쪽에 텍스트 정렬

FlexBox는 container와 item으로 나눈다.
우선 🟣 container에 들어가는 속성값은
🔹 display:

• flex : 모든요소를 가로 한줄로 정렬.
• 부모에 적용하고 자손을 컨트롤함.

🔹 flex-direction :

• row : 열을 왼쪽->오른쪽
• row-reverse : 열을 오른쪽->왼쪽
• column : 중심축으로 부터 위->아래
• column-reverse : 중심축으로 부터 아래->위

🔹 flex-wrap :

• nowrap : (기본값)
• wrap : 한줄에 꽉차게되면 자동적으로 다음라인으로 넘어간다.
• wrap-reverse : 거꾸로

🔹 flex-flow :

• flex-direction과 flex-wrap을 합해서 쓸수 있다.
  예)flex-flow:row nowrap;

🔹🔹 justify-content :
중심축에서 아이템들을 어떻게 배치하는지 결정

• flex-start : 기본값
• flex-end : 오른쪽축으로 아이템 배치.(아이템의 순서는 유지하되,오른쪽 축으로)
• center : 가운데 배치
• space-around : 박스를 양쪽으로 spacing을 넣어서 배치
• space-evenly : 박스에 똑같은 spacing을 넣어서 배치
• space-between : 양쪽 끝엔 배치하고 중간에 spacing

🔹 align-items
반대축에서 아이템을 어떻게 배치하는지 결정

• center : 글자가 박스안에서 너무 위,아래로 붙어 있을 경우 가운데에 정렬
• baseline : 아이템이 균등하게 바뀜

🔹 align-content
반대축 아이템 지정

-space-between : ↕️세로로 중간에 spacing 생김