프론트엔드-코드 237

@media screen and () 예시

header{height: 100px;} main{} main .inner{display: flex;} main .side-menu{height: 500px; flex: 0 0 200px; background-color: antiquewhite;} main .contents{height: 500px; flex: 1; background-color: aqua;} footer{height: 100px;} @media screen and (max-width:767px){ main .inner{flex-direction: column;} main .inner .side-menu{flex: 1;} main .inner .contents{} } 원래 큰화면 대상으로 작업하다가. 보면 최대화면 크기가 767px 이하..

@media screen and (min-width:768px), @media screen and (max-width:767px)

모바일 우선, PC우선의 기준은 모바일상태를 먼저 작업하냐, PC 상태를 먼저 작업하냐. min-width 최소 크기. @media screen and (min-width:768px) 즉, 기본을 모바일 등 작은 크기로 잡고 최소 크기가 이정도 이상이 되면 어떻게 변한다 설정을 할 때 미디어 쿼리로 씀 원래 화면이 작은 걸로 잡았다가 큰 화면으로 바뀌면 어떻게 할 지 설정. 넘는 기준이 되는. 원래 화면에서 바뀜에 대한 기준. max-width 최대 크기 @media screen and (max-width:767px) 최대 크기가 이정도. 최대 크기가 이정도 이하면 적용하는. 원래 기본은 큰 화면으로 갔다가 화면이 작은 것에 대한 설정. 제한하는. 원래 화면에서 바뀜에 대한 기준.

css 변수

:root{ --fontBaseColor: #222; --bgBaseColor:#fff; --mainBaseColor: orange; --subBaseColor : red; --fontResetColor: #fff; --borderBaseStyle:'1px solid #808080' --baseFontsize:"14px"; } root 가상클래스 만들어서 거기 안에 key:value를 쓴다. root가 변수용 가상클래스 인듯. 사용은 var(--bgBaseColor) 이렇게. 보통 color_variable.css 등으로 파일을 나눠서. @import url('./Color_variable.css'); 이런 식으로 임포트 해서 사용한다.