오늘 한 일
- 강의 중 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 다시 배우니까 스프라이트 샤워하는 기분이다.
