웹4_복습

복습

삼성디자인 flex 복습

 

파일명과 폴더명

- 한글로 작명하면 안된다. 호스팅이 불가능하다.

- 띄어쓰기 없이 작성해야 한다.

파일과 폴더

- 파일 : 확장자가 붙어있는것

- 폴더 : 파일 정리해주는것(파일 바구니)

 

확장자

jpg, png, html, css, js, svg, exe 등등

 

그리드

- 화면이 작은 사용자를 위해 픽셀을 고정시켜서 중앙에 정렬

이안쪽에서부터 디자인 시작

- 반응형도 상황에 맞춰 작은 그리드를 사용할때가 있다. (레이아웃이 너무 퍼져보이는 경우)

 

박스화

- 퍼블리싱: 어떤 레이아웃에 끼워도 유지보수가 쉽도록 박스화를 진행한다.

- 디자인: 개발자가 수치확인을 할 수 있고, 수정이 쉽도록 박스화를 진행한다.

 

top-section은 width: auto일때 100%로 작동 한다. block이기 때문이다.

위코드는 body자식으로 작동되기 때문에 body너비인 화면크기만큼 상속받아서 화면 너비만큼 나오는 것이다.

 

div -> block -> width:auto=100% -> body 크기상속 -> div= 화면너비

auto=100% -> 부모엘리먼트 너비 100%가져오기

 

정렬

1. 텍스트정렬

- 브라우저에서 텍스트 취급받는 요소 정렬

ㄴ text, inline, inline-block

- text-align: left; text-align:  center; text-align: right;

- 정렬해야하는 오브젝트의 상위 엘리먼트에 적용 

 

2. 도형정렬

- 브라우저에서 도형취급받는 요소 정렬

ㄴblock, flex

margin-left:auto; margin-right:auto;

-정렬해야한는 오브젝트에 직접적용

 

3. flex-item정렬

- text-align을 사용해서 정렬 할 수 없다.

- justify-content라는 속성으로 정렬 할 수 있다. 

flex-container에 적용

 

flex-grow

안쪽 내용에 따라서 비율이 바뀌게 된다.

그래서 flex-basis를 같이 써주면 바뀌지 않는다.

여백값을 제외하고 알아서 계산을 해준다. (비율)

gap 와 같이 사용할수있다.