웹 5일차
14:00~~
UIUX 제출
UIUX제출 단축키 링크걸기: 선택 -> Ctrl + K 파란색 글자 작성 글자: 선택 -> Ctrl + Alt + 4 1조 - 완료 김가경, 임예나 1조 UIUX 기획안 티스토리 블로그 이동 3조 - 완료 오승민, 김선민 3조 UIUX 기획안 티
docs.google.com
https://blog.naver.com/gyeongjuro_on/223428202801
MBTI별 여행 유형 1탄! [ E vs I ]
MBTI별 여행 유형은? [ E vs I ] 경주로ON으로 즐길수 있는! MBTI 유형별 여행 스타일은 무엇...
blog.naver.com
https://blog.naver.com/misiceo/223267787428
불금에 직장인들이 가장 하고 싶은 일 vs. 실제 하는 일 베스트 10
안녕하세요^^, 오늘은 불금입니다! 직장인 분들은 퇴근 후 어떤 일을 하고 싶나요? 모 조사에 따르면 직장...
blog.naver.com
- 한블로거는 직장인들이 가장 하고 싶은 일 베스트 10을 만들었는데 10순위중 7순위가 여행 이었다.
16:00~~
flex box
행 또는 열 주축 설정을 해준다.
웹 요소를 배치 정렬 하는 1차원 레이아웃 방식
display flex
flex container(부모)
레이아웃을 결정할 요소
div class a - 부모
div class b / div
div class b / div
/div
display : flex 컨테이너에 사용
flex 축방식, inline이랑 같음
주축 가로 형
교차축 세로 형
주축을 변경도 가능
웹퍼블리셔, 디자인
가장 중요한 것은 기획
코드 가장 중요한 것은 기획
코드는 자신이 편하게 사용
그것에 대해서 css에서 다 구현될 수 있도록 만들어 놓았다.
flex item(flex 컨테이너 안에 있는 박스) (자식
박스 내부 박스들은
width 최대치를 가지고 있고
flex 박스 내부 박스들은
height 최대치를 가지고 있음
flex-direction
주축의 방향성을 결정
기본은 row{행) row-reverse
flex-wrap
item들이 강제로 한줄에 배치할 것인지
가능한 영역내에서 벗어나지 않게 여러 행으로 나누어 표현할 것인지를 결정
기본값 nowrap
공간이 부족해도 한줄배치
wrap
공간이 부족해지면 여러 행으로배치 된다.
flex-flow
direction wrap을 한번에 사용할 수 있는 속성
justify-content
박스들이 주축 따라 배치될때 요소사이의 공간 분배
-flex-start : 기본
-flex-end : 주축의 끝점으로 부터 시작점을 향해
-center : 가운데
-space-between :
주축에 양끝 배치 내부간격 동일
-space-around :
동일 여백
-space-evenly :
모든 여백 동일
align-items
교차축으로 정렬
align-self(자식)
개별요소
align-content
교차축 정렬
wrap 정렬
flex-grow (남은 공간에 전체 크기에서 나눠서 공간을 갖는다.)
flex item임 기본 크기에 대해서 더 커질수 있다.