본문 바로가기
728x90

분류 전체보기530

[CSS] 레트로 픽셀 웹사이트 만들기 HTML  Welcome to the Retro Site! Experience the old-school web! Start "Google Fonts API를 통해 폰트를 불러오는 링크" 또는 "Google Fonts CDN 링크" font-family: "Press Start 2P", cursive;대체 폰트를 지정하는 이유는, 만약 사용자가 인터넷 연결이 끊기거나,폰트 파일을 불러올 수 없는 상황에서도 텍스트가 여전히 읽기 가능한 상태로 남도록 하기 위함입니다.cursive 외에도 sans-serif, serif, monospace와 같은 키워드를 사용할 수 있습니다.각각 브라우저의 기본 글꼴 스타일을 지정합니다.HTML JSconst.. 2024. 8. 19.
[깃] 깃에 데이터 넣는 방법 ( 이미지 ) 이미지 넣기 Add file 버튼을 클릭하고 Upload files를 선택Choose your files 버튼을 클릭하여 업로드하려는 이미지 파일을 선택jpg 말고 유동적인 svg 파일 넣었음.Commit changes 눌러주면 된다. kku-git.github.io/nff_product/logo.svgkku-git.github.io/nff_product/nff_bg.svg 이렇게 확인해줄 수 있음.데이터 삭제 방법우측 메뉴 메뉴 (점세개) 하단에Delete file 클릭하기그 다음 녹색 버튼 눌러주면 된다. 2024. 8. 12.
[CSS] Draw Underline Link Hover Effect Draw Underline Link Hover Effect | CSS Menu Hover Effect (youtube.com)아래에 선 맞춰줌.HTML Home Services Contact About CSS*,*:before,*:after { padding: 0; margin: 0; box-sizing: border-box;}body { background-color: pink;}nav { height: 100vh; width: 70vw; min-width: 600px; display: flex; align-items: center; justify-content: space-around; margin: auto;}a { p.. 2024. 8. 5.
[CSS] 반응형 폰트 크기 지정하기 반응형 폰트 크기: 뷰포트 크기에 따라 폰트 크기를 조절하고 싶다면vw를 사용하거나 clamp()를 활용하여 최소 및 최대 크기를 설정body { font-size: clamp(1rem, 2vw, 2rem);}1rem: 최소 폰트 크기2vw: 뷰포트 너비의 2%에 해당하는 기본 폰트 크기2rem: 최대 폰트 크기이렇게 설정하면 뷰포트 크기에 따라 폰트 크기가 조절되지만, 최소 크기와 최대 크기를 설정하여 폰트가 너무 작아지거나 커지는 것을 방지할 수 있습니다. 2024. 8. 1.
[CSS] aisde 2개 페이지 만들기 보호되어 있는 글 입니다. 2024. 7. 30.
html css 부드럽게 흐르는 슬라이드 만들기 참고사이트transition-timing-function - CSS: Cascading Style Sheets | MDN (mozilla.org) transition-timing-function - CSS: Cascading Style Sheets | MDNThe transition-timing-function CSS property sets how intermediate values are calculated for CSS properties being affected by a transition effect.developer.mozilla.org.swiper-wrapper { transition-timing-function: linear !important; } transition-timing-fun.. 2024. 7. 30.
728x90