[TIL_05]CSS layout

border

• box의 경계

• border는 inline과 block 모두에 적용됨.

• *를 이용하면 모든 요소에 같은 효과를 줄 수 있다.
  (border말고 다른 속성들도 가능)
  ex. 모든 요소의 경계에 2px의 검은 실선을 준다면 아래와 같이 할 수 있다. 요소 대신에 *를 쓴다.

    *{
    border:2px solid black;
    }

padding

• box의 경계로부터 안쪽에 있는 공간

class

• 여러 요소들에서 원하는 만큼 사용 할 수 있다.
  ex.html에서 class="uaena"는 css에서 .uaena로 표시
• class는 여러개를 가질 수 있다.
  ex.class="lilac orange peach strawberry"

display:inline-block

• inline 요소를 block으로 바꿔줌
  →사방에 margin과 높이, 너비를 가질 수 있고 바로 옆에 다른 요소가 올 수 있음.

단점

• 요소 사이에 빈 공간이 자동적으로 생긴다
• 요소 사이의 간격이 일정하지 않는 등 정해진 형식이 없다.
  →inline-block은 반응형 디자인을 지원하지 않아서 브라우저 크기에 영향을 받는다.

flex-box

• 자식 요소를 움직이려면, 부모요소에만 명시해야한다.
• 부모 요소를 flex container로 만들기 위해 부모 요소에 display:flex;를 명시해준다.
  그리고나서 똑같이 부모요소에 자식요소를 옮기고 싶은 위치를 justify-content와 align-items로 명시해준다.

justify-content와 align-items에 대해서는 아래서 설명한다.

flex-container가 된 부모 요소에는 justify-content와 align-items가 있다.

기본적으로
justify-content 메인 축(main-axis)으로 가로정렬

align-items 교차축(cross-axis)으로 세로 정렬
이지만,
flex-direction에 의해 메인축인 justify-content가 세로정렬, 교차축인 align-items가 가로정렬이 되기도 한다.

flex-direction에는 크게 두가지 옵션이 있다.

• column - 주축은 수직이 되고 교차축은 수평으로 바꿈
• row - 요소가 수평으로 나열됨.(display:flex 했을 때 기본값)
  그 외 두가지는 mdn:flex-direction을 참고하자.

flex-wrap
flex-item의 요소를 한줄로 배치 할 것 인지 여러줄에 배치 할 것 인지에 대한 속성

• flex-wrap:nowrap;
  한줄 배치
• flex-wrap:wrap;
  한 줄에 들어가는 만큼 최대한 한 줄에 넣고 넘치면 다음 줄로 옮기는 기능
• wrap-reverse;
  부모요소 안 넘어가게 줄바꿈 하면서 역방향으로 요소를 보여줌
  

mdn:flex-wrap