• Articles
• admin

우리는 새로운 프로젝트를 시작으로,이전 블로그와 웹 사이트를 업데이트 잊어 쉽다. 이 글에서 나는 당신이 신속하게 귀하의 웹 사이트가 훨씬 더 사용자 친화적 인 수 있도록 구현할 수있는 30 고체 아이디어를 제시 할 수 있습니다. 그들 모두는 전적으로 프런트 엔드 디자인을 기반으로. 웹 파서와 스파이더가 데이터를 적절하게 분류하는 데 도움이 될 수있는 인기있는 코딩 기술에 대해서도 논의 할 것입니다.

모든 웹 사이트를 업데이트 할 필요는 없으며,이 게시물에서 사용할 수있는 모든 기술이 필요하지 않습니다. 이러한 아이디어는 개발자가 디자인 측면에서 생각하고 웹 사이트를 더 예쁘게 보이게하는 방법을 얻기 위해 여기에 있습니다. 그것은 그 어느 때보 다 쉽게 모든 디지털 화면에 좋아 보인다 확장 반응 웹 사이트 레이아웃을 구축,그래서 우리의 사이트를 멋을 내는에 아래로 얻을 수 있습니다.

1. 나는 항상 내 웹 사이트 출시에 대한 테스트를 실행하는 것은 아니지만 가능할 때마다 이것이 내가 가장 좋아하는 활동 중 하나입니다. 당신은 그들이 당신의 웹 사이트와 재생 방법을 연구하여 일반적인 사용자 상호 작용에 대해 많은 것을 배울 수 있습니다. 사용자 경험 연구는 구글 웹 로그 분석과 같은 도구를 통해서만 수행 될 수있다,또는 다른 제 3 자 자원을 사용하여.

사용자 경험 테스트는 웹 개발자가 웹 사이트의 어떤 영역이 짜증나거나 깨지거나 개선 될 수 있는지 배우는 데 도움이됩니다. 디지털 도구뿐만 아니라 친구 및 동료도 사용하는 것이 좋습니다. 귀하의 웹사이트에 몇 가지 진짜 인간의 피드백을 듣고 컴퓨터 화면을 통해 얻을 수 없는 결과 제공할 수 있습니다.

2. 공백

우리는 페이지의 요소 사이의 공간의 양으로 공백을 생각할 수 있습니다. 일부 사용자는 이미 이것에 익숙한 경우 비좁은 레이아웃을 신경 쓰지 않을 것입니다. 그러나 너의 광고 타깃을 사려하고,그들의 몇이 컴퓨터 학식이 젊은 발생으로 이지 않는 까 사려하십시요.

분할 테스트 및 사용자 피드백 유지를 통해 추가 간격이 필요한 영역을 결정할 수 있습니다. 아니면 그냥 날개를 당신이 가지고 올 수있는 참조!

3. 웹 글꼴

동적 웹 글꼴을 사용하면 디자이너는 일반적인 글꼴 패밀리로 제한되지 않고 웹 페이지를 작성할 수 있습니다. 이 추세는 이제 대부분의 평균 인터넷 사용자가 괜찮은 인터넷 연결에 점점 더 인기를 끌고있다. 타사 글꼴 스타일 시트에 대한 참조를 포함하면 더 이상 지연 속도가 크게 지연되지 않습니다.

아마도 글꼴의 가장 좋은 공급자는 구글 웹 글꼴을 통해입니다. 당신이 구글 계정이없는 경우에도 등록에 특권이 있지만 당신은 응용 프로그램에 액세스 할 수 있습니다. 전체 설치 과정은 3 단계를 소요하고 사용자 정의 구글 글꼴 분 이내에 귀하의 웹 사이트에서 실행 할 수 있습니다.

4. 레이아웃을 개선하기 위해 그림자를 사용하는 것에 대해 이야기 할 때 실제로 두 가지 속성을 참조하고 있습니다. 이제까지 인기있는 상자 그림자는 레이아웃 내에서 사업부 및 상자 정말 멋지다. 당신의 콘테이너,포장지,또는 안 페이지 상자에 이 효력을 추가하는 것은 당신의 웹 페이지에 체중을 줄이는 3 차원 효력을 제공할 것입니다.

10 상자 그림자를 사용하는 창의적인 기술

10 우리는 지난 몇 년 동안 웹 개발에 엄청난 발전을 보았다….더 읽기

또한,페이지 밖으로 점프하는 타이포그래피에 대한 텍스트 그림자 속성을 고려해 볼 가치가 있습니다. 애플은 크게 모든 레이아웃 주위에 텍스트 그림자를 구현하는 최초의 회사 중 하나입니다. 당신은 당신의 글꼴(어두운 텍스트 흰색 그림자,빛 텍스트 검은 그림자)의 색상 반대되는 텍스트 그림자를 추가하여 어려운 효과를 구축 할 수 있습니다.

5. 텍스처&반복 패턴

표준 색 구성표를 사용하여 얻을 수있는 웹 사이트가 많이 있습니다. 하지만 정말 군중에서 밖으로 서 귀하의 웹사이트를 텍스처를 추가 하 고 귀하의 배경에 타일을 반복 하는 것이 좋습니다. 가장 멋진 무료 웹 애플리케이션 중 하나는 모든 브라우저에서 실행할 수있는 노이즈 텍스처 생성기입니다.

선택 BG 색상과 금액의 소음 사용하려는 다음이 응용 프로그램을 만들 것이 바둑판은 배경 이미지합니다. 당신이 패턴과 타일을 찾고 있다면 나는 미묘한 패턴을 추천 할 것입니다. 그들은 당신이 무료로 다운로드 할 수있는 사용 가능한 텍스처의 거대한 컬렉션이 있습니다.

6. CSS3 그라데이션을 배경이

는 우리가 논의 배경이 나를 가지고해야합니다 인기있는 CSS3 그라디언트입니다. 이러한 웹 배경에 대 한 어도비 포토샵에서 그들을 유지 하는 거 대 한 혜택으로 웹 개발자를 제공 합니다. 그리고 이러한 그라디언트는 탐색 모음 및 바닥 글 및 레이아웃의 다른 중요한 영역에 적용되는 본문 이상에서 작동 할 수 있습니다.

7. 부스트랩

트위터의 부트스트랩은 웹 개발자들을 위한 최고의 프론트엔드 사용자 인터페이스 프레임워크일 것이다. 여기에는 버튼,양식 입력,링크,열 및 기타 사전 형식의 페이지 개체가 포함됩니다. 부트 스트랩에 대한 가장 일반적인 사용은 새로운 응용 프로그램에 대한 방문 페이지 내에 있습니다.

그러나 오픈 소스 개발자는 게시하는 라이브러리,플러그인 또는 미니 스크립트에 대한 데모 페이지를 작성할 때도 부트 스트랩을 사용합니다.

나는 부트스트랩이 요즘 어떤 웹 사이트에 적용 할 수 있도록 대규모 정도로 성장했다고 생각합니다. 그러나 가장 큰 이점을 찾는 개발자는 자신의 사용자 인터페이스 디자인을 출시하기위한 빠른 대체 부트스트랩을 사용하고 있습니다. 이 프론트 엔드 라이브러리를 다음 번에 방문 페이지,제품 데모,모바일 앱 웹 사이트 등 단일 구체적인 목적으로 웹 페이지를 시작할 때 고려하십시오.

관련:

• 트위터 부트 스트랩 시작하기
• 부트 스트랩 201:모달 창 플러그인

8. 킥스타트

대부분의 웹 개발자들은 아직 99 라임이 만든 킥스타트에 대해 들어보지 못했다. 이 라이브러리는 그러한 문제를 표준화된 프로그래밍 인터페이스를 제공함으로써 해결합니다. 그러나 스페이드에서 둘 다 생성하기위한 코드 샘플이 있습니다. 그라디언트 버튼 및 드롭 다운 메뉴와 같은 미리 결정된 요소 세트 중에서 선택할 수 있습니다. 나는 이것이 부트 스트랩과 같은 인기를 가지고 있다고 말하지 않을 것이지만,다시 무엇을 하는가?이 라이브러리는 특정 실행 프로세스에서 불러오거나 실행될 수 있습니다 작은 샌드 박스 레이아웃을 구축하고 각 사용자 인터페이스 요소 떨어져 기본 느낌을 즐길 수 있는지. 킥 스타트는 확실히 모든 프로젝트에 대한 것은 아니지만 바인드에 걸려 때 큰 시간을 절약 할 수 있습니다.

9. 애니메이션 및 슬라이더와 페이딩 요소는 일반적으로 제이쿼리 라이브러리에서 실행됩니다. 이 라이브러리는 특정 실행 프로세스에서 불러오거나 실행될 수 있습니다 개발자는 여분의 킬로바이트에 대한 대가로 매우 많이 제공 할 수 없습니다 생각,이 간과.

하지만 사용자 인터페이스 라이브러리를 포함하면 동적 페이지 애니메이션에 대한easing호출을 업데이트할 수 있습니다. 즉,드롭 다운 메뉴,페이딩 항목,스크롤 슬라이드 쇼 및 기타 모든 동적 메뉴에 대해 애니메이션 유형을 사용자 정의 할 수 있습니다.

웹 사이트에는 다양한 변형을 테스트하고 특정 애니메이션 유형을 좋아하는지 확인할 수있는 완화 데모 페이지가 있습니다.

관련:

• 어떻게 스타일 jQuery UI 아코디언
• 볼륨 컨트롤러 jQuery UI 슬라이더를
• 사용자 정의 및 테 jQuery UI Datepicker
• 드래그 앤 드롭으로 jQuery UI 정렬

10. 화려한 배경 사진

전체 화면 배경 이미지 효과를 활용 한 요즘 수많은 웹 사이트가 있습니다. 당신은 배경 이미지로 좋은 보일 것이다 고해상도 사진 샘플을 찾을 수 있다면,이 기술은 레이아웃에 추가 가치가있을 수 있습니다. 큰 배경은 또한 당신의 웹 사이트의 장르를 암시하면서 사용자의 관심을 잡기의 훌륭한 일을.

빠른 솔루션을 찾고 있다면 제이쿼리 백스트레치 플러그인을 확인하십시오. 이를 위해서는 새 배경이 모든 해상도를 사용하여 적절하게 응답하여 확장 할 수 있도록 한 줄의 코드 만 필요합니다. 그러나 자바 스크립트 방법에 반대하는 개발자를 위해 나는 전체 페이지 이미지 기술을 추천한다.

11. 메뉴 아이콘

방문자의 관심을 끌기 위해 웹 페이지에 설정된 작은 아이콘을 포함하는 것이 좋습니다. 표준 메뉴 링크는 종종 제대로 작동하고 사용자가 페이지 사이를 탐색 할 수 있도록 도와줍니다.

그러나 나는 종종 각 메뉴 링크에 대한 설계 사용자 정의 아이콘을 볼 감동입니다. 당신은 당신의 상단 탐색,사이드 바,또는 바닥 글 영역에서 완벽하게 보일 것 무료 아이콘 세트의 톤을 찾을 수 있습니다.

12. 업데이트 된 색 구성표

실제로 전체 색 구성표 디자인을 변경하는 것은 아니지만 새로운 색상을 추가하는 것과 같습니다. 달다음에 달을 위해 동일한 배치를 달리기다음에 더 작은 지역을 새롭게 하,놀람에 의하여 반복 방문자를 붙잡는것은 좋다.

일부 관심 항목에는 앵커 링크,머리글,배경 및 도구 모음이 포함될 수 있습니다. 당신의 궤도를 개선하기 위해 색 구성표 디자이너와 같은 온라인 도구를 사용하는 것이 좋습니다.

13. 향상된 브라우저 지원

모든 주요 레거시 브라우저에서 완벽하게 지원되는 웹 사이트를 구축하는 것은 어렵습니다. 아주 소수의 사람들이 인터넷 익스플로러를 실행하고 있지만 6 그것은 여전히 내 구글 웹 로그 분석 보고서의 몇 가지에 나타납니다. 아이디어를 찾고있는 개발자는 브라우저 테스트의 작은 시험을 고려할 수 있습니다.2228>

더 중요 한 주류 브라우저의 최신 버전을 포함,모질라 파이어 폭스,오페라,크롬,사파리,그리고 아마도 카미노/시 몽키. 그러나 인터넷 익스플로러 6-8 은 여전히 널리 기업과 오래된 컴퓨터 실 사이에서 사용된다. 소프트웨어를 사용하여 빠른 렌더링 테스트를 실행할 수 있습니다. 디버깅을 위해 이전 렌더링 엔진으로 전환 할 수있는 개발자 도구 모드가 있습니다.

14. 맞는 타이포그래피

이전 레이아웃이 여전히 텍스트 스타일을 효율적으로 사용하고 있음을 알 수 있지만 항상 그런 것은 아닙니다. 나는 큰 타이포그래피가 훨씬 쉽게 레이아웃에 맞는 것을 느낀다. 그것은 읽기 쉽고 더 큰 화면 해상도에 더 많은 공간을 차지합니다 언급 할 필요가 없을 것입니다.

“맞는 타이포그래피”의 아이디어는 귀하의 웹 사이트에 꼭 맞도록 텍스트를 스타일링하는 것입니다. 몇 페이지를 통해 이동 하 고 10-15 분 안에 이러한 스타일을 업데이트할 수 있습니다.

15. 소셜 미디어 공유

지금까지 대부분의 개발자는 인기있는 소셜 네트워킹 웹 사이트에서 사용되는 공유 배지에 익숙하다고 확신합니다. 페이스 북,트위터,레딧,클립,디 존,그리고 다른 많은 외부 네트워크는 당신이 당신의 웹 사이트에 포함 할 수있는 코드를 제공합니다.. 그런 다음 방문자가 귀하의 웹 사이트를 떠날 필요없이 이러한 네트워크에 귀하의 링크를 공유 할 수 있습니다.

일부 블로그 또는 웹 잡지에서는 이러한 배지가 페이지를 아래로 스크롤하는 것을 볼 수 있습니다. 너가 수시로 곳에 어떤 중요한 내용을 막고 있지 않는 몸 지역이상으로 공중선회해 그들을 다만 있을 수 있기 때문에 이것은 우수한 기술 이다. 또한 유사한 효과를 가질 수 있습니다 소셜 미디어 도구 모음에 우리의 게시물을 탐색하는 것이 좋습니다.

16. 사용자 토론

당신은 워드 프레스 나 드루팔과 같은 씨엠을 실행하는 경우에 당신은 기본적으로 주석 양식을 포함 할 수있는 능력을 가지고있다. 그러나 정적 웹 페이지를 만들 때이 기능을 모방하기 위해 자체 데이터베이스 시스템을 설정해야합니다. 그러나 오픈 소스 기술 개발자의 증가와 함께 지금 디스켓과 같은 더 나은 솔루션을 구현할 수 있습니다.

이 방법을 사용하면 토론 영역에서 스팸과 쓰레기를 정리하는 데 끊임없이 대처하지 않습니다. 이미 디스크 계정이 없는 사용자는 인기있는 소셜 네트워킹 프로필을 사용하여 빠르게 연결하거나 페이지에서 바로 가입할 수 있습니다. 아키 멧의 아픈 심지어 워드 프레스 사용자는 디스크 코멘트 시스템 플러그인을 사용하여 전환 할 수 있습니다.

17. 바닥 글 영역을 넓히다

대부분의 작은 웹 사이트 레이아웃은 바닥 글 섹션 매우 보수적 일 것이다. 여기에는 몇 가지 기본 저작권 정보와 몇 가지 기본 페이지 링크가 포함될 수 있습니다. 그러나 현대 웹 디자인 동향은 메타산 연결의 제비를 가진 큰 바닥글의 아이디어를 지원한다.

이들은 많은 추가 정보가있는 신생 기업 및 대기업 웹 사이트에서 흔히 볼 수 있습니다. 더 큰 바닥 글 영역을 열면 귀하의 웹 사이트 경험을 향상시킬 수 있습니다 그러나 확실히 그것이 속하지 않는 레이아웃으로이 강제하려고하지 않습니다,그것은 몇 가지 묵상 가치가있다.

18. 이미지 응답

동적 유체 및 반응 형 웹 페이지 이미지 자체가 트렌드가되었습니다. 그것은 여전히 윈도우 크기가 조정 될 때 컨테이너 래퍼에서 깨고,고정 폭으로 설정 이미지를 가지고 지금 거의 우스꽝스러운입니다. 가장 일반적인 방법은width: 100%를 사용하여 적용하는 것입니다.

그러나 바인딩에 유용 할 수있는 다른 오픈 소스 방법을 고려할 수도 있습니다. 이 플러그인은 매우 작은 파일 크기를 가지고 있습니다. 그냥이 귀하의 페이지에 포함 하 고 페이지에 모든 이미지를 대상으로 한 줄 코드를 실행 합니다. 이것은 여전히 데스크톱 기반 콘텐츠를 사용하는 모바일 레이아웃에 훌륭한 추가 기능입니다.

19. 메뉴 접근성

나는 이것이 당신이 끊임없이 당신의 레이아웃에서 업데이트하려고해야 할 일이라고 말하지 않겠지 만 개발자와 디자이너가 처음으로 제대로 얻지 못하는 것입니다. 하위 메뉴 링크를 구현하는 더 좋은 방법이 있다면 네비게이션 시스템을 되돌아보고 브레인 스토밍 할 가치가 있다고 생각합니다.

세로 공간이 충분하기 때문에 사이드 바 및 콘텐츠 영역에는 종종 아코디언 메뉴가 있습니다. 그러나 드롭 다운 메뉴 또는 슬라이딩 하위 메뉴가있는 수평 탐색 모음을 생각해보십시오. 메뉴 링크가 빠르고 쉽게 액세스 할 수있는 한 사용자 기반에 문제가 없어야합니다.

20. 이 예제에서는 메타 데이터를 확장할 수 있는 방법을 보여 줍니다. 이러한 속성은 콘텐츠 및 페이지의 다른 콘텐츠와 관련된 방법에 대한 추가 정보를 제공합니다. 그리고 궁극적으로 이러한 결과는 구글이 개별 키워드에 대한 귀하의 웹 사이트의 순위를 결정하는 데 도움이,이미지 및 비디오 검색과 같은 다른 엔진 내에서.

특히 지원되는 문서화된 마이크로데이터 버전이 호출됩니다 Schema.org.그들의 웹사이트 다시가 서 의미 스키마 마크업으로 콘텐츠를 편집 해야 하는 모든 정보를 제공 합니다. 이 스키마 구문은 모든 주요 검색 엔진에 의해 뒷받침되고 지원되며 시맨틱 메타 데이터 디자인의 미래로 발전 할 것입니다.

21. 탐색 링크 재정렬

일부 웹 사이트의 경우 고정 콘텐츠 탐색에서 실행되는 것이 실제 문제가 아닐 수 있습니다. 그러나 나는 몇몇 더 큰 사업 웹사이트 또는 포트홀리로안에 어느 항법 연결이 너무 많은 우선권을 준다 고 발견했다. 그리고 마찬가지로 거의 찾을 수없는 몇 가지 항목이 있습니다! 너가 어떤 다른 방문자 이던 처럼 너의 웹사이트를 찾아보고 행동하는 시간을 걸리십시요.

당신이 가장 관심있는 링크를 고려,당신은 추가보고 싶은 가능성이 어떤 링크. 여기에는 웹 사이트의 간략한 역사,팀에 대한 정보,연락처 세부 정보,개인 정보 보호 문제,보도 자료 등이 포함될 수 있습니다. 또한 사용자의 피드백을 수집하고 자신의 희망과 새로운 또는 업데이트 된 페이지에 대한 수요 사이의 상관 관계가 있는지 확인하는 데 도움이 될 수 있습니다.

22. 맨 위로 링크

웹 사이트가 매우 긴 콘텐츠 페이지를 게시하는 경우 레이아웃에 필수 요소입니다. 맨 위로 스크롤 링크는 요즘 거의 모든 곳에서 찾을 수 있습니다. 사용자는 홈 키를 칠 생각하지 않으며 다시 모든 방법을 스크롤 성가신 될 수 있습니다. 이 링크에 가장 적합한 위치는 컨테이너 옆에 떠 있거나 홍키아트에서 구현 한 것처럼 바닥 글에 바로 앉아 있습니다.

23. 코드/사전 태그 사용자 정의

웹 사이트 스타일 시트를 처음 만들 때 많은 개발자가 일반적인 페이지 요소를 간과합니다. 머리글과 단락은 매우 일반적이지만 사전 태그 또는 인라인 코드 태그는 어떻습니까? 이것은 당신이 텍스트 파일에서 볼 것처럼 미리 포맷 된 소스 코드 구문을 캡슐화하는 데 사용됩니다. 몇몇 웹사이트에는 이 성분을 위해 필요가 있지 않는다,그러나 아직도 그들을 만일에 대비하여 유행에 따라 디자인 해 달라고 하는 좋은 연습이라고 사려된다.

24. 이미지 너비/높이 속성 추가

이제이 작업은 얼마나 많은 이미지를 통과해야하는지에 따라 쉽게 시간이 걸릴 수 있습니다. 그러나 당신이 정의한 폭/고도 없이 당신의 웹사이트에 있는 심상을 찾아내는 경우에 그(것)들을 새롭게 하는 가치가 있을지도 모른다.

일반적으로 이러한 속성이 없는 이미지는 전체로 로드하기 전에 1 제곱 픽셀로 표시됩니다. 이렇게 하면 새 이미지가 로드될 때 웹 페이지 및 스크롤 막대가 이동합니다. 다시이 모두를 위해 도움이 되지 않습니다 하지만 그것은 어떤 경우에 빠른 해결사로 주목할 가치가 있다. 그리고 고정 된 속성을 사용하여 반응 형 이미지에 대한 기술은 여전히 있습니다.

25. 자바 스크립트 알림

자바 스크립트에서 작업 한 모든 개발자는 일반적인 대화 상자에 대해 알고 있습니다. 당신은 설정 단지 정보를 표시,사용자에게 확인 버튼을 제공하는 경고 상자를 할 수 있습니다. 그러나 사용자 입력을 요청하는 프롬프트 상자와 함께 예/아니오 버튼으로 확인 경고도 있습니다.이러한 코드는 모두 경고화를 사용하여 사용자 정의할 수 있습니다.제이에스 이것은 당신의 자신의 프론트 엔드 경고 상자를 설계하기위한 아주 작은 오픈 소스 라이브러리입니다. 그것은 당신이 당신의 자신의 스타일을 일치해야하는 경우 사용자 정의 할 매우 설치에 빠르고 쉽습니다.

26. 응답 미디어 쿼리

이것은 추가 할 코드의 빠른 비트처럼 보이지 않을 수 있습니다,그러나 그것은 정말 전혀 시간이 많이 걸리지 않습니다. 응답 쿼리는 기존 스타일 시트에 추가하거나 새로운 응답에 추가 할 수 있습니다.문서. 어느 쪽이든 모니터,태블릿 및 스마트 폰에서 다양한 디스플레이 크기를 처리하기 위해 반복 스타일을 빠르게 설정할 수 있습니다.

응답 쿼리는 항상 완전히 레이아웃을 응답 할 필요가 없습니다. 때로는 길쭉한 사이드 바 또는 더 큰 바닥 글과 같은 콘텐츠 비트를 숨길 수도 있습니다. 그런 다음 원래 바탕 화면 레이아웃에 숨겨진 완전 반응 미니 바닥 글을 표시 할 수 있습니다. 반응 형 웹 자습서 모음에서 미디어 쿼리에 대해 자세히 알아볼 수 있습니다.

27. 제휴 링크

항상 당신의 분야에 관련된 유사한 웹 사이트 온라인 건물 내용이있을 것이다. 창조되는 아주 희소하게 새로운 아이디어 있는다;최대량은 기존하는 내용에서 파생물 그리고 패러디 이다. 그러나 경쟁으로 웹을 돌기의 대신에 친근한 분위기를 조성하지 않는가 위하여 왜? 만약 당신이 귀하의 레이아웃에 여분의 공간을 귀하의 틈새(검색 구글)제휴를 요청에서 관련 웹사이트에 몇 가지 전자 메일을 보낼.

링크를 교환하고 서로 트래픽을 유도 할 수 있습니다. 이것은 당신의 웹사이트를 많게 빨리 찾아내고,당신이 다른 웹사이트의 지역 사회 안에 또한 포함된다는 것을 보기 위하여 새로운 사용자를 위한 문을 연다. 플러스 구글에서 권위를 가진 웹 사이트에서 뒤로 얻는 것은 도메인의 신뢰성을 도울 수있다.

28. 아이콘 기반 글꼴

최근에 아이콘 글꼴 및 데이터 속성에 대해 논의한 24 가지 방법에 대한 기사를 읽고있었습니다. 이 웹 디자인의 미래에 대해 생각하고 어떻게 극적으로 프론트 엔드 코딩에 영향을 미쳤다. 아이콘 기반 글꼴은 탐색 메뉴,정렬/정렬되지 않은 목록 및 기본 페이지 내용을 포함한 여러 가지 이유로 적합합니다.웹 사이트

이러한 글꼴의 대부분은 신속하게@font-face를 사용하여 웹 사이트에 추가 할 수 있습니다. 즉,글꼴 호스팅을 위해 타이프 킷과 같은 타사 서비스에 의존 할 필요가 없습니다. 그것은 또한 단지 아이콘을 사용하는 것보다 더 의미 론적 디자인 스타일을 의미합니다.

29. 이미지 상자 그림자

당신이 더 이상 당신의 페이지에 방문자를 유지하려면 당신은 진짜 품질의 콘텐츠를 제공 할 필요가. 그러나 이것은 이미 귀하의 웹사이트에 대 한 경우 있을 수 있습니다 귀하의 스타일은 개성 다음 사람들이 다른 곳에서 볼 것 이다. 분위기와 미학 좋은 웹 디자인에 거 대 한 있습니다.

페이지 이미지 주위에 테두리를 감싸는 빠른 이미지 클래스를 작성하는 것이 좋습니다. 여기에는 테두리 및 패딩과 함께 작은 상자 그림자가 포함될 수 있습니다. 당신의 심상이 스크린에서 뛰어오르고 원본의 절에서 우수할 것을 돕는 아무거나.

30. 대체 스타일시트

단일 웹 사이트 레이아웃을 작성할 때 포함해야 하는 다양한 미디어 스타일을 모두 고려하십시오. 이것은 데스크탑 모니터,노트북,태블릿 및 심지어 스마트 폰에서도 잘 보일 것입니다. 항상 지원되는 것은 아닌 프로젝션 및 인쇄 매체를 잊지 마십시오.

이러한 모호한 유형의 미디어를 사용하는 많은 청중이 있다면 자신의 대체 스타일 시트를 스타일링하는 것이 좋습니다. 인쇄와 같은 미디어 유형에 따라 레이블을 지정할 수 있습니다.또는 기존 스타일 시트에 추가됩니다. 충분한 수요가 있는 경우에 그 후에 당신의 방문자는 유구하게 고맙게 여길 것이다. 그리고 솔직히 일반적인 프린터에 대한 기본 웹 사이트 레이아웃을 편집하는 데 많은 시간이 걸리지 않습니다.

최종 생각

크리에이티브 디자이너,특히 프론트 엔드 웹 개발자는이 목록 중에서 유용한 기술을 찾을 수 있기를 바랍니다. 이러한 아이디어의 대부분은 구현에 1-2 시간 이상 걸리지 않아야하며,많은 사람들은 15-30 분 안에 성취 될 수 있습니다.

웹 사이트 레이아웃을 재평가하고 수시로 새로운 트렌드로 업데이트하는 것은 특히 기본 브라우저 그림자,애니메이션 및 둥근 모서리를 허용하는 최신 릴리스의 경우 좋은 생각입니다. 이것은 당신이 몇 가지 빠른 업데이트를 필요로하는 경우 눈에 가치가 아이디어의 훌륭한 모음입니다.

또한 기사에 대한 질문이나 아이디어가있는 경우 포스트 토론 영역에서 우리와 함께 공유 주시기 바랍니다.