인간 코딩(오류판)

마크업

emmet 코드 스니펫

< 먼저 쓰는 습관 줄이기
.box1이나div,main,header 단축키와 Tab을 이용한 입력 습관을 들이자
.box$*4와 div*4{$}의 차이점이나 쓰임새 숙지하기
{}을 애용하면 시간을 단축할 수 있다.
div.container>header>h1{제목}+nav>ul>li*3 와 같이 + 로 복수의 요소 작성가능

주의사항

마크업 언어는 공백도 인식하기 때문에 display: flex로 여백을 없애준다.
작동하는 클래스는 active 붙여주기.
section 콘텐츠 그룹화 / div 레이아웃 그룹화
이미지는 크기를 지정해줘야 크기에 이미지를 맞출 수 있다.

CSS

여백 설정

gap은 부모 요소에 작성 / flex나grid인 상황에서만 사용 가능.

유의 사항

박스가 한 줄에 안 나뉘어져 있는 건 flex가 필요 없음.
background-color는 부모요소가 아닌 자식요소에 넣어야 자식요소끼리 들러붙지 않는다

웹브라우저에서

ctrl + shift + c = 자동클릭

vs코드에서

ctrl + shift + k = 한줄삭제
ctrl + / = 주석
alt + shift + 방향키 = 한줄복사
alt + 드래그 = 여러개선택

높이 100%가 적용 안되는 이유

부모 높이의 전체를 적용하기 때문
즉 부모 높이가 없으면 적용안됨

display: fixed를 사용하면 
height가 디스플레이의 높이로 설정되기때문에 적용됨

* 반복

숫자 붙은만큼 반복

i.hr-line.hr$*3

$ 인덱스 반복

숫자 붙은만큼 번호 부여

i.vt-line.vt$5
i.hr-line.hr$*3
i.hr-line.hr$3*

{} 텍스트

텍스트

`.box$*1, div*4{$},i.vt-line.vt1*5 같이 응용가능함

flex 속성

display: flex; = 자식요소들의 정렬

flex-direction: row; 기본방향 좌우
flex-direction: row-reverse; 반전
flex-direction: column; 세로 = align-items, justify-content도 바뀐다

align-items: 상하
align-items: flex-end; 맨끝
align-items: center; 중앙

justify-content: 좌우
justify-content: flex-end; 맨끝
justify-content: center; 중앙

justify-content: space-between; 공백을 똑같이 분배 끝부분 0
justify-content: space-around; 등분하여 분배
justify-content: space-evenly; 공백을 똑같이 분배 끝부분도 똑같이 분배

특정 요소에 우선순위 부여
order: 0 기본값
order: 1 뒤
order: -1 앞

flex라는 코드는 기본 1줄로 정렬된다.

flex-wrap: no-wrap; 기본값, 한줄 정렬
flex-wrap: wrap; 여러줄 정렬
flex-wrap: wrap-reverse; 여러줄 반전 정렬

flex-wrap: wrap; 인 경우 align-content로 정렬 가능

align-content: stretch; 기본값
align-content: flex-end; 맨 아래
align-content: flex-start; 맨 위
align-content: center; 중앙
align-content: space-between; 두 줄 이상 간격을 동일하게 조정
align-content: space-around; 두 줄 이상 간격을 동일하게 조절 / 양 끝은 다름

1. flex-grow

남은 공간을 얼마나 많이 차지할지 비율 결정

`flex-grow: 1`이라면, 다른 아이템들과 함께 남는 공간을 나누어 갖는다.
여러 아이템이 있을 때, `flex-grow` 값이 큰 아이템이 더 많은 공간을 가진다.

2. flex-shrink

공간이 부족할 때 아이템이 얼마나 줄어들지를 정한다.

 `flex-shrink: 0`이면 그 아이템은 작아지지 않는다.

3. flex-basis

아이템의 기본 크기를 정한다.

기본값 (w/h)로 표현 가능하다.
`flex-basis: 200px`이면 그 아이템은 200px의 기본값을 가진다.
다른 넓이값을 주는 것 보다 flex-basis가 가장 높은 순위를 가진다.

4. flex: grow shrink basis;

flex: 1 = flex: 1 0 0과 같다

5. gap

사이간격 조정
flex가 있어야 사용가능