투명한 웹 사이트 탐색 모음을 만드는 방법

특정 방식으로 내비게이션 바의 스타일을 지정하면 비즈니스의 브랜딩과 디자인을 강화할 수 있습니다. HTML 및 CSS (Cascading Style Sheet) 코드의 조합을 사용하여 탐색 모음의 모양을 지정하면 사이트 전체에서 일관된 모양과 느낌을 만들 수 있습니다. 내비게이션 바를 투명하게 만들기로 선택한 경우, 내비게이션 바를 포함하는 요소의 배경 또는 배경과 동일한 색상이됩니다.

1

탐색 모음에 대한 HTML 섹션을 만듭니다. 작업중인 페이지의 HTML 파일에서 탐색 모음을 추가 할 섹션을 찾습니다. 다음과 같이 요소를 사용하여 포함하십시오.

여는 태그와 닫는 태그 사이에 탐색 링크를 배치 할 수 있습니다.

2

필요한 각 탐색 링크에 앵커 요소를 포함하십시오. "nav"요소 내에 사용자가 탐색 할 수 있도록하려는 각 링크에 대한 앵커 요소를 추가합니다. 다음은 사이트 섹션에 연결되는 샘플 앵커 요소입니다.

이 코드는이 코드가 나타나는 페이지와 동일한 디렉토리에있는 "about"이라는 폴더에있는 사이트 내의 섹션으로 연결됩니다. 폴더가 아닌 페이지에 연결하려면 HTML에 대해 다음과 같이 마크 업이 나타나야합니다. :

페이지에 스타일 섹션을 추가하십시오. 탐색 모음의 스타일을 지정하려면 CSS 코드 섹션이 필요합니다. 페이지의 헤드 섹션에서 닫는 태그 앞에 다음과 같이 추가합니다.

이 안에 선언을 추가하여 페이지의 요소에 스타일을 지정할 수 있습니다.

4

앵커 스타일을 지정합니다. 페이지의 CSS 섹션에서 선언을 추가하여 탐색 모음의 앵커 스타일을 지정합니다. 예를 들어 "nav"를 ID 속성으로 사용하여 내부의 모든 앵커 요소의 스타일을 지정하려면 다음 선택기를 사용할 수 있습니다.

/ 스타일 선언 /

}

이것은 모든 상태의 앵커를 나타냅니다. 이 섹션에서 적용하려는 스타일 선언을 추가 할 수 있습니다. 예를 들면 다음과 같습니다.

텍스트 장식 : 없음; 너비 : 100px; 표시 : 블록; 왼쪽으로 뜨다;

앵커를 수평선에 나란히 표시하기위한 표준 속성입니다. 요소 자체의 스타일을 지정하려면 다음 구문을 사용하십시오.

너비 : 800px; }

5

배경 스타일을 지정합니다. CSS의 내비게이션 막대에 배경 속성을 적용하지 않으면 기본적으로 투명한 배경으로 표시됩니다. 그러나 페이지의 배경이나 그 뒤에있는 다른 포함 요소와 함께 표시 될 수 있습니다. 예를 들어, body 요소에 대한 다음 CSS 선언은 배경 이미지가 탐색 모음 뒤에 표시되도록합니다.

본문 {background-image : url ( "bgpic.jpg"); }

탐색 모음에 배경 이미지 나 색상을 지정하지 않으면 투명한 배경으로 표시되어야합니다.