HTML, CSS
-
Flexbox 기본 다지기 2 :: 마이구미HTML, CSS 2019. 3. 23. 23:56
아주 오래전에 Flexbox 에 대한 아주 기본적인 내용을 다뤘다.이번 글은 크게 flex-wrap 과 flex(flex-grow, flex-shrink, flex-basis) 속성 사용법을 알아본다.Flexbox 에 있어서는, 가장 중요한 핵심인 주축과 교차축의 이해가 필요하기 때문에, 아래 글을 먼저 참고하면 좋다.flex-direction 의 값을 사용한다면, 주축과 교차축을 바뀐다는 것을 인지하고 있어야한다.또한, flexBox 를 다룰 때에는 관련된 속성들의 디폴트 값을 이해할 필요가 있다.Flexbox 기본 1 - https://mygumi.tistory.com/237 이미지리스트에 대한 예제를 단계별로 진행하면서 Flexbox 의 활용하는 방법을 다뤄본다.우선 첫번째 예제를 작성해본다. fl..
-
:first-child, :first-of-type 차이 :: 마이구미HTML, CSS 2019. 2. 23. 23:39
이 글은 CSS 의 :first-child 와 :first-of-type 차이를 다룬다.first 이외에도 last-*, nth-* 와 같은 셀렉터가 존재하기 때문에, 크게 *-child, *-type 으로 볼 수 있다.같은 결과를 내는 경우가 많지만, 분명 다른 차이를 가지고 있다.둘 사이의 차이를 인지하고 있지 않다면, 예기치 못한 이슈를 발생할 것이다. TITLE Child1 Child2 Child3 Child4 .parent > .child:first-child { color: red;} 위와 같은 코드의 결과가 어떻게 나올 것 같은가? (엘리멘트를 요소라고 말하겠다.)클래스명이 parent 요소의 다음 자식인 DIV 요소들 중의 첫번째 요소를 선택하는 CSS 셀렉터를 작성했다.본인은 처음에 아무..
-
aria-*, data-* 속성 비교 :: 마이구미HTML, CSS 2019. 1. 9. 00:09
이 글은 aria-* 속성과 data-* 속성을 비교한다.두 속성 모두 HTML5 스펙에 존재한다.data-* - MDN, aria-* - MDN 우선 aria-*, data-* 속성을 사용한 예제를 보자.다음은 css 가상 클래스(before, after)와 함께, 많이 사용하는 예제이다.두 속성은 같은 목적으로 사용할 경우, 동일한 결과를 낸다. // htmllabel : label : // scss .item1 { &:after { content: attr(aria-label); } } .item2 { &:after { content: attr(data-label); } } 두 방법 모두 동일한 결과를 낸다.위와 같은 동일한 목적으로 사용함에 있어, 문제 될 것이 전혀 없다. javascript 에..
-
DOMException: play() failed :: 마이구미HTML, CSS 2018. 11. 1. 20:18
이 글은 Chrome Autoplay Policy 변화에 의한 에러 이슈를 다룬다.주제는 정책의 목적, 장점 그리고 에러를 해결하기 위한 방안을 살펴본다.웹 개발을 하다가, video/audio 태그를 통한 자동 재생을 요구할 경우에 경험할 수 있다.공식 문서 - https://developers.google.com/web/updates/2017/09/autoplay-policy-changes 본인은 예전에 개발 기능 중 비디오와 오디오를 자동 재생해야을 진행하다가, 다음과 같은 에러를 발생하는 경험을 했다.결론은 정책적인 이슈라서, 자세히 보지않고 넘겼다.그러던 중, 최근 다시 한번 문제를 경험했다.그로인해, 궁금증을 해결하는 과정에서 개발 외적인 요소에서의 정보도 얻을 수 있어, 글을 남기게 되었다...
-
이벤트 버블링(bubbling)과 캡처링(capturing) :: 마이구미HTML, CSS 2018. 4. 29. 01:14
이 글은 버블링(bubbling) 그리고 캡처링(capturing) 을 다뤄본다. 글에 앞서, 다음과 같은 경우를 보자.중첩된 요소에 있어, 이벤트를 발생시킨다면 어떻게 될까?다음 예제를 확인해보자. See the Pen bubbling capturing by leejunghyun (@mygumi) on CodePen. target 을 클릭하게 되면, target -> child -> parent -> root -> body 순으로 알림창을 뜨는 것을 확인할 수 있다.보다시피 이벤트 핸들이 등록된 중첩된 요소들이 하위에서 상위순으로 이벤트가 전파되었다. 위와 같이 중첩된 요소에서 이벤트가 발생할 때, HTML DOM API 의 이벤트 전파(Event Propagation) 는 두 가지 방식으로 구분된다...
-
History API in HTML5 :: 마이구미HTML, CSS 2018. 3. 8. 21:11
이 글은 HTML5 에서 지원하는 History API 에 대해 다룬다.일반적으로 History API 는 SPA 와 관련된 기술이다.참고 링크 - http://w3c.github.io/html/browsers.html#session-history-and-navigation vue-router, react-router 등과 같은 라우터 모듈은 쉽고 편하게 SPA 구축을 위해 사용되고 있다.이러한 모듈은 사실 내부적으로 대단한 기술이 아닌, History API 를 기반으로 구현되었다.History API 는 HTML5에서 새롭게 지원되었다. History API 를 위해서는 세션 히스토리(Session History) 개념을 이해하는 것이 좋다.세션 히스토리 개념을 위해 간단하게 브라우저 로딩부터 설명하..
-
효과적인 이미지 로딩 구현 방식 :: 마이구미HTML, CSS 2018. 3. 5. 00:19
이 글은 이미지 로딩에 관한 방법들을 알아본다.로딩 이미지는 요청의 처리에 대한 응답이 완료되기전까지의 지연 시간을 위해 사용된다.즉, 이미지 로딩은 이미지 다운로드로 인해 지연되는 시간으로 인한 대안을 나타낸다.참고 링크 - https://jmperezperez.com/medium-image-progressive-loading-placeholder/ 현재 이미지 로딩을 위한 많은 방식이 존재한다.크게 3가지로 분류하면 다음과 같다. Lazy LoadingPlaceholderTailored image sizes Blur up Lazy Loading 은 지연 로딩으로 불리는 방식이다.사진첩과 같은 한번에 많은 수의 이미지를 보여주는 곳에서 많이 사용된다.예를 들어, 사진첩 페이지에 접속하면 바로 모든 이미..
-
ProgressBar 구현하는 3가지 방법 :: 마이구미HTML, CSS 2018. 2. 8. 00:55
이 글은 ProgressBar 구현에 대해 다뤄본다.ProgressBar는 "진행바" 라고 불린다.웹사이트 및 앱 개발 등 많은 개발에서 보여지고 있다.우선 글에 앞서, 편의상 진행바라고 표현하겠다. 예제 - (https://codepen.io/mygumi/pen/EQypKX) 진행바는 크게 3가지로 구현할 수 있다. HTML tag (div, span, etc)HTML5 progress tagSVG div 나 span 으로 구현하는 방식이 일반적인 방법이다.HTML5 에서는 태그로 지원을 하는 것을 볼 수 있듯이, 웹 개발 시 많이 이용한다는 것을 알 수 있다.SVG 태그를 통해 구현하는 방식 또한 존재한다. 3가지 구현 방법에 대한 구현 예제는 다음과 같다. See the Pen progressbar..