이번 포스팅에서는 CSS속성 중에서 Animation에 대해서 알아보도록 하겠습니다! 우선 CSS에서 애니메이션을 사용하려면 사용하려는 대상이 있어야겠죠? 그리고 그 대상에 어떤 애니메이션을 줄 것인지가 지정되어야 합니다. 그래서 링크방식을 사용하려면 HTML에서 요소를 선택해서 그 안에 animation-name:입히고 싶은 애니메이션 이름;이 있어야하고, 해당 CSS파일 내에 @keyframe 입히고 싶은 애니메이션이름{...} 이렇게 두 줄이 필수적으로 있어야 합니다! 또한 animation속성에는 - animation-name: @keyframes 애니메이션 이름 지정 - 시작: from or 0% - 중간: 0~100% - 끝: to or 100% - animation-duration: 한 사이..
CSS
벌써 2주차가 되었네요..! 이번에는 display속성에 대해서 알아보도록 할 거에요!(조금 밀렸지만 그만큼 꼼꼼하게 다뤄보도록 하겠습니다) display속성들간의 차이점을 알아두는 것이 중요하고 특히 그 중에서도 flex가 중요하니 잘 알아두도록 합시다!! display 속성의 종류에는 inline block inline-block flex grid 등이 있습니다! 그럼 하나하나 알아보도록 할까요? 1. display: block, display: inline, display:inilne-block 먼저, display속성은 어떻게 사용하는 것인지? 사용하는 목적은 무엇인지 부터 알아야겠죠? https://developer.mozilla.org/ko/docs/Web/CSS/display display ..
이번에는 선택자에 대해서 알아보도록 할 거에요. 선택자가 어떻게 구성되어있는지부터 먼저 알아보도록 할게요~! 여기에서 p가 선택자이고 중괄{}를 열고 닫는 것을 블록이라고 해요. color:red;이렇게 ;(세미콜론)이 하나 찍히기까지의 단위를 하나의 선언이라고 하고, 하나의 선언에는 속성(property)와 속성값(value)가 포함되어 있어요! 선택자로는 HTML의 요소를 선택하고 {}내에 속성값을 지정하여 다양한 style을 지정하면 되겠죠 또한 여러개의 위에서 처럼 여러개의 프로퍼티를 연속해서 지정할 수 있으며 프로퍼티간의 구분은 세미콜론으로 해요! 속성은 표준 스펙으로 지정되어있는것을 사용하고, 사용자가 임의로 정의할 수는 없어요. 값은 해당 속성에 사용할 수 있는 값을 키워드나 크기단위 또는 ..
안녕하세요! 오늘은 CSS에 대해서 정리해보도록 하겠습니다! 사실 CSS는 내용이 HTML보다 더 많아서 포스팅이 더 길어질 것 같긴한데 그래도 이왕 시작한거 끝을 봐야겠죠~~?? 그럼 CSS첫번째 포스팅 시작해보도록 하겠습니다! 1. CSS란 무엇인가? Cascading Style Sheet의 약자입니다! 여기에서 Cascading는 '폭포, 연속적인'이라는 의미를 갖는 단어인데 이는 상위요소에서 지정한 스타일이 하위요소까지 연속적으로 적용된다는 의미로 css에서는 적용해 볼 수 있겠죠? 모든 속성이 다 cascading 되지는 않지만 중요한 속성이므로 cascading의 의미는 잘 알아두는 것이 좋다고 합니다! 웹페이지를 디자인 하기위해 사용하는 스타일 언어죠! 그렇다면 CSS는 왜 사용하는 걸까요?..
