HTML, CSS
-
[UI/UX] 비활성화 상태 버튼 :: 마이구미HTML, CSS 2023. 10. 9. 17:03
이 글은 비활성화(disabled) 상태를 가지는 버튼에 대해 다룬다. 제목만 보면, 주제의 범위가 광범위하다. 글의 핵심이 정해져있지 않을 수 있으나... 그냥 찾아보고 공부한 것들을 끄적끄적 해보려고한다. 개인적인 생각이 많이 담겨져있다는 것을 알아두길 바란다. 본인이 고민한 것들을 요약하자면, 다음과 같다. 버튼 태그에 disabled 속성을 사용하면, 커서의 모양이 금지 모양으로 변하면 좋겠다. mui 는 비활성화 상태에 있어서, 왜 기본값으로 커서의 모양을 변경하지 않는것인가? 비활성화 상태의 버튼을 사용하는 것이 정말 사용자에게 유용할까? 1, 2 번은 같은 주제이지만, 3번은 직접적으로 연결되어있지는 않다. 1, 2번의 경우에는 비활성화 상태를 조금 더 사용자에게 인지시켜주고 싶은 니즈의 배..
-
[웹 접근성] 명암비(Contrast Ratio) :: 마이구미HTML, CSS 2022. 10. 8. 11:41
이 글은 웹 접근성 지침중에서 "명암" 에 대해 다룬다. 한 문장으로 설명하면, 두 개의 색상의 명암비가 적합한지에 대한 지침이다. 이것이 무엇인지 알아보고, 실제 코드로 활용되고 있는 사례들을 확인해보자. WCAG - https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast WCAG(Web Content Accessibility Guidelines) 는 웹 콘텐츠 접근성 지침을 나타낸다. 많은 웹 접근성 가이드의 일부인 명암(Contrast) 에 대해 살펴본다. 명암 관련 지침은 두 개의 색상의 명암비 기준을 설명한다. 버튼을 예로 들어보자. 왼쪽 버튼의 백그라운드 색상과 텍스트 색상은 비슷한 색상으로 시각적 장애를 가진 사람에게는 불편함을 초래한다...
-
[CSS] transform: translate 활용 예제(1) :: 마이구미HTML, CSS 2022. 9. 17. 23:25
이 글은 CSS 속성 중 transform: translate 를 활용한 예제를 살펴본다. translate 사용 사례의 하나를 설명한다. 속성의 설명보다는 이 속성을 활용하여 어떻게 적용할 수 있는지에 대한 아이디어라고 생각하면된다. MDN - https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateX 활용 예제 - https://codesandbox.io/s/horizontal-scroll-list-wddzp4 사실 어떻게 보면 translate 를 활용한 예시는 크게 도움이 되지 않을 수 있다. 하지만 이 글을 남기게 된 이유는 UX 적으로도 남기고 싶은 내용이 있어서다. 끝까지 읽어보길 바란다. CSS transfo..
-
[CSS] display: table 속성 :: 마이구미HTML, CSS 2022. 8. 20. 12:04
이 글은 CSS 속성 중 하나로 display: table 에 대해 다룬다. https://developer.mozilla.org/en-US/docs/Web/CSS/display display: table 속성은 간단하다. 태그처럼 동작하도록 정의하는 것이다. 그렇다면, 몇가지 의문이 들 수 있다. table 태그가 있는데 이걸 왜 사용해? table 태그를 지양하고 div 태그에 display: table 을 정의해서 사용해야하는건가? table tag vs display: table 을 말하고자 하는건가? 그렇다면 왜?... 결론은 2개를 비교하는 것도 아니고, 서로의 장단점을 비교하는 것은 아니다. 실질적으로 table 의 의미는 표(tabular data) 를 표현하기 위해 사용하게 된다. 하지만..
-
[CSS] overscroll-behavior 속성 :: 마이구미HTML, CSS 2022. 6. 12. 00:07
이 글은 CSS 속성 중 overscroll-behavior 에 대해 다룬다. CSS 속성에 대한 공식 문서보다는 크롬 개발자 사이트에 존재하는 관련 글이 오히려 큰 도움이 된다. 이번 포스팅은 관련 글을 기반으로 정리한 내용이라고 볼 수 있다. 참고 자료 - https://developer.chrome.com/blog/overscroll-behavior/ overscroll-behavior 는 이름을 토대로 추측하면 다음과 같다. "스크롤에 대한 행동" 을 제어하는 속성으로 추정된다. 스크롤 관련 속성으로 추정할 수 있지만, 아직 정확히 무엇인지 파악하기 힘들다. 흔한 스크롤 이슈를 먼저 파악해보자. 우리가 많이 스크롤에서 겪을 수 있는 이슈는 무엇일까? 가장 흔한 경우는 스크롤 영역이 2개 이상이면서..
-
[CSS] transform-origin 이란? :: 마이구미HTML, CSS 2022. 6. 4. 15:16
이 글은 CSS 속성 중 transform-origin 에 대해 다룬다. 이해는 하고 있지만, 직접 사용해본 경험이 없을 수 있다. 와닿을 수 있는 활용 사례를 알고 싶다면 도움을 될 것이다. https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin transform-origin 속성은 CSS 속성 중 transform 와 함께 사용하는 속성이다. 요소의 transform 을 위한 기준점을 정하기 위해 사용된다. 기본적으로 transform-origin 속성의 기본값은 중앙(center) 이다. transform-origin: 50%, 50% 좌표를 기반으로 transform 의 기준점은 위와 같은 그림으로 이해할 수 있다. 그렇다면, 실제로는..
-
HTML 속성 maxlength 주의사항 :: 마이구미HTML, CSS 2021. 8. 7. 22:39
이 글은 input 태그에서 제공하는 속성 중 maxlength 에 대해 다룬다. HTML 속성 maxlength 를 웹뷰와 IE 환경에서 사용해야한다면, 주의해야하는 사항들을 확인해보자. maxlength - https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/maxlength 일반적으로 우리는 입력창을 위해 input, textarea 태그를 사용한다. 그리고 글자 수의 제한을 두고 싶을 경우에는 maxlength 속성을 통해 쉽게 구현할 수 있다. 이것이 무슨 문제를 일으킬만한게 있는가? 지원해야하는 환경에 따라 문제가 발생할 수 있다. 하위 브라우저 IE 11 안드로이드 웹뷰 IE 11 에서는 어떤 문제가 있는가? 입력창에 한글을 사용한다면..
-
[Tabtrap] Modal에서 focus 다루기 :: 마이구미HTML, CSS 2020. 5. 30. 18:21
이 글은 Tabtrap 이라는 테크닉을 다룬다. 정해진 용어는 딱히 없는 것 같지만 Tabtrap 이라고도 불린다. 크게는 모달에서 사용할 수 있고, 다른 요소의 영역에서도 충분히 활용할 수 있다. 사용자 경험 측면에서도 향상될 수 있는 테크닉이다. 웹 개발에 있어서, 모달(Modal) 여부는 대부분 존재한다. 그렇다면, 모달의 무엇인가? 모달은 팝업과 비교하면 쉽게 이해할 수 있다. 모달은 어느 시점에 사용자가 특정 컨텐츠에 집중해야할 경우에 필요로한다. 즉, 모달은 사라질 때까지 사용자는 그 영역에만 집중할 수 있어야한다. 마치 window 객체에서 제공해주는 alert, confirm 메소드처럼 완료 처리를 하기 전까지는 아무것도 할 수 없는 것처럼말이다. 반대로 팝업은 존재하더라도, 사용자는 다른..