글꼴, 테두리 및 이미지를 사용하여 헤드 라인 장식
표제는 대부분의 웹 페이지에 공통적입니다. 사실, 거의 모든 텍스트 문서는 적어도 하나의 헤드 라인을 가지고있어서 읽는 제목을 알 수 있습니다. 이 헤드 라인은 h1, h2, h3, h4, h5 및 h6과 같은 HTML 제목 요소를 사용하여 코딩됩니다.
일부 사이트에서는 헤드 라인이 이러한 요소를 사용하지 않고 코딩된다는 것을 알 수 있습니다. 대신 헤드 라인은 특정 클래스 속성이 추가 된 단락이나 클래스 요소가있는 단락을 사용할 수 있습니다. 이 잘못된 관행에 대해 자주 듣는 이유는 디자이너가 "표제가 보이는 방식을 좋아하지 않습니다"라는 것입니다. 기본적으로 표제는 굵게 표시되며 크기가 더 큽니다. 특히 페이지 텍스트의 나머지 부분보다 훨씬 큰 글꼴 크기로 표시되는 h1 및 h2 요소가 더 큽니다. 이 요소의 기본 모양 일뿐입니다! CSS를 사용하면 원하는 표제를 만들 수 있습니다! 글꼴 크기를 변경하고 굵게 문자를 제거 할 수 있습니다. 제목은 페이지의 헤드 라인을 코딩하는 적절한 방법입니다. 이유는 다음과 같습니다.
DIV와 스타일링보다는 표제어 태그를 사용하는 이유
제목 태그와 같은 검색 엔진
이것은 표제를 사용하는 가장 좋은 이유이며 올바른 순서로 사용하십시오 (예 : h1, h2, h3 등). 검색 엔진은 제목 태그에 포함 된 텍스트의 가중치가 가장 높으므로 해당 텍스트에 의미 적 값이 있기 때문입니다. 즉, 페이지 제목 H1에 라벨을 지정하면 검색 엔진 스파이더에게 페이지의 # 1 초점임을 알릴 수 있습니다. H2 표제에는 # 2 강조가 있습니다.
헤드 라인을 정의하는 데 사용 된 클래스를 기억하고 있지 않아야합니다.
모든 웹 페이지에 굵은 글꼴, 2em 및 노란색 H1이 있으면 스타일 시트에서 한 번 정의하고 완료 할 수 있습니다. 6 개월 후, 다른 페이지를 추가 할 때 페이지 상단에 H1 태그를 추가하기 만하면 다른 페이지로 돌아가서 기본 스타일을 정의하는 데 사용한 스타일 ID 또는 클래스를 찾을 필요가 없습니다. 헤드 라인 및 서브 헤드.
그들은 강력한 페이지 개요를 제공합니다.
윤곽선은 텍스트를 읽기 쉽게 만듭니다. 그래서 대부분의 미국 학교는 학생들에게 종이를 쓰기 전에 개요를 작성하도록 가르쳤습니다. 머리글 태그를 개요 형식으로 사용하면 텍스트의 구조가 매우 명확 해지며 매우 빠르게 나타납니다. 또한 개요를 제공하기 위해 페이지 개요를 검토 할 수있는 도구가 있으며 개요 구조의 제목 태그에 의존합니다.
당신의 페이지는 스타일이 꺼져 있어도 느낌을냅니다.
모든 사람들이 스타일 시트를 보거나 사용할 수있는 것은 아닙니다 (그리고 이것은 # 1로 돌아옵니다 - 검색 엔진은 스타일 시트가 아닌 페이지의 내용 (텍스트)을 봅니다). 제목 태그를 사용하면 헤드 라인이 DIV 태그가 제공하지 않을 정보를 제공하기 때문에 페이지를 더욱 쉽게 이용할 수 있습니다.
스크린 리더와 웹 사이트 접근성에 도움이됩니다.
표제를 올바르게 사용하면 문서의 논리적 구조가 만들어집니다. 이것은 화면 판독기가 시각 장애가있는 사용자에게 사이트를 "읽음"하는 데 사용되어 장애가있는 사용자가 사이트에 액세스 할 수있게하는 것입니다.
당신의 표제의 원본 그리고 글꼴을 유행에 따라 디자인하십시오
제목 태그의 "크고 대담하고 못생긴"문제를 해결하는 가장 쉬운 방법은 텍스트를 원하는 스타일로 꾸미는 것입니다. 사실, 내가 새로운 웹 사이트에서 일할 때 나는 보통 단락, h1, h2, h3 스타일을 가장 먼저 작성합니다. 나는 보통 폰트 패밀리와 크기 / 무게만을 고집합니다. 예를 들어, 이것은 새로운 사이트에 대한 예비 스타일 시트 일 수 있습니다 (이들은 사용 가능한 몇 가지 예제 스타일입니다) :
본문, html {여백 : 0; 패딩 : 0; } p {글꼴 : 1em Arial, Geneva, Helvetica, sans-serif; } h1 {font : 굵은 체 2em "Times New Roman", Times, serif; } h2 {font : 굵게 1.5em "Times New Roman", Times, serif; } h3 {font : bold 1.2em Arial, Geneva, Helvetica, sans-serif; }제목의 글꼴을 수정하거나 텍스트 스타일 또는 텍스트 색상을 변경할 수 있습니다. 이 모든 것들이 당신의 "못생긴"헤드 라인을 당신의 디자인과 함께 더욱 생생한 것으로 바꿀 것입니다.
h1 {글꼴 : 굵게 기울임 꼴 2em / 1em "Times New Roman", "MS Serif", "New York", serif; 여백 : 0; 패딩 : 0; color : # e7ce00; }국경은 헤드 라인을 장식 할 수있다
테두리는 헤드 라인을 향상시키는 좋은 방법입니다. 테두리는 쉽게 추가 할 수 있습니다. 그러나 경계를 시험하는 것을 잊지 마십시오. 헤드 라인의 양쪽에 경계선이 필요하지 않습니다. 그리고 평범한 지루한 테두리 이상의 것을 사용할 수 있습니다.
h1 {글꼴 : 굵게 기울임 꼴 2em / 1em "Times New Roman", "MS Serif", "New York", serif; 여백 : 0; 패딩 : 0; color : # e7ce00; border-top : 솔리드 # e7ce00 medium; border-bottom : 점선으로 된 # e7ce00 thin; 너비 : 600px; }흥미로운 시각적 스타일을 소개하기 위해 표제 제목에 위쪽과 아래쪽 테두리를 추가했습니다. 원하는 디자인 스타일을 얻고 자하는 어떤 방법 으로든 테두리를 추가 할 수 있습니다.
배경 이미지를 헤드 라인에 추가하기 Pizazz
많은 웹 사이트에는 페이지 상단에 헤드 라인 (일반적으로 사이트 제목과 그래픽)이 포함 된 헤더 섹션이 있습니다. 대부분의 설계자는 이것을 두 개의 분리 된 요소로 생각하지만 사용자는 그렇게 할 필요가 없습니다. 그래픽이 헤드 라인을 꾸미기 만하면 표제 스타일에 추가하지 않는 이유는 무엇입니까?
h1 {글꼴 : 굵은 기울임 꼴 3em / 1em "Times New Roman", "MS Serif", "New York", serif; 배경 : #fff url ( "fancyheadline.jpg") repeat-x 아래쪽; 패딩 : 0.5em 0 90px 0; 텍스트 정렬 : 가운데; 여백 : 0; border-bottom : 솔리드 # e7ce00 0.25em; color : # e7ce00; }이 헤드 라인의 트릭은 내 이미지가 90 픽셀 높이라는 것을 알고 있다는 것입니다. 그래서 나는 90px (padding : 0.5 0 90px 0p;) 헤드 라인 하단에 패딩을 추가했습니다. 여백, 선 높이 및 패딩을 사용하여 헤드 라인의 텍스트가 원하는 위치에 정확히 표시되도록 할 수 있습니다.
이미지를 사용할 때 기억해야 할 점 중 하나는 화면 크기와 기기에 따라 레이아웃이 변경되는 반응 형 웹 사이트 (필요한 경우)의 헤드 라인이 항상 같은 크기는 아닐 수 있다는 것입니다. 헤드 라인을 정확한 크기로 만들려면 문제가 발생할 수 있습니다. 내가 일반적으로 헤드 라인의 배경 이미지를 피하는 이유 중 하나입니다.
헤드 라인의 이미지 교체
이는 웹 디자이너에게 또 다른 인기있는 기술로, 그래픽 헤드 라인을 만들고 제목 태그의 텍스트를 해당 이미지로 바꿀 수 있기 때문입니다. 이것은 사실 웹 디자이너가 거의 모든 글꼴에 액세스 할 수 없었고 자신의 작업에 더 많은 이국적인 글꼴을 사용하려고했기 때문에 오래된 방식이었습니다. 웹 글꼴 의 등장은 디자이너가 사이트에 접근하는 방식을 변경 시켰습니다. 헤드 라인은 다양한 글꼴 및 이미지로 설정 될 수 있으며 임베디드 된 글꼴은 더 이상 필요하지 않습니다. 따라서 최신 사례로 업데이트되지 않은 이전 사이트의 헤드 라인을 대체 한 CSS 이미지 만 찾을 수 있습니다.
Jennifer Krynin의 원본 기사입니다. Jeremy Girard 편집자 : 9/6/17