HTML, CSS
-
[HTML] button type 속성의 기본값 :: 마이구미HTML, CSS 2024. 1. 17. 22:33
이 글은 button 태그의 속성 중 type 에 대해 다뤄본다. button type 속성의 기본값을 인지하지 못해서 발생한 이슈를 남겨보려고한다. button type - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type 4가지 버튼들이 등장하는 이유를 알아보자. antd Button 컴포넌트 mui Button 컴포넌트 button 태그 type 속성의 값이 submit 인 button 태그 대부분 button 태그의 type 속성에 대한 존재를 이미 인지하고 있을 것이다. 본인의 경우에는 대부분 지정하지 않고, form 요소 내부에서 submit 역할의 버튼을 위해 선언하곤했다. 이동 제출 언급된 사용 형태와 코드만으로 추..
-
[HTML] img 태그의 loading="lazy" 이해 :: 마이구미HTML, CSS 2024. 1. 14. 16:31
이 글은 img 태그의 loading 속성에 대해 알아본다. 속성을 보면, 이미지를 lazy 로딩할 수 있게 도와주는 속성으로 쉽게 이해할 수 있을 것이라 생각한다. 이 글에서의 핵심은 왜 사용하는지? 어떻게 사용하는지? 보다는 주의사항을 한번 알아본다. img loading attribute - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#loading img 태그의 loading 속성은 꽤나 유용하게 사용할 수 있다. 큰 작업없이 loading="lazy" 선언만으로 우리가 원하는 동작을 이끌어낼 수 있다. (더 많은 것들을 원한다면, 해당 속성만을 통해 제어하는 것이 힘들 수 있음) 브라우저 지원도 현재로써는 큰 이슈 없을만큼 대부분..
-
[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 의 기준점은 위와 같은 그림으로 이해할 수 있다. 그렇다면, 실제로는..