파비콘 제작, 적용하기

파비콘이란? 파비콘이란 'Favorite + Icon' 의 합성어로 인터넷 웹 브라우저의 즐겨찾기나 주소창에 표시되는 웹사이트나 웹페이지를 대표하는 아이콘을 말한다. + 확장자 : ico, png + 아이콘 크기는 16x16, 32x32, 48x48, 64x64픽셀이 될 수 있고, 8비트, 24비트, 32비트 색상이 가능하다. + 브라우저에 상관없이 호환되며 인터넷 익스플로러, 파이어폭스, 크롬, 오페라에서 모두 지원한다. 파비콘 만드는방법 1. 포토샵으로 192 x 192 픽셀의 이미지를 만든다. (확장자는 png 또는 jpg) 2. 사이즈 자동 변환 사이트 Favicon & App Icon Generator 사이트에 접속한다. https://www.favicon-generator.org/ Favico..

2021.10.25

웹 안전색(Web Safe Color)

웹 안전색(Web Safe Color) 시스템 웹 안전색(Web Safe Color) 컴퓨터 운영체제의 종류, 브라우저의 종류에 상관없이 공통으로 사용되는 '안전한' 색을 '웹 안전색(Web Safe Color)'라고 한다. 이 웹 안전색은 유채색 210가지, 무채색 6가지로 모두 216색으로 구성되어 있는 컬러 시스템이다. 초기 웹 브라우저에서는 다양한 색상을 지원하지 못했다. GPU 나 디스플레이에서도 8bit Color 이상 지원하지 못하는 경우가 빈번 했으며 이런 문제를 해결하기 위해 웹 페이지를 구성할때 브라우저에서 지원하는 색상으로 색상을 선정 했다. 색이 안전(Safe)하다? '안전하다(Safe)'는 것은 '색이 왜곡되지 않는다'는 의미다. 이것은 웹 안전색이 216색이기 때문에 가능하다. ..

2021.10.19

HTML5 시맨틱 태그 (Semantic Tag)

Semantic Tag? HTML5의 큰 특징 중 하나는 시맨틱 태그(Semantic Tag)다. 시맨틱 태그는 개발자와 브라우저에게 의미있는 태그를 제공하게 된다. 기존에 사용하던 div 태그는 non-semantic Tag라 할 수 있다. table, article 등의 태그는 semantic Tag라 할 수 있다. 일반적으로 태그만 보고는 검색엔진이 이 태그 안에 들어간 내용의 의미를 알 수 없다. HTML5에서 사용되는 시맨틱 태그는 를 사용하여 검색엔진이 이 태그를 분석하여 내용의 의미를 유추할 수 있는 장점이 있다. non-semantic Tag 주로 div로 레이아웃을 표현하며, class와 id로 스타일을 준다. semantic Tag 의미있는 태그를 사용하여 검색엔진이 태그를 분석하여 유..

2021.10.07

Reset.css / Normalize.css

브라우저마다 제공하는 user agent style이라는게 있다. 브라우저의 스타일링 기본값이라 생각하면 된다. 기본적으로 스타일이 적용된다는 게 사용자에게는 유용할 수 있지만 개발자 입장에서는 매번 번거롭게 새로 선언해줘야 하기 때문에 오히려 피곤하다. 그리고 크롬, 파이어폭스 등 브라우저들이 모두 일관된 스타일을 제공하지 않는 경우도 있어 크로스브라우징에 어려움이 있다. 이런 어려움을 극복하기 위한 전략으로 크게 reset css와 normalize css가 있다. Reset CSS란? reset css는 브라우저에서 통일된 화면을 볼 수 있도록 기본값을 초기화 것이다. 구글링 해보면 리셋 방법도 굉장히 다양하게 나와 있는 걸 알 수 있는데, 그 중 Eric Meyer라는 개발자가 만들어 놓은 res..

2021.10.07

HTML Entity

엔티티 (Entity)란? HTML에는 미리 예약 된 몇몇 문자가 있으며, 이러한 문자를 HTML 예약어(reserved characters)라고 부릅니다. 이러한 HTML 예약어를 HTML코드에서 사용하면, 웹 브라우저는 그것을 평소와는 다른 의미로 해석합니다. 따라서 HTML 예약어를 기존에 사용하던 의미 그대로 사용하기 위해 별도로 만든 문자셋을 엔티티(Entity)라고 합니다. Entity Code HTML에서 제공하는 대표적인 엔티티(entity)는 다음과 같습니다. 기호 HTMl코드 CSS코드 설명 공백 space > 우측 화살표 & & ⓒ © \00A9 저작권 서명 @ @ \0040 *참고사이트 https://unicode-table.com/kr/html-entities/ HTM..

2021.10.06

색 CMYK/RGB

색상(hue)이란 빨강, 노랑, 파랑 등의 색깔을 말한다. 서로의 색을 다른 색과 구별하여 나타낸 것으로, 우리가 색을 볼 때 가장 먼저 눈에 들어오는 게 바로 이 색상이다. 이 색상을 둥글게 배열한 것을 '색상환(hue circle)'이라고 하는데 이 색상환의 원리와 구조를 알면 능숙하게 색을 사용할 수 있다. 우리가 잘 아는 삼원색인 빨강, 파랑, 노랑 정확히는 마젠타(magenta)-자주색, 사이안(cyan)-청록색, 옐로우(yellow)중 두 색을 섞어서 만들어지는 색을 '순색'이라고 한다. 빨강과 파랑을 섞으면 보라가 되고, 파랑과 노랑을 섞으면 초록이 되는 식이다. 이런 순색을 삼원색 사이사이에 넣어주면 색의 연결이 좀 더 부드러워지고, 더 다양한 색들을 만들 수 있는데, 이렇게 만들어진 색의..

2021.10.05