본문 바로가기

전체 글336

목록 썸네일 이미지 구글 폰트, 어썸 폰트 등 웹폰트와 아이콘 적용 방법 구글 폰트, 어썸 폰트 등 웹폰트 적용 방법을 공유해보겠습니다. 폰트는 말 그대로 글자의 스타일이기도 하지만, 어썸 폰트같이 아이콘도 웹폰트에서 제공받을 수 있습니다. 폰트를 컴퓨터에 다운로드 받아서 @font-face로 적용할 수도 있겠지만, 다른 사람의 컴퓨터에 없다면 보이지 않을 수 있습니다. 반면에 웹폰트는 인터넷만 연결되어 있다면 누구나 볼 수 있기 때문에 널리 사용되고 있습니다. 이 글에서는 다음과 같은 것들을 알아보겠습니다. 기본적으로 글자의 스타일을 부여하는 웹폰트 사용 방법 웹폰트에서 제공하는 아이콘을 사용하는 방법 구글 폰트 CDN 사용 방법 1. CDN 얻기 먼저 구글 폰트 사이트에서 원하는 폰트 스타일을 클릭하고, 사이트 오른쪽 윗부분의 네모 아이콘을 클릭해줍니다. 처음엔 Noto .. 2022. 8. 2.
CSS 벤더프리픽스 예시, 자동 접두사 라이브러리 CSS 벤더프리픽스(vendor prefix) 핵심과 예시, 자동으로 접두사를 붙여주는 라이브러리를 정리해보겠습니다. 코딩을 하다가 -webkit, -moz와 같은 글자를 보신 적 있으신가요? 이러한 접두어들은 웹브라우저에 따라 적용되지 않는 CSS 신기능이 있을 때 대체할 스타일을 명시하는데 사용됩니다. 상당히 귀찮은 작업이지만, 모든 브라우저에서 원하는 모습대로 웹사이트를 구동하려면 꼭 해야하는 작업입니다. 이 글에서는 벤더프리픽스에 대해 간략하게 알아보고, 예시와 자동 접두사 라이브러리도 공유해보겠습니다. 1. 벤더프리픽스란? 벤더프리픽스는 주요한 웹브라우저가 새로운 기능을 제공할 때, 새로운 기능을 제공하지 못하는 이전 버전의 웹브라우저에게 이 사실을 알리고 스타일을 사용할 수 있게 해주는 역할을.. 2022. 8. 2.
목록 썸네일 이미지 반응형 웹 제작을 위한 Responsive툴, 뷰포트, @media 요약 정리 반응형 웹 제작을 위한 Responsive툴, 뷰포트, @media 요약 정리를 해보겠습니다. 이번 글에서 할 이야기는 다음과 같습니다. Responsive툴로 작업 중 모든 디바이스에서 사이트가 어떻게 보이는지 확인할 수 있습니다. 뷰포트로 디바이스의 너비나 높이에 맞게 사이트를 설정할 수 있습니다. 디바이스에 따라 레이아웃이 변화하는 '반응형 웹'을 구현하기 위해 @media를 사용합니다. 그럼 지금부터 하나씩 알아보겠습니다. 1. Responsive툴 Responsive툴은 개발자 도구에서 접근이 가능합니다. 윈도우는 F12, 맥은 우클릭 후 '검사'를 누르면 개발자 도구가 열립니다. 여기서 왼쪽 화면 위쪽에 responsive라고 쓰여진 것이 Responsive툴입니다. 클릭해서 원하는 디바이스를.. 2022. 8. 2.
목록 썸네일 이미지 CSS transition 요약 정리 CSS transition 요약 정리를 해보겠습니다. transition은 transform이나 animation 효과에 대한 지속 시간, 딜레이, 움직이는 느낌 등을 설정할 수 있는 기능입니다. 그러나 꼭 트랜스폼이나 애니메이션 효과가 아니더라도 트랜지션은 유용하게 쓰입니다. 예를 들어 배경이 검은색이었다가 특정 행동을 하면 투명해지도록 설정했다면, 그 전환 효과를 부드럽게 해주는 역할을 하기도 합니다. transition 축약 사용 animation처럼 transition 명령도 관련된 메소드들을 한꺼번에 설정할 수 있습니다. transition에 숫자 뒤에 s또는 ms를 써서 지속 시간만 설정할 수도 있고, 다음과 같이 콤마로 여러가지 메소드를 설정할 수 있습니다. /* 변화할 값, 지속 시간, 움.. 2022. 8. 2.
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.

티스토리툴바