CodeIt Sprint FS 2nd 3일차

Form

Position, Flexbox, Grid

 

Form

label - 레이블 태그로 감싸진 인풋 혹은 id과 for가 일치하는 인풋에 포커싱을 준다.

input - 기본적으로는 텍스트를 입력받을 수 있는 태그

input의 type에 대하여

password - 내용을 감춤

email - 이메일과 형식이 일치하는지 체크해줌

checkbox - 체크박스 형태로 선택된 항목의 value값을 전송함. value가 없다면 on을 전송

date - 일자 선택

file - 파일 선택. accept 속성으로 확장자를 정해줄 수 있다. image/*등의 형식이 있음. mdn 참조.

multiple 속성으로 여러파일 선택 가능

number - 숫자 입력, min max step 속성이 존재함.

radio - 라디오박스. 여러 값 중 하나만 선택 가능함. 이 외에는 checkbox와 같음

range - 범위 안에서 선택 가능함.

text - 기본값.

 

select - 하위 태그로 option을 사용함. option의 내용을 드롭다운 메뉴로 선택 가능함.

textarea - 긴 글을 입력받는 태그. 종료태그가 필요함

 

Position

static - 기본값. 일반적인 흐름에 따름

relative - 기본 흐름을 기준으로 상대적인 위치를 정함. 기존 위치를 차지함

absolute - 상위 태그 중 포지셔닝이 된 요소를 기준으로한 절대값 위치. 기존 위치를 차지하지 않음

fixed - 브라우저 화면을 기준으로 위치를 정함. 기존 위치를 차지하지 않음

sticky - 브라우저 화면을 기준으로 설정된 위치에 도달하면 fixed처럼 작동함. 기존 위치를 차지함.

z-index - 화면에 쌓여지는 우선순위를 설정함. 쌓임 맥락에 대한 내용은 따로 공부할것.

 

Flexbox

flex-direction - row(기본값), column

justify-content - 기본축을 기준으로 어떻게 정렬하는가. 주로 center, space-between을 자주 사용함

align-items - 교차축을 기준으로 어떻게 정렬하는가. 주로 center을 자주 사용함.

flex-wrap - 요소가 넘칠 때 wrap으로 설정하면 교차 축 방향으로 넘어가서 배치됨.

gap - 요소 간 간격 설정

flex-grow - 기본값은 0, 1 이상이면 기본 축 방향으로 늘려서 flexbox를 채움

flex-shrink - 기본값은 1, 요소가 넘칠 때 크기를 줄임. 값이 크면 더 줄어듬. 0으로 설정하면 줄어들지 않음.

flex-basis - 요소의 기본축 방향 시작 크기. width나 height를 주로 참조함.

 

Grid

grid-template - rows/columns 순으로 작성. 1fr 1fr / 1fr 1fr 1fr로 작성시 2*3 배열이 생성됨. area 표기도 가능.

gap - 플렉스박스와 동일.

grid-area : 요소에 이름을 적용. area표기로 생성시 사용함. a요소와 b요소에 각각 이름을 적용하고 "a a b"로 생성시 a를 2칸만큼 늘려서 적용, b는 1칸으로 적용한다.

grid-auto-rows/grid-auto-columns - 그리드 템플릿 속성에서 행이나 열 크기를 명시해두지 않았을 때 적용될 오토값을 설정함.

grid-row/grid-column - 그리드 요소를 어디에 위치시킬지 결정함. 그리드 라인을 기준으로 몇번라인~몇번라인 혹은 몇번라인~몇칸(span)과 같이 표기함.