오늘 한 일

• 강의 중 position, flexbox 챕터 수강 완료

공부한 내용

position

요소를 원하는 위치에 자유롭게 이동시키기 위해 사용하는 프로퍼티
static, relative, absolute, fixed 등이 있다.

static

모든 요소의 기본 포지션 값

relative

본래 있던 자리를 기준으로 위 아래 좌 우 로 이동시킨다. (float와 달리 기존 위치 기억)

absolute

float를 사용할 때와 거의 동일한 현상이 나타남

• display의 값이 block으로 변함 등...

그러나 float과 달리 인라인 요소는 Absolute의 위치를 모른다.

absolute는 조상 요소 중 position이 static이 아닌 요소일 경우 그 요소를 기준으로 해서 자기자신을 위치시킨다.
(.grandparent의 position 값 relative, .parent의 position 값 static)

Fixed

position absolute를 사용 했을 때와 동일한 현상이 나타난다.
그러나 absolute와 달리 브라우저의 전체 창인 viewport를 기준점으로 둔다.

flexbox

.flexbox {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
}

display:

정렬하고자 하는 요소를 감싸는 부모 요소에 display:flex를 적용한다.

• flex: block과 흡사 하지만 block이 할 수 없는 요소 정렬을 쉽게 할 수 있음
• inline-flex: inline이 할 수 없는 어쩌고

flex-direction:

정렬하고자 하는 가로/세로의 방향을 정함

flex-wrap:

한 줄 안에 모든 요소를 정렬할 것인지 아님 상황에 따라 여러 줄을 만들어서 정렬할 건지 설정

• nowrap : 감싸지 않고 자식 요소의 사이즈를 줄여서 한 줄로 정렬함
• wrap : 한 줄에 모두 정렬하기에 공간이 넉넉하지 않으면 여러 줄을 만듦

Axis

flex-direction:이 어떤 값으로 설정되었냐에 따라 Axis(축)의 방향이 달라짐

• Main axis flex-direction 방향에 따른 축 → justify-content

• Cross axis Main axis의 수직축 → align-items, align-content

align-items는 하나의 플렉스라인에 흐르는 cross axis를 정렬하기 때문에 space-between 속성을 사용할 수 없지만 align-content는 큰 흐름의 cross axis를 기준으로 해서 space-between을 사용할 수 있음

해야 할 일

• http 관련 책 읽기
• 정보처리기사 실기 조금씩 준비하기
• 강의 계속 듣기 / 내용 복습하기
• 영타 속도 200 이상으로 올리기
• Git에 대해 공부하기

강의를 엄청 오래들은 거 같은데 막상 정리한 내용은 얼마 안된다...

어제 float 배울 땐 정신 없었는 데 flexbox 다시 배우니까 스프라이트 샤워하는 기분이다.