복사하여 붙여넣을 수 있는 5가지 간단하고 실용적인 CSS 목록 스타일

 복사하여 붙여넣을 수 있는 5가지 간단하고 실용적인 CSS 목록 스타일

John Morrison

복사하여 붙여넣을 수 있는 간단하고 실용적인 5가지 CSS 목록 스타일

좋은 목록을 좋아하지 않는 사람이 어디 있겠습니까? 우리는 다양한 상황에 대해 마크업에서 이를 지속적으로 사용합니다. 오늘은 자신의 작업에서 훔쳐 사용할 수 있는 몇 가지 간단하고 실용적인 예를 살펴보겠습니다.

재미있는 애니메이션 수직 목록으로 시작한 다음 미리보기 이미지로 목록 스타일을 지정합니다. 텍스트, 이미지만 있는 다른 하나, 마지막으로 숫자가 유형의 나머지 부분과 다르게 스타일이 지정되는 정렬된 목록입니다. 여기에서 배울 수 있는 훌륭한 것들이 많이 있으므로 바로 시작하겠습니다!

Envato 요소 탐색

HelvetiList

첫 번째 목록은 간단한 것부터 시작하겠습니다. , 타이포그래피의 아름다움에 크게 의존하는 미니멀하지만 매우 매력적인 디자인. 얇은 Helvetica 스타일을 사용하고 호버링 시 부드러운 애니메이션을 던질 것입니다.

데모: CodePen에서 데모와 코드를 확인하세요.

HTML

여기서 우리의 마크업은 매우 간단합니다. div를 만든 다음(아마도 라이브 프로젝트에 클래스나 ID가 필요할 것입니다) 헤더와 5개의 목록 항목이 있는 정렬되지 않은 목록을 넣습니다.

1 2 3 4 5 6 7 8 9 10

HelvetiList

  • 취리히
  • 제네바
  • 빈터투어
  • 로잔
  • 루체른

CSS

위의 스크린샷에서 목록 항목은 매우 얇은 유형, 미묘한 구분 기호 및 호버를 사용합니다.글꼴을 확대하는 상태입니다. 시작하려면 div에 너비를 지정하고 일반 h2 스타일을 설정하십시오.

다음으로 목록 스타일 유형 없음을 적용하여 글머리 기호를 버리고 존재할 수 있는 여백이나 패딩을 재설정합니다. 실제 목록 항목의 경우 작은 구분선을 제공하는 약간의 아래쪽 테두리를 적용했습니다. 마지막 자식 선택자를 사용했지만 이를 인식하지 못하고 하단에 추가 테두리를 던지기로 결정한 브라우저가 있는 경우 큰 문제가 되지 않습니다.

또한 글꼴을 설정할 때 두 번 모두 CSS 속기를 사용하고 다른 가중치를 적용했습니다. 마지막으로 몇 가지 링크 스타일을 적용하고 전환을 설정하여 글꼴을 확대하고 호버에서 배경색을 변경했습니다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 div { 너비 : 200px ; } h2 { 글꼴: 400 40px/1.5 Helvetica, Verdana, sans-serif; 여백 : 0 ; 패딩 : 0 ; } ul { 목록-스타일-유형: 없음; 여백 : 0 ; 패딩 : 0 ; } li { 글꼴: 200 20px/1.5 Helvetica, Verdana, sans-serif; 테두리 - 아래쪽: 1px solid #ccc; } 리: 마지막 자식 { 테두리: 없음; } li a { 텍스트-장식: 없음; 색상: #000; 디스플레이: 블록 ; 너비 : 200px ; - 웹킷 - 트랜지션: 글꼴 크기 0.3초 용이함, 배경색 0.3초 용이함; - moz - 전환: 글꼴 - 크기 0.3초 용이함, 배경 - 색상 0.3초쉬움 ; -o-transition: 글꼴 크기 0.3초 용이함, 배경색 0.3초 용이함; -ms-transition: 글꼴 크기 0.3초 용이함, 배경색 0.3초 용이함; 전환: 글꼴 크기 0.3초 용이함, 배경색 0.3초 용이함; } 리아: hover { 글꼴 크기: 30px; 배경 : #f6f6f6; }

썸네일 목록

목록에서 볼 수 있는 정말 일반적인 형식 중 하나는 기본 "썸네일 및 텍스트" 설정입니다. 그렇지 않으면 지루한 단락 목록에 대한 멋진 시각적 관심.

많은 프로젝트에서 사용할 수 있는 매우 다양한 목록 스타일입니다. 작동 방식을 살펴보겠습니다.

데모: CodePen에서 데모와 코드를 확인하세요.

HTML

여기에 있는 HTML 조금 더 복잡합니다. 각 목록 항목에는 이미지, 제목 및 단락의 세 가지 하위 항목이 있어야 합니다. 내가 사용하고 있는 이미지는 100x100px이므로 다른 크기로 사용자 지정하려는 경우 염두에 두십시오. 전반적으로, 이것은 여전히 ​​매우 간단한 마크업이므로 조금도 실수하지 않아야 합니다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
  • 제목

    Lorem ipsum dolor sit amet . . .

  • 제목

    Lorem ipsum dolor sit amet . . .

  • 제목

    Lorem ipsum dolor sit amet . . .

  • 제목

    Lorem ipsum dolor sit amet . . .

CSS

이 코드는 의외로 코드가 많이 필요하지 않습니다. 다시 한 번 목록 스타일을 지우고 일부 타이포그래피 관련 CSS를 설정합니다. 이해해야 할 것은 단락이 이미지 옆에 나타나도록 이미지를 왼쪽으로 플로팅해야 한다는 것입니다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 * { 마진 : 0 ; 패딩 : 0 ; } div { 여백 : 20px ; } ul { 목록-스타일-유형: 없음; 너비 : 500px ; } h3 { 글꼴: 굵게 20px/1.5 Helvetica, Verdana, sans-serif; } li img { 플로트: 왼쪽; 여백 : 0 15px 0 0 ; } li p { 글꼴: 200 12px/1.5 Georgia, Times New Roman, serif; } 리 { 패딩 : 10px ; 오버플로: 자동 ; } 리 : 호버 { 배경 : #eee; 커서 : 포인터 ; }

Standard Thumbnail Grid

순서가 없는 목록을 말하는 경우 거의 항상 목록으로 처리되는 이미지 격자를 하나 이상 넣어야 합니다. 우리는 너무 화려한 작업을 하지 않을 것입니다. 빠른 삽입을 위해 이 코드 형식을 가까이에 두는 것이 도움이 될 것입니다.

데모: 데모 및 코드를 확인하십시오. CodePen에서.

HTML

에 대한 마크업은 목록 항목>앵커>이미지 의 기본 구조를 가집니다. 이 코드를 보는 데 익숙하지 않은 경우 이를 위해 목록을 사용하는 것이 매우 이상하게 보일 수 있지만 실제로는 이것이 바로 여러분이 만들고 있는 것입니다.이미지의 큰 목록. 그것들이 그리드로 배열되어 있다는 사실은 그것이 단지 큰 '올 목록'이라는 생각을 부정하지 않습니다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

CSS

이 예의 경우 기본 구조는 각 목록 항목에 약간의 여백을 던져 왼쪽으로 띄우는 것입니다. 플로트를 지우고 어두운 배경을 설정하고 이미지에 테두리를 던지기 위해 "overflow:auto" 트릭을 사용했습니다.

데모를 약간 흥미롭게 만들기 위해 글로우를 천천히 적용하는 호버 효과를 추가했습니다. 이것은 물론 완전히 선택 사항이며 모든 프로젝트에 적용할 수 있는 것은 아닙니다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 * { 마진 : 0 ; 패딩 : 0 ; } 본문 { 배경 : #333; } div { 너비 : 900px ; 여백: 0 자동 ; 오버플로: 자동 ; } ul { 목록-스타일-유형: 없음; } li img { 플로트: 왼쪽; 여백 : 10px ; 테두리 : 5px 솔리드 #fff; - webkit - transition: box - shadow 0.5s ease ; - moz - transition : box - shadow 0.5s easy ; -o-전환: box-shadow 0.5s ease; - ms - 전환: 상자 - 그림자 0.5초 용이함; 전환: 상자 - 그림자 0.5초 용이함; } li img : hover { - 웹킷 - 상자 - 그림자 : 0px 0px 7px rgba ( 255, 255 , 255 , 0.9 ) ; 상자 그림자: 0px 0px 7px rgba(255, 255, 255, 0.9); }

가로 메뉴

개발자가 목록을 사용하는 또 다른 이유는 가로 탐색 메뉴입니다. 새로운 개발자로서 이 트릭에 대한 코드는 내가 지속적으로 Google에서 찾은 것이므로 즐겨찾기에 추가하거나 스니펫 보호기에 던지십시오.

데모: CodePen에서 데모와 코드를 확인하세요.

HTML

위의 썸네일 그리드로 우리는 이미 방법을 배웠습니다. 플로트 목록 항목이 서로 옆에 나타나도록 하므로 여기서는 항목 수가 적은 동일한 기술을 사용합니다. 사용자에게 현재 어느 페이지에 있는지 알려주는 데 사용할 상당히 표준적인 방법인 "활성" 클래스를 넣었습니다.

1 2 3 4 5 6 7 8
  • 소개
  • 포트폴리오
  • 문의처

CSS

여기서는 목록 항목을 왼쪽에 띄우고 테두리를 오른쪽에만 배치하고 기본 링크 스타일을 제거하고 내 스타일을 설정한 다음 두 호버 스타일을 모두 지정했습니다. 및 활성 상태.

또한보십시오: 25개 이상의 최고의 Photoshop 연기 브러시
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 * { 여백 : 0 ; 패딩 : 0 ; } nav { 여백: 50px ; } ul { 오버플로: 자동; 목록 - 스타일 - 유형: 없음; } 리 { 높이: 25px ; 왼쪽으로 뜨다 ; 여백 - 오른쪽: 0px ; 국경 -오른쪽: 1px 솔리드 #aaa; 패딩 : 0 20px ; } li: 마지막 자식 { 테두리 오른쪽: 없음; } li a { 텍스트-장식: 없음; 색상 : #ccc; 글꼴: 25px/1 Helvetica, Verdana, sans-serif; 텍스트 변환: 대문자; - 웹킷 - 전환: 모두 0.5초 용이함; - moz - transition: 모두 0.5초 용이함; -o-전환: 모두 0.5초 완화; - ms - 트랜지션: 모두 0.5초 완화; 전환: 모두 0.5초 용이함; } 리아 : 호버 { 색상 : #666; } 리. 활성 a { 글꼴 - 무게 : 굵게 ; 색상 : #333; }

큰 숫자로 정렬된 목록

모든 목록이 순서가 없는 목록이 아님을 잊지 말자! 정렬된 목록에 대한 유용한 응용 프로그램이 많이 있습니다. 순서가 지정된 목록과 관련하여 정말 까다로운 작업 중 하나는 숫자의 스타일을 다른 텍스트와 다르게 지정하는 것입니다. 이것이 어떻게 작동하는지 봅시다.

데모: CodePen에서 데모와 코드를 확인하십시오.

또한보십시오: 부동산 사진을 위한 35개 이상의 최고의 라이트룸 프리셋

HTML

이제 어떻게 빌드했는지 이것은 매우 논란이 될 것입니다. 보시다시피 HTML이 실제로 자동으로 이 작업을 수행한다는 사실에도 불구하고 저는 실제로 수동으로 숫자를 입력하고 있습니다. 그래도 그럴 만한 이유가 있습니다.

이 아이디어를 시작하기 위해 목록 항목에 단락을 넣은 다음 li 유형과 li>p 유형을 서로 다른 방식으로 코딩했습니다. 그러나이 방법으로 모든 것을 올바르게 정렬하려는 것은 완전히 악몽이었습니다. 궁극적으로 그것을 고치기 위해 CSS는 너무 지저분하고 불쾌해서 완전히 포기했습니다.실제로 명확하고 간단한 CSS를 허용하는 이 간단한 방법을 선호합니다.

1 2 3 4 5 6 7
  1. 1.

    Lorem ipsum dolor sit amet , consectetur adipiscing elit . Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet . Curabitur aliquet orci sit amet est posuere consectetur. Fusce nec leo ut massa viverra venenatis . Nam accumsan libero a elite aliquet quis ullamcorper arcu tincidunt . Praesent purus turpis, consectetur quis congue vel, pulvinar at lorem. Vivamus varius condimentum dolor, quis ultricies ipsum porta quis.

  2. 2.

    Lorem ipsum dolor sit amet , consectetur adipiscing elit . Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet . Curabitur aliquet orci sit amet est posuere consectetur.

  3. 3.

    Lorem ipsum dolor sit amet , consectetur adipiscing elit . Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet . Curabitur aliquet orci sit amet est posuere consectetur.

CSS

아래 코드에서 볼 수 있듯이 여기서 내가 한 것은 기본 숫자를 버리고 내 스팬을 절대값으로 설정하여 단락의 왼쪽으로 밀어 넣을 수 있었습니다.단락. 코드 측면에서 가장 멋진 솔루션은 아닐 수 있지만 기이한 위치 지정 버그 없이 수행할 수 있는 가장 간단하고 간단한 방법입니다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 div { 너비 : 500px ; 여백: 10px } ol { 색상: #ccc; 목록 - 스타일 - 유형: 없음; } ol li { 위치: 상대; 글꼴: 굵은 기울임꼴 45px/1.5 Helvetica, Verdana, sans-serif; 여백 - 하단: 20px ; } li p { 글꼴: 12px/1.5 Helvetica, sans-serif; 패딩 - 왼쪽: 60px ; 색상: #555; } 범위 { 위치: 절대; }

결론

매우 간단하지만 실용성이 떨어지는 다섯 가지 목록 스타일을 복사하여 자신의 코드에 붙여넣을 수 있습니다. 공유하고 싶은 다른 광고 소재 목록 아이디어가 있으면 아래 댓글로 알려주세요!

John Morrison

John Morrison은 노련한 디자이너이자 디자인 업계에서 다년간의 경험을 쌓은 다작 작가입니다. 지식을 공유하고 다른 사람으로부터 배우는 것에 대한 열정으로 John은 업계 최고의 디자인 블로거 중 한 명으로 명성을 쌓았습니다. 그는 동료 디자이너에게 영감을 주고 교육하는 것을 목표로 최신 디자인 트렌드, 기술 및 도구에 대해 연구하고 실험하고 글을 쓰는 데 시간을 보냅니다. 디자인 세계에서 길을 잃지 않을 때 John은 하이킹, 독서, 가족과의 시간 보내기를 즐깁니다.