HTML & CSS

10가지법칙

작성자:

멋진 웹사이트 레이아웃을 디자인하는 10가지 법칙 법칙 1: 어수선함 피하기 레이아웃은 이미지, 버튼의 다양한 배열 그리고 불규칙해 보이는 레이아웃으로 어수선해 보일 수 있습니다. 레이아웃이 어수선하면 방문객이 다음 단계로 넘어가는 것을 방해합니다. Tip: 여백이 여러분의 친구입니다. 법칙 2: 폴드(fold) 상단의 디자인을 우선하기 "폴드"는 브라우저 아래의 경계 부분을 의미합니다. 폴드 아래에 있는 모든 콘텐츠는 스크롤로만 도달할 수 … 더 읽기

레이아웃기초

작성자:

레이아웃 기초 Info: CLIQUE에 따르면 웹사이트 첫 노출의 94%는 디자인과 관련이 있다고 합니다. 방문자가 웹사이트에 오래 머물도록 동기를 부여하려면 레이아웃이 잘 정의되고 매력적이어야 합니다. Visual – 사용자가 웹사이트에 대한 의견을 형성하는 데는 약 50밀리초가 걸립니다. 사용자의 관심을 끌기 위해서는 레이아웃이 직관적이고 단순하며 보기 좋아야 합니다. Navigation – 소비자의 38%는 웹사이트를 처음 방문할 때 탐색 링크를 … 더 읽기

폰트와사이즈

작성자:

폰트와 사이즈 Legibility (레저빌러티) : 가독성 가독성은 특정 서체에서 한 문자를 <ins>다른 문자와 구별하는 것이 얼마나 쉬운지</ins>를 측정한 것입니다. 서체, 글자 및 세부 사항에 초점을 맞춘 마이크로 타이포그래피로, 가장 일반적인 문제는 대문자 I과 소문자 l의 구별이 부족하다는 것입니다. 이런 종류의 글꼴을 피할 필요가 있습니다. Readability (리더빌리티) : 가독성 전반적인 독서 경험을 말합니다. 텍스트 레이아웃을 스캔하고 … 더 읽기

이미지파일의특징

작성자:

이미지파일의 특징 1. 확장자별 구분 확장자 특징 용도 방식 JPEG 손실 압축 형식, 웹에서 많이 사용됨, 일부 품질 손실 발생 가능, 24비트 트루 컬러(1,600만 색상) 지원 배포용 비트맵 PNG 비손실 압축 형식, 투명한 배경 지원, 파일 크기가 크지만 품질 유지, 24비트 트루 컬러(1,600만 색상) 지원 배포용 비트맵 GIF 애니메이션 이미지 지원, 색상 수 제한, 파일 … 더 읽기

디자인실무용어

작성자:

디자인 실무용어 1. 누끼 배경 없애기. 사진 매체를 가지고 포토샵을 활용하는 직무라면 제일 많이 사용하는 용어입니다. 인물 사진과 제품 사진의 메인 피사체를 제외한 나머지 부분을 제거하고 다른 이미지와 추가 수정/합성이 가능한 이미지로 만드는 것입니다. "누끼 따 주세요." = "배경을 지워 주세요." 2. 도큐먼트/대지 포토샵, 일러스트, 인디자인 등 디자인을 하기 위한 프로그램의 작업판 (스케치북)입니다. "도큐먼트(대지) 사이즈가 … 더 읽기

컬러모드

작성자:

색상모드 컬러모드란? 색상채널 기반으로 색들이 결합되는 방식. 지면출력용: CMYK 화면출력용: RGB 1. RGB (가산혼합) 빛의 3원색인 빨강(Red), 초록(Green), 파랑(Blue)의 약자입니다. 빨강 : rgb(255,0,0) hex: #ff0000 '빛(Light)'의 속성을 그대로 지니고 있기 때문에 혼합하면 할수록 빛이 많아져 명도가 높아지고 색상이 밝아집니다. 주로 컴퓨터 모니터나 텔레비전, 휴대폰 액정과 같은 '빛으로 표현되는 색상'을 나타낼 때 사용됩니다. 2. CMYK (감산혼합) … 더 읽기

황금비율

작성자:

황금비율 황금비율은 자연이 우리에게 선사해 준 가장 아름다운 비율입니다. 조개의 껍질, 꽃잎 등 자연에서 뿐만아니라 모나리자, 피라미드 등 역사적인 건축물이나 예술작품에서도 황금비율을 찾아볼 수 있는데요, 이러한 황금비율을 우리가 하는 디자인에 어떻게 적용할 수 있을까요? 1. 황금사각형 Info: 두 변의 길이가 황금 비율인 1:1.61을 사각형에 적용한 것이 황금사각형입니다. A4용지, 신용카드나 신분증(8.5cm, 세로 5.4cm, = 1.574) 등 … 더 읽기

색채심리학

작성자:

색채심리학 1. 색채와 감정효과 인간은 색의 지각과 함께 다양한 감정들을 느낀다. 톤에 따라 각각 색이 갖는 감정효과를 따라 배색을 한다. (1) 온도감 색에 영향을 받으며 장파장은 따뜻한, 단파장은 차가운 느낌 적용 : 상점가의 디스플레이, 계절, 환경 (2) 중량감 명도의 영향을 받으며 고명도는 가벼운, 저명도는 무거운 느낌을 줌 적용 : 작업현장의 공구, 승용차, 공장 등 (3) … 더 읽기

menu

작성자:

미리보기 HTML “`html <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>2단계 메가메뉴</title> <link rel="stylesheet" href="menu.css"> </head> <body> <nav class="nav"> <ul class="menu"> <li class="item"> <a href="#" class="link">카테고리1</a> <div class="mega"> <div class="row"> <div class="col"> <h3>서브1-1</h3> <ul> <li><a href="#">항목1</a></li> <li><a href="#">항목2</a></li> <li><a href="#">항목3</a></li> </ul> </div> <div class="col"> <h3>서브1-2</h3> <ul> <li><a href="#">항목1</a></li> <li><a href="#">항목2</a></li> <li><a … 더 읽기

stickyMenu

작성자:

1. 스크롤 양 얻기 HTML <p>Hello</p> <p></p> CSS p { margin: 10px; padding: 5px; border: 2px solid #666; height: 800px; } jQuery $(window).scroll(function () { $('p:last').text('scrollTop:' + win.scrollTop()); }); Vanilla “`js const win = window; const secondP = document.getElementsByTagName('p')[1]; function throttle(func, delay) { let timeoutId; return function (…args) { if (!timeoutId) { timeoutId = setTimeout(() … 더 읽기