📖 오늘 학습 뽀인트!
1. perspective(원근법)
2. 미디어쿼리
3. SVG
1. perspective(원근법)
<style> .원본 { display: flex; justify-content: space-between; width: 1000px; height: 200px; border: 1px solid black; margin: 100px auto; /*해당 요소와 나의 거리*/ perspective: 400px; } .회전패널 { width: 200px; height: 200px; background: aqua; transform: rotateY(45deg); } </style> </head> <body> <div class="원본"> <div class="회전패널"></div> <div class="회전패널"></div> <div class="회전패널"></div> <div class="회전패널"></div> <div class="회전패널"></div> <div class="회전패널"></div> </div> </body> </html>원본 클래스와 나의 거리는 400px이고 회전 패널이 Y축으로 45도 회전되어 있다. deg를 조금씩 증가시키면 애니메이션 처럼 패널이 회전하는 결과를 볼 수 있다.
캐릭터와 물체가 400px 거리에 있고 y축으로 회전한다. x축은 물체를 가로로 관통 시킨다음 회전, y축은 물체를 세로로 관통 시킨다음 회전, z 축은 물체 안쪽에서 밖으로 관통 시킨다음 회전을 연상하면 된다.
2. 미디어쿼리
@media screen and (max-width:1000px) { 선택자 { 속성: 값; } }CSS파일 맨 아래에
@media(미디어쿼리)를 사용해서 웹페이지가 특정 조건에 해당할 경우에 스타일을 적용시킬 수 있다.
보통all(전체 적용),screen(모바일, pc, 노트북 등),
(max-width:1000px)는 뷰포트 너비가 1000px 까지 라는 의미이고
(min-width:640px)는 뷰포트 너비가 640px 부터라는 의미이다. 지난 레티나 이미지 스프라이트 기법 적용시에도 아래처럼 적용 가능하다.
webkit-min-device-pixel-ratio:2
3. SVG
어제 포스팅 했던 이미지 포맷 중 하나이다. 벡터 이미지로 거의 모든 색상과 그림자, 투명도 표현이 가능하며 확대해도 이미지 깨짐이 없다. 곡선이 많은 사진일수록 용량이 크다는 것이 특징이다. 보통 아이콘, 로고, 도형에 쓰인다.
✍HTML에 svg 적용 기법
1. img 태그 src 속성으로 삽입
➡ svg 이미지 스타일을 컨트롤 할 수 없다.
2. CSS background-img 로 삽입
➡ svg 이미지 스타일을 컨트롤 할 수 없다.
3. svg 코드를 html에 그대로 삽입.(인라인)
➡ 이미지 로드할 필요가 없다. 대신 페이지가 로드될 때마다 html내 svg코드를 다시 읽어야 한다. css로 이미지를 스타일링 할 수 있다.
4. object 요소로 삽입.
➡ 스타일링이 가능하며, svg 파일 자체에<style>을 넣어야 한다.<object type="image/svg+xml" data="./web.svg" class="ho"></object><svg> <style> .potion1 { fill: #ffeb3b; } </style> <path class="potion1" d="....."/> </svg>
크!!! 매일 기록하시는 모습 본받겠습니다!!ㅎㅎ👍👍
주말 잘 보내시고 다음주에 봬요!!!!😊😊