2022-03-16

GGAE99·2022년 3월 16일
0

진도

목록 보기
39/43

고독한 미식가 너무 재밌다.
생각없이 보면서 쉬기 좋다.
배고프당.
시작해보자.

flex

flex는 css의 display 속성으로 내부의 있는 요소들의 배치를 조절할 때 유용하다.

flex-direcion
flex박스 내부의 아이템이 배치되는 방향을 결정 (메인축 변경)
column : 열 / row : 행
default값이 row다

flex-wrap
flex내부 컨텐츠의 양이 넘어가는 경우 줄바꿈을 할지 결정 / default값이 nowrap
nowrap : 넘치면 안에있는 요소의 크기를 조절함
wrap: float처럼 넘치면 밑으로 내림

justify-contetn
메인축에대한 정렬 기준 설정 (flex-direction에 대한 정렬기준)
default값이 flex-start
flex-start : flex가 시작하는 부분에서부터 정렬 시작
flex-end : direction이 끝나는 쪽부터 시작
center : 가운데로 정렬
space-around : 모든 요소가 좌우 여백을 똑같이 가져감
space-evenly : 아이템들의 사이와 양 끝에 균일한 간격을 만들어줌
space-between : 양쪽 끝은 붙이고 나머지는 같은 간격을 유지시켜줌

align-items
반대축에 대한 정렬기준 (컨텐츠가 메인축으로 1줄인경우 -> flex-wrap:nowrap)
align-content
반대축에 대한 정렬기준 (컨텐츠가 메인축으로 여러줄인 경우 -> flex-wrap:wrap)

flex-grow
메인축으로 flex박스의 공간이 남는경우 늘어날 비율 설정
여러 요소의 스타일로 넣을 수 있으며, 숫자로 차지할 공간의 비율을 설정

화면 위에 하나의 작은 화면을 더 만들어 부가적인 일들을 처리할 수 있게 만드는 기능

modal창을 만들는 과정은 다음과 같다.

modal창 만들기 -> 가운데 정렬 -> 창 숨기기 -> 창을 다시 보이게하는 요소 만들기 -> 실행

간단하게 설명하면 이렇게 만든다고 볼 수 있다.

반응형 단위

vw/vh : 현재 브라우저크기를 100등분해서 단위를 정함
브라우저 크기가 변하면 동시에 바뀜 // vw : 너비 / vh : 높이
크기는 부모요소에 기반함

너비가 상대적으로 변경되는 경우 컨텐츠를 확보하기위한 최소 너비 설정 min-width : X
(X <- 이 크기 밑으로 줄어들지 않음 / X는 너비,높이 단위)
화면은 줄어들어도 얘는 일정크기 이상을 유지한다는 뜻임
너비가 상대적으로 변경되는 경우 컨텐츠를 확보하기위한 최대 너비 설정 max-width : X
(X <- 이 크기 이상으로 커지지 않음)

반응형 메뉴

반응형 메뉴를 만들기 위해서 미디어쿼리를 사용했다.

미디어쿼리
화면(screen), 티비(tv), 프린터(print)와 같은 미디어 타입(media type)과 적어도 하나 이상의 표현식(expression)으로 구성되고 width, height, color와 같은 미디어 특성(media feature)들을 이용하여 스타일을 적용한다.
사용방법

@media (max-width:760px과 같은 변화하는 곳 설정) {
	css선택{
    	위에서 설정해준게 실행됐을때 이 밑에것들을 설정
        우선순위가 기본css보다 높음
    	설정설정설정
    }
}

필자는 이렇게해서 760px밑으로 화면이 작아지면 버튼을 눌러서 메뉴를 나오게 만들었는데 이러면 나중에 display가 none값으로 바뀐게 그대로 유지돼서 다시 760px이상으로 늘렸을때 메뉴가 안나오게된다.
그래서 미디어쿼리가 다시 돌아가려할때 jQuery로 안에있는 display:none 스타일을 제거해줬다.

부트스트랩

트위터에서 시작된 오픈 소스 프론트엔드 프레임워크
현재 버전에서는 jQuey를 버림 옛날에는 썼었다.

사실 이 부트스트랩에 대해서 여기서 따로 설명할건 없을 것 같고...
https://getbootstrap.kr/
여기서 직접 코드 찾아보면서 사용해보는게 좋을 것 같다.

정리다했다! 고독한 미식가 보니까 너무 배고프다... 밥먹어야겠다!
빠잉!

0개의 댓글