qwef

perspective: 600px; 원근법. 실제로 입체적인 느낌임. 예를 들어 .medal:hover .front{transform: rotateY(-180deg);} .medal .back{transform: rotateY(-180deg); width: 200px; height: 200px;} .medal .back .btn{position: absolute; top: 100px; left: 0;right: 0; margin: auto;} .medal:hover .back{transform: rotateY(0deg);} 이렇게 Y축으로 돌릴때 실제 3d 오브젝트 돌리는 느낌. 만약 perspective 안주면 rotateY는 그냥 줄어들었다 펴지는거고, 주면 실제로 돌려버리는 그런 느낌..? 그런 거..

일단 컨텐츠가 있냐 없냐로 구분하면 된다. img는 시멘틱과 관련하여 이미지에 대해 설명할 수 있다. 그러니까, 만약 시각장애인이 스크린 리더기를 통해 화면을 들을 경우 IMG는 이야기 해 준다. 이용자가 컨텐츠를 이용하는데 도움이 된다면 img

내용1 내용2 내용3 내용4 .table{width: 100%; height: 100px; border: 2px solid #808080; display: table;} .table .table_tr {display: table-row; } .table .table_tr .table_td{display: table-cell; outline: solid blue; text-align: center; vertical-align: middle;} 요새는 테이블 잘 안쓴다고 함. div로 display table 하는게 반응형 하기 쉽기 때문이라고 함.

div::after{ content: "안녕 \Asadfasd"; white-space: pre;} \A 이게 아마 화이트스페이스? 공백을 뜻하는 듯?

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 이하..

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

.marginCollFix::before, .marginCollFix::after { content: ""; display: table; } 이렇게 빈 테이블 태그를 넣어주면 해결된다고 한다. margin-top 한 부모에다가 넣으면 됨.

: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'); 이런 식으로 임포트 해서 사용한다.

보호되어 있는 글입니다.

보호되어 있는 글입니다.