연습장

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..

https://poiemaweb.com/css3-inheritance-cascading CSS3 Inheritance & Cascading | PoiemaWeb상속이란 상위(부모, 조상) 요소에 적용된 프로퍼티를 하위(자식, 자손) 요소가 물려 받는 것을 의미한다. 상속 기능이 없다면 각 요소의 Rule set에 프로퍼티를 매번 각각 지정해야 한다. 하지만poiemaweb.com   1. 상속(Inheritance) 상속이란 상위(부모, 조상) 요소에 적용된 프로퍼티를 하위(자식, 자손) 요소가 물려 받는 것을 의미한다. 상속 기능이 없다면 각 요소의 Rule set에 프로퍼티를 매번 각각 지정해야 한다. 하지만 모든 프로퍼티가 상속되는 것은 아니다. 프로퍼티 중에는 상속이 되는 것과 되지 않는 것이 있..

https://poiemaweb.com/css3-float CSS3 Float | PoiemaWebfloat 프로퍼티는 주로 레이아웃을 구성할 때 블록 레벨 요소를 가로 정렬하기 위해 사용되는 중요한 기법이다. flexbox 레이아웃를 사용한다면 더욱 간단하게 정렬을 구현할 수도 있지만 flexbox 레poiemaweb.com   float 프로퍼티는 주로 레이아웃을 구성할 때 블록 레벨 요소를 가로 정렬하기 위해 사용되는 중요한 기법이다. float 프로퍼티는 본래 아래 예제와 같이 이미지와 텍스트가 있을 때, 이미지 주위를 텍스트로 감싸기 위해 만들어진 것이다.   style>    img {      float: left;      margin-right: 10px;    }  style>  flo..

https://poiemaweb.com/css3-position CSS3 Position | PoiemaWebposition 프로퍼티는 요소의 위치를 정의한다. top, bottom, left, right 프로퍼티와 함께 사용하여 위치를 지정한다.poiemaweb.com 1. position 프로퍼티 position 프로퍼티는 요소의 위치를 정의한다.static (기본위치)relative (상대위치)absolute (절대위치)fixed (고정위치)+ top, bottom, left, right 프로퍼티와 함께 사용하여 위치를 지정한다. 1. static은 기본값이며 이미 설정된 position을 무력화하기 위해 사용될 수 있다. 2. relative 기본 위치(static으로 지정되었을 때의 위치)를 기..

https://poiemaweb.com/css3-font-text    1. font-size 프로퍼티텍스트의 크기를 정의한다. style>    .font-size-40 { font-size: 40px; }    .font-size-2x { font-size: 2.0em; }    .font-size-150ps { font-size: 150%; }    .font-size-large { font-size: large; }  style> 주로 px , em , % 를 사용해봤으나 small large 등은 처음들어보는것같다.   2. font-family 프로퍼티 폰트를 지정한다. 컴퓨터에 해당 폰트가 설치되어 있지 않으면 적용되지 않는다. font-family 폰트는 여러 개를 동시에 지정이 가능하다...

https://poiemaweb.com/css3-background CSS3 Background | PoiemaWebBackground 관련 프로퍼티는 해당 요소의 배경으로 이미지 또는 색상을 정의한다.poiemaweb.com    1. background-image 프로퍼티 요소에 배경 이미지를 지정한다. div {background-img : url("http:// ~~ .png"); }  2. background-repeat 프로퍼티 background-repeat : repeat //  반복 출력 , 기본값background-repeat : repeat-x  // x축으로만 배경 이미지를 반복할 경우background-repeat : repeat-y  // y축으로만 배경 이미지를 반복할 경우ba..