열린노트/IT·SW·디자인55 자주 쓰이는 웹 색상 표 : 색상 코드(color code)와 이름 모음 웹페이지를 코딩하다 보면 아무래도 기준컬러 몇 가지를 조합하고 반복해서 사용하는 경우가 많다. 그럴 땐 복잡한 여섯 자리 Hex Code를 외워 쓰느니, 차라리 색상 이름을 사용하는 편이 낫겠다. '#FFD700'보다는 'Gold'가, '#87CEEB'보다는 'skyblue'가 더 간편하니까. HTML name Hex code R G B Decimal code R G B Pink FF C0 CB 255 192 203 LightPink FF B6 C1 255 182 193 HotPink FF 69 B4 255 105 180 DeepPink FF 14 93 255 20 147 PaleVioletRed DB 70 93 219 112 147 MediumVioletRed C7 15 85 199 21 133 Lig.. 열린노트/IT·SW·디자인 티스토리에서 Font Awesome 사용하기(글리프 아이콘) 블로그뿐만 아니라 웹사이트를 보기 좋게, 또는 편리하게 꾸미는 데 가장 중요한 것 중 하나가 아이콘이다. 예전에는 웹상에서 아이콘을 쓰려면 적당한 이미지 파일을 만들어 사용해야 했다. 일일이 그림을 만들고, 그 이미지를 웹상에 업로드해 일정한 경로를 만들고, 웹페이지에 그것을 사용하려면 img 태그를 써서 일일이 불러와야 했다. 한두 개면 괜찮겠지만 하나의 웹사이트에 사용되는 아이콘이 어디 한두 개인가. 그래서 사람들은 '★, ♬' 같은 특수 문자를 쓰기도 했다. 보다 간편하게 아이콘을 표현하고 싶었기 때문이다. 요즘에는 글리프 아이콘(Glyph Icon)을 사용한 다양한 표현이 가능해졌다. 글리프 아이콘(Glyph Icon)이란? 글리프 아이콘은 일종의 아이콘 서체로, 누군가가 미리 만들어 놓은 아이콘.. 열린노트/IT·SW·디자인 반응형 사진 슬라이더 jQuery 플러그인 소스 28개 1. Zuper Slider 반응형 + 모바일 멀티터치 슬라이더. 2. Camera Slider 3. Fluid CSS3 Slideshow with Parallax Effect 4. FlexSlider 반응형 제이쿼리 슬라이더. 거의 가장 유명하고 많이 쓰이는 듯. 다양한 구성이 특징이고 쓰기 편리하다. 5. FlexSlider 2 FlexSlider의 업데이트 버전. 6. Lightweight mobile slider 7. WOW Slider 8. wmuSlider 9. CSS3 Responsive Slider 자바스크립트 없이 CSS3만으로 만든 슬라이더 10. Slider Pro WordPress용 슬라이더 플러그인 11. Responsly 12. RoyalSlider 모바일 터치 기능을 지원하는 .. 열린노트/IT·SW·디자인 2015년 웹디자인 트렌드10 1. 반응형 웹(Responsive Web) 웹 접속 환경이 다양해지면서 점점 주목받는 형태로, 현재 워드프레스 테마를 중심으로 빠르게 퍼져나가는 중이다. 호환성에 대한 문제가 여전히 존재하지만 점차 커버되는 추세. 몇 년 후에는 반응형이 아닌 웹사이트는 점점 위축되지 않을까. 2. 고스트 버튼(Ghost Button) 심플하고 플랫한 디자인이 주목받다 보니 덩달아 고스트 버튼 역시 늘어나는 듯하다. 배경이 투명하고 테두리만 쳐져 있는 버튼 형식을 통틀어 이르는 말. 4번의 ‘큰 배경 이미지’ 사용과 더불어 더욱 주목 받는 중이다. 3. 타이포그래피 중심 디자인(Bigger Emphasis on Typography) 이전에는 인쇄물 같은 오프라인 디자인에서 주로 활용되던 타이포그래피가 드디어 웹디자인에서.. 열린노트/IT·SW·디자인 엔티티 코드(Entity Code) 사용하기 : HTML에서 특수문자 코드 입력하는 방법 웹페이지상에서 다음과 같은 문자들을 본 적이 있을 것이다. 이런 문자를 '엔티티 코드(Entity Code)'라고 한다. & " HTML이나 XHTML 문서를 코딩할 때 특수 문자(참조 문자)를 써야 하는 경우에는 이러한 엔티티 코드 또는 엔티티 넘버로 변환해서 입력해야 한다. 변환하지 않고 특수 문자를 그대로 입력해 버리면 컴퓨터가 문서를 읽을 때 실제 문서 내용(contents)과 코드를 구분하기 못하는 문제가 발생하기 때문이다. 가령, 어떤 문서 내용에 꺽쇠 괄호 ' < '가 포함돼 있다면, 컴퓨터는 이 문서를 읽어들일 때 꺽쇠 괄호를 HTML 태그의 시작 기호로 받아들여 버린다. 또 큰따옴표 ' " '는 HTML 속성 값으로 인식될 수 있고, ' & '은 엔티티 기호의 시작으로 인식될 수 있다. .. 열린노트/IT·SW·디자인 티스토리에 구글 애드센스 광고 달기 많은 블로거들이 광고로 수익을 얻고 있다. 열심히 콘텐츠를 만들어내는 데 대한 부수적 이익이라고 볼 수 있을 것 같은데, 의외로 광고 수익 때문에 블로그를 운영하는 사람들도 많이 있다고 한다. 그래서 나도 한 번 달아 보기로 결심. 특별히 이걸로 많이 수익이 날 거라고 생각하지는 않지만, 웹 환경 돌아가는 모양새를 한 번 경험해 보는 데 의의를 두기로 했다. 티스토리는 구글 애드센스 광고를 삽입할 수 있다는 장점이 있기에, 애드센스에 도전해 보기로 했다. 구글 애드센스 광고 신청하기 구글은 광고를 아무에게나(?) 내 주지 않는다. 적어도 몇 개의 포스팅과 약간의 방문자 기록이 생겨야 애드센스를 신청할 수 있다. 어느 정도 모양새가 잡히면 구글 애드센스에 접속한다. 구글 애드센스 바로가기 초기화면에서 '시.. 열린노트/IT·SW·디자인 포토샵 'scratch disks are full' 오류 해결 방법 포토샵(Adobe Photoshop)에서 용량이 큰 작업을 한창 하고 있으면 다음 에러(오류)가 뜰 때가 있다. could not initialize photoshop because the scratch disks are full 포토샵은 작업 중 생성되는 임시 파일들을 일정한 공간에 저장해 두는데, 그 공간이 scrach disk다. 설치 후 초기에는 자동으로 저장 공간이 C: 드라이브로 지정되는데, 하드디스크의 파티션을 나눠 쓰는 사람이라면 대개 C: 드라이브 용량을 적게 설정해 두어 이런 오류를 만나는 경우가 생긴다. 이 오류를 쉽게 해결하는 방법은 두 가지이다. 방법 1. 포토샵 껐다 켜기 scratch disk는 앞서 말했든 작업 중 저장되는 임시 공간이다. 포토샵을 종료하면 자동으로 비워진다... 열린노트/IT·SW·디자인 [일러스트] 선물한 캐리커처들! 보호된 글입니다. 비밀번호를 입력해야 본문을 열람할 수 있어요. 열린노트/IT·SW·디자인 온라인용 라이브홀 홍보물 보호된 글입니다. 비밀번호를 입력해야 본문을 열람할 수 있어요. 열린노트/IT·SW·디자인 와인동호회 카페 메인화면&모바일 디자인 보호된 글입니다. 비밀번호를 입력해야 본문을 열람할 수 있어요. 열린노트/IT·SW·디자인 이전 1 2 3 4 다음
