반응형 퍼블리싱4 [CSS] 프레임 비율 자동 조절 (aspect-ratio) 📌 aspect-ratio◽ html aspect-ratio: 16 / 9 aspect-ratio: 21 / 9 aspect-ratio: 4 / 3 aspect-ratio: 1 / 1 aspect-ratio: 2 / 1 aspect-ratio: 3 / 1 9 / 16 ◽ css.frame {}.frame div,.frame div { border: 5px solid; margin: 10px; padding: 20px; width: 400px;}.frame div:nth-child(1) { aspect-ratio: 16/9;}.frame div:nth-child(.. 2025. 5. 2. [CSS] 반응형 텍스트 사이즈 자동 조절 📌 clamp 함수: clamp(최솟값, 가변값(선호값), 최댓값)미디어쿼리를 쓸거라서 viewport를 넣어줘야 한다.meta:vp 입력하면 자동완성이 뜨고,이렇게 넣을 수 있게 된다.@media (max-width: 1200px) { h1 { font-size: 80px; }}@media (max-width: 900px) { h1 { font-size: 60px; }}@media (max-width: 600px) { h1 { font-size: 40px; }}이렇게 여러개로 쪼개서 적어줘야 하는 걸h1 { font-size: clamp(30px, 5vw, 100px);} clamp로 해결할 수 있다. 페이지가 아무리 줄어들어.. 2025. 5. 2. [CSS] 글씨에 테두리 적용 📌 글씨에 테두리 적용◽ text-stroke Hellohtml 이렇게 작성해주고 body { font-weight: 300; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #205f1042;}.heading { margin: 0; font-size: 5em; /* -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: #fff; */ -webkit-text-stroke: 2px #fff; color: transparent;}css 이렇게 작성해주면 2025. 5. 2. [VS Code] 비주얼 스튜디오 코드(Visual Studio Code) 필수 Extension 설치 및 사용법 📌 필수 Extension 설치 및 사용법 ◽ Auto Rename Tag: 시작 태그를 바꾸면 뒤에 마감 태그를 자동으로 바꿔줌 마켓플레이스 > auto rename tag 검색 > 설치 시작 태그를 바꾸면 자동으로 마감 태그도 바뀌게 된다. ◽HTML CSS Support: CSS에 사용된 선택자를 HTML에서 자동완성 해줌(css → html)마켓 플레이스 > html css support 검색 > 설치 css class 네임이 자동완성 되어 뜬다. ◽HTML to CSS autocompletion: html에 사용된 선택자를 css에서 자동완성 해줌(html → css)마켓 플레이스 > html to css autocompletion 검색 > 설치 html에서 작성한 css class 가 c.. 2025. 5. 1. 이전 1 다음 반응형
