CSS3 Skeleton Screen
linear-gradient로 skeleton screen 만들어보기페이스북이나 유튜브의 첫 화면을 보면, 아주 잠깐 프레임을 그려주는 빈 페이지를 확인할 수 있다.이러한 페이지를 개발에서 skeleton screen(스켈레톤 스크린) 이라고 한다.참고로 skeleton은 뼈대를 의미의 단어를 뜻한다. skeleton screen을 적용하면 사용자가 “대기
태그: css3
CSS3 Custom Properties
CSS Custom Properties (커스텀 속성) (https://www.smashingmagazine.com/2017/04/start-using-css-custom-properties/ 문서를 토대로 번역하고, 다른 문서들을 조합해 정리하였다.) 1. 전처리기 변수와 CSS 커스텀 속성 CSS 전처리기는 웹 개발에서 중요한 역할을 수행하고 있다.
CSS3 Background Image Blur
배경 이미지에만 흐림효과(Blur) 적용하기배경 이미지에만 blur 효과를 적용하는 방법이다.(IE에서는 적용이 안되고, 크롬에서는 정상 작동한다.) 주의할 점은 style로 Background를 준 엘리먼트 또는 그 자식 엘리먼트 이여야 한다.해당 개체의 z-index가 1 이상 이어야한다. blur 효과 적용 방법 1.HTML 코드에 적용할 Elemen
CSS3 Conditional Statements
CSS3 Conditional Statements미디어 쿼리에 대한 스펙 ‘CSS 3 Conditional Statements’에서는 미디어쿼리 @media 외에도 @supports와 @document 지시자를 사용한 새로운 기능에 대해서도 정의를 하고 있다. @supports 특정 css 속성을 브라우저가 지원하는지 또는 하지 않는지 판단하여 특정 스타일
css3 Text Overflow
CSS 한줄 말줄임 처리하기말 줄임 처리 방식은 크게 두 가지로 나뉠 수 있다.첫째는 프론트엔드(스크립트)단이나 서버사이드(백엔드)단에서 글자수를 기준으로 자르는 방법이고, 둘째는 CSS를 이용해 정해진 너비 값을 기준으로 자르는 방법이다.CSS를 이용한 방법은 구현 방법이 간단하고 성능에 영향을 주지 않아 글자수를 기준으로 자르는 방법보다 더 선호되고 있
CSS3 Calc
CSS 자동 계산 calc() 속성calc() 함수는 이름에서 보듯이 계산을 해주는 속성인데 기존에 자바스크립트로 하던 계산을 상당 부분 덜어줄수 있다.width, height, font-size, margin, padding 값의 길이를 계산할때나 각도, 수치, 변형(transition), 사운드 재생 횟수, 애니메이션 처리시 사용 한다.이를 표현하기 위