Frontend/CSS31 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. CSS의 선택자(selector) - 1. 하위선택자, 자식선택자, 인접선택자, 형제선택자 CSS에서는 선택자를 이용하여 적용할 요소를 선택할 수 있다. 속성선택자, 클래스선택자들에 대해서는 이전 문서에서 설명했었고 그 외의 선택자들에 대해 설명하고자 한다. 더 많은 선택자들은 W3School에서 볼 수 있다.상위요소 하위요소{}하위선택자로 어디에 있든 상관 없이 조건에 맞으면 스타일이 적용된다 (ex) div p{} - div안에 있는 모든 p태그들)상위요소>하위요소{}자식선택자로 부모 요소의 자식 요소에만 스타일이 적용된다. (ex) .div1>p{} - div1 부모클래스 안에 있는 모든 p태그들)최상위요소>상위요소>하위요소{}이런식으로 선택자를 연쇄적으로 사용할 수 있다. 이렇게 사용할 경우 적은 클래스로도 타켓팅이 가능하다.최상위요소.상위요소>하위요소{}선택자를 중첩해서 사용하는 방법.. 2024. 7. 7. 이전 1 2 3 4 5 6 다음