동빈나 부트스트랩 웹 디자인 실전 강좌 11강 - 리스트 그룹 (Bootstrap Web Design Tutorial #11) > 부트스트랩

 

강사진 페이지까지 한번 만들어 보면서 특정한 강사의 정보를 보여주는
방법에 대해서 한번 알아 보았는데요.
이제 이렇게 마지막으로 인용구 를 삽입해 보면서 특정한 정보를 어떤
문장으로 멋지게 표현하는 방법에 대해서 한번 알아보는 시간을 가졌습니다.
자 이번 시간을 공부할 건 바로 이 리스트 그룹 이라는 건데요.
리스트 그룹 같은 경우는 같은 성질을 가진 어떤 목록을 담는 하나의
그룹을 의미하는 클래스입니다. 각각의 정보는 이제 자유롭게 링크를 가진
형태로 뭐 a 태그 같은걸 이용해서 들어갈 수가 있구요.
또한 부트스트랩 에서 이제 단순히 클래스를 지층의 주기만 하면 바로
사용이 가능하다는 간편 썽 을 가지고 있습니다. 아무튼 이렇게 리스트 그룹
을 이용해 쌓은 번 특정한 목록들을 한번 다뤄 보는 방법을 알아보려고
합니다.
이번 이제 이렇게 이 강의 페이지에 3 본 리스트 그룹을 더 볼 건데요.
따라서 이제 이렇게 서브라임 텍스트 에서 랙 철 중 lgt 네팔 이렇게
가져올 수 있도록 합니다. 그럼 이제 이렇게 서브라임 텍스트 안에서 작업이
가능하구요.
기본적으로 지금은 이제 2부 목 부분에 어떠한 내용도 들어가 있지 않기
때문에 네비게이션 바와 부터 사이에 어떠한 내용을 넣어 줄 수 있는 게
가장 중요하겠죠.
자바로 다음과 같이 한번 리스트 그룹을 넣어 줄게요 이 div 태그 1
다음의 클래스 로컴 캔을 하나 넣어서 이렇게 어떠한 내용이 담길 수
있도록 만들어 주시구요.
이제 이렇게 하나의 한 줄을 그어 줍니다.
이 제안에 다음과 같이 ul 클래스 한 다음에 어떤 리스트가 담길 수
있도록 리스트 그룹을 만들어 주시고요.
이제 이 안에 갑자기 a 태그를 넣어 줍니다. 이런 식으로 아이템을 넣어서
현재는 이제 실제로 어떤 강의를 맡는 건 아니기 때문에 이제 이렇게
단순하게 샵으로 처리해서 링크를 정해 주시고요. 이제 이렇게 리스트 프로
아이템으로 만들어 줍니다.
이제 여기에서 이렇게 리스트 그룹의 아이템 중에서는 1개 를 선택했다 는
의미에서 이렇게 액티브 항거를 클래스 로 만들어 줄 수 있는데요. 이렇게
한번 클래스 한 다음에 일리가 헬로 월드 라고 한번 더 치겠습니다. 이렇게
달아주시면 간단하게 하나의 목록이 만들어진 거구요 .그대로 복사해서 액티브
만지 보시면은 나머지는 이제 선택되지 않았다 는 뜻으로 밋밋한 색깔로
편이 될 거에요. 이런식으로 한번 각각 넣어 주겠습니다.
저것들 경우 이제 시 원어 강의 라고 생각하고 다음과 같이 한번
c 언어 강의 에 특정한 목록을 한번 이렇게 간단하게 나를 해볼게요.
이렇게 만들어 주시고 이런 3차까지 한번 이렇게 하나씩 넣어 주도록
하겠습니다. 이런식으로 한다면 한번 새로고침을 해보시면 이런식으로 이제
이스트 그룹이 들어가 있는 것을 볼 수가 있습니다.
특정한 강에 들어갔을 때 이렇게 가장 먼저 1강 이 선택되어 서 보여지기
때문에 이렇게 해킹으로 처리를 해서 다른 것과 이렇게 데뷔했을 때 더욱
눈에 띄는 색깔로 이렇게 한번 표현이 된 것을 볼 수가 있구요.
이런식으로 액티브 와 이렇게 리스트 그럽 아이템과 이런 식으로 나누어
가지고 표하는 방법에 대해서 한번 알아 보는 시간에 가졌구요.

 이제 리스트 그룹 같은 용은 이렇게 특별하게 어떠한 소리를 요하지도 않구요.
아주 간단하게 이렇게 작성할 수 있습니다. 아무튼 이번 시간은 이렇게
간단하게 리스트 클럽에 대해서 이해해 보고 한번 활용을 해서 실제로
이렇게 어떠한 강의 목록 같은걸 차례대로 담을 수 있는 공간을 만들어
보는 시간을 가졌습니다.