목록142 [웹디자인 / 폰트] 웹디자인시 폰트는 어떻게 해야 할까? 웹사이트나 앱을 들어가면 정말 많은 정보가 한번에 모여 있는 것을 볼 수 있다.만약 모든 글자들이 같은 크기, 같은 색상, 같은 모양으로 모여 있다면 어떨까?아마, 정보가 너무 많아서 어디서부터 뭘 봐야할지 알 수 없게 될 것이다. 이를 방지하기 위해, 글자의 크기와 대비 등 여러 방법으로 계층을 나누어 독자의 시선을 유도하는 것이다.이러한 계층을 나누는 방법을 타이포그래피, 편집디자인 에서 찾아 볼 수 있었다. 타이포그래피 계층이란?타이포그래피 계층(Typography Hierarchy)은 텍스트의 정보 구조를 시각적으로 구분해 독자가 어떤 정보를 먼저 일고, 어떻게 이해할지 자연스럽게 유도하는 디자인 기법이다.쉽게 말하면, 중요한 내용을 더 눈에 띄게, 덜 중요한 내용은 작고 덜 튀게 표현해서 콘텐츠.. 2025. 4. 7. [css] 글자 밑줄 긋고 밑줄에 스타일 넣기 / text-decoration https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration text-decoration - CSS: Cascading Style Sheets | MDNThe text-decoration shorthand CSS property sets the appearance of decorative lines on text. It is a shorthand for text-decoration-line, text-decoration-color, text-decoration-style, and the newer text-decoration-thickness property.developer.mozilla.orghttps://hianna.tistory.com/679.. 2025. 4. 3. [CSS] 가상 클래스(:root)로 전역 변수(var) 다루기 의사 클래스란?'의사 클래스(pseudo-class)'의 'pseudo' 즉 의사(擬似)는 한자로 '비길 의'에 '닮을 사'로, 유사한 비슷한 이란 의미를 담고있다. 영어 'pseudo-'는 접두사로 허위의, 거짓의, 가짜의, 유사의 라는 의미로 사용된다. '의사 클래스'는 다른 말로 '가상 클래스'로도 불리는데, 일반적으로 '의사 클래스'라는 용어가 더 정확하고 많이 사용된다. 1. 의사 클래스의사 클래스 (pseudo-class) 는 HTML 요소의 특정 상태에 스타일을 적용할 수 있도록 도와주는 CSS 문법이다.예를들어, a:hover {} 를 사용하면, a 태그 위에 마우스가 올라갔을 때 { } 괄호 안의 css 속성이 a태그에 적용되도록 한다. 선택자 혹은 클래스(class)나 아이디(id) .. 2025. 4. 3. [Quill] Quill로 텍스트 에디터 만들기 스며드는 것 안도현 꽃게가 간장 속에 반쯤 몸을 담그고 엎으려 있다 등판에 간장이 울컥울컥 쏟아질 때 꽃게는 뱃속의 알을 껴안으려고 꿈틀거리다가 더 낮게 더 바닥 쪽으로 웅크렸으리라 버둥거렸으리라 버둥거리다가 어찌할 수 없어서 살 속에 스며드는 것을 한때의 어스름을 꽃게는 천천히 받아드렸으리라 껍질이 먹먹해지기 전에 가만히 알들에게 말했으리라 저녁이야 불 끄고 잘 시간이야 https://velog.io/@onezerokang/Quill.. 2025. 3. 26. [ 웹디자인 ] 아이콘 " 목차 "">" 목차 " 01. 아이콘 사이즈아이콘 사이즈는 구글 머터리얼 가이드에 따르면 18px, 24px, 36px, 48px의 사이즈로 각각 만들어 사용하는 것을 추천한다.가장 많이 사용하는 사이즈는 24px 이며, 16의 폰트를 쓸 때 가장 잘 어울린다고한다. 02. 아이콘 만들기18px * 18px 의 경우 여백 1px24px * 24px 의 경우 여백 2px36px * 36px 의 경우 여백 3px48px * 48px 의 경우 여백 4px아이콘을 만들 때, 보통 원하는 사이즈에 1~4px 정도의 여백을 주어 작업해야한다.여백을 주지 않으면 아이콘의 끝이 잘릴 위험이 크기 때문이다. 03. 비트맵과 백터포토샵 = 비트맵 형식 = 픽셀(px)일러스트 = 백터 형식 = 앵커 포인트(data)비.. 2025. 3. 25. [웹디자인] 폰트는 어떻게 하면 좋을까? " 목차 "">" 목차 "01. 윈도우와 맥의 기본 운영체제 폰트윈도우 : 돋움, 맑은 고딕맥 : Apple SD Neo 고딕02. 폰트 크키본문 : 14 ~ 17px최소 폰트 : 10px 이상Chrominum 계열 브라우저(크롬, 엣지, 오페라 등)는 기본적으로 가독성을 위해 10px 이하 폰트를 강제로 키워서 보여준다. Firefox 는 개발자 설정 그래도 렌더링 하는 경향이 강하지만 Safari 같은 경우 데스크탑에서는 대부분 설정한 폰트대로 보이지만 모바일에서는 작은 글씨를 확대하는 경우가 존재한다.웹 접근성(가독성) 측면에서도 대부분의 가이드라인에서는 12px 이상을 권장한다.만약, 강제로 작은 글씨로 만들고 싶다면 transform: scale() 을 사용하거나, -webkit-text-siz.. 2025. 3. 25. 이전 1 2 3 4 ··· 24 다음
