본문 바로가기

전체 글24

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.
티스토리 네이버 웹마스터도구 수집보류 해결방법 네이버 웹마스터도구 웹페이지 수집이란? 검색로봇이 미처 방문하지 못한 사이트의 주요 웹페이지를 사용자가 직접 수집요청을 하는 기능입니다. 수집보류 해결방법 블로그관리 > 주소설정에서 포스트 주소를 '숫자' 상태로 설정한 후 웹페이지 수집 요청을 합니다. 수집 요청 후 포스트 주소를 '문자' 상태로 변경합니다. 네이버 수집요청결과에서 수집성공 확인 후 포스트 주소를 '숫자' 상태로 재변경합니다. 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.
2020년 모바일 UI/UX 디자인 트렌드 UI 디자인은 모바일 애플리케이션의 첫인상입니다. 앱의 UI 디자인이 클라이언트 중심적이고 매력적인 콘텐츠가 있으면 성공을 막을 수 있는 것은 없습니다. 그러나 UX 환경은 지속적으로 변화하고 있고, 시간이 지남에 따라 새로운 것들이 개발되고 있습니다. 그리고 UI 디자인은 모바일 산업에서 가장 변화가 많은 영역으로, 산업의 다른 많은 영역에 영향을 미칩니다. UI / UX 란? UI 디자인이란 무엇입니까? UI 디자인은 사용자 인터페이스 디자인을 나타냅니다. UI는 사람이 상호 작용할 수 있는 모바일 앱의 그래픽 레이아웃입니다. 여기에는 사용자가 클릭하는 버튼, 읽은 텍스트, 슬라이더 등이 포함될 수 있습니다. UX 디자인이란 무엇입니까? UX 디자인은 사용자 경험 디자인을 나타냅니다. 모바일 앱에 대.. 2020. 6. 25.