본문 바로가기

웹122

CSS animation 핵심 정리, 사용법 CSS animation 핵심을 요약하고 사용법을 정리해보겠습니다. animation은 UI를 동적으로 표현하는데 쓰이기도 하고, 사이트의 브랜드나 핵심적인 시각 요소를 돋보이게 하는 효과도 있습니다. 이번 글에서는 애니메이션을 어떻게 사용하고, 설정할 수 있는 메소드들은 어떤 것들이 있는지 알아보겠습니다. animation 축약 background나 matrix처럼 관련된 메소드들을 한꺼번에 적을 수 있는 메소드입니다. matrix는 transform에 속한 메소드인데, 이동하고 회전하는 등의 transform 메소드들을 animaiton에 사용할 수 있으니 참고해보세요. CSS transform 요약 정리 CSS transform 요약 정리를 해보겠습니다. transform은 동적인 UI 효과를 낼 .. 2022. 8. 2.
CSS transform 요약 정리 CSS transform 요약 정리를 해보겠습니다. transform은 동적인 UI 효과를 낼 때 자주 사용되고 애니메이션과도 연관이 깊으므로, 인터렉티브한 웹을 만들고 싶다면 꼭 알아두는 것이 좋습니다. transform의 속성에는 크게 보아서 2D스러운 효과, 3D스러운 효과가 있다고 할 수 있습니다. 2D transform 먼저 2D스러운 트랜스폼 효과로는 다음과 같은 것들이 있습니다. translate() : x축과 y축의 거리만큼 이동합니다. rotate() : 입력한 각도(deg)만큼 회전합니다. scale() : 배율만큼 요소의 크기를 조절합니다. 1이 100%입니다. skew() : 입력한 각도만큼 기울입니다. x축과 y축이 있습니다. transform-origin : 회전, 이동 등 tr.. 2022. 8. 2.
CSS 배경, 그림자, 그라디언트 요약 정리 CSS 배경, 그림자, 그라디언트 요약 정리를 해보겠습니다. 위의 속성들은 CSS에서 요소에 그래픽 효과를 넣는 대표적인 속성들입니다. 웹이 점점 플랫하고 단순화되지만, 그럴 수록 계층 간의 깊이 표현이 더욱 절실해집니다. 이에 대해서는 iOS 디자인 가이드와 구글 머테리얼 디자인 가이드를 참고해보시면 이해가 쉬우실 겁니다. iOS 디자인과 안드로이드 머티리얼 디자인 가이드의 특징 iOS 디자인의 간단한 변천사와 플랫 디자인의 특징, 안드로이드 구글 머티리얼 디자인 가이드의 특징에 대해 요약해보았습니다. 본격적인 디자인을 제작하기에 앞서, 지금까지의 UIUX 디자인 종 cucat.tistory.com 그래픽 효과를 적절하게 사용하면 더욱 고급스럽고 명확하게 계층을 구분할 수 있습니다. 그럼 지금부터 그림.. 2022. 8. 1.
CSS font 속성과 %, em, rem 핵심 정리 CSS font 속성 요약과 함께 font-family로 웹폰트 쓰는 방법, 반응형 폰트 크기 관리 방법에 대해 정리해보겠습니다. 폰트의 속성이라고 하면, 디자인된 폰트를 적용하는 것과 폰트의 크기( px, %, em, rem)가 가장 중요할 것 입니다. 웹폰트를 적용하는 것은 알고 보면 어렵지 않지만, 오히려 폰트의 크기를 반응형으로 생각하는 것이 처음엔 헷갈릴 수 있습니다. 따라서 폰트와 관련한 CSS 속성들을 알아보되, 반응형 폰트 크기에 대한 정리에 중점을 두고 글을 시작해보겠습니다. CSS font 속성들 font-family : 웹폰트를 적용할 때 쓰이며 아래와 같이 적용하면 됩니다. HTML CSS body{font-family: 'Noto Sans KR', sans-serif;} font-.. 2022. 8. 1.
CSS text 속성 요약 정리 CSS text 속성 요약 정리를 해보겠습니다. text는 웹페이지를 구성하는 가장 기초적인 구성 요소라고 할 수 있습니다. 텍스트와 더불어 그림이 있으면 이해를 돕고 좋겠지만, 설사 그림이 없어도 이렇게 블로그 글로 내용을 작성할 수 있는 것처럼요. 또한 어떤 텍스트 폰트를 쓰고, 어떻게 크기와 굵기를 레벨링하고, 배치, 줄간격 등을 하느냐에 따라 하나의 디자인이 됩니다. 그럼 지금부터 text 요소를 디자인할 수 있는 속성들을 크게 크게 나눠서 알아보겠습니다. text의 CSS 속성들 text에 CSS 속성들을 적용하려면, p태그 등의 텍스트를 쓴 요소에 다음과 같은 속성들을 부여하면 됩니다. 스타일 color : 텍스트의 색상을 설정할 수 있습니다. direction : 왼쪽에서 오른쪽으로, 오른쪽.. 2022. 8. 1.
CSS calc() 함수 사용법, 예시 정리 CSS에서 calc() 함수의 사용법과 대표적인 사용 예시를 정리해보겠습니다. CSS가 점점 고도화되어, SCSS같은 경우는 자바스크립트처럼 변수 선언과 연산자 등을 실행할 수 있게 되었습니다. 오늘은 CSS에서 사용할 수 있는 calc함수에 대해서 간단하게 알아보겠습니다. calc()란? calc는 계산하다(Calculate)의 약자로, CSS에서 특정한 수치를 계산해내는 함수입니다. 대표적으로 아래처럼 요소의 높이나 너비를 계산하는 데에 쓰이며 이 밖에도 다양하게 응용할 수 있습니다. div.div1{ height: calc(100vh - 90px); } div.div2{ width: calc(100% - 90px); } calc함수의 다양한 쓰임은 MDN calc()설명 페이지를 참고하세요. cal.. 2022. 7. 30.
목록 썸네일 이미지 CSS grid 핵심 4가지 요약 정리 CSS grid 핵심 요약 정리를 해보겠습니다. grid는 flex와 함께 모던 웹 디자인에서 많이 쓰이는 기술입니다. table과 같이 행, 열로 레이아웃을 구성하는 것이지만 table보다 자유자재로 설정할 수 있습니다. 그리드의 구조 1. 그리드 사용법 그리드를 쓰려면 플렉스와 마찬가지로 하나 이상의 자식이 있어야 합니다. 플렉스를 모르신다면 아래 글을 참고해주세요. CSS flex 7가지 속성 요약 정리 CSS flex 요약 정리를 해보겠습니다. flex는 flex box라고도 하며 grid와 함께 최신 CSS 기술로, CSS3에서 처음 등장하였습니다. 한 번 알아두면 전통적인 float나 table, column보다 편리하고 간결합니다. 또 cucat.tistory.com 부모에 display: .. 2022. 7. 26.
목록 썸네일 이미지 일러스트레이터 이미지 링크 깨질 때 해결 방법 일러스트레이터에서 이미지 링크가 깨질 때 해결 방법을 공유합니다. 일러스트레이터에서 벡터 뿐만 아니라, 래스터 이미지 파일을 가져와서 작업하는 경우도 많을 것 입니다. 그러나 ai 파일에 집어넣은 이미지 파일을 지우면 링크가 깨졌다면서 표시되지 않을 때가 있습니다. 보통 자기 컴퓨터에서는 소스 이미지 파일을 삭제하지 않는 이상 문제가 없지만, 다른 사람에게 공유할 때는 이미지가 표시되지 않습니다. 이 현상의 해결법은 아주 간단합니다. Embed 버튼을 눌러 주기만 하면 됩니다. 1. 일러스트레이터에서 이미지 삽입하기 일러스트레이터에서 이미지 파일을 가져오려면, File - Place를 누르고 원하는 파일을 선택하면 됩니다. 이 밖에 Open해서 복사 붙여넣기 하거나, 탐색기에서 작업 중인 ai파일로 드래.. 2022. 7. 25.

티스토리툴바