이 문서에서는 다음을 포함하는 HTML 및 CSS를 사용하여 헤더를 만드는 단계별 프로세스를 보여줍니다.

• 헤더 섹션 만들기
• 내비게이션 바 만들기
• Navbar 항목에 스타일 적용
• Navbar 항목에 호버 효과 추가

HTML과 CSS를 사용하여 헤더를 만드는 과정은 무엇입니까?

헤더 정의에는 웹 사이트에 대한 가장 중요한 정보가 포함되어 있습니다. 대부분 로고, 웹 사이트 제목, 검색 표시줄, 사용자가 다른 페이지로 이동하는 데 도움이 되는 탐색 메뉴 항목을 포함합니다.

헤더 생성을 위해 아래 언급된 단계를 따르십시오.

1단계: 헤더 섹션 만들기

HTML 파일에서 ' <헤더> ” 태그는 헤더에 대한 섹션을 만드는 데 사용됩니다. “ <사업부> ' 또는 ' <섹션> ” 태그도 활용할 수 있지만 “ <헤더> ” 태그. 다음으로 ' 머리글 ” 클래스를 사용하여 헤더 섹션에 CSS 스타일을 적용합니다. 그런 다음 '를 추가하십시오.

” 태그를 지정하고 “ 표제 ”를 클릭하여 “Linuxhint에 오신 것을 환영합니다!”라는 내용을 표시합니다.

<헤더 수업 = '머리글' >

< h1 수업 = '표제' > Linuxhint에 오신 것을 환영합니다! < / h1 >

< / 헤더>

그런 다음 ' <헤더> ” 클래스에 태그를 지정하고 다음 스타일을 지정합니다.

---

---

.머리글 {

배경 이미지: URL ( '../bg.jpg' ) ;

배경- 크기 : 씌우다;

background-repeat: 반복하지 않음;

색상 : 흰 연기;

배경 위치: 상단;

패딩: 0px 20px 20px 20px;

}

위 코드에 대한 설명은 다음과 같습니다.

• 먼저 이미지를 설정합니다. bg.jpg '를 사용하여 머리글 섹션의 배경으로 배경 이미지 ' 재산.
• 다음으로 “ 배경 크기 ' 그리고 ' 배경 반복 ” 속성은 각각 이미지 크기를 설정하고 이미지 반복을 중지하는 데 사용됩니다.
• 그런 다음 '의 도움으로 텍스트 및 이미지 위치의 색상을 맨 위로 설정하십시오. 색상 ' 그리고 ' 배경 위치 ' 속성.
• 결국 “ 심 ” 속성은 헤더 내용과 테두리 사이의 공간을 설정하는 데 사용됩니다.

위의 코드를 실행하면 웹 페이지는 다음과 같습니다.

위의 출력은 헤더 섹션이 생성되고 CSS 스타일이 적용되었음을 표시합니다.

2단계: 내비게이션 바 만들기

헤더는 대부분의 경우 탐색 모음을 포함할 수도 있습니다. navbar 생성을 위해 HTML ' <없음> ” 태그는 매우 유용할 수 있습니다. 그렇기 때문에 '를 사용하여 navbar 항목을 추가하십시오. <아> ” 태그를 지정하고 “ 행동 ”:

위의 코드를 실행하면 웹 페이지는 다음과 같습니다.

위의 출력은 navbar 항목이 ' 집 ”, “ 서비스 ”, “ 회사 소개 ”, “ 문의하기 ' 그리고 ' 새로운 도착 '가 생성되었습니다.

3단계: Navbar 항목에 스타일 적용

탐색 모음 항목의 스타일을 지정하려면 ' 행동 ” 클래스를 만들고 다음 CSS 스타일 속성을 할당합니다.

위 코드에 대한 설명은 다음과 같습니다.

• 먼저 “ 텍스트 장식 ” 속성이 “none”으로 설정되어 “ <아> ” 태그.
• 사용자의 텍스트 가시성을 향상시키기 위해 ' 하얀색 ' 그리고 ' 크기가 큰 ' 값은 '에 제공됩니다. 색상 ' 그리고 ' 글꼴 크기 ' 재산.
• 그 후, “ 표시하다 ' 그리고 ' 뜨다 ” 속성은 “ <아> ” 태그가 같은 줄에 나타납니다.
• 결국 “ 심 ' 그리고 ' 여유 ” 속성 값은 각 “ ” 태그 사이에 공백을 만드는 데 사용됩니다.