개발새발 로그

트랜지션은 CSS 스타일 변경을 부드럽게 표현하기 위해 duration(지속시간)을 부여하여 속도를 조절한다. 애니메이션은 하나의 줄거리(@keyframes)를 구성하여 줄거리 내에서 세부 움직임을 시간 흐름 단위로 제어하여 요소의 움직임을 표현한다. 트랜스폼(Transform)은 요소에 이동(translate), 회전(rotate), 확대축소(scale), 비틀기(skew) 효과를 부여하기 위한 함수를 제공한다. 단 애니메이션 효과를 제공하지는 않기 때문에 정의된 프로퍼티가 바로 적용되어 화면에 표시된다. 트랜스폼은 애니메이션 효과를 위해 사용하여야 하는 것은 아니지만 애니메이션 효과를 부여할 필요가 있다면 트랜지션이나 애니메이션과 함께 사용한다. 1. 2D 트랜스폼 (2D Transform) 2D 트..

레이디언트(Gradient)는 2가지 이상의 색상을 혼합하여 부드러운 색감의 배경 등을 생성하는 것이다. CSS3가 이 기능을 제공하기 이전에는 포토샵 등의 소프트웨어를 사용하여 그레이디언트 효과의 이미지를 제작하여 사용하였다. 그러나 이러한 방법은 이미지 다운로드에 시간이 소요되는 문제와 이미지를 확대하였을 때 해상도가 나빠지는 문제 등을 내포하고 있었다. 그레이디언트는 2가지 종류가 있다. 선형 그레이디언트 (Linear Gradient: goes down/up/left/right/diagonally) 방사형 그레이디언트 (Radial Gradient: defined by their center) 그레이디언트는 CSS3가 비교적 최근부터 제공하는 기술로서 대부분의 브라우저에 벤더프리픽스를 사용하여야 ..

1. text-shadow 텍스트에 그림자 효과를 부여하는 프로퍼티이다. 선택자 { text-shadow: Horizontal-offset Vertical-offset Blur-Radius Shadow-Color; } 프로퍼티 값 단위 설명 생략 여부 Horizontal-offset px 그림자를 텍스트의 오른쪽으로 지정값만큼 이동시킨다 Vertical-offset px 그림자를 텍스트의 아래로 지정값만큼 이동시킨다 Blur-Radius px 그림자의 흐림정도를 지정한다. 지정값만큼 그림자가 커지고 흐려진다. (양수) 가능 Shadow-Color color 그림자의 색상을 지정한다 가능 2. box-shadow 요소에 그림자 효과를 부여하는 프로퍼티이다. 선택자 { box-shadow: Inset Hor..

1. 상속(Inheritance) 상속이란 상위(부모, 조상) 요소에 적용된 프로퍼티를 하위(자식, 자손) 요소가 물려 받는 것을 의미한다. 상속 기능이 없다면 각 요소의 Rule set에 프로퍼티를 매번 각각 지정해야 한다. 하지만 모든 프로퍼티가 상속되는 것은 아니다. 프로퍼티 중에는 상속이 되는 것과 되지 않는 것이 있다. 프로퍼티 상속 width/height no margin no padding no border no box-sizing no display no visibility yes opacity yes background no font yes color yes line-height yes text-align yes vertical-align no text-decoration no white..

folat float 프로퍼티는 주로 레이아웃을 구성할 때 블록 레벨 요소를 가로 정렬하기 위해 사용되는 중요한 기법이다. flexbox 레이아웃를 사용한다면 더욱 간단하게 정렬을 구현할 수도 있지만 flexbox 레이아웃을 지원하지 않는 IE를 고려해야 한다면 float 프로퍼티를 사용해야 한다. float 프로퍼티는 해당 요소를 다음 요소 위에 떠 있게(부유하게) 한다. 여기서 떠 있다(float)는 의미는 요소가 기본 레이아웃 흐름에서 벗어나 요소의 모서리가 페이지의 왼쪽이나 오른쪽에 이동하는 것이다. float 프로퍼티를 사용할 때 요소의 위치를 고정시키는 position 프로퍼티의 absolute를 사용하면 안된다. float 프로퍼티를 사용하지 않은 블록 요소들은 수직으로 정렬된다. float..

Grid는 두 방향인 가로와 세로로 된 레이아웃 시스템이다. 부모 요소인 div.container를 Grid Container(그리드 컨테이너)라고 부르고, 자식 요소인 div.item들을 Grid Item(그리드 아이템)이라고 부릅니다. 사용법 .container { display: grid; } grid-template-columns : 40% 60% : 40% 60%로 나눔 grid-template-columns: 4fr 6fr 이것과 동일하다. . item:nth-child(odd) : 홀수 자식들에게는 다른 속성을 줌 grid-gap :1 rem : 그리드마다 여백을 줌 ->갭을 쓰게 되면 40% 60%으로 했을 때 그 공간 이외에도 옆에 공간이 생겨서 가로스크롤이 생김 -> grid-templ..

CSS Flex -그림과 같이 flex를 적용하면 왼쪽에서 오른쪽으로 쌓아진다. -flex-direction은 row가 기본값이다 (안 적어도 row로 적용됨) -flex-direction : column -flex-direction : row-reverse -flex-direction : column-reverse flex-wrap -뷰 포트가 아이템들의 폭보다 줄어들었을 때 어떻게 할건지 정하는 것이다. -원래는 아무것도 적용하지 않으면 잘려서 보이게 된다. flex-wrap : wrap flex-wrap: wrap-reverse : 거꾸로도 가능 justify-content 지금 현재 축 방향으로 정렬해주는 것이다. 즉 축을 기준으로 왼쪽 오른쪽 가운데 등으로 정렬한다. justify-content..

태그나 태그를 사용하면 아래처럼 자동으로 보기 좋게 간격을 띄워놔준다. 이러한 간격은 css로 디자인을 따로 하지않아도 자동으로 설정되는 것이다. 근데 만약 우리가 개발할 때 어떤 디자인에 맞춰서 개발을 해야한다고 생각해보자. 그렇게 되면 이러한 서식들은 정확한 css를 작성할 때 방해가 될 것이다. 이런 원래있는 서식들을 취소해주는 코드를 작성해야 내가 원하는 서식을 적용할 수 있을 것이다. 이때 필요한 것이 CSS reset이다. 기본 서식이 들어가지 않은 순수한 상태로 만들어주는 것이다. 구글에 CSS reset을 검색하면 다양한 css reset들이 있다. 그 중에서 나는 아래의 링크를 이용했다. https://cssdeck.com/blog/scripts/eric-meyer-reset-css/ E..