STYLE SHEET

CSS 3D - 앞 뒤 다른 모습인 카드 만들기

CSS 3D를 만들 땐, 만약 카드를 회전을 시켜서 3D로 보이게끔 만들 때 보통 transform: rotateY() 지정해서 옆으로 돌린다거나 할 수 있다 하지만 3D 느낌으로 보이진 않는데 이럴 때, 카드를 감싸고 있는 공간 엘리먼트를 삼차원으로 바꿔준다 즉, 무대 자체가 3D가 되어야한다는 의미 셋팅 CARD CARD CARD .world { width: 80vw; height: 80vh; background: slateblue; display: flex; align-items: center; justify-content: center; } .card { display: flex; align-items: center; justify-content: center; width: 100px; heig..

CSS Animation - @keyframes, steps

Css Animation frame by frame Image Sprite 여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 이미지를 의미한다 정사각형의 영역만 div에서 보여주고 뒤에 백그라운드 이미지를 서로 간격만큼 씩 이동시키면서 표현할 수 있다 무료 스프라이트 이미지 사이트 보통 해상도가 2배 넘는 이미지를 다운받고 코드에는 반으로 나눠서 작성한다 그 이유는 웹사이트상에서 더 깔끔하게 보이기 위함 .spaceship { width: 150px; height: 150px; background: url('./img.png') no-repeat 0 0 /; } 현재 내가 다운받은 이미지는 크기는 가로 5100, 세로 300이다 보통은 계산기나 머릿속으로 나누기 2를 생각해서 지정하면 되지만 좀 더 ..

CSS Animation - linear, forwards

Animation #1에서 배운 박스를 자연스럽게 왔다갔다하기 animation: ani 3s infinite alternate; 반대 방향에서 시작하기 animation: ani 3s infinite reverse; animation: ani 3s linear; 기본 속성으로 돌아온 뒤 다시 적용하면 박스가 한번 움직이고 첫 스타트 지점으로 되돌아오고 끝나게된다 만약 스타트 지점이 아닌 마지막 지점에 멈추게 할 땐 forwards 속성을 사용한다 animation: ani 3s linear forwards; 박스에 마우스를 가져다 댔을 때 일시정지를 할 수 있게 속성을 지정할 수 있다 .box:hover { animation-play-state: paused; }

CSS Animation

css로 애니메이션을 만들 수 있는 방법은 크게 두가지인데 transition 과 animation이 있다 Animation box .box { display: flex; align-items: center; justify-content: center; width: 100px; height: 100px; border: 2px solid #222; background: rgba(30, 161, 255, 0.5); } Animation 은 다른 속성과 다르게 keyframes을 추가할 수 있다 keyframes란, 어떤 오브젝트가 오른쪽에서 아래로 향하는 방향을 지정할 때 지정하는 방향을 keyframes으로 설정할 수 있다 keyframes을 지정할 땐 시작점과 끝점을 생각하고 지정해야한다 0% ~ 100..

CSS Transition

Transition은 CSS로 애니메이션을 줄 수 있는 속성이다 .box { width: 100px; height: 100px; border: 2px solid #222; background: rgba(30, 161, 255, 0.5); transition: 1s; } .box:hover { transform: scale(2); } 박스 색 변형 .box { transition: 1s; } .box:hover { width: 200px; background: tomato; }

CSS Transform

Transform이란 뭔가 변형에 관련된 CSS 속성이다 뭔가 굴린다거나 변형시킨다거나 등등.. 심지어 3D도 가능하다 또한 하드웨어 가속으로 꽤 부드럽게 작동한다고하여 성능면에서 모바일 앱에서도 자주 사용하는 편이다 A B C D F .box-container { display: flex; } .box { width: 100px; height: 100px; border: 2px solid #222; background: rgba(30, 161, 255, 0.5); } 박스 변형 일으키기 :hover .box:hover { transform: scale(2); } width와 height의 동작 방식은 조금 다르다 scale 속성과 다르게 width와 height는 아래 텍스트가 밀리게 된다 여러가지 값..

CSS 기초

박스모델 width, height, padding, border, margin html 문서는 박스 형태로 되어있다 박스가 일정한 형태로 모델이 구성되기 때문에 박스 모델로 불린다 content 이 박스에 가로가 width, 세로는 heigth를 담당한다 padding content와 border 사이에 안쪽 여백 공간을 표현하는 것을 일컫는다 테두리사이 공간을 주는 것 css에 padding:top 20px를 작성하면 content 기준으로 위로 20px 밀려나게 된다 border 테두리를 나타낸다 어떤 테두리가 원하는지 알려줘야한다 ( 굵기, 스타일, 색상 ) 등 1px solid #222 margin 바깥 쪽 여백을 뜻하며 요소와 요소 사이의 간격을 나타낸다 box .box { width: 300p..