몽땅뚝딱 개발자

속성에 접근할 때 꽤나 여러가지 방법이 있다는 사실을 알게됐다. 그래서 더 찾아보니 정말 많군...😃 아래는 js로 작성하는 방법이지만 css로 바꿔도 동일하게 접근 가능! (대신 문자열부분을 ''로 감싸주면 된다.) 📄 지정한 문자열이 포함된 요소 접근하기 document.querySelectorAll('img[alt*=menu]') 📄 지정한 문자열로 시작하는 요소로 접근하기 document.querySelectorAll('img[alt^=menu]') 📄 지정한 문자열로 끝나는 요소로 접근하기 document.querySelectorAll('img[alt$=menu]') 📄 특정 속성의 속성값에 특정 문자열로 이루어진 한 단어를 포함하는 요소에 접근하기 속성값이 정확이 해당 문자열인 경우나 띄어쓰기..

display: none 과 visibility: hidden 둘 다 콘텐츠를 숨길 수 있지만, 스크린 리더로도 읽을 수 없기 때문에 접근성에 문제가 있다. 화면에는 보이지 않으며, 스크린 리더가 읽는 데에는 문제가 없는 clip 속성을 사용해 보자. clip 속성을 사용한다고 무조건 스크린 리더가 읽을 수 있는 것은 아니다. 스크린 리더는 width, height 사이즈가 0인 엘리먼트의 콘텐츠를 읽을 수 없으니, 엘리먼트의 사이즈는 최소 1px 이상으로 적용해야 한다. 예제) http://codepen.io/sogoonii/pen/JKaaRP /* 접근성에 문제가 있음 */ .sr-only { display: none; /* 화면에 보이지 않고, 스크린 리더도 읽어주지 않음 */ } .sr-only ..

https://velog.io/@ddingmun8/CSS- CSS - display 속성값이 inline 또는 inline-block 일때 여백 없애기 display 속성값이 inline 또는 inline-block 일 때 여백 없애는 방법 velog.io

📄 HTML Toast 토스트 띄우기 토스트 문구입니다. 두 줄 짜리 토스트 문구입니다. 토스트 문구입니다. 방법 1. inline을 사용한다. #test-area { .toast { position: fixed; left: 10px; right: 10px; top: 350px; padding: 20px 24px; background-color: #2f2f2f; border-radius: 16px; i { display: inline-block; width: 20px; height: 20px; margin-right: 10px; line-height: 28px; letter-spacing: -0.2px; vertical-align: middle; > img { width: 100%; height: 100..

◽️ 카드 만들기 .contents-place { .card { // ... transition: 1s; transform: rotateY(0deg); // 미리 준비시켜야 성능에 좋다. transform-origin: left; // 변경이 일어나는 위치를 바꿀 수 있다. } &:hover { .card { transform: rotateY(180deg); } } } ◽️ 카드 만들기2 .contents-place { display: flex; align-items: center; justify-content: center; perspective: 500px; .card { position: relative; width: 60px; height: 100px; transform: rotateY(0deg)..

◽ animation - frame by frame animation은 gif를 사용하면 이미지 깨짐현상 등으로 의도한대로 노출되지 않을 수 있다. 애니메이션을 CSS로 구현하면 커스텀이 쉽다. @keyframes dot { 0% { opacity: 0.2; } 25% { opacity: 1; } 50% { opacity: 0.2; } 100% { opacity: 0.2; } } /* linear: 일정한 속도 */ /* alternate: 반복하기 */ /* reverse: 반대로 시작 */ /* alternate-reverse: 반대로시작해서 반복 */ /* forwards: 애니메이션이 끝난 위치에서 끝남 */ /* steps: 애니메이션을 17단계로 자름 */ .dot { animation: do..

◽ Transition - transition-property: all; - transition-duration: 1s; - transition-timing-function: ease; - transition-delay: 0s; transition: 1s 2s; // 1초동안 발생, 2초간 딜레이 transition-timing-function의 종류 - linear: 가속도 없이 일정한 속도로 진행된다. - cubic-bezier(0.34, 0.67, 0.59, 1.62); 출처 인터랙티브 웹 개발 제대로 시작하기 - 인프런 | 강의 크리에이티브 넘치는 인터랙티브 웹페이지를 개발할 수 있는 기본기를 다질 수 있는 수업입니다., - 강의 소개 | 인프런 www.inflearn.com

◽ Transform을 사용하는 이유 - 하드웨어 가속을 사용(GPU를 사용) 속력과 성능이 굉장히 좋다. CSS3를 적극적으로 사용할 수 있다면 transform을 사용하는 것이 좋다. position: absolute와 top, left를 사용하는 것보다 transform을 사용하는 것이 부드럽게 동작하는 등 유려하며 성능면에서도 훨씬 좋다. ◽ transform 사용하기 .box { width: 100px; height: 100px; border: 2px solid black; background: red; } 적용할 수 있는 값: scale, rotate, skew, translate scale(1): 100% scale(2): 200% .box:hover { transform: scale(2);..

잊지말고 써먹자~~!! 퍼블리싱은 알면 알수록 재미있는 세계다. 1. border의 max 값을 정해보자. border: max(2px, 0.1em) solid gray; 2. cursor 속성에는 not-allowed도 있다. pointer만 주구장창 사용해왔음.. cursor: not-allowed; 3. 웹 접근성(accessibility) 측면에서 키보드 사용자를 배려하자. 키보드 포커스가 해당 위치로 오면 포커스 링(ring)이 나타날 수 있도록 한다. [type="checkbox"]:focus-visible { outline-offset: 2px; outline: 2px solid tomato; } 4. 꾸밈용으로 태그를 넣는다면 alt는 공백으로 설정한다. 5. cursor: pointer;..

◽ 요소에서 연관된 요소들을 하나의 그룹으로 묶을 때 사용한다. 하나의 그룹으로 묶은 요소들 주변으로 박스 모양의 선을 그려준다. 요소를 사용하면 요소의 캡션(caption)을 정의할 수 있다. 하나의 그룹으로 묶인 요소들을 속성인 disabled를 사용하여 한꺼번에 disabled 처리할 수 있다. 📄 예제 1. Choose your favorite monster Kraken Sasquatch Mothman 📄 예제 2. 학사 관리 로그인 이름 : 학번 : 학과 : 제출하기 출처 : The Field Set element - HTML: HyperText Markup Language | MDN The HTML element is used to group several controls as well as ..