Front End Develop Front End Develop

최신 CSS 문법들은 여러 가지 들을 제공합니다. 물론, 하위 버전의 지원이 어느정도 되어야 하기 때문에 fallback으로 사용하거나, can I use 사이트에서 확인 후에 사용하는 것도 좋은 방법일 것입니다. 최근에는 media query로 체크해서 실용적으로 사용할 수 있는 여러 대안들도 나왔습니다. 따라서 ecma script의 최신 문법에 babel이 존재하듯이, css도 최신 문법에 따라서 작성할 수 있는 환경을 만들어서 더 좋은 아이디어를 낼 수 있는 방법을 모색하는 것 또한, 프론트엔드 개발자의 몫입니다. :is 선택자 기존에 다음과 같이 작성하던 코드를 개선 할 수 있습니다. /* 기존 */ .main_contents h1, .main_contents h2, .main_contents ..

위와 같은 마크업이 있을 때 제목의 중간에 사진이 위치하게 되겠죠. 그리드를 사용해서 쉽게 만들어볼 수 있고, scss nesting을 사용해서 컴포넌트 형태로 구성해볼 수 있겠네요. 얼핏 보면 플렉스박스를 사용하여 정렬을 처리할 수 있는 것처럼 보입니다. 아이콘이 제목보다 작으면 두 개를 모두 감싸고 플렉스박스로 세로로 정렬하면 됩니다. 그러나 아이콘이 더 크면 제목과 사본 사이에 어색한 간격이 생깁니다. 운 좋게도, CSS Grid는 열과 행을 모두 직관적으로 나눌 수 있습니다. 완료 코드는 다음과 같습니다 : ) See the Pen Bulletproof Flag Component by YoungMinKim (@oinochoe) on CodePen. 출처 : https://www.jayfreesto..

요즘은 webpack, vite 등의 다양한 번들러들을 사용해서 개발을 하고 계시는데요. 그 안에서 사용할 수 있고, 단독으로도 사용할 수 있는 각종 전처리기들에 대한 문법들을 정리 해보았습니다. Haml - For Loop See the Pen Loop with Haml by YoungMinKim (@oinochoe) on CodePen. Haml - While Loop See the Pen While Loop in Haml by YoungMinKim (@oinochoe) on CodePen. Haml - Each Loop See the Pen Each Loop with Haml by YoungMinKim (@oinochoe) on CodePen. Pug - For Loop See the Pen Loo..

여러개의 애니메이션을 동시에 적용하고 싶을 땐 어떻게 하시나요? div { animation: x 2000ms infinite alternate ease-in, y 2000ms infinite alternate ease-out; } @keyframes x { from { transform: translateX(0vw) } to { transform: translateX(90vw) } } @keyframes y { from { transform: translateY(0vh) } to { transform: translateY(90vh) } } 이렇게 중첩하게되면 똑같은 2000ms 시간 내에 하나만 적용되어야 하므로 한 가지 애니메이션만 작동하게 됩니다. 하지만, 최신 브라우저에서 사용되는 Web Anim..

웹사이트의 로딩 시간을 개선하기 위해서는 다양한 요소들이 존재합니다. 요즘 SPA 등에서 SEO를 위해서 사용되는 코드 스플리팅의 원리를 이용하면 조금 더 간단하게 생각할 수 있습니다. 왜 로딩 타임을 다뤄야 하는가? Tims is money, 말 그대로 시간은 돈이기 때문입니다. 사람들은 웹 사이트를 오래 기다려줄 만큼 여유롭지 않을 수도 있습니다. 주문 전환율도 빠른 웹사이트가 높다는 것은 이미 많이 알려진 사실입니다. 로딩 타임에 있어서 CSS는 어떤 영향을 주는가? 간단하게 브라우저 작동원리로만 봐도 CSS는 HTML 문서가 파싱된 다음에 외부 리소스인 CSS, JS는 만날 때마다 다운로드 우선순위를 할당하고 다운로드를 시작합니다. 이 때, 다양한 미디어쿼리들이 있습니다.(예를 들어 print 등..

CSS 및 JS로 특정 문자들을 수정할 수 있습니다. @font-face @font-face는 unicode-range라는 속성을 가지고 있습니다. 예를 들어, 우리 사이트의 제목에 (&)앰퍼샌드가 자주 포함되어 있다면, 앰퍼샌드(U+0026)의 유니코드 값을 조회하고 유니코드 범위를 사용하여 이 특정 문자를 대상으로 지정할 수 있습니다. @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300'); h1, h2, h3, h4, h5, h6 { font-family: 'Ampersand', Montserrat, sans-serif; } @font-face { font-family: 'Ampersand'; src: local('Ti..

clamp()는 ie를 지원하지 않습니다. 저희가 ie와 작별할 시간도 머지 않았습니다. font-size를 반응형으로 잡을 때 유동적으로 작용할 수 있도록 도와줍니다 그리고 최소 사이즈 및 최대 사이즈도 정할 수 있지요. 사용법은 다음과 같습니다. h1 { font-size: clamp(16px, 5vw, 34px); } /** * 16px - 최소사이즈 * 5vw - 기준점 * 34px - 최대사이즈 */ 뷰포트 너비의 5%인 font-size가 되는데 16px부터 34px 사이의 사이즈에서만 적용됩니다. 예를 들어 뷰포트 너비가 300px인 경우 5vw 값은 15px와 같습니다. 그러나 해당 font-size 값을 최소 16px로 고정했으므로 16px이 될 것입니다. 브라우저 지원이 아직 미비하지만..

CSS로 섀도우 효과를 많이 사용하실 텐데요. 디자이너가 직접 디자인 된 섀도우를 그대로 구현하는 경우도 있고, 백오피스 등 다양한 사내 툴들을 만들 때는 본인이 직접 예쁜 섀도우를 만들어서 적용해주어야 합니다. 미세하게 보이는 섀도우 하나가 전체 어플리케이션의 품질을 결정하는 것을 알고 계시나요? 그렇기에 보다 일반적이지 않은 최적화된 섀도우로 보여주는 것이 중요합니다. 위의 그림과 같이 만들기 위해서 box-shadow, hsl() 색상에 대한 선행지식이 필요합니다. 그림자는 일반적으로 고도를 표현하고 그림자가 클수록 고도가 높다는 것을 의미합니다. 이는 사람들로 하여금 요소가 입체적으로 떠있다는 느낌을 전해주기도 하지요. 때로는 다른 세계로 통하는 문인 것처럼 촉각적인 느낌과 환상적인 느낌을 사용자..