안전 

CSS를 활용한 세련된 메뉴. CSS 메뉴: CSS의 가로 드롭다운 메뉴

안녕하세요, 내 블로그 독자 여러분! 오늘의 기사는 초보 레이아웃 디자이너에게 매우 유용할 것입니다. 오늘은 간단한 가로 메뉴를 만들어 보겠습니다. 레이아웃을 직접 진행하기 전에 기사에서 이 특정 주제를 선택하기로 결정한 이유에 대해 몇 마디 말하고 싶습니다.

사실 모든 것이 매우 간단합니다. 사이트의 다음 강의 주제를 생각할 때 레이아웃 연구 경험, 자신을 설립하는 초기 단계에서 다루어야했던 내용을 기억하고 분석하기 시작했습니다. 레이아웃 디자이너, 이 분야를 연구할 때 가장 이해하기 어려웠던 점 등. 나는 레이아웃 디자이너로 경력을 시작하는 사람에게 흥미로운 것이 무엇인지 더 잘 이해하기 위해 이러한 모든 질문을 스스로에게 물었습니다. 그리고 개인적으로 레이아웃 공부를 시작하자마자 다양한 메뉴의 레이아웃, 특히 다단계 메뉴의 경우 레이아웃에 대해 가장 많은 질문이 생겼습니다. 그래서 오늘은 메뉴, 특히 가로 메뉴에 대해 이야기하겠습니다. 그럼 시작해보자!

가로 메뉴 레이아웃을 시작해 보겠습니다.

짐작하셨겠지만, 가장 먼저 해야 할 일은 표준 마크업을 사용하여 HTML 페이지를 만들고 여기에 스타일 파일을 연결하는 것입니다. 나는 당신이 몸과 머리가 무엇인지, 스타일이 어떻게 연결되어 있는지 자세히 말할만큼 초보자가 아니기를 바라기 때문에이 단계에 대해 자세히 설명하지 않을 것입니다. 메뉴의 스타일 외에도 스타일을 재설정하고 모든 브라우저에서 동일한 들여쓰기 표시를 달성하기 위해 CSS 파일에 가장 간단한 재설정을 작성하겠습니다. 실제로 가장 간단한 재설정은 다음과 같습니다.

스타일 재설정에 대해서는 아직 자세히 설명하지 않겠습니다. 기본적으로 이는 다른 기사의 주제이기 때문에 위에 설명된 코드에 대해 알아야 할 유일한 것은 이 코드 덕분에 우리가 작성할 모든 페이지 요소가 재설정된다는 것입니다. 여백과 들여쓰기를 0으로 재설정해야 페이지가 모든 브라우저에서 동일하게 표시됩니다.

그렇다면 이 단계에서 우리는 무엇을 가지고 있습니까? 표준 마크업이 포함된 HTML 페이지가 있습니다.

수평 메뉴

그리고 이 페이지에 연결된 스타일 파일(나의 경우 style.css)이 있으며 다음 내용이 포함되어 있습니다.

다음 단계는 메뉴에 대한 HTML 마크업을 만드는 것입니다.

메뉴에 대한 마크업 만들기

우리 마크업에서는 HTML5에 나타난 새로운 태그를 사용할 것입니다. 말하자면 새로운 HTML 5 태그가 지원되지 않는다는 사실에도 불구하고 저는 여러분이 트렌드와 표준을 따르기 위해 새로운 태그에 즉시 익숙해지기로 결정했습니다. 이전 브라우저의 경우 레이아웃에서 해당 브라우저를 사용하는 것이 좋습니다. 조만간 레이아웃 디자이너가 테이블 형식 레이아웃에서 블록 레이아웃으로 전환한 것처럼 이 브라우저로 전환해야 하기 때문입니다. 이것이 현실이므로 따르는 것이 좋습니다. 경향!

그리고 우리는 이미 새로운 html 5 태그 지원에 대해 이야기하고 있으므로 이전 브라우저에서 이 문제가 발생하지 않도록 문서에 특수 라이브러리인 html5shiv를 포함해야 합니다. 이는 에 삽입하여 수행됩니다.
다음 코드를 사용하여 페이지의 헤드 섹션을 삭제하세요.

이 이후의 모든 태그(및 HTML5와 관련된 기타 태그)는 이전 브라우저에서 정상적으로 인식됩니다.

마크업으로 직접 돌아가겠습니다. 다음으로 태그에 글머리 기호 목록을 삽입해야 합니다. 제가 보기에는 다음과 같습니다.

  • 집
  • 회사 소개
  • 포트폴리오
  • 블로그
  • 콘택트 렌즈

이제 마크업 작업이 완료된 것 같습니다. 이제 스타일 작성을 시작할 시간입니다. 이제 메뉴가 그다지 좋아 보이지 않기 때문입니다.

가로 메뉴의 쓰기 스타일

따라서 메뉴를 배치할 때 가장 먼저 해야 할 일은 목록 표시를 제거하는 것입니다. 당연히 필요하지 않습니다. 다음과 같이 합니다.

Ul( 목록 스타일: 없음; )

그 후 메뉴는 다음과 같습니다.

메뉴가 브라우저 가장자리에 붙어 있는 것이 별로 마음에 들지 않습니다. 이를 수정해 보겠습니다.

이 코드를 사용하여 메뉴의 너비를 설정하고 상단 및 하단 여백을 50px로 설정하고 중앙에 배치했습니다. 블록 요소에 너비가 있는 경우 이 요소를 정확히 중앙에 배치하려면 오른쪽과 왼쪽에 auto 값을 사용하여 외부 여백(여백)을 지정하면 됩니다.

다음 단계는 마지막으로 메뉴를 수평으로 만드는 것입니다. 이는 요소를 설정하여 수행됩니다.

  • 왼쪽으로 뜨다

    메뉴 li( float:left; )

    이제 전체 메뉴가 수평으로 바뀌었습니다.

    정확히 무슨 일이 일어났는지, float 속성이 무엇을 하는지 이해하지 못한다면 이 속성에 대한 정보를 Google에서 검색하여 철저하게 연구하는 것이 좋습니다.
    레이아웃의 한 페이지도 그것 없이는 할 수 없습니다. 확실히 말할 수 있습니다. 글쎄, 계속하자!

    메뉴 li a( display:block;/* 링크를 블록 요소로 만들기*/ padding:12px 20px;/* 패딩 설정 */ text-design: none; /* 밑줄 제거 */ color:#fff;/* 색상 링크를 흰색으로 설정 */ background:#444;/* 배경색을 어둡게 만듭니다 */font:14px Verdana, sans-serif;/* 글꼴 크기 및 이름 설정 */ )

    여기서 가장 중요한 규칙 중 하나는 display:block;입니다. 사실 기본적으로 링크는 인라인 요소이고 들여쓰기는 브라우저마다 인라인 요소에 다르게 적용되므로 링크를 블록 요소로 만든 다음 외부 또는 내부 들여쓰기와 관련된 속성만 적용하는 것이 좋습니다. 이제 저는 시간이 지남에 따라 불필요한 정보로 여러분에게 부담을 주고 싶지 않습니다. 실제 예를 사용하면 여기에 왜 그렇게 강조되는지 이해하게 될 것입니다.

    우리가 얻은 것을 살펴보고, 브라우저 페이지를 새로 고치면 됩니다!:

    보시다시피 나쁘지 않아 보입니다. 원칙적으로 메뉴가 준비되었다고 말할 수 있습니다. 아직 해야 할 유일한 일은 마우스를 가져갈 때 링크의 빛을 설정하는 것입니다. 항목 사이에 구분 기호를 사용하면 메뉴가 더 보기 좋을 것 같습니다.

    구분 기호부터 시작해 보겠습니다.

    메뉴 li( border-left:1px solid #666; ) .menu li:first-child( border-left:none; )

    우리는 여기서 무엇을 했나요? 예, 모든 것이 매우 간단합니다. 포인트를 설정했습니다(

  • ) 왼쪽 테두리는 1px 크기와 색상 #666;입니다. .menu li:first-child 선택기와 관련하여 여기서는 목록의 첫 번째 하위 요소를 선택할 수 있는 특수 의사 클래스를 사용합니다. 나는 또한 인터넷에서 의사 클래스에 대해 더 자세히 읽어볼 것을 권장합니다. 그러면 유용한 것들을 많이 배울 수 있을 것입니다.

    우리가 얻은 것을 다시 봅시다:

    제 생각에는 구분 기호를 사용하는 것이 훨씬 더 좋습니다.

    메뉴 a:hover( 배경:#888; )

    이번에도 특별한 의사 클래스를 사용하여 마우스를 가져가면 링크 색상을 설정합니다.

    멋있을 것 같아요 :) 여러분도 저와 같은 메뉴가 됐으면 좋겠어요.

    이것이 제가 이 강의를 마치는 곳입니다. 이것이 여러분에게 도움이 되기를 진심으로 바랍니다. 이제 여러분은 순수한 HTML과 CSS를 사용하여 간단한 가로 메뉴를 레이아웃하는 방법을 알게 되었습니다. 물론 우리는 1단계 메뉴를 만들었습니다. 2단계 메뉴(중첩 목록 포함)를 사용하면 조금 더 복잡해집니다. 하지만 이것은 또 다른 강의의 주제이므로 저에게는 그게 전부입니다. 또 오세요, 기뻐할 거예요!!!

    지금 이 출판물을 읽고 있는 모든 분들에게 좋은 하루 되세요. 오늘 저는 어떤 웹 리소스도 없이는 할 수 없는 웹 사이트 구축 도구 중 하나에 대해 말씀드리고 싶습니다. 이것은 사이트 메뉴 또는 사이트 맵이라고도 합니다. 오늘날 메뉴의 유형과 하위 유형은 무제한입니다.

    온라인 상점, 블로그, 교육 서비스 및 기타 리소스 개발자들은 점점 더 새롭고 특이한 지도를 실험하고 만들고 있습니다. 기사를 읽은 후에는 모든 유형의 탐색 패널이 어떤 주요 그룹으로 나누어져 있는지 알아보고, 각 탐색 패널을 사용해 볼 수 있으며, HTML 웹사이트용 메뉴 코드를 작성하는 방법도 배울 수 있습니다. 이제 사업을 시작합시다!

    탐색 모음을 만드는 도구

    마크업 언어로 메뉴를 만드는 방법에는 여러 가지가 있습니다. 그들의 기본 개념은 번호가 없는 목록을 사용하는 것입니다. 따라서 우리에게 친숙한 html 4에서는 개발자가 페이지에 태그를 작성합니다.

    • 질문이 있으신가요?

    오타 신고

    편집자에게 전송될 텍스트:

    보내다