웹 페이지를 만들기 전에
CSS 재설정
브라우저별로 동일하게 보이려면 https://nicolas-cusan.github.io/destyle.css/ 글씨체를 활용하다
Google 글꼴 사용하세요 https://fonts.google.com 글꼴 아이콘 사용
Fontawesome 사용
https://fontawesome.com 단열과 다열
싱글 랭크 이점 스마트폰, 태블릿PC에서 기기별 차이를 줄일 수 있다. 사용자의 시선을 집중할 수 있음 이미지 및 비디오 확대 단점 정보의 양이 많을 때 디자인하기 어렵다 다중 열 이점 WEB 웹 사이트의 회유율 향상 효율적인 공간 활용 단점 주요 컨텐츠의 집중력 저하 작은 화면에서 텍스트 읽기 어려움압축 이미지
https://shrinkme.app https://compressor.io 웹 페이지 내의 기술적 요소
모든 화면에 배경 표시
100vh 사용 vh:viewport height vh는viewport에 대한 상대적 크기(% 지정) 100은 배경 이미지를 화면 높이로 확장 viewport: 표시 영역의 가로 치수를 지정합니다.각 디바이스를 최적화할 수도 있습니다. <meta name=”viewport” content=”width=device-width,initial-scale=1>
위원소
는 CSS를 통한 가공 요소를 말합니다.
h1::before{content:"テキスト"}
h1::after{content:"テキスト"}
이미지도 지정할 수 있음미디어 쿼리
화면 너비에 따라 CSS를 변경하는 방법 CSS 파일에 직접 설명 링크 레이블에 설명 CSS 파일에서 다른 CSS 파일을 읽는 @import에 기술 PC 헤드 @media(max-width:700px){ }
모바일 1위 @media(min-width:700px){ }
CSS 스냅샷 스크롤
영역별 직접 표시 scrool-snap-type: y mandatory or proximity overflow:auto가 필요합니다.overflow: 원소가 초과되었을 때 어떻게 지정합니까 auto 표시 스크롤
Reference
이 문제에 관하여(WIP: HTML & CSS와 웹 디자인 실천 강좌를 읽고 배운), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://zenn.dev/kato3/articles/773145a5789565
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
