HTML, CSS
-
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 메소드처럼 완료 처리를 하기 전까지는 아무것도 할 수 없는 것처럼말이다. 반대로 팝업은 존재하더라도, 사용자는 다른..
-
<img> vs background-image :: 마이구미HTML, CSS 2020. 3. 16. 00:35
이 글은 HTML 에서 제공해주는 img 태그와 CSS 속성 중 background-image 의 차이를 다룬다. 본인은 img 태그만을 사용해왔고, background-image 는 지양해야한다고 생각해왔다. 지금도 비슷한 생각이지만, 스스로 잘못된 오해를 가진 것들도 있어서 글로 남기게 되었다. 참고 링크 https://blog.px-lab.com/html-img-tag-vs-css-background-image/ https://nystudio107.com/blog/the-css-background-image-property-as-an-anti-pattern 이미지 컨텐츠를 표현하는 방법에는 크게 두가지가 있다. HTML 의 태그를 활용하는 방법. CSS 의 background-image 를 사용하는..
-
vertical-align 속성은 무엇인가? :: 마이구미HTML, CSS 2020. 3. 8. 00:29
이 글은 CSS 속성 중 하나인 vertical-align 을 다룬다. 이미지와 텍스트를 통한 예제를 중점으로 글을 진행한다. 이 속성을 어떤 원리로 되는 지 모른 채 일단 사용했거나 혼란스러웠다면, 이 글은 유용할 것이다. 폰트 - https://mygumi.tistory.com/366 vertical-align - https://developer.mozilla.org/ko/docs/Web/CSS/vertical-align vertical-align 속성은 MDN 공식문서에 간단하게 정의되어 있다. vertical-align CSS 속성은 inline 또는 table-cell box에서의 수직 정렬을 지정합니다. vertical-align 속성은 ie7 도 지원하는 거의 모든 브라우저에서 사용할 수 있..
-
line-height 란 무엇인가? :: 마이구미HTML, CSS 2020. 1. 11. 23:20
이 글은 CSS 속성 중 하나인 line-height 를 다룬다. 공식 문서에서 볼 수 있는 용도나 사용법이 아닌 좀 더 깊은 이해에 중점을 둔다. 참고한 링크를 통해 스스로 짧게 요약한 내용이다. https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align#fnref-1 line-height 속성은 line-box 의 높이를 지정한다. 주로 텍스트간의 줄 간격을 조절할 때 사용한다. 우선 간단히 언급하고 넘어가겠다. line-height 속성에 대해 좀 더 이해하고자 했다면, 다음과 비슷한 맥락의 내용을 고민해본 경험이 있을 것이다. line-height 속성의 디폴트 값은 normal 이다, 그렇다면 이 값은 무엇을 뜻하는 것인가..
-
[웹 접근성] 명시적, 암시적 <label> 태그 :: 마이구미HTML, CSS 2019. 10. 5. 18:10
이 글은 태그에 대해 다룬다. label 태그에 대한 코드 작성 방식에는 명시적(explicit)과 암시적(implicit)으로 분류된다. 본인은 label 태그와 input 태그에 있어서, 일관성있게 코드를 작성하는 것을 고민하다가 정리한 글이다. 참고 링크 - https://cccaccessibility.org/web/web-developer-tutorials/explicit-and-implicit-form-labels 우선 label 태그란 무엇인가? label 태그는 용어 그대로 이름표와 같은 역할을 한다. 양식 입력 창의 요소들을(form controls) 위한 캡션을 나타낸다. 대부분 input 태그와 함께 사용하는 것을 많이 볼 수 있을 것이다. 사용하는 이유 중에서, 쉽게 알 수 있는 이점..
-
[HTML5] Audio 태그와 Video 태그 이벤트 :: 마이구미HTML, CSS 2019. 9. 5. 00:51
이 글은 미디어 태그인 , 태그가 가지고 있는 이벤트들을 다룬다. 그 중에서 헷갈리기 쉬운 이벤트들을 정리한다. => loadeddata, loadedmetadata, canplay, canplaythrough https://developer.mozilla.org/ko/docs/Web/API/HTMLMediaElement 미디어 태그(audio, video) 를 사용하는 경우, 대부분 해당 태그가 가지는 이벤트들을 제어해야한다. 예를 들어, play() 메소드를 호출하면 play 이벤트가 발생하고, pause() 를 호출하면 pause 이벤트가 발생한다. audio.addEventListener('play', () => { console.log('play event'); }); audio.play(); ..
-
CSS Combinators(결합자) :: 마이구미HTML, CSS 2019. 4. 4. 20:02
이 글은 CSS 의 결합자(Combinators) 에 대해 다룬다. 각 결합자를 단순한 예제가 아닌, 실제로 많이 사용하고, 활용할 수 있는 예제를 통해 진행한다. 본인은 부끄럽게도 최근 들어서야, 모든 결합자를 사용하고 있다. 혹시나 특정 몇개만 사용하거나, 각 용도를 구분해서 사용하지 않고 있다면, 도움이 될 것이다. 우선 결론적으로, 이 글을 작성하게 된 이유는 인접 형제 결합자와 일반 형제 결합자 때문이다. CSS 구문에 있어, 크게 선택자와 결합자로 분류할 수 있다. CSS 선택자는 스타일을 적용시키기 위한 HTML 요소를 선택할 수 있다. h1 {...} #app {...} .container {...} input[type="text"] {...} 위와 같은 정해진 규칙(선택자)을 통해 우리는..