씨지 자료실
| 구분 | 제목 | 내용 |
|---|---|---|
| 무료 이미지 | 픽사베이(pixabay.com) | 56만장 이상의 고화질 사진 제공 |
| 픽스히어 | 무료 재고 사진 제공 | |
| 한국관광공사 무료이미지 | 한국관광공사에 의한 '공공누리 제1유형' 지정 콘텐츠 | |
| 공공누리 | 공공저작권 신탁관리 시스템 / 공공저작물을 자유롭에 이용하도록 허락 | |
| 포토AC(photo-ac.com) | 200만장의 무료 고화질 이미지 제공 | |
| 스톡업(stock-up) | 키워드를 이용한 빠른 검색 | |
| 픽점보(picjumbo) | 디자이너와 사진작가가 제공하는 감성적 이미지 | |
| 언스프래시(unsplash) | 작품급 사진 제공 | |
| 픽셀즈(pexels) | 빈티지의 풍경이나 감성적인 인물 사진 제공 | |
| foodiesfeed | 고화질 음식 이미지 제공 | |
| New old stock | 저작권 끝난 이미지 제공, 오랜된 느낌의 사진 제공 | |
| 이미지그라퍼 | 이미지 공유 및 거래 | |
| 프리큐레이션 | 저작권에 문제 없는 이미지 제공 | |
| 모그파일 | 상업적 무료 이미지 제공 | |
| 프리스톡스 | 상업적 무료 이미지 제공 | |
| 얼라우트 | 고해상도 상업적 사용가능한 이미지 제공 | |
| 프리벡터즈 | 고퀄리티 벡터 이미지 제공 | |
| 프리픽 | 벡터 이미지 제공 | |
| 퍼블릭도메인벡터스 | 간단한 벡터이미지를 제공 | |
| 벤치마킹 | 디비컷 | 국내 사이트 |
| 지디웹 | 국내 사이트 | |
| awwwards | 전문가 패널이 평가하는 곳 | |
| 직선 | 일본 웹디자인 모음 | |
| 핀터레스트 | 다양한 주제의 작품을 볼수 있다 | |
| 비핸스 | 외국 사이트 모음 | |
| 베스트 디자인 | 여러 해외 웹디자인이 업테이트 됨 | |
| 드리블 | 세계 각국의 디자이너들의 작품을 제공 | |
| HTML·CSS·jQuery | WCAG 2.0 기술 | w3에서 알려주는 WCAG 2.0 기술(영문) |
| jQuery | jQuery 사이트(영문) | |
| HTML DRIVE | 다양한 jQuery 소스 모음 | |
| KOREA HTML5 | HTML5 기술지원 | |
| 부스트랩 | 반응형 웹을 위한 프레임워크 | |
| 웹 접근성 연구소 | 웹접근성 기술 지원 | |
| 와우 슬라이더 | jQuery를 이용한 이미지 활용 예제 제공 | |
| 라이트 슬라이더 | 다양한 이미지 슬라이드 예제 제공 | |
| 버튼 생성 | 여러가지 모양의 버튼을 만들어 준다 | |
| 교육 | NCIA 교육센터 | 스마트 / IoT / 네트워크 / 빅데이터 |
| TIS정보기술교육센터 | 자바스크립트 / 빅데이터 / 웹표준&웹퍼블리싱 | |
| KIPFA | 웹디자인 / IT / UX / UI / 마케팅 | |
| 배운나라 | 웹디자인 / OA / 자격증 / 인터넷 | |
| 폰트 | 다폰트 | 외국 폰트 사이트 |
| 네이버 나눔글꼴 | 나눔체(상업적 무료 사용 가능) | |
| 눈누 | 무료 폰트 제공(저작권 범위를 꼭 확인하세요) | |
| 구글 폰트 / 한국어 | 구글 폰트(인터넷 폰트 제공) | |
| 폰트어썸 (상용법) | 폰트 형태로 아이콘을 제공하는 사이트 | |
| 툴 및 자료 | 픽슬(편집기) | 온라인 이미지 편집기 |
| 브러쉬이지 | 포토샵 브러쉬 모음 | |
| 브라우져숏 | 브라우저 크로싱 | |
| W3C CSS검증서비스 | CSS/HTML 문법검사 | |
| W3C 마크업 검증서비스 | 웹 문서 마크업 검증 | |
| 파비코 | ICO파일 만들기 | |
| 그라디헌트 | CSS로 그라데이션 효과 주기 | |
| CSS 점이 생성기 | CSS로 그라데이션 효과 주기 | |
| 색상 조화 | 컬러헌터 | 이미지를 컬러 팔레트로 생성 |
| 컬러러버스 | 디자이너들의 색상 업데이트 | |
| 컬러 팔레트 생성기 | 원하는 이미지로 색상조합을 만들어준다 | |
| 디자인 스피드 | 자연 이미지에서 찾은 색상조합을 제공 |
단위별 폰트 사이즈 비교
| Points(pt) | Pixels(px) | Ems(em) | Perscent(%) |
|---|---|---|---|
| 일반 문서에서 사옹되는 단위 (1포인트 = 0.72인치) |
모니터에 따라 상대적 크기를 나타냄 | 해당폰트의 대문자 M의 너비를 기준으로 함 (상속받은 속성에 대한 백분율 상대 크기) |
기본글꼴의 크기에 대한 상대적인 값 (상속받은 속성에 대한 백분율 상대 크기) |
| 6pt | 8px | 0.5em | 50% |
| 7pt | 9px | 0.55em | 55% |
| 7.5pt | 10px | 0.625em | 62.5% |
| 8pt | 11px | 0.7em | 70% |
| 9pt | 12px | 0.75em | 75% |
| 10pt | 13px | 0.8em | 80% |
| 10.5pt | 14px | 0.875em | 87.5% |
| 11pt | 15px | 0.95em | 95% |
| 12pt | 16px | 1em | 100% |
| 13pt | 17px | 1.05em | 105% |
| 13.5pt | 18px | 1.125em | 112.5% |
| 14pt | 19px | 1.2em | 120% |
| 14.5pt | 20px | 1.25em | 125% |
| 15pt | 21px | 1.3em | 130% |
| 16pt | 22px | 1.4em | 140% |
| 17pt | 23px | 1.45em | 145% |
| 18pt | 24px | 1.5em | 150% |
| 20pt | 26px | 1.6em | 160% |
| 22pt | 29px | 1.8em | 180% |
| 24pt | 32px | 2em | 200% |
HTML5 Section요소(section/article/aside/nav)
| 요소 | 내용 |
|---|---|
| section(섹션) | 장이나 절 같은 표제와 개요를 동반하는 가장 기본적인 요소이다. |
| article(아티클) | 단독적인 컨텐츠를 가진 독립적인 섹션이다. 즉 이 부분만으로도 기사가 성립된다는 의미이다. |
| aside(어사이드) | 메인 내용과 관련성이 적은 섹션이다. 즉 이부분 없어도 정보를 이해하는데 아무런 문제가 없다는 것이다. |
| nav(네비게이션) | 페이지의 네비게이션을 의미한다. |
