블로그의 헤더는 전체 사이트에서 공통적으로 발견되는 첫 번째 섹션입니다.
따라서 좋은 디자인은 매우 중요합니다. 헤더가 보기 흉하고 탐색하기 어렵다면 아무도 더 아래로 내려가는 것을 고려하지 않을 것입니다.
훌륭한 디자인이 되려면 웹사이트 헤더가 최소한 다음 2가지 기준을 충족해야 합니다.
- 최소한으로 보이고 반응성이 좋아야 합니다. 그렇지 않으면 독자들이 지칠 것입니다.
- 반드시 필요한 메뉴 항목으로만 구성되어야 합니다. 그렇지 않으면 사람들은 혼란스러워하고 더 나은 대안을 위해 사이트를 포기합니다.
다음은 좋은 디자인입니다.
- 무엇을 선택해야 할지에 대한 혼란이 없습니다.
- 다른 하위 카테고리는 드롭다운으로 나열되었습니다.
- 덜 자주 등장하는 카테고리는 바닥글 섹션으로 이동됩니다.
이제 더 나은 헤더에 포함되어야 할 가장 기본적인 사항을 알게 되었습니다.
하지만 이 두 가지만 있다고 해서 헤더 디자인이 반드시 훌륭하다는 보장은 없습니다.
이를 수행하는 4가지 방법을 알려드리겠습니다.
팁 1: 로고와 메뉴를 명확하게 분리하세요
헤더는 쓰레기처럼 보이지 않는 마지막 곳이어야 합니다.
메뉴와 로고를 공백으로 구분합니다.
이제는 무엇이 무엇인지 매우 명확하게 볼 수 있으며 시청자는 헤더를 보고 무엇을 의미하는지 알아내려고 애쓰지 않아도 됩니다.
WordPress에서 이 작업을 수행하는 방법:
WordPress는 이 기능을 기본으로 만들었습니다. 로고와 메뉴 사이의 공간을 자동으로 조정합니다.
손으로 코딩한 블로그에서 이를 수행하는 방법:
이 코딩 부분은 매우 쉽습니다. div 태그 두 개를 내부에 만듭니다.
- 주다 사업부 A CSS 속성 flex
- “공간 사이”로 정당화하십시오.
코드는 다음과 같습니다.
필요에 따라 이 코드를 편집하세요. 핵심은 같습니다.
팁 2: 올바른 양의 패딩을 추가하세요
당신이 살펴봐야 할 또 다른 중요한 사실은 헤더 자체가 가지고 있는 공간입니다.
- 헤더가 포함된 div의 상단과 하단에 동일한 양의 패딩을 사용합니다.
- 패딩은 안 하는 건 어때요?(패딩은 생각도 하지 마세요).
WordPress에서 이 작업을 수행하는 방법:
어떤 테마를 사용하든 과정은 거의 동일합니다.
- wp-admin 계정에 로그인하세요
- 사용자 지정 > 머리글 > 일반 설정으로 이동하세요.
- 원하는 대로 패딩을 추가하세요
손으로 코딩한 블로그에서 이를 수행하는 방법:
이전에 추가한 CSS와 유사하게 새로운 패딩 속성을 도입합니다. 사업부 A.
.div A {
padding-top: 26px; //give a value as it fits.
padding-bottom: 26px;
}
또는 한 줄로 이 작업을 수행할 수 있습니다.
.div A {
padding-top: 26px 0px; (top-and-bottom left-right)
}
이제 안으로 들어가서 Navbar와 로고 섹션을 디자인할 차례입니다.
팁 3: 올바른 타이포그래피 선택
글꼴과 다른 설정은 앞서 언급한 다른 디자인 고려 사항만큼 중요합니다.
이들 각각은 정의하는 의미를 변경합니다. 우리는 웹사이트 테마에 가장 잘 맞는 조합을 선택해야 합니다.
이 가이드를 읽어보세요 타이포그래피를 이해하다.
헤더 메뉴 바에 대한 타이포그래피를 선택할 때는 눈에 띄는 것을 선택하는 것이 중요합니다.
- 세미 굵은 굵기가 좋은 선택 같습니다.
- 문자 간격을 줄이세요 더 높은 무게로 갈 때. 그렇게 하면 아름다워 보일 거야.
WordPress에서 메뉴 타이포그래피를 변경하는 방법:
메뉴 항목의 타이포그래피는 메인 메뉴 설정에서 사용자 정의할 수 있습니다.
- 사용자 정의 > 타이포그래피 > 메인 메뉴
메모:
이러한 항목 이름은 사용하는 테마에 따라 다를 수 있습니다. 하지만 프로세스는 모두 동일합니다. 쉽게 찾을 수 있습니다.
Coded 웹사이트에서 메뉴 타이포그래피를 변경하는 방법:
CSS 속성을 직접 제공할 수는 없다는 점을 기억하세요. 태그. 전체 웹사이트나 블로그의 모든 링크를 변경합니다.
이런 문제를 피하기 위한 매우 간단한 CSS 트릭이 있습니다.
- 보세요, 이 메뉴 항목은 내부에 있습니다.
태그입니다. 따라서 CSS 속성을 제공할 수 있습니다. 태그 내부 . - 방법은 다음과 같습니다.
// This
navbar a {
font-family: Poppins;
color: "#242424";
font-weight: 500; //Semi-bold
text-decoration: none; //To remove the ugly link css.
}
- 메뉴 항목 사이에 동일한 패딩을 두십시오.
WordPress에서 동일한 패딩 제공:
- 사용자 정의 > 헤더 > 메뉴로 이동하세요
- 패딩을 적당한 위치에 추가하세요
코딩된 웹사이트에 동일한 패딩을 제공:
navbar a {
padding: 0px 10px; //To make equal padding
}
출처 : medium.com