마코's 개발일지

clip-path 사이트 

https://bennettfeely.com/clippy/

clip-path 좌표순서에 따른 의미

좌상 / 우상 / 우하 / 좌하 => 시계방향 순

1.flex박스를 사용하기 위해서는 우선 container와 items의 요소를 인식해야 한다.

- container : items를 감싸는 부모요소

- items : container의 영향을 받는 자녀요소

- container에 적용할 수 있는 속성과 items에 적용할 수 있는 속성이 서로 다르다.

2.그리고 flex박스의 가장 중요한 요소는 바로 direction(방향) 이다.

- flex-direction : row => display : flex 의 경우, 기본값이 row이며, 왼쪽에서 오른쪽으로 표시하는 것을 의미.

- flex-direction : column => 위에서 아래로 표시하는 것을 의미.

3.flex-direction에 따라서 "주축"과 "교차축"이 나눠진다.

- 만약 flex-direction이 row일 경우, 주축은 가로가 되며, 교차축은 세로가 된다.

4.flex-basis는 주축의 너비를 의미한다. (*flex-direction이 무엇이냐에 따라서 너비가 될수도 있고, 높이가 될수도 있다.)

5.flex-grow는 빈 공간을 채울지에 대한 여부를 의미한다. 기본값은 0이지만, 만약 숫자를 입력할 경우, 전체 길이에서 1의 영역을 차지하겠다는 의미이다. (*반대의 개념이 flex-shrink)

6.수직과 수평 정렬을 원하는 경우

- justify-content : 주축에서 아이템을 정렬하고 싶을 때 사용

- align-content : 수직축에서 아이템을 정렬하고 싶을 때 사용 (단, 2개 이상의 줄인 경우만 사용)

- align-items : 수직축에서 아이템을 정렬하고 싶을 때 사용 (단일 컨텐츠로도 사용가능)

7.부모 요소에 gap을 사용해주면 인접 items 사이에 공간을 떨어뜨려 주는 효과 발생

8.flex-wrap : 한줄에 아이템들이 많아졌을 경우, 그럼에도 한줄로 표기하게 하려면 nowrap / 화면구성상 한줄에 꽉 차게 되면 wrap으로 변경

*참고사이트

https://heropy.blog/2018/11/24/css-flexible-box/

1.float: left 속성을 display: inline-block으로 변경

2.부모요소에 text-align: center로 변경