[파일과 폴더]
- 파일과 폴더이름을 작성할 때는 호스팅을 위해 영문으로 작성한다.
- 띄어쓰기 없이 작성해야 호스팅할 때 문제가 없다.
* 호스팅이란, 서버에 업로드 하는 것
[그리드]
- 화면이 작은 사용자를 위해 적절히 크기를 조정하고 중앙으로 정렬한 상태에서 그 안에서만 디자인하는 용도
- 보통은 고정형사이트에서 작게 사용하지만 심미적인 요소로 반응형에서도 작은 그리드를 사용하기도 한다.
[block, flex-container]
- 브라우저에서 도형 취급 받는 요소이다.
- width: auto = 100%으로 작동한다.
- hieght: auto = 0으로 작동한다.
- 크기가 아무리 작아도 한 줄에 한 개씩 배치된다.
[auto = 0]
- 하위 요소 크기만큼 크기를 가지겠다는 뜻.
- height: 0; 이라는 코드와는 다르다.
height: 0; 는 높이가 없다. height: auto = 0는 하위요소 높이만큼 높이를 가지겠다라는 뜻.
[한 줄에 같이 배치]
- inline : 너비 높이를 커스텀 x
- inline-block : 여백이 생긴다.
- flex-item : 좋은 선택지
- float : 웹디자인기능사 시험에서 사용
[flex-container]
- flex가 적용된 태그
- 정렬 속성은 flex-container에 사용한다.
*정렬 속성 (justify-content, align-items, flex-wrap, align-content을 이용함.)
- 여백 속성도 한 번에 적용되기 때문에 flex-container에 적용한다.
*여백 속성 (gap을 이용함.)
[flex-item]
- flex가 적용된 태그의 자식
- 개별적으로 커스텀이 가능한 속성은 flex-item에 사용된다.
ㄴflex-grow, flex-basis, align-self, flex-shrink
- flex-item은 width: auto = 0 으로 작동한다.
ㄴ너비를 커스텀하는 방법은 여러가지가 있다.
* width: 고정px; width: 100%; flex-grow: ;
ㄴwidth: 100%;줄바꿈 되는 flex-item에 활용되거나 max-width를 사용해야하는 flex-item에 같이 사용한다.
ㄴflex-grow: ;는 flex-item들끼리 같은 비율을 가져야 하거나, 사용하고 남는 공간을 사용해야 할 때 활용한다.
(flex-grow)
- 여백이 없다.
- 남는 공간을 모두 차지한다.
- flex-grow: ; 비율로 나누어 공간을 차지한다.
- 사이의 여백을 만들고 싶을 때에는 gap을 사용한다.
(flex-basis)
- 안에 들어가는 값을 무시하고 원래대로 사용하고 싶을 때에는 flex-basis:0;을 사용해주면 된다.
