연습장

https://poiemaweb.com/css3-webfont CSS3 Web Font | PoiemaWeb웹디자인 관점에서 폰트의 선택은 중요한 의미를 갖는다. 대부분의 정보는 텍스트와 이미지로 전달되고 아직은 텍스트가 주를 이루기 때문에 더욱 그러하다. 이전에는 웹에서 사용할 수 있는poiemaweb.com 많은 정보가 텍스트와 이미지로 전달되고 있으며 웹 디자인 관점에서 폰트의 선택은 중요하다.웹페이지는 불특정 사용자를 위해 제작되기 때문에 어떤 사용자가 웹페이지에 접근할 지 알 수 없으며웹 브라우저는 로컬 소프트웨어이므로 로컬 환경에 있지 않은 폰트는 사용할 수 없다. 이러한 문제를 HTML, CSS , JS 처럼 폰트 또한 서버에서 클라이언트로 다운로드하여 해결할 수 있다.  1. CDN(Con..

https://poiemaweb.com/css3-transform CSS3 Transform | PoiemaWeb트랜스폼(Transform)은 요소에 이동(translate), 회전(rotate), 확대축소(scale), 비틀기(skew) 효과를 부여하기 위한 함수를 제공한다. 단 애니메이션 효과를 제공하지는 않기 때문에 정의된 프로퍼티가 바poiemaweb.com   트랜지션은 CSS 스타일 변경을 부드럽게 표현하기 위해 duration(지속시간)을 부여하여 속도를 조절한다. 애니메이션은 하나의 줄거리(@keyframes)를 구성하여 줄거리 내에서 세부 움직임을 시간 흐름 단위로 제어하여 요소의 움직임을 표현한다. 트랜스폼(Transform)은 요소에 이동(translate), 회전(rotate), 확..

https://poiemaweb.com/css3-animation CSS3 Animation | PoiemaWeb애니메이션(Animation) 효과는 HTML 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 변화시킨다. 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 sequence를 나타내는 복수poiemaweb.com  애니메이션은 CSS 스타일과 애니메이션의 sequence를 나타내는 복수의 키프레임(@keyframes) 들로 이루어진다. transition으로도 어느 정도의 애니메이션 효과를 표현할 수 있으나 animation보다는 제한적이다.   Q. 어떤효과를 사용할 것인지? transition : 단순히 요소의 프로퍼티 변화animation : 하나의 줄거리를 구..

https://poiemaweb.com/css3-transition CSS3 Transition | PoiemaWeb트랜지션(transition)은 CSS 프로퍼티 변경에 따른 표시의 변화를 부드럽게 하기 위해 애니메이션 속도를 조절한다. 즉, 프로퍼티 변경이 표시의 변화에 즉시 영향을 미치게 하는 대신 그 프로퍼티poiemaweb.com   트랜지션(transition)은 CSS 프로퍼티의 값이 변화할 때, 프로퍼티 값의 변화가 일정 시간(duration)에 걸쳐 일어나도록 하는 것이다.  ex)div 요소는 기본 상태에서 hover 상태로 변화할 때, CSS 프로퍼티 border-radius와 background 프로퍼티의 값이 변화한다. DOCTYPE html>html>head>  style>   ..

https://poiemaweb.com/css3-gradient CSS3 Gradient | PoiemaWeb그레이디언트(Gradient)는 2가지 이상의 색상을 혼합하여 부드러운 색감의 배경 등을 생성하는 것이다. CSS3가 이 기능을 제공하기 이전에는 포토샵 등의 소프트웨어를 사용하여 그레이디언트 효과poiemaweb.com 그레이디언트(Gradient)는 2가지 이상의 색상을 혼합하여 부드러운 색감의 배경 등을 생성하는 것이다.   포토샵 등의 소프트웨어를 사용하여 그레이디언트 효과의 이미지를 제작 시 단점이미지 다운로드에 시간이 소요되는 문제이미지를 확대하였을 때 해상도가 나빠지는 문제 등 선형 그레이디언트 (Linear Gradient: goes down/up/left/right/diagonal..

https://poiemaweb.com/css3-shadow CSS3 Shadow | PoiemaWeb텍스트나 요소에 그림자(Shadow) 효과를 부여하기 위한 프로퍼티를 선언한다.poiemaweb.com  텍스트나 요소에 그림자(Shadow) 효과를 부여하기 위한 프로퍼티를 선언한다.  1. text-shadow 텍스트에 그림자 효과를 부여하는 프로퍼티이다. 3종류의 그림자를 한번에 넣는 코드  선택자 { text-shadow: Horizontal-offset Vertical-offset Blur-Radius Shadow-Color; }  h1:nth-child(7) {  color: white;  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px dar..

https://poiemaweb.com/css3-vendor-prefix CSS3 Vendor Prefix | PoiemaWebCSS3 표준으로 확정되기 이전 또는 브라우저 개발사가 실험적으로 제공하는 기능을 사용하기 위해서는 벤더 프리픽스를 사용하여야 한다.poiemaweb.com  주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때이전 버전의 웹 브라우저에 알려주기 위해 사용하는 접두사(prefix)  * {  -webkit-user-select: none;  /* Chrome all / Safari all */  -moz-user-select: none;     /* Firefox all */  -ms-user-select: none;      /* IE 10+ */  user-select..