본문 바로가기
반응형

분류 전체보기167

🎞️ 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 박스모델 요약! 박스 모델 : 박스 형태의 콘텐츠 block 요소에만 적용 가능 content, padding, border, margin으로 구성 content : 내부 컨텐츠 padding : 내부 여백 border : 테두리 margin : 외부 여백 margin과 padding 작성 방법 (비슷하므로 같이 서술) margin-top, right, bottom, left : 방향을 따로 입력 margin 값 1개 : 모든 방향에 같은 마진이 적용 margin 값 2개 : 상하, 좌우 순서로 적용 margin 값 4개 : 상, 우, 하, 좌 순서로 적용 margin : | | auto auto : display속성에서 지정한 값에 맞게 적절한 값을 자동으로 지정함 🐍 화면 가운데 배치 하려면 left와 right를 .. 2022. 9. 25.
📐 CSS 배경 속성 요약! CSS 배경 관련 속성 background-color - 배경 색 지정하기 background-image - 배경 이미지 지정 background-image: url('images/bg3.jpg') 배경 이미지 지정, 상대경로, 절대경로, url 사용 가능 🐍 background-image와 img 태그 차이점 img 태그 : seo, 성능, 웹 접근성 좋다 백그라운드 이미지 css : 디자인적으로 조작할 때 더 편리 background-clip - 배경 적용 범위 조절하기 background-clip : border-box | padding-box | context-box border-box : 박스 모델의 가장 외곽인 테두리까지 적용 padding-box : 박스 모델에서 테두리를 뺀 패딩 범위까지 .. 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.
반응형