[정리] 5 | 변형함수, 트랜지션과 애니메이션 속성 정리

[정리] 5 | 변형함수, 트랜지션과 애니메이션 속성 정리변형함수종류설명transform : translate(tx, ty)지정한 크기만큼 x축과 y축으로 이동transform : translate(tx, ty, tz)지정한 크기만큼 x축, y축, z축으로 이동transform : translateX(tx)지정한 크기만큼 x축으로 이동transform : translateY(ty)지정한 크기만큼 y축으로 이동transform : translateZ(tz)지정한 크기만큼 z축으로 이동transform : scale(sx, sy)지정한 크기만큼 x축, y축으로 확대, 축소transform : scale(sx, sy, sz)지정한 크기만큼 x축, y축, z축으로 확대, 축소transform : scaleX(s..

• format_list_bulleted 💠프로그래밍 언어/CSS
• · 2022. 7. 14.
• textsms

[기본 개념] 5 | (5.2) 트랜지션, 애니메이션

[기본 개념] 5 | (5.2) 트랜지션, 애니메이션1 변형2> 트렌지션3> 애니메이션2 트렌지션트렌지션과 속성  트랜지션은 웹 요소의 스타일 속성이 시간에 따라 바뀌는 것을 말한다.  종류설명transition-property트랜지션의 대상을 지정transition-duration트랜지션을 실행할 시간 지정transition-timing-funcion트랜지션의 실행 형태를 지정transition-delay트랜지션의 지연 시간 지정transition위 속성을 한꺼번에 지정 트랜지션의 대상을 지정하는 transition-property 속성 기본형transition-property : all | none |  all all 값을 사용하거나 transition-property 를 생략할 경우 요소의 모든 속..

• format_list_bulleted 💠프로그래밍 언어/CSS
• · 2022. 7. 13.
• textsms

[기본 개념] 5 | (5.1) 변형

[기본 개념] 5 | (5.1) 변형1> 변형2 트렌지션3 애니메이션1 변형transform과 변형함수 기본형transform : 함수  변형을 적용하려면 transform 속성과 변형함수 이름을 함께 작성해야 한다. 2차원 변형함수종류설명translate(tx, ty)지정한 크기만큼 x축, y축으로 이동translateX(tx)지정한 크기만큼 x축으로 이동translateY(ty)지정한 크기만큼 y축으로 이동scale(sx, sy)지정한 크기만큼 x축과 y축으로 확대, 축소scaleX(sx)지정한 크기만큼 x축으로 확대, 축소scaleY(sy)지정한 크기만큼 y축으로 확대, 축소rotate(각도)지정한 각도만큼 회전skew(ax, ay)지정한 각도만큼 x축과 y축으로 왜곡skewX(ax)지정한 각도만큼..

• format_list_bulleted 💠프로그래밍 언어/CSS
• · 2022. 7. 11.
• textsms

[정리] 4 | 연결과 속성 선택자, 가상과 구조 가상 클래스, 가상 요소 정리

[정리] 4 | 연결과 속성 선택자, 가상과 구조 가상 클래스, 가상 요소 정리연결 선택자종류형식설명하위 선택자상위요소 하위요소상위요소에 포함된 모든 하위요소를 선택자식 선택자부모요소 > 자식요소부모요소에 포함된 자식요소만 선택인접 형제 선택자요소1 + 요소2요소1 이후 맨 먼저 오는 형제요소 선택형제 선택자요소1 ~ 요소2요소1과 형제인 모든 요소 선택속성 선택자종류선택요소예시[속성]해당 속성이 있는 요소[required][속성 = 값]지정한 속성값이 있는 요소[target = _blank][속성 ~= 값]지정한 속성값이 포함된 요소 (단어별)[class ~= button][속성 != 값]지정한 속성값이 포함된 요소 (하이픈 포함, 단어별)[title != us][속성 ^= 값]지정한 속성값으로 시작하..

• format_list_bulleted 💠프로그래밍 언어/CSS
• · 2022. 7. 4.
• textsms

[기본 개념] 4 | (4.2) 가상 클래스와 가상 요소

[기본 개념] 4 | (4.2) 가상 클래스와 가상 요소1 연결 선택자2 속성 선택자3> 가상 클래스와 가상 요소3 가상 클래스와 가상 요소사용자 동작에 반응하는 가상 클래스  사용자가 웹 요소를 클릭하거나 마우스 포인터를 올려놓는 등 특정 동작을 할 때 스타일이 바꾸도록 만들고 싶을 때 가상 클래스 선택자를 사용한다. 1 방문하지 않은 링크에 스타일을 적용하는 ':link 가상 클래스 선택자' 웹 문서의 링크 중에서 사용자가 아직 방문하지 않은 링크에 스타일을 적용한다. 텍스트 링크는 기본적으로 파란색 글자와 밑줄로 표시된다. 이때 링크의 밑줄을 없애거나 색상을 바꿀 때 :link 선택자를 사용한다. 2 방문한 링크에 스타일을 적용하는 ':visited 가상 클래스 선택자' 웹 문서의 링크 중에서 한 ..

• format_list_bulleted 💠프로그래밍 언어/CSS
• · 2022. 6. 28.
• textsms

[기본 개념] 4 | (4.1) 연결, 속성 선택자

[기본 개념] 4 | 고급 선택자 - (4.1) 연결, 속성 선택자1> 연결 선택자2> 속성 선택자3 가상 클래스와 가상 요소1 연결 선택자하위 요소에 스타일을 적용하는 하위 선택자 기본형상위요소 하위요소  부모 요소에 포함된 하위 요소를 모두 선택하며 자손 선택자라고도 한다. 상위 요소와 하위 요소를 공백으로 구분한다. (ex. 하위 선택자를 사용하여 글자색 적용하기) ... section p { color : blue; } // section 요소의 모든 하위 p 요소를 파란색 글자로 지정... 예약 방법 & 사용 요금 아직 온라인 예약 신청이 ... // section 요소의 모든 하위(자식, 손자) p 요소에 적용 가족실 // section 요소의 모든 하위(자식, 손자) ..

• format_list_bulleted 💠프로그래밍 언어/CSS
• · 2022. 6. 24.
• textsms

[정리] 3 | 배경 이미지, 선형 그라데이션, 원형 그라데이션 정리

[정리] 3 | 배경 이미지, 선형 그라데이션, 원형 그라데이션 정리배경 이미지 속성종류설명background-color배경색을 지정background-clip배경색이나 이미지를 어디까지 적용할지 지정background-image배경 이미지를 지정background-repeat배경 이미지의 반복 방법을 지정background-position배경 이미지를  배치할 기준을 지정background-attachment배경 이미지를 문서에 고정background하나의 속성으로 배경 스타일을 한꺼번에 지정background-size배경 이미지의 크기 조절선형 그라데이션 속성종류설명방향끝 지점을 기준으로 to 예약어 2개까지 사용 가능 (left, rignt, top, bottom)각도그라데이션이 끝나는 각도 지정 ..

• format_list_bulleted 💠프로그래밍 언어/CSS
• · 2022. 5. 27.
• textsms

[기본 개념] 3 | (3.2) 그라데이션

[기본 개념] 3 | (3.2) 그라데이션1 배경색과 배경 범위 지정하기2 배경 이미지 지정하기3> 그라데이션 효과로 배경 꾸미기3 그라데이션 효과로 배경 꾸미기선형 그라데이션 기본형linear-gradient (to 또는 , , [,  ...]) ; 방향 수평방향을 나타내는 left와 right, 수직 방향을 나타내는 top과 bottom을 사용하여 끝 지점을 기준으로 to 예약어와 함께 사용한다.  (ex.  방향을 사용해 선형 그라데이션 만들기) ... .grad { background : blue; // 지원하지 않는 웹 브라우저용 background : linear-gradient(to right bottom, blue, white); // 왼쪽 위에서 오른쪽 아래 방향으로..

• format_list_bulleted 💠프로그래밍 언어/CSS
• · 2022. 5. 27.
• textsms