odada

이미지 스프라이트 운영성 이미지 성격이 아닌 아이콘 또는 장식을 위한 이미지 요소들은 스프라이트 기법을 활용하여 파일의 Size, Request 최소화를 도모한다. 이미지 타입 선택 프로젝트 종류에 따른 이미지 타입표종류PC webMobile WebMobile AppGIFJPGPNG-8PNG-24이미지 스프라이트 AppGIFJPGPNG-8PNG-24이미지 스프라이트 종류 PC web Mobile Web Mobile App GIF 기본 사용 가능 X JPG 컬러수 많거나 운영성 이미지일 때 운영성 이미지일 때 X PNG-8 X 기본 반투명효과 없고 컬러가 적을 때 PNG-24 반투명효과가 있을 때에만 사용 컬러 수 많거나 반투명효과가 있을 때 기본 이미지 스프라이트 O O X PC Web 기본 포맷은 GI..

WAW.js https://wowjs.uk/ wow.js — Reveal Animations When Scrolling wowjs.uk CSS3Animate https://jackonthe.net/css3animateit/ CSS3 Animate It Examples - Animate Elements on Scroll Sequencing If you want to have a set of animations start one after the other then you can set a sequence time in ms using "data-sequence" then define the order with "data-id". It Works! This animation will start 500ms a..

sass-lang.com/ Sass: Syntactically Awesome Style Sheets Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. sass-lang.com 중첩 HTML 을 작성할 때 분명히 중첩되고 시각적인 계층 구조가 있음을 알게 될 것입니다. 반면에 CSS 는 그렇지 않습니다. Sass를 사용하면 HTML 의 동일한 시각적 계층 구조를 따르는 방식으로 CSS 선택기 를 중첩시킬 수 있습니다 . 지나치게 중첩 된 규칙은 유지하기 어려울 수 있고 일반적으로 나쁜 관행으로 간주 될 수있는 CSS 를 초과하게됩니다 . 이를 염두에두고 다음은 사이트 탐색을위..

sass는 css 코딩을 쉽게 할 수 있도록 도와줍니다. sass-lang.com/ Sass: Syntactically Awesome Style Sheets Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. sass-lang.com SASS(SCSS)를 컴파일하기 위해선 node-sass를 설치해야 하고 node-sass를 설치하려면 node.js가 필요합니다. 아래 순서로 설치해주세요~ 1. node.js 설치 https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaSc..

CSS 전환을 사용하면 지정된 기간 동안 속성 값을 부드럽게 변경할 수 있습니다. CSS 전환 효과를 보려면 아래 요소 위로 마우스를 이동하십시오. CSS 이 장에서는 다음과 같은 속성에 대해 설명합니다. transition transition-delay transition-duration transition-property transition-timing-function

3D Transforms CSS는 3D 변환도 지원합니다. 아래 요소 위로 마우스를 이동하여 2D와 3D 변환의 차이점을 확인하십시오. 2D 회전 3D 회전 CSS 3D 변환 방법 CSS transform속성을 사용하면 다음 3D 변형 방법을 사용할 수 있습니다. rotateX() rotateY() rotateZ() rotateX () 메서드 이 rotateX()방법은 주어진 각도에서 X 축을 중심으로 요소를 회전시킵니다. #myDiv { transform: rotateX(150deg); } rotateY () 메서드 이 rotateY()방법은 주어진 각도에서 Y 축을 중심으로 요소를 회전시킵니다. #myDiv { transform: rotateY(130deg); } rotateZ () 메서드 이 rot..

Transforms CSS 변환을 사용하면 요소를 이동, 회전, 크기 조절 및 기울일 수 있습니다. 2D 회전 브라우저 지원 표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다. 브라우저 별 접두사 일부 구형 브라우저 (IE 9)는 2D 변환 속성을 이해하기 위해 특정 접두사 (-ms-)가 필요합니다. div { -ms-transform: rotate(20deg); /* IE 9 */ transform: rotate(20deg); /* Standard syntax */ } CSS 2D 변환 방법 CSS transform속성을 사용하면 다음과 같은 2D 변형 방법을 사용할 수 있습니다. translate() rotate() scaleX() scaleY() scale() skewX() s..

CSS overflow속성은 너무 커서 영역에 맞지 않는 내용의 내용을 제어합니다. #overflowTest { background: #4CAF50; color: white; padding: 15px; width: 50%; height: 100px; overflow: scroll; border: 1px solid #ccc; } This text is really long and the height of its container is only 100 pixels. Therefore, a scrollbar is added to help the reader to scroll the content. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed d..

div { width: 300px; border: 15px solid green; padding: 50px; margin: 20px; } 모든 HTML 요소는 상자로 간주 될 수 있습니다. CSS에서 "상자 모델"이라는 용어는 디자인과 레이아웃에 대해 이야기 할 때 사용됩니다. CSS 상자 모델은 본질적으로 모든 HTML 요소를 둘러싸는 상자입니다. 여백, 테두리, 패딩 및 실제 내용으로 구성됩니다. 아래 이미지는 박스 모델을 보여줍니다. 요소의 너비와 높이 모든 브라우저에서 요소의 너비와 높이를 올바르게 설정하려면 상자 모델의 작동 방식을 알아야합니다. 중요 사항 : CSS를 사용하여 요소의 너비 및 높이 특성을 설정하는 경우 컨텐츠 영역 의 너비 및 높이 만 설정하면 됩니다. 요소의 전체 크기를 계산..

CSS Padding padding속성은 정의 된 테두리 내에서 요소 내용 주위에 공간을 생성하는 데 사용됩니다. padding-top padding-right padding-bottom padding-left div { padding-top: 50px; padding-right: 30px; padding-bottom: 50px; padding-left: 80px; } div { padding: 25px 50px 75px 100px; } 패딩 및 요소 너비 CSS width속성은 요소 내용 영역의 너비를 지정합니다. 내용 영역은 요소의 패딩, 테두리 및 여백 내부의 부분입니다 ( 상자 모델 ). 따라서 요소에 지정된 너비가 있으면 해당 요소에 추가 된 패딩이 요소의 총 너비에 추가됩니다. div { wi..