Home-theater-designers
웹 디자인은 그 어느 때보다 쉽게 접근할 수 있지만 전문적인 결과를 생성하려면 여전히 많은 작업과 많은 기술이 필요합니다.
다행히 매번 처음부터 시작할 필요는 없습니다. 현대적인 디자인 트렌드와 기술을 모두 수용하는 수천 개의 무료 CSS 템플릿이 온라인에서 제공됩니다. 원래 형태로 사용하거나 사용자 정의하여 자신의 것으로 만들 수 있습니다.
이 가이드에서는 CSS 템플릿과 템플릿을 찾을 수 있는 위치에 대해 자세히 살펴보겠습니다.
CSS 템플릿이란 무엇입니까?
CSS 템플릿은 CSS만 포함하는 것이 아니라 완벽하게 작동하는 웹사이트를 만드는 데 필요한 모든 것을 제공합니다. 하나를 다운로드하면 일반적으로 다음이 포함된 폴더가 생성됩니다.
- HTML 파일 -- 웹사이트의 모든 페이지에 대한 HTML 파일을 받게 됩니다. 여기에는 자신의 콘텐츠로 대체해야 하는 샘플 텍스트와 이미지가 포함됩니다. 또한 사이트 설명과 관련된 메타 데이터를 조정할 수 있어야 합니다.
- CSS 파일 -- 일반적으로 사이트의 모든 스타일과 재설정 스타일시트 또는 웹 글꼴용과 같은 추가 항목이 포함된 하나의 기본 CSS 파일을 얻습니다.
- 자바스크립트 파일 -- 사이트에 Javascript 기능이 포함된 경우 HTML 문서에 통합하기보다 자체 별도 파일에 포함하는 것이 이상적입니다.
- 이미지, 글꼴 및 아이콘 -- 템플릿에 사용된 모든 이미지도 포함되어야 합니다. 아이콘 및 배경과 같은 것을 유지하고 싶을 수 있지만 다른 자리 표시자 이미지를 자신의 것으로 교체해야 합니다. 일부 사용자 정의 글꼴도 포함될 수 있습니다.
Wordpress, Excel 또는 인디자인 템플릿 -- CSS 템플릿에는 어느 정도의 기술 지식이 필요합니다.
편집할 수 있는 친숙한 인터페이스가 없으므로 최소한 자신의 콘텐츠를 추가하기 위해 HTML 문서를 탐색하는 방법을 알아야 합니다. 자신만의 커스터마이징을 하려면 CSS에 대한 상당한 지식이 필요합니다.
Windows 10을 서버로 사용
CSS 템플릿에서 찾아야 할 사항
선택할 수 있는 무료 CSS 템플릿이 너무 많습니다. 그렇다면 어떤 것이 자신에게 적합한지 어떻게 알 수 있습니까? 다음은 주의해야 할 사항입니다.
- 설계 -- 분명히, 당신은 멋지게 보이고 당신이 묘사하고 싶은 이미지를 반영하는 사이트를 원합니다. 그러나 템플릿이 현재와 미래의 요구 사항에 적합한지 여부도 고려하십시오. 대부분은 한 페이지 웹사이트를 위한 것입니다. 일부는 여러 페이지용으로 설계되었습니다. 후자가 필요한 경우 Wordpress와 같은 CMS를 대신 사용하는 것이 더 나을지 여부를 고려하십시오.
- 모바일 최적화 -- 이제 모바일 웹 사용량이 데스크톱보다 높으므로 사이트가 스마트폰에서 제대로 작동하는 것이 중요합니다. 적절한 CSS 템플릿은 반응형 디자인을 사용하여 사이트가 모든 크기의 화면에서 완벽하게 작동하도록 해야 합니다. 선택한 항목이 그렇지 않은 경우 해당 항목으로 전환하십시오.
- 잘 쓰여진 -- 템플릿을 다운로드하고 사용하기 전에 코드를 살펴보십시오. 깨끗하고 잘 구성되어 있으며 편집하기 쉬워야 합니다. 또한 제목과 제목 태그를 올바르게 사용하여 SEO를 인식해야 합니다.
- 특허 -- 선택한 CSS 템플릿의 라이선스를 확인하십시오. 많은 사용 가능 크리에이티브 커먼즈 라이선스에 따라 , 그러나 이 라이선스의 다른 버전은 템플릿을 편집할 수 있는지 여부, 상업적으로 사용할 수 있는지 여부, 원본 디자이너를 크레딧해야 하는지 여부를 결정합니다.
- 애드온 -- 일부 CSS 템플릿 개발자는 '프리미엄' 기반으로 작업을 제공합니다. 템플릿을 무료로 받을 수 있지만 사이트에 고유한 템플릿을 만들기 위해 추가 사용자 지정 비용을 지불할 수 있는 옵션이 있습니다.
모든 설명을 통해 무료 CSS 템플릿을 찾을 수 있는 최고의 장소를 살펴보겠습니다.
1. Templated.co
800개 이상의 CSS 템플릿으로 구성된 이 놀라운 컬렉션에는 모든 웹사이트 클래스에 대한 스타일이 포함되어 있습니다. 그것들은 모두 사이트를 위해 특별히 만들어졌으므로 다른 곳에서 잘려지는 것을 볼 수 없습니다.
모든 템플릿은 반응형이며 HTML5로 제작되었습니다. 작고 가벼우며 비디오 라이트박스 또는 스크롤 효과와 같은 추가 Javascript 기능이 있으며 경험에 실제 가치를 추가하는 경우에만 사용됩니다.
2. Styleshout.com
Styleshout은 Creative Commons 라이선스에 따라 출시된 다양한 무료 및 프리미엄 템플릿을 제공합니다.
무료 템플릿은 전체 웹사이트에서 출시 예정 페이지, 종종 간과되는 404 오류 페이지에 이르기까지 광범위한 범주를 다룹니다. 직접 사용자 정의하고 기존 사이트의 스타일에 맞게 조정하거나 Styleshout에서 비용을 지불하여 이를 수행할 수 있습니다.
삼. HTML5Up.net
이 매우 세련된 템플릿 컬렉션도 인기가 많습니다. 대부분은 수십만 번 다운로드되었으며 그 이유를 쉽게 알 수 있습니다.
블로그 및 제품 페이지와 같은 사이트의 모든 일반적인 범주에 적합하며 사진 작가가 자신의 작업을 과시할 수 있는 특히 멋진 디자인이 있습니다. 기본 그리드 스타일 템플릿은 사용자 정의가 가능하지만 더 화려한 템플릿은 Javascript를 상당히 많이 사용하는 경향이 있으므로 조정에 덜 적합할 수 있습니다.
4. Freebiesbug.com
Freebiesbug가 양적으로 부족한 것은 품질에서 보충하는 것보다 더 많습니다. 젊은 개발자가 자신의 기술을 선보일 수 있는 사이트로 많은 고급 프리미엄 디자인이 포함되어 있습니다.
사이트의 인상적인 무료 템플릿 모음은 대행사, 사진 작가, 앱 개발자 및 기타 크리에이티브에 적합합니다. Javascript 및 CSS 효과와 애니메이션으로 가득 차 있기 때문에 사이트를 사용자 정의할 수 있습니다.
또한 Freebiesbug.com에는 글꼴, 스톡 사진, Illustrator 스케치 및 PSD 파일 등 웹 디자이너를 위한 모든 종류의 무료 리소스가 포함되어 있습니다.
5. 무료 CSS.com
Free-CSS.com은 글을 쓰는 시점에서 원하는 것을 찾을 수 없는 경우를 대비하여 2503개의 무료 템플릿과 많은 프리미엄 템플릿을 제공하는 군더더기 없는 웹사이트입니다.
선택할 수 있는 것이 너무 많기 때문에 완벽한 디자인에 정착하기가 조금 어려울 수 있습니다. 사이트의 10년 존재로 인해 여전히 XHTML로 작성된 템플릿을 호스팅하고 있지만 품질은 일반적으로 좋습니다. 당신은 이것을 피하고 싶을 것입니다. 다른 하나는 선택한 템플릿의 라이선스를 확인하는 것입니다. 모두 무료이지만 일부는 공개 도메인이고 일부는 크리에이티브 커먼즈이며 일부는 작성자별 라이선스를 사용합니다.
6. OS-Templates.com
한 페이지에서 대부분 현대적인 그리드 기반 레이아웃을 사용하는 28페이지의 무료 CSS 템플릿. 단순한 것이 당신이 추구하는 것이라면 이것이 볼 곳입니다. 디자인은 깨끗하고 매력적이며 사용자 정의하기 쉽습니다.
OS-Templates.com은 또한 '기본 템플릿'의 대규모 컬렉션을 제공합니다. 이것들은 완전히 스타일이 지정되지 않은 상태에서 다양한 인기 있는 레이아웃 구성표(2열, 3열 등)로 웹사이트의 기본 구조를 제공합니다. Wordpress의 기본 테마를 사용하는 것처럼 빈 캔버스를 사용하면 사이트를 원하는 모든 것으로 바꿀 수 있습니다.
7. boag.online [더 이상 사용할 수 없음]
Maglev는 단일 페이지 웹 사이트 템플릿으로 boag.online에서 미리보기 .
빠르고 깔끔한 템플릿으로 제품 페이지에 이상적입니다. 미니멀한 디자인은 섹션 사이를 스크롤하는 데 도움이 되는 몇 가지 Jquery 효과에 의해서만 강화됩니다. 단순한 레이아웃은 그 자체로 작동하지만 사용자 정의를 위한 훌륭한 출발점이 됩니다.
8. 픽셀 부처
Pixel Buddha의 템플릿은 웹사이트에 국한되지 않고 이메일 뉴스레터에도 포함됩니다.
어느 쪽이든 모두 HTML5 및 CSS3으로 설계되었으며 반응이 빠르기 때문에 어떤 기기에서든 멋지게 보입니다. 하이라이트에는 아름다운 포트폴리오/이력서 템플릿인 Howdy HTML과 HTML 및 CSS 위에 소스 PSD 파일이 포함된 멋진 전자 상거래 페이지인 SOHO HTML이 있습니다.
제목별로 Gmail을 정렬하는 방법
9. 템플릿모닷컴
Templatemo에서 거의 500가지 무료 템플릿을 사용할 수 있습니다. 최고 중 일부는 부트스트랩 스타일 그리드 시스템에서 벗어나 다른 것을 시도하는 것입니다.
라이트박스 및 콘텐츠 캐러셀과 같은 기능이 필요한 곳에 포함되어 있지만 대부분의 템플릿은 단순하고 복잡하지 않습니다. 우리는 또한 몇 가지 템플릿이 기본적으로 최대 6페이지와 함께 작동하도록 설정되어 있다는 사실을 좋아합니다. 이렇게 하면 콘텐츠가 점점 더 많이 사용되는 한 페이지 레이아웃에 맞지 않는 경우 더 쉽게 만들 수 있습니다.
10. Startbootstrap.com
부트스트랩은 고품질 웹사이트를 단시간에 구축할 수 있게 해주는 매우 인기 있는 프론트엔드 프레임워크입니다. 그러나 Start Bootstrap이 필요한 부분을 배우는 데 약간의 시간이 걸립니다.
이 무료 오픈 소스 템플릿 모음은 모두 Bootstrap의 그리드 시스템을 사용하여 구축되었습니다. 30개 이상 중에서 선택할 수 있습니다. 일부는 앱, 블로그 및 랜딩 페이지를 위해 완전히 디자인되고 의도된 반면, 나머지는 스타일을 지정하기를 기다리는 빈 레이아웃입니다.
열하나. Bootswatch.com
마지막으로 좀 더 손에 익은 것입니다. Bootswatch는 Bootstrap을 사용하여 구축된 스타일 사이트에 16개의 오픈 소스 테마를 제공합니다.
부트스트랩을 사용하여 사이트 레이아웃을 직접 구축하거나 부트스트랩 시작에서 빈 템플릿 중 하나를 다운로드할 수 있습니다. Bootswatch가 하는 일은 글꼴, 배경색, 버튼, 메뉴 및 기타 요소의 스타일을 변경하는 것입니다. Bootstrap의 매우 깨끗한 정신에 충실하면서 사이트에 독특한 외관을 제공합니다.
Bootstrap을 사용하면 기본 웹 사이트를 쉽게 구성할 수 있으며 Bootswatch를 사용하면 즉시 개선할 수 있습니다.
CSS 템플릿을 사용하는 방법
일반적으로 템플릿을 사용하는 방법에는 두 가지가 있습니다. 그대로 사용하거나 자신의 디자인을 위한 기초로 사용합니다.
템플릿을 사용할 때의 위험은 결국 다른 사람의 웹사이트와 동일한 웹사이트가 된다는 것입니다. 인기 있는 템플릿을 선택하면 문자 그대로 수만 개의 동일한 사이트가 있을 수 있습니다. 이것은 사용자 정의에 찬성하는 주요 주장입니다.
iOS에서 Android로 연락처 전송
CSS 템플릿은 기본 레이아웃을 염두에 두고 곧바로 스타일을 지정하려는 숙련된 웹 디자이너를 위한 훌륭한 지름길입니다.
웹 디자인을 처음 접하는 사람에게도 적합합니다. HTML과 CSS에 대한 방법을 알고 있지만 처음부터 사이트를 구축할 자신감이나 지식이 없다면 CSS 템플릿은 멋진 사이트를 만드는 쉬운 방법이자 멋진 학습 도구 역할을 합니다.
진행 중인 작업으로 처리할 수 있습니다. 시작 글꼴 바꾸기 그리고 색 구성표 변경 , 그리고 시간이 지남에 따라 기존 요소를 다시 디자인하고 새 요소를 추가하는 등의 작업을 수행할 수 있습니다. 실제적이고 직접적인 경험을 통해 배우는 것보다 더 좋은 방법은 없습니다.
웹사이트를 구축할 때 CSS 템플릿을 사용합니까? 그들을 찾기 위해 가장 좋아하는 장소는 무엇입니까? 의견에서 경험과 팁을 공유하십시오.
공유하다 공유하다 트위터 이메일 명령 프롬프트를 사용하여 Windows PC를 청소하는 방법Windows PC의 저장 공간이 부족한 경우 이 빠른 명령 프롬프트 유틸리티를 사용하여 정크를 정리하십시오.
다음 읽기 관련 항목- 프로그램 작성
- 웹 디자인
- CSS
Andy는 15년 동안 기술에 관해 글을 써온 전직 인쇄 기자이자 잡지 편집자입니다. 그 동안 그는 수많은 출판물에 기여했으며 대형 기술 회사를 위한 카피라이팅 작업을 제작했습니다. 그는 또한 미디어에 전문가의 논평을 제공하고 업계 행사에서 패널을 주최했습니다.
앤디 베츠가 참여한 작품 더보기뉴스레터 구독
뉴스레터에 가입하여 기술 팁, 리뷰, 무료 전자책 및 독점 거래를 확인하십시오!
구독하려면 여기를 클릭하세요.