html&css17 원이 확대되는 애니메이션 https://codepen.io/ziziziczic/pen/oNydqNe wave animation ... codepen.io 스타일 @-webkit-keyframes wave { from { -webkit-transform: scale(1,1); transform: scale(1,1); opacity: 1; } to { -webkit-transform: scale(2,2); transform: scale(2,2); opacity: 0; } } @keyframes wave { from { -webkit-transform: scale(1,1); transform: scale(1,1); opacity: 1; } to { -webkit-transform: scale(2,2); transform: scale(.. 2022. 11. 25. linear-gradient 사용 예 linear-gradient(to bottom,rgba(0, 0, 0, 0.5) 0%,rgba(0, 0, 0, 0.3) 30%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.1) 70%, rgba(0,0,0,0) 100%); 방향, 특정 위치에서 색상정도 정의 가능. 2022. 6. 29. css로 가로 스크롤 가능한 이미지 리스트 만들기 html 은 다음과 같이 작성해주세요 ..................li 태그 반복작성........ css 는 다음과 같이 작성해주세요. .carousel { overflow-x : scroll, display: flex; } li { flex : 0 0 600px; // 가로폭 600px 로 고정함 padding-right : 20px; // 리스트간 간격을 20px로 조정 img { width: 100%; height: 100%; // 높이를 모두 같이 맞출 경우 height 속성 사용 object-fit : contain 또는 cover ; 그대로 복사해서 사용하시면 안되고요. 읽고 이해하시면 간단하고 쉬운 가로 스크롤 이미지를 만드실 수 있습니다. 완성본 예 2022. 1. 3. 미디어 쿼리를 지원하지 않는 브라우저에 대응하려면? respond.js 사용하기 반응형 웹은 기본적으로 데스크탑을 비롯해 태블릿, 모바일 등 다양한 기기에 대응할 수 있어야 합니다. 그런데 아직까지 국내 사용자가 많은 인터넷 익스플로러 브라우저의 6~8버전에서는 반응형 웹이 동작하지 않습니다. 인터넷 익스플로러 6~8버전을 비롯해 미디어 쿼리를 지원하지 않는 브라우저에서도 반응형 웹이 동작하도록 설계하려면 respond.js 자바스크립트 라이브러리를 다운로드해서 링크하면 됩니다. github 링크 : github.com/scottjehl/respond scottjehl/Respond A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more) - scottjehl/Respond git.. 2021. 1. 23. box-shadow로 입체감있는 구 만들기 box-shadow의 값을 조절하여 입체감 있는 구를 만들어 보았습니다. See the Pen box-shodow attribute by ziziziczic (@ziziziczic) on CodePen. box-shadow : x값 y값 blur값 그림자두께 색상 ; box-shadow 안에 inset 값은 내부 그림자를 셋팅하기 위함입니다. 그림자를 여러개 사용하길 원할 경우 , 쉼표를 찍고 , 값을 반복해서 사용하면 됩니다. 예시 : box-shadow : x값 y값 blur값 그림자두께 색상 , x값 y값 blur값 그림자두께 색상 , x값 y값 blur값 그림자두께 색상 ; // 3개의 그림자가 생성됨. 2021. 1. 7. line-height=1 이 의미하는 바는? 폰트 위,아래로 가독성을 위해 leading이라는 공간이 있음. 그림에서 보라색 부분이 leading임. 이는 폰트 제작자가 설정해둔 값임. line-height는 그림과 같다. 즉, 위아래 leading까지 다 들어간 값임. 즉, line-height = normal이면 폰트제작자가 설정해둔 leading값이 적용됨. 만약에 line-height를 1로 둔다면? 이를 다음 그림으로 확인해보자. line-height를 1로 설정한다는것은 폰트사이즈만큼 높이를 갖겠다는 것. 이는 가독성이 매우 떨어진다. 글씨가 다닥다닥 위,아래로 붙어서 글을 읽기가 힘듦. 위의 알파벳 y를 보면 하단으로 삐져 나온것이 보이는데 이러한 공간(leading 영역)까지 고려한다면 line-height 값은 1보다 큰값으로 설정.. 2020. 12. 26. 테두리에 애니메이션을 적용해보자 See the Pen menu animation by ziziziczic (@ziziziczic) on CodePen. 2020. 12. 24. data- 속성 사용하기 정의와 사용법 html 태그에 사용자가 원하는 속성값을 주는 방법이라 할수 있습니다. data- 속성은 웹 문서의 레이아웃이나 내용에는 영향을 주지 않으면서 특정한 속성을 지정하고 싶을 때 사용자가 원하는 이름으로 만들수 있는 속성입니다. 어느 엘리멘트에나 data-로 시작하는 속성은 무엇이든 사용할 수 있습니다. 화면에 안 보이게 글이나 추가 정보를 엘리멘트에 담아 놓을 수 있어요. 예) ... JavaScript에서 사용법 값을 읽기 위한 완전한 HTML 이름과 함께 getAttribute() 를 사용하면 됩니다. 그러나 표준은 더 간단한 방법을 정의합니다.: DOMStringMap 는 dataset 속성을 통해 읽어낼 수 있습니다. dataset 객체를 통해 data 속성을 가져오기 위해서는 속성 .. 2020. 12. 17. 실습) 말풍선 만들기 See the Pen speech bubble by ziziziczic (@ziziziczic) on CodePen. 가상요소의 상단 border에만 색상값을 주고, 남은 면은 모두 투명으로, 이렇게 만들어진 삼각형을 말풍선으로 사용합니다. 2020. 12. 5. 실습) :before , :after 가상요소 실습 2번째 See the Pen :before, :after Pseudo element by ziziziczic (@ziziziczic) on CodePen. 가상요소 :before , :after 실습예제 2번째 2020. 12. 5. 이전 1 2 다음
