IT/CSS8 CSS 브라우저 지원 여부 확인 사이트 CSS는 브라우저 버전별로 지원 여부가 다르기 때문에 웹사이트 제작 시 지원 여부를 확인해야 이슈 발생 및 재작업을 피할 수 있습니다. 소개할 사이트는 CSS 브라우저 버전별로 지원 여부를 확인할 수 있는 대표적인 사이트입니다. Can I use : https://caniuse.com/ Can I use... Support tables for HTML5, CSS3, etc About "Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers. The site was built and is maintained by Alexis De.. 2020. 6. 27. CSS 삼각형, 원 그리기 CSS 도형의 장점 이미지 파일보다 용량이 줄어들기 때문에 웹페이지 로딩 속도 개선에 도움을 줄 수 있습니다. width, height 등 속성값 변경을 통해 자유롭게 크기 조절이 가능합니다. 실무 활용 예시 말풍선 불릿 삼각형, 원 그리는 방법 CSS로 평행사변형, 사다리꼴, 육각형별 등 다양한 도형을 그릴 수 있지만, 활용도가 높은 삼각형과 원을 그리는 방법에 대해 알아봅시다. See the Pen CSS 도형 by wisesilver (@wisesilver) on CodePen. 2020. 6. 27. 반응형 웹 작업 시 알아두면 유용한 CSS 이미지 유동적인 이미지는 반응형 디자인의 중심입니다. 이미지를 유동적으로 만드는 것은 매우 쉽습니다. 예를 들어, 이미지가 600px 너비 컨테이너 내에 표시되면 이미지는 600px입니다. 컨테이너 크기를 350px로 조정하면 이미지는 사용 가능한 최대 너비 (이 경우 350px)로 자동 크기가 조정됩니다. 그러면 모든 화면 크기에 맞게 이미지 크기가 자동으로 조정됩니다. img { max-width: 100%; height: auto; } cs HTML5 비디오 HTML5 반응형 video는 CSS 파일에 다음을 추가하면 됩니다. video { max-width: 100%; height: auto; } cs YouTube 동영상 CSS 파일에 다음을 추가하면 됩니다. Colored by Color Sc.. 2020. 6. 25. 디바이스 해상도별 미디어쿼리 해당 미디어쿼리는 반응형 사이트를 구현할 때 디바이스별 화면 크기에 따라 스타일 지정이 가능합니다. 전체를 다 사용할 필요는 없고, 필요한 유형을 선택해서 사용하시면 됩니다. [ 관련글 ] · [IT/ETC] - 모바일 디바이스별 해상도, OS 버전 (2020.07.07 업데이트) /* Media Queries */ /* Smartphones, small screens (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } /* Smartphones, small screens (landscape) ----------.. 2020. 6. 25. 이전 1 2 다음
