본문 바로가기

웹/웹코딩 공부35

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.
CSS flex 7가지 속성 요약 정리 CSS flex 요약 정리를 해보겠습니다. flex는 flex box라고도 하며 grid와 함께 최신 CSS 기술로, CSS3에서 처음 등장하였습니다. 한 번 알아두면 전통적인 float나 table, column보다 편리하고 간결합니다. 또한 반응형 웹을 제작하는데에 뺄 수 없는 기술입니다. 다만 속성값이 많아서 처음에 헷갈릴 수 있는데, 이전 글들에서도 그랬듯 종류는 대략적으로 훑어보고 자주 쓰는 것들을 공유해보겠습니다. flex의 구조 flex를 쓰려면 한 개 이상의 요소를 담고 있는 flex box가 있어야 합니다. 그리고 담겨 있는 요소들을 flex item이라고 합니다. 그러나 저런 용어는 개념 설명을 위한 것이고, 그냥 flex 레이아웃을 적용할 div와 그 안에 담긴 요소들이라고 이해하면 .. 2022. 7. 25.
목록 썸네일 이미지 CSS padding, border, margin 요약 정리 CSS padding, border, margin 요약 정리를 해보겠습니다. html 요소가 가지는 내용물의 크기 이외에 padding, margin으로 영역을 설정하여 원하는 대로 요소를 배치 할 수 있습니다. border는 테두리인데 padding(내부 영역)과 margin(외부 영역)사이에 위치한 영역입니다. 요렇게 그림으로 보면 이해가 쉬우실 겁니다. 그럼 어떻게 사용하는지 알아볼까요? 속성 값 적는 순서 패딩, 보더, 마진 모두 속성 값을 적는 순서가 똑같습니다. padding : 10px 20px 30px 40px; 이렇게 최대 4개를 적을 수 있는데, 필요에 따라 아래와 같이 4가지 방식으로 적을 수 있습니다. 1개 : 4개 방향의 값을 한번에 적용합니다. 2개 : 상하/좌우 (첫번째 쓴 값.. 2022. 7. 22.

티스토리툴바