CSS 애니메이션이란 각 요소들을 CSS만으로 스타일을 다른 스타일로 부드러운 전환을 시켜주는 걸 말합니다. 애니메이션(Animation)은 키프레임들(Keyframes)로 구성이 되어집니다. 자바스크립트 없이 CSS만으로도 부드러운 전환을 시킬수 있는게 애니메이션의 장점입니다. 다만 분명한 한계는 있습니다. Animation 속성 animation: name duration timing-function delay iteration-count direction fill-mode; animation 속성입니다. 이 각각의 속성들은 단일 속성으로도 사용이 가능합니다. animation-name: 동작할 애니메이션(keyframes) animation-duration: 애니메이션 지속 시간; animation..
웹사이트를 살펴보면 대부분 박스로 이뤄져있습니다. 그렇다면 Box는 무엇일까요? Blocks and Inlines 앞에서 웹사이트는 대부분 박스로 이뤄져있다고 했습니다. 다음 웹사이트입니다. 페이지 구성을 보면 이렇게 덩어리가 잡히는 걸 볼 수 있습니다. 이런 큰 틀이 바로 박스입니다. 가장 기본적인 박스 태그는 div입니다. 바로 비어있는 박스입니다. 여기서 이제 알아야하는 박스의 가장 큰 특징은 박스 옆에는 아무것도 올 수 없습니다.이런 특징을 가르켜서 Block이라고 합니다. 이게 어떤 의미 인지는 이미지로 확인해보겠습니다. 아무것도 없는 div 박스 3개를 추가했습니다. 하나의 긴 직사각형 같지만 붙어있는 div 세개 입니다. 왼쪽 이미지를 보면 div 하나가 선택되면서 영역을 볼 수 있습니다. ..
CSS가 뭔지 지난 번에 간단히 알아 보았는데요. 스타일 시트 즉 꾸며주는 역할을 하고 있습니다. 그러면 HTML에 어떻게 CSS를 적용 시킬 수 있을까요? 사용해볼 방법은 2가지 알아보려고 합니다. 하나는 inline, 다른 하나는 외부 external하게 연결하는 방법입니다. [공부/css] - css란? 초보자의 눈높이에서 알아보기 inline HTML에 직접 포함 하기 첫 번째로는 HTML에 직접 CSS 코드를 사용하는 방법입니다. 먼저 이걸 사용하기 위해서는 CSS에서 HTML을 가리킬 수 있어야 하는데요. 지난 번에도 말했듯이 '이 태그는 파란색이야', '여기 크기는 커야 돼 ' 이렇게 할 수 있으려면 HTML의 태그들을 가리킬 수 있어야 합니다. Selector 이렇게 가리키는 것을 Sele..
CSS란 cascading style sheet의 약자로 종속형 시트라고 합니다. HTML이 마크업 언어라고 했었는데요. 이 마크업 언어가 실제 표시되는 방법을 기술하는 내용을 담고 있습니다. [공부/html] - HTML이란? 웹 공부 시작하기 예를 들어 HTML은 이건 링크로 이건 이미지고 이건 타이틀이야 라고 알려준다면. CSS는 저 텍스트는 빨간색이고, 저 이미지의 크기는 커야 해, 그리고 저 버튼은 이 박스와 같이 있어야 하구, 이 타이틀은 파란색 이어야 해. 하며 알려주는 역할을 하고 있습니다. 즉 HTML은 브라우저에게 각 요소가 무엇인지 설명하고, CSS로 요소의 색상, 크기, 배경은 어떠한지 등등을 설명할 수 있습니다. 간단하게는 HTML은 마크업, CSS는 이를 디자인한다고 생각하면 됩..
