반응형 CSS13 🎞️ CSS 애니메이션(Animation) 요약! CSS로 애니메이션을 줘보자 애니메이션(Animation) 이란? 한 CSS 스타일에서 다른 CSS 스타일로 부드럽게 전환시켜 주는 것 애니메이션은 로드된 이후 바로 시행됨. 그러나 설정으로 조건에 따라 일어나게 만들 수도 한 번만 일어나게 할 수도, 아님 계속 반복하게 할 수도 있음 애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타내는 키프레임으로 구성 🐍 prefix 작성시 유의사항 : prefix 똑같이 달아야함 CSS에서 애니메이션 사용하는 방법 키프레임 작성하기 @keyframes namehere { from { margin-left: 100%; width: 300% } to { margin-left: 0%; width: 100%; } } 키프레임이란 애니메이션의 중간 상태를 .. 2022. 9. 25. 🎞️ CSS 트랜스폼(Transform)과 트랜지션(Transition) 요약! 인터렉션 디자인에 유용한 트랜스폼, 트랜지션, 애니메이션 CSS 트랜스폼 ⭐ 트랜스폼(Transform)이란? .transition { transform : rotate(45deg); transform : scale(2, 3); } 특정 오브젝트를 각도를 튼다거나 크기나 위치를 변경하는 것 단독으로 사용할 경우 변형 과정이 보이거나 하지는 않음 transform : 함수명(변수); 형식으로 입력 🐍 행렬 변환? ⭐ 트랜스폼의 종류 2D 트랜스폼 ⭐ translate(tx, ty) : 지정된 크기만큼 x축과 y축 이동, trnaslateX(tx), translateY(ty) ⭐ scale(sx, sy) : 지정된 크기만큼 x축과 y축으로 확대 축소 scaleX(sx), scaleY(sy) ⭐ rotate(.. 2022. 9. 25. 📝 CSS 문단 및 목록 스타일 요약! CSS 문단 스타일 direction - 글자 쓰기 방향 지정하기 ltr : left-to-right, 기본값 rtl : right-to-left text-align - 텍스트 정렬하기 start : direction에서 정한 시작 방향 정렬 (ltr은 왼쪽, rtl은 오른쪽) end : direction에서 정한 끝 방향 정령 left : 왼쪽 정렬 right : 오른쪽 정렬 center : 가운데 정렬 justify : 양쪽 맞춤 match-parent : 부모 요소 따라 text-justify - 정렬 시 공백 조절하기 auto : 웹 브라우저에서 자동으로 지정 none : 정렬하지 않음 inter-word : 단어 사이의 공백을 조절해 정렬 distribute : 인접한 글자 사이의 공백을 똑같이.. 2022. 9. 24. 📝 CSS 글자 스타일 속성 요약! 글자에 적용할 수 있는 스타일은 font 스타일과 text 스타일이 있다? font와 text 속성의 차이 Font는 글자 디자인적 요소, Text는 글자의 배치 글자의 효과 Font는 입력 순서가 있음(border background는 순서 상관 없음) 폰트(Font) 스타일 ⭐ font-size - 글자 크기 조절 font-size : ||| 절대 크기 : 브라우저에서 지정한 크기 ex) xx-small ~ xx-large 상대크기 : 부모 요소의 글자크기를 기준으로 더 크게 표시하거나 더 작게 표시 ex) larger, smaller ⭐크기 : 브라우저와 상관 없이 글자 크기를 직접 지정 백분율 : 부모 요소의 글자크기를 기준으로 %를 계산해 지정 글자 크기의 단위 ⭐em : 해당 글꼴의 대문자 M.. 2022. 9. 24. 📐 CSS 속성 값 길이 단위, 색상 설명! CSS 속성 길이 단위 px : 절대 크기 % : 상대 크기, 현재 창의 크기를 기준 em : 상대 크기, 현재 스타일이 지정된 요소의 font-size 기준 rem (root em) : 상대 크기, 최상위 요소의 font-size 기준 vh (vertical height) : 뷰포트 높이값의 100분의 1 단위 vw (vertical wigth) : 뷰포트 넓이값의 100분의 1 단위 vmin (vertical min) : 뷰포트의 최소값의 100분의 1 단위 vmax (vertical max) : 뷰포트의 최대값의 100분의 1 단위 CSS 색상 HEX 코드 #RRGGBB rgb값을 16진수 코드로 rgba 코드 rgb(255, 255, 255) rgba(255, 255, 255, 0.5) rgb값을.. 2022. 9. 24. 🎨 CSS 우선순위와 상속 요약! CSS는 캐스케이딩 스타일 시트, 폭포처럼 위에서 아래로 흐른다! 스타일 우선 순위 : 스타일 규칙의 중요도, 적용 범위에 따라 우선순위가 결정되고 그 우선순위에 따라 위에서 아래로 스타일이 적용된다 스타일 상속 : 태그들의 포함 관계에 따라 부모 요소의 스타일을 자식 요소로, 위에서 아래로 전달한다 스타일 우선 순위 기준 스타일 우선 순위는 다음과 같은 보편적인 기준으로 정해진다. 내부적으로 계산시 점수의 합이 높은 쪽으로 우선한다. 기준 1 : 중요도 사용자 스타일 시트 저시력자와 색약자 등과 같이 특별한 조건이 필요한 사용자가 그들에 맞게 구성해 놓은 스타일 시트. ex) 고대비 설정. 시스템을 통해 만들어진 것이기 때문에 제작자가 제어할 수는 없다. !important 제작자 스타일 시트의 중요 .. 2022. 9. 23. 이전 1 2 3 다음 반응형
