Front End Develop Front End Develop

CSS @keyframes 애니메이션의 각 반복 사이에 일시 중지를 추가하고 싶었다면 CSS에서 이를 수행하는 기본 제공 방법이 없다는 사실에 실망했을 것입니다. 물론 애니메이션 지연을 사용하여 @keyframe 집합의 시작을 지연할 수 있지만 키 프레임을 통한 첫 번째 반복과 각 후속 실행 사이에 시간을 추가할 방법은 없습니다. 기본적인 방법은 다음과 같습니다. /* scss */ @for $i from 1 through 20 { &:nth-child(#{$i}) { $delay: random(9999) + 0ms; top: calc(50% - #{random(400) - 200px}); left: calc(50% - #{random(300) + 0px}); animation-delay: $delay;..

반응형 타이포그래피는 과거에 미디어쿼리 및 CSS calc()와 같은 다양한 방법으로 시도되었습니다. 여기에서는 뷰포트의 너비가 증가함에 따라 텍스트의 최소 크기와 최대 크기 사이에서 선형 적으로 크기를 조정하는 다른 방법을 살펴 보겠습니다. clamp(minimum, preferred, maximum); .banner { width: clamp(200px, 50% + 20px, 800px); /* Yes, you can do math inside clamp()! */ } 반환되는 값은 선호하는 값이 최소값(최소값이 반환되는 지점)보다 낮거나 최대 값(최대 값이 반환되는 지점)보다 높을 때까지 선호되는 값이됩니다. 위의 그림은 50%로 항상 유지하되 300px 이하로는 줄어들지 않고 800px 이상으로는..

css를 통한 커스텀 속성 변수 사용은 ie11은 폴리필로 지원하고 있습니다. ie가 타락하고 있는 이 시점에 상기시켜두면 좋지 않을까 싶어서 포스팅 합니다. 프로젝트의 전역 설정에 사용자 정의 속성 (CSS 변수라고도 함)을 사용하는 방법에 대한 몇 가지가 있습니다. Sass를 사용하면 매우 쉽습니다. // Global option $enable-shadows: false; // Mixin that consumes the shadow @mixin box-shadow($shadow...) { @if $enable-shadows { box-shadow: $shadow; } } // Put it to use .component { @include box-shadow(0 .5rem 1rem rgba(0,0,0..

body { display: flex; flex-direction: column; margin: 0; min-height: 100vh; } main { flex: 1; } 위와 같이 모바일에서 safari 100vh를 높이로 지정하면 footer가 safari native 툴바에 가려지는 오류가 있습니다. 이를 해결하기 위한 방법입니다. body { min-height: 100vh; /* mobile viewport bug fix */ min-height: -webkit-fill-available; } html { height: -webkit-fill-available; } 이 코드는 Chrome이 Firefox의 구현과 일치하도록 동작을 업데이트 한다는 안내를 받은 후 html 요소를 포함하도록 업데이..

CSS에서 line-height는 아마도 가장 오해되지만 일반적으로 사용되는 속성중 하나일 것입니다. 디자이너와 개발자로서 line-height에 대해 생각할 때 인쇄 디자인에서 이끄는 개념에 대해 생각할 수 있습니다. 흥미롭게도 문자 그대로 줄 사이에 리드 조각을 넣는 용어입니다. 행간과 행 높이는 비슷하지만 몇 가지 중요한 차이점이 있습니다. 이러한 차이점을 이해하려면 먼저 타이포그래피에 대해 조금 더 이해해야합니다. 타이포그래피? 전통적인 서양 문자 디자인에서 텍스트 줄은 여러 부분으로 구성됩니다. Baseline: 이것은 유형이있는 가상의 선입니다. 줄 있는 노트에 글을 쓸 때 기준선은 글을 쓰는 줄입니다. Descender: 이 선은 기준선 바로 아래에 있습니다. 소문자 g, j, q, y 및 ..

사용자 경험의 품질을 최적화하는 것은 웹 사이트의 장기적인 성공의 핵심입니다. 비즈니스 소유자, 마케팅 담당자 또는 개발자에 관계없이 Web Vitals은 사이트 경험을 수량화하고 개선할 기회를 식별하는 데 도움을 줄 수 있습니다. Web Vitals은 웹에서 훌륭한 사용자 경험을 제공하는 데 필수적인 품질 신호에 대한 통합 지침을 제공하기위한 Google의 측정 기준입니다. Google은 성능을 측정하고 보고하기 위해 수년 동안 다양한 도구를 제공했습니다. 일부 개발자는 이러한 도구를 사용하는데 전문가인 반면 다른 개발자는 도구와 측정 항목이 풍부하여 따라 잡기 어렵다는 사실을 발견했습니다. 사이트 소유자가 사용자에게 제공하는 경험의 품질을 이해하기 위해 성능 전문가일 필요는 없습니다. Web Vita..

modern css 2탄! flex 와 grid와 각각 동일한 높이 만들기를 해보도록 하겠습니다. FLEX .flexbox { display: flex; // 높이를 가득 채우기 .element { height: 100%; } } GRID .grid { display: grid; // 기본축을 세로로 변경 grid-auto-flow: column; // 높이를 가득 채우기 .element { height: 100%; } } flexbox와 유사하게 직계 자식은 높이가 같지만 자식은 flexbox 솔루션에서와 같이 높이 정의를 추가해야합니다. 어떤 방법이 더 나을까요? 순전히 동일한 높이 요소를 해결하기 위해 flexbox의 장점은 기본 축이 즉시 나란히 열을 활성화하는 반면 그리드는 명시적으로 설정해야한..

애니메이션은 사이트를 돋보이게 만들 수 있습니다. 또한 그것들은 쉽게 사용자 경험(User Experience)을 감소 시킬 수 있습니다. 웹 애니메이션으로 작업 할 때 목적이없는 애니메이션 추가, 너무 길거나 너무 빠른 기간 설정, 애초에 올바른 유형의 애니메이션을 사용하지 않는 등 잘못 될 수있는 몇가지 사항이 있습니다. 이러한 모든 작업이 올바르게 수행 되더라도 애니메이션 스타일이 좋지 않을 수 있습니다. 특히 다른 애니메이션과 동기화되지 않거나 사이트의 전반적인 성격과 일치하지 않는 경우에는 더욱 그렇습니다. 주목해야 할 또 다른 중요한 점은 모든 디지털 경험이 똑같은 애니메이션을 공유해서는 안된다는 것입니다. 마케팅 웹 사이트에는 제품 웹 사이트 또는 모바일 앱과 다른 애니메이션이 필요할 수 있..