웹 디자인에서 HTML 목록의 훌륭한 사용

인터넷에서 잘 디자인 된 목록을 찾을 수 있습니다. 디자이너는 수십 년 동안 이것을 사용 해왔다. 페이지 정보 및 레이아웃 조정, 그리고 오늘날의 웹에서는 웹 디자이너가 목록을 사용하는 방법에있어 위대한 창의력을 볼 수 있습니다. 여기에는 탐색 메뉴, 프로필 링크, 아카이브, 작업 / 체크리스트 및 기타 다양한 용도가 포함됩니다!

이 글에서는 여러 종류의 HTML 목록을 소개하고, 디자인에 대한 팁과 함께, 특히 귀하의 목록에 고유 한 가장자리를 추가하십시오. 또한 환상적인 목록 디자인을 갖춘 웹 사이트 몇 가지를 살펴보고 멋지게 디자인 된 HTML 목록이있는 웹 사이트 목록을 얻게 될 것입니다. 평범한 표정 목록을 독창적으로 보이게 만드는 방법에 대해 의심의 여지가 없습니다. 그리고 오늘 그 점을 최대한 활용하기 시작하겠습니다.!

목록 요소

웹 디자이너는 끊임없이 한 악곡에서 다음 악곡으로 뛰어 들고 시간이 지남에 따라 변하는 웹 사이트 스타일을 유발하지만 목록은 시간의 시험을 견디어 냈으며 월드 와이드 웹의 미래 혁신에 매우 적합 할 것입니다.

예제를 확인하기 전에 HTML 목록으로 몇 가지 사항을 설명하고자합니다. 당신이 당신의 자신의 디자인 일에서 이용할 수있는 명부의 몇몇 다른 유형이있다. 대부분의 웹 디자이너는 정렬되지 않은 목록 이들은

태그가 있지만 다른 인기가 적은 두 가지 유사어가 있습니다. 순서 목록 과 데이터 정의. 나는 아래에서 더 자세한 내용을 살펴 보았다..

순서없는 목록 (

)

HTML4 / HTML5 표준에서 가장 많이 사용되는 요소 중 하나입니다. 정렬되지 않은 목록은 정렬 된 목록과 동일한 방식으로 데이터를 출력하지만, 측면에 숫자 표식이 표시되지 않습니다.. 대신 각 항목에 작은 원이나 디스크 새 줄로 나뉘었다. 이 아이콘 list-style-type 속성을 사용하여 변경할 수도 있습니다. CSS에서 발견됨.

다음은 정렬되지 않은 목록의 예제 코드입니다.

 
 
항목 1
 
항목 2
 
항목 3
 
 

정렬되지 않은 목록은 건물을위한 완벽한 치료법입니다. 탐색 링크. 너는 쉽게 할 수 있기 때문에 모든 목록 항목 내에 전체 목록을 중첩 그것은 하위 항법 링크를 만드는 간단한 문제 게다가. 목록 스타일을 제거한 후에는 빈 항목 요소가 남습니다. 여기에서 앵커 링크를 페이지의 블록 요소로 표시하도록 스타일을 지정하여 탐색 메뉴 디자인을 작성하고 일부 jQuery 코드로 사이트의 아름다운 헤더를 조합 할 수 있습니다.

가장 일반적으로 웹 기사 또는 설치 지침의 중간에 정렬되지 않은 목록이 있습니다. 주목해라. Google 및 기타 검색 로봇은 페이지 콘텐츠를 다르게 처리하지 않습니다., 그래서 너 선택한 목록 유형에 관계없이 SEO가 영향을받지 않아야합니다..

주문 목록 (

)

일련의 데이터를 주문할 필요가있을 때 자신의 레이아웃 프레임 워크를 처음부터 새로 만들 수는 있지만, 이렇게하면 손으로 각 증가 숫자를 추가해야 할 필요가 있습니다. 순서가 지정된 목록은 번호가 매겨진 작업을 일렬로 유지 스크류 업없이. 내부 목록 항목의 순서 (

• ) 데이터가 어떻게 표시되는지 지시 할 것입니다.

  다음은 순서가 지정된 목록의 예제 코드입니다.

   
   
  항목 1
   
  항목 2
   
  항목 3
   
   

  또한 카운터를 일반 숫자에서 소수의 다른 옵션으로 변경하십시오.. 여기에는 다음이 포함됩니다 알파벳 글자 과 로마 숫자, 몇 가지 예를 들자면 웹 디자이너는 콘텐츠 특정 목록에 대해 순서 목록을 사용합니다.. 래서 피 데이터, 일상 업무, 즐겨 찾기, 또는 상단 / 최근 로그인 한 사용자 몇 가지 예입니다. 자주 볼 수 있습니다. 블로그 댓글 정렬 된 목록을 사용하여 각 주석을 번호순으로 유지.

  데이터 정의 목록 (

  )

  정의 목록은 더 이상 자주 보입니다 (인기가없는 것처럼 보이지 않습니다). 그들은 웹 디자이너들이 복잡한 형식의 링크 또는 박스 컨텐츠를 만드는 것으로 나타났습니다. 그만큼 데이터 목록 태그 (

  ) 오늘날 코더들이 오해하고있는 경우가 많습니다. HTML4.01 사양에서 데이터 목록은 설명과 항목 쌍. 이것을 정의 목록이라고 부릅니다..

  아래는 데이터 정의 목록의 예제 코드입니다.

   
   
  항목 1
   
  기술
   
  항목 2
   
  기술
   
  항목 3
   
  기술
   
   

  그러나 새로운 HTML5 사양을 사용하면 데이터 목록에 사본이 제공됩니다. 요소를 사용하는 방법에는 구문과의 차이가 없지만 용도는 다음과 같이 업데이트되었습니다. 하나 이상의 데이터 용어로 구성된 설명 목록

  ) 뒤에 하나 이상의 데이터 정의가옵니다 (

  ).

  HTML5 Doctor의 기사에서 제공하는 강력한 예는 메타 데이터 형식 목록. 하나 하나의 내부 dl 목록 요소 용어를 정의하다, 당신의 이름과 같은 정의 태그가 데이터를 설명 할 수 있음 당신, 아마도 당신의 나이, 직업, 현재의 도시 / 도시 등. 궁극적으로 키 / 값 쌍을 가진 모든 데이터 세트가 설명 목록에 잘 맞습니다.. 목록에 하나 이상의 데이터 용어를 사용할 수 있지만 W3C는 각 용어는 고유해야합니다. 목록에.

  이제 3 개의 인기있는 목록 스타일을 완성 했으므로 몇 가지 예제로 넘어 갑니 다. 웹 디자이너는 최근 몇 년간 자신의 목록을 매우 창의적으로 다루었습니다. 나는 목록의 창의적인 사용법에 중점을두고 아래에서 내가 좋아하는 7 개의 웹 사이트를 카탈로그에 올렸다..

  간단한 순서없는 목록 탐색

  탐색 메뉴는 최신 CSS 기술로 훨씬 간단하게 만들 수 있습니다. 이것이 순서가 지정되지 않은 목록과 주문 목록이 인기있는 옵션이 된 이유입니다. 내가 좋아하는 예 중 하나가 소셜 미디어 블로그 인 Mashable에 나와 있습니다..

  

  머리글 상단으로 2 개의 주요 링크가 있음을 알 수 있습니다. Top Stories, Trenting Topics 및 People과 같은 커뮤니티 링크가 포함 된 정렬되지 않은 작은 목록이 로고 상단에 직접 표시됩니다. 디자이너는 단색 배경과 색 구성표가있는 매끄러운 호버 스타일을 만들었습니다..

  바로 아래에 하위 탐색 링크가 표시됩니다. 이 탐색 메뉴는 소셜 미디어 또는 기술과 같은 블로그 카테고리로 연결됩니다. 두 순서가없는 목록은 HTML5