코드 보기 animation의 8가지 속성 .item { width: 200px; height: 200px; background-color: orange; animation-name: myAnimation; animation-duration: 2s; animation-timing-function: steps(4); animation-delay: 2s; animation-iteration-count: infinite; animation-direction: alternate; } .item:hover { animation-play-state: paused; } @keyframes myAnimation { 0% { width: 200px; } 100% { width: 400px; } } .item { widt..

여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 이미지를 의미한다. 웹 페이지에 이미지가 사용될 경우 해당 이미지를 받기 위해 브라우저는 서버에 이미지를 요청하게 된다. 하지만 사용된 이미지가 많은 경우, 그만큼 서버의 요청이 많아지므로 페이지의 로딩 시간이 오래 걸리게 된다. 이미지 스프라이트를 사용하면 서버 요청을 상당수 줄일 수 있고, 파일의 관리 측면에도 이득이 있다.

코드 보기 CSS에서 변수를 지정할 때는 변수 맨 앞에 --를 붙여야 한다. 변수를 호출할 때는 var(변수명)의 방식을 사용한다. 1 2 3 .container { --lightgray: #f5f5f5; width: 400px; height: 400px; border: 2px solid orange; background-color: var(--lightgray); } .item { font-size: 50px; width: 150px; height: 150px; border: 2px solid red; background-color: var(--lightgray); } CSS에서 변수의 유효범위는 변수가 선언된 요소 자신부터 그 요소의 후손 요소까지이다. 전역적으로 사용하기 위해서 html에 변수를 선..

코드 보기 body { height: 3000px; } header { height: 50px; border-bottom: 1px solid #d2d2d2; position: sticky; top:0; background-color: rgba(255,255,255,0.7); backdrop-filter: blur(20px); } h1 { width: 100%; height: 400px; background-color: orange; } sticky는 부모 요소의 범위 안에서만 동작한다.

화살표 박스 만들기 코드 보기 .container { margin: 200px; width: 200px; height: 200px; border: 4px solid; position: relative; } .item { width: 40px; height: 20px; overflow: hidden; position: absolute; top: -20px; right: 20px; } .item::before { content:""; width: 20px; height: 20px; border: 4px solid; position: absolute; top: 0; left: 50%; background-color: #fff; transform: rotate(45deg); transform-origin: 0 ..

코드 보기 웹 접근성을 고려하기 위해 이미지에 대체 텍스트를 넣어야 한다. html에서는 img 태그의 alt 속성을 통해 대체 텍스트를 부여하지만, css에서 background-image: url();을 사용하면 대체 텍스트를 text-indent: -9999px;로 부여하기로 약속한다. Apple 스토어 Mac iPad iPhone Watch Airpods Apple 독점 제공 액세서리 고객지원 검색 장바구니 header ul.menu li.apple-logo a, header ul.menu li.search-starter a, header ul.menu li.basket-starter a { width: 14px; text-indent: -9999px; background-repeat: no-re..

git과 github를 사용하려고 했는데.. 띠용 github가 안들어가짐.. 그렇게 알게 된 새로운 사이트 https://www.githubstatus.com/ https://github.com/iam454/apple-ipad-app GitHub - iam454/apple-ipad-app Contribute to iam454/apple-ipad-app development by creating an account on GitHub. github.com assets.zip 다운로드 word-break 영어는 단어마다 자연스럽게 줄바꿈이 되지만, 한글은 아니다. word-break: keep-all;을 적용하는 것으로 한글도 단어마다 줄바꿈 할 수 있다!

⏳ 2023. 5. 1. - 2023. 5. 7. 배운 것을 써먹자. html, css는 물론, git과 마크다운 문법에 익숙해지자! https://github.com/iam454/overwatch-hero-selector-vanilla GitHub - iam454/overwatch-hero-selector-vanilla Contribute to iam454/overwatch-hero-selector-vanilla development by creating an account on GitHub. github.com 마크다운 문법.. 잘 몰라서 몇 번이나 업데이트했다.. 껄껄