CSS33 CSS3로 동적 변화를 만들어보자 - 3. Animation CSS3로 만들어 낼 수 있는 동적 변화는 transform(변환), transition(전환) 그리고 animation(애니메이션)이다.AnimationHTML 태그의 모양 변화를 transition과는 다르게 시간 단위를 설정하여 쉽게 애니메이션 효과를 만들 수 있다. 시간비율은 %나 from, to로 표현한다. from은 시작 부분을 의미하고 to는 마지막 지점을 의미한다. %로 표현할 경우 0%가 시작부분, 100%가 마지막 부분을 뜻한다. animation의 경우에는 애니메이션의 유지관리가 쉬워지고 유동적이게 된다는 장점이 있지만, animation으로 표현가능한 부분이 많아지면서 css의 코드 관리가 힘들어진다는 단점이 있다.@keyframes 이름 {시간비율{스타일}시간비율{스타일}}애니메이.. 2024. 7. 8. CSS3로 동적 변화를 만들어보자 - 2. Transition CSS3로 만들어 낼 수 있는 동적 변화는 transform(변환), transition(전환) 그리고 animation(애니메이션)이다. TransitionHTML태그에 적용된 CSS 프로퍼티 값이 변할 때, 변화를 서서히 진행하여 애니메이션 효과를 발생시킨다. 복잡하지 않은 단순한 애니메이션에서 사용된다. transition: 전환프로퍼티 전환시간 timing-function값 지연시간;transition에 전환프로퍼티(전환할 항목)과 전환시간을 한번에 적을 수도 있고 따로 적을 수도 있다. 만약 전부 다 속성으로 지정하고 싶을 경우에는 all을 사용할 수 있지만, 세세한 duration 조정이 불가능하다. transition-property: 전환할 프로퍼티;transition-duration: 애.. 2024. 7. 8. CSS3로 동적 변화를 만들어보자 - 1. Transform CSS3로 만들어 낼 수 있는 동적 변화는 transform(변환), transition(전환) 그리고 animation(애니메이션)이다. Transform : 2차원 변환Translate Translate는 요소의 위치를 이동시킬 수 있는 변환함수이다. translateX는 태그를 x축으로 n만큼 이동시키고, translateY는 태그를 y축으로 그리고 translate는 태그를 x, y축으로 x, y만큼 이동시킨다. transform: translateX(n) | translateY(n) | translate(x, y);ScaleScale은 요소를 설정한 배수만큼 크기를 조절하는 변환함수이다. scaleX는 x축으로(폭을) n배만큼 조절하고, scaleY는 y축으로(높이를) n배만큼 조절하고, s.. 2024. 7. 8. CSS의 선택자(selector) - 4. :target, :not 선택자 관련 글(1) 전체선택자, class선택자, id선택자, 태그선택자, 속성선택자(2) 하위선택자, 자식선택자, 인접형제선택자, 형제선택(3)속성선택자(4)가상클래스, 가상요소선택자:target가상선택자 중 하나로 target은 링크 태그()에 사용되어 최종 목적지의 CSS를 활성화시킬 수 있다. id를 사용하여 a태그와 요소를 연결한다. 첫번째 링크 두번째 링크 첫번째 선택 링크 두번째 선택 링크 :not();not셀렉터는 단독으로 사용할 수 있으며 특정 요소가 아닌 모든 요소를 선택할 때 사용된다. 전체 초기화를 한 다음에 not을 사용하여 속성이 변경되면 안되는 항목들에 대해 예외를 주는 방식으로 사용한다. p태그입니다 h2태그입니다 p태그입니다 .. 2024. 7. 7. CSS의 선택자(selector) - 3. 가상 클래스 선택자(pseudo class)와 가상요소 선택자(pseudo element) 선택자 관련 글(1) 전체선택자, class선택자, id선택자, 태그선택자, 속성선택자(2) 하위선택자, 자식선택자, 인접형제선택자, 형제선택(3)속성선택자가상 클래스 선택자 요소:가상클래스{}위치 가상클래스불특정위치에서 순서를 찾아 들어갈 경우 요소를 특정 지을 수 있는 선택자이다. :root최상단에 위치했다는 뜻으로, 속성 선택자 없이 혼자서 사용이 가능하다. 문서 전체에 할당되는 css를 작성할 때 사용한다. :first-child | :first-of-type부모 요소의 가장 첫번째 요소 / 타입의 가장 첫번째 요소 (ex) div>p:first-child : div 부모 밑에 있는 모든 p요소들 중 가장 첫번째 요소):last-child | :last-of-type부모 요소의 가장 마지막 요소 .. 2024. 7. 7. CSS의 선택자(selector) - 2. 속성선택자 선택자 관련 글(1) 전체선택자, class선택자, id선택자, 태그선택자, 속성선택자(2) 하위선택자, 자식선택자, 인접형제선택자, 형제선택속성선택자(attribute selector)에 대해 이전 글에서 간단하게 말하고 넘어갔다. 속성선택자의 경우에는 속성값에 조건을 붙여서 선택할 수 있는데 이에 대해서 설명해보고자 한다. 속성 선택자의 경우 특정 속성에 접근하기 위해서 사용하는데 대부분 input을 사용할 때 쓰인다. 셀렉터[readonly]{}해당하는 셀렉터에 readonly 속성이 있으면 스타일을 적용한다는 뜻이다.셀렉터[value="문자"]{}해당하는 셀렉터의 value 속성이 정확히 "문자"일 때 스타일을 적용한다는 뜻이다.셀렉터[title~="문자"]{}해당하는 셀렉터의 title 속성에 .. 2024. 7. 7. 이전 1 2 3 4 5 6 다음