부트스트랩 스킨 버젼 3 입니다. 이번 스킨에서는 기능에 대해서 좀 추가를 많이 했습니다.
변경된 점과 추가된 기능에 대해서 소개합니다. 아무래도 조금 더 다듬으면 좋은 스킨이 될것 같습니다.

이번에는 격자 시스템 중에서 꽉찬 화면인 Fluid grid system 을 사용했습니다.
기존과 다른점은 아무래도 클래스에 fluid 가 붙는다는 겁니다.
좀 더 다듬어야 할 부분은 화면이 줄었을때를 대비해서 미디어쿼리를 작성해야 하는데.....
티스토리는 모바일 화면을 독점으로 사용하니...따로 작성할 필요가 없습니다.
html5 에 맞게 section 같은 추가된 태그를 사용해야 하는데....안햇습니다.

아래 이미지는 평상시 모습입니다.


사이즈를 줄이면 해더의 네비게이션이 변합니다. 이건 따로 작성하지 않아도 기본 스타일에서 그렇게 잡습니다.
이런 점이 좋은거죠....ㅎㅎ


화면폭이 좁아지면 사이드바는 아래로 내려갑니다.


큰화면은 크게 , 작은 화면은 작게 사용할 수 있습니다.
이건 따로 스타일을 작성하지 않아도 기본적으로 잡히고.....나머지 이상한 부분들은 체크해서 따로 조정해줘야지요.

상단에 아이콘을 크게해서 네비게이션을 꾸몄으며, 배경과 테마를 변경하게끔 했습니다.
아래 그림처럼 상단 네비게이션을 클릭하면 하위메뉴가 펼쳐지며 총 15개의 배경을 변경해 볼 수 있습니다.


배경을 클릭하면 배경을 볼 수 있게끔 본문의 배경에 투명도를 주어서 비치도록 했습니다.

 
이번 스킨은 위젯을 사용한 테마입니다.
블로그에서 글의 제목 부분을 글 내용과 분리를 해서 띠를 형성한 것처럼 꾸몄습니다.


우측에 보면 아래로 향하는 아이콘이 있습니다.
즉 클릭을 할 수 있는 공간입니다. 클릭을 하면 하위의 내용이 감쳐집니다.

즉 아래로 내려가야 하는데 글 내용이 길다 그러면 글 제목부분을 클릭하세요. 그럼 내용부분이 감쳐집니다. 지금 한번 클릭해보세요.

상단 네비게이션에 테마 변경이 있습니다. 마우스를 갖다대면 툴팁이 뜹니다.


충 7개의 테마를 볼 수 있습니다.


예제로 한 3개정도 변경을 해봣습니다. 여러분도 한번 클릭해보세요.
변경된 테마는 새로고침이나 다른곳으로 가면 기본으로 다시 돌아갑니다.


사이드바 상단에 이미지가 하나 있습니다.
클릭을 하면 사이드바가 좁아지고 본문이 커집니다.
아래 이미지는 평상시 모습입니다.



아래 이미지는 사이드바를 좁게 만들었을때 입니다.
본문을 크게 보고 싶을 때 사용하면 되겠죠.
 




티스토리 특성상 이상하게 부트스트랩에서 제공하는 아코디언 메뉴 즉 Collapse 가 됐다 안됐다 합니다.
머리아퍼서 사이드바의 아코디언을 위젯스타일로 했으며, jquery 로 접었다 폈다하는 기능을 달았습니다.
위젯의 제목 부분에는 아래로 향하는 아이콘이 있으며 제목부분을 클릭하면 본문을 접고 펴는 기능이 있습니다.

아래는 접었을때 본문의 글 부분이 접힌 모습입니다.


네비게이션 메뉴에 보면 방명록 밑에 이미지 갤러리가 있습니다.


부트스트랩 스킨 버젼 3 입니다. 이번 스킨에서는 기능에 대해서 좀 추가를 많이 했습니다.
변경된 점과 추가된 기능에 대해서 소개합니다. 아무래도 조금 더 다듬으면 좋은 스킨이 될것 같습니다.

이번에는 격자 시스템 중에서 꽉찬 화면인 Fluid grid system 을 사용했습니다.
기존과 다른점은 아무래도 클래스에 fluid 가 붙는다는 겁니다.
좀 더 다듬어야 할 부분은 화면이 줄었을때를 대비해서 미디어쿼리를 작성해야 하는데.....
티스토리는 모바일 화면을 독점으로 사용하니...따로 작성할 필요가 없습니다.
html5 에 맞게 section 같은 추가된 태그를 사용해야 하는데....안햇습니다.

아래 이미지는 평상시 모습입니다.


사이즈를 줄이면 해더의 네비게이션이 변합니다. 이건 따로 작성하지 않아도 기본 스타일에서 그렇게 잡습니다.
이런 점이 좋은거죠....ㅎㅎ


화면폭이 좁아지면 사이드바는 아래로 내려갑니다.


큰화면은 크게 , 작은 화면은 작게 사용할 수 있습니다.
이건 따로 스타일을 작성하지 않아도 기본적으로 잡히고.....나머지 이상한 부분들은 체크해서 따로 조정해줘야지요.

상단에 아이콘을 크게해서 네비게이션을 꾸몄으며, 배경과 테마를 변경하게끔 했습니다.
아래 그림처럼 상단 네비게이션을 클릭하면 하위메뉴가 펼쳐지며 총 15개의 배경을 변경해 볼 수 있습니다.


배경을 클릭하면 배경을 볼 수 있게끔 본문의 배경에 투명도를 주어서 비치도록 했습니다.

 
이번 스킨은 위젯을 사용한 테마입니다.
블로그에서 글의 제목 부분을 글 내용과 분리를 해서 띠를 형성한 것처럼 꾸몄습니다.


우측에 보면 아래로 향하는 아이콘이 있습니다.
즉 클릭을 할 수 있는 공간입니다. 클릭을 하면 하위의 내용이 감쳐집니다.

즉 아래로 내려가야 하는데 글 내용이 길다 그러면 글 제목부분을 클릭하세요. 그럼 내용부분이 감쳐집니다. 지금 한번 클릭해보세요.

상단 네비게이션에 테마 변경이 있습니다. 마우스를 갖다대면 툴팁이 뜹니다.


충 7개의 테마를 볼 수 있습니다.


예제로 한 3개정도 변경을 해봣습니다. 여러분도 한번 클릭해보세요.
변경된 테마는 새로고침이나 다른곳으로 가면 기본으로 다시 돌아갑니다.


사이드바 상단에 이미지가 하나 있습니다.
클릭을 하면 사이드바가 좁아지고 본문이 커집니다.
아래 이미지는 평상시 모습입니다.



아래 이미지는 사이드바를 좁게 만들었을때 입니다.
본문을 크게 보고 싶을 때 사용하면 되겠죠.
 




티스토리 특성상 이상하게 부트스트랩에서 제공하는 아코디언 메뉴 즉 Collapse 가 됐다 안됐다 합니다.
머리아퍼서 사이드바의 아코디언을 위젯스타일로 했으며, jquery 로 접었다 폈다하는 기능을 달았습니다.
위젯의 제목 부분에는 아래로 향하는 아이콘이 있으며 제목부분을 클릭하면 본문을 접고 펴는 기능이 있습니다.

아래는 접었을때 본문의 글 부분이 접힌 모습입니다.


네비게이션 메뉴에 보면 방명록 밑에 이미지 갤러리가 있습니다.


갤러리에 가면 두개의 갤러리가 있습니다.
부트스트랩과 연동해서 지원하는 이미지 갤러리가 하나 입니다.


이미지를 클릭하면 부트스트랩에서 지원하는 모달형식으로 이미지 슬라이더가 시작이 됩니다.
모달창이 뜨면 배경을 불투명해지고 이미지아래에 버튼이 있습니다.
이미지 위로 마우스를 갖다대면 이전과 다음으로 갈 수 잇는 버튼이 생깁니다.
 


또하나는 골라보는 이미지 갤러리.
예제로 우선 아이유와 제시카알바, 아리아니, 로버트 드니로 이렇게 4명의 갤러리를 모아놨습니다.


로버트 드니로 버튼을 클릭하면 드니로만 모아옵니다. 재미있으니 한번 클릭해보세요.


이것도 원하는 이미지만 모아볼수 잇는 기능인데 응용하면 더 좋을것 같습니다.



기타 몇가지 더 있는데 글이 길어 생략합니다.
우선 이 스킨은 배포 버젼이 아닙니다. 우선 더 만져보고 판단할 생각입니다. 

부트스트랩 스킨에 대해서 여러분의 의견을 듣고 싶습니다.