부트스트랩 (63) 썸네일형 리스트형 타임라인 리스트 만들기 이 블로그에서 볼 수 있는 카테고리 리스트에 대해 적으려고 한다. 지금은 아니지만 예전에 이 블로그 카테고리를 클릭하면 아래 그림과 같이 보였다. 카테고리는 아니지만 이 블로그 공지사항 목록을 보면 타임라인이다. 위 타임라인은 부트스트랩3 소스를 이용했다. 소스는 https://bootsnipp.com/snippets/8EWb에서 구할 수 있는 소스를 사용했다. 거기에 보이는 아이콘 대신 썸네일을 사용했다. 중요한 것은 부트스트랩3를 이용했다는 것이다. 그 홈페이지는 부트스트랩 소스를 많이 구할 수 있으며 다양한 타임라인 소스는 https://bootsnipp.com/tags/timeline로 검색하면 된다. 아래 그림처럼 나는 리스트가 아닌 인덱스 페이지에 타임라인 소스를 넣었다. 내가 이 스킨을 오래.. 부트스트랩 버전 3,4,5 소식 부트스트랩은 홈페이지 등 웹사이트를 쉽게 만들 수 있게 도와주는 HTML, CSS, JS 프레임워크이다. 그래서 많은 사람이 부트스트랩으로 홈페이지를 만든다. 워드프레스 테마(스킨)을 보면 부트스트랩으로 만든 것이 많다. 나도 이 블로그의 스킨을 부트스트랩 버전 3으로 만들었고, 다른 티스토리 블로그는 부트스트랩 버전 4로 만들었다. 버전 4에서는 3에 없던 아래와 같은 카드(Card) 컴포넌트와 그림자, 포지션 등 여러 가지가 추가돼 부트스트랩 버전 5에 기대감이 크다. 내가 다른 티스토리 블로그에서 카드, 그림자, 포지션을 사용하니 정말 편리했다. 참고로 아래는 내 CodePen에서 퍼온 것으로 위키백과에 나온 codepen에 대한 정의를 일부 번역하면 아래와 같다. CodePen은 사용자 제작 HT.. 부트스트랩 테마는 무료보다 유료 이 블로그를 부트스트랩 최신버전 4가 아닌 3으로 만들었고, 다른 내 티스토리 블로그는 4로 만들었다. 그리고 공부하는 입장에서 부트스트랩 테마를 보면서 항상 느끼는 것이 있다. 무료 테마는 한계가 있다는 것이다. 무료 테마는 어느 선까지 만족 시켜주지만 항상 2% 모자란다. 2%를 채워줄 테마는 모두 유료 테마다. 무료 테마는 유료 테마 구매로 이어지게 하기 위한 미끼라는 것을 느끼게 된다. 수 년 간 많은 부트스트랩 무료테마를 봤지만 100% 마음에 드는 것은 없었고 모두 2% 모자랐다. 만약 내가 부트스트랩 무료와 유료 테마를 만든다고 한다면, 방문자가 유료테마를 구매하도록 하기 위해서 무료 테마에 시간을 들이지 않을 것이다. 무료로 이목을 집중 시킨 후 무언가 부족함을 해소해 주어야 하니 유료 테.. 부트스트랩 collapse 이 글에서 버튼을 클릭하면 숨겨져 있는 내용이 나타나게 하는 것을 알아보려 한다. 전에도 아래 버튼을 클릭하면 아이콘도 변하여 버튼 아래에 감춰져 있는 것이 보였던 것을 설명한 적이 있다. 이번에는 부트스트랩 3과 4에서 모두 할 수 있는 것에 대해 간단히 설명하려고 한다. 참고로 이 블로그에서 아래와 같은 것을 많이 이용하니 봤을 것이다. 클릭하세요. 가치를 없으면, 얼마나 대한 있는가? 청춘 이 무엇을 위하여서. 아름답고 없으면, 쓸쓸한 얼음과 무엇이 이 청춘의 보는 돋고, 이것이다. 내려온 수 행복스럽고 그들의 안고, 동산에는 인도하겠다는 가장 가슴이 위하여서. 부트스트랩의 collapse 자바스크립트를 이용하면 버튼 아래에 내용을 숨길 수 있다. 만약 시작 시 내용을 나타내고 싶다면 3에서는 co.. 부트스트랩 버전 5에 대한 기대감 부트스트랩 공식 홈페이지를 방문했더니 부트스트랩 4 버전이 4.3으로 됐다는 것을 알았다. 그리고 블로그에서 부트스트랩 3.4가 3.4.1로 패치됐다는 것도 알았다. 그래서 이 글에서 부트스트랩 버전 변화에 대해 적어보려 한다. 참고로 이 블로그는 부트스트랩3으로 만들었으며 다른 티스토리 블로그는 부트스트랩4.*로 만들어 여러 가지 실험하고 있다. 만약 익스플로러8까지 지원하기를 바란다면 부트스트랩3을 사용했으면 한다. 왜냐하면 부트스트랩4 이상은 익스플로러9 이하는 지원하지 않는다. 다른 사람은 모르겠는데 나는 익스플로러 여러 버전을 생각하기 싫다. 익스플로러 버전을 생각하면 골치가 아파진다. 그냥 브라우저만 고려하고 싶다. 익스플로러 버전이 아닌 익스플로러... 부트스트랩 블로그에 4.3에 대한 내용.. 부트스트랩 소스 이 블로그에서 사용하는 대부분의 부트스트랩 소스는 https://bootsnipp.com/에서 구한다. 멋있는 부트스트랩 소스를 구하기 위해 굳이 다른 사이트를 고생하여 다닐 필요없을 것다. 지금은 부트스트랩 4 정식 버전에서 최신인 4.1.1에 대한 소스가 많지만 3에 대한 소스도 정말 많다. https://bootsnipp.com/ : 부트스트랩 소스 거기 소스를 보면 부트스트랩 버전이 나오는데 비록 4 이상이라고 나와도 일부 소스는 3에서도 잘 된다. 아래 예는 4.1.1에 해당한다고 하지만 3에도 잘 된다. 참고로 이 블로그는 부트스트랩 3.3.6을 사용 중이다. 소스가 3에서 지원하지 않는 컨포넌트를 사용하지 않는 한 된다고 보면 될 것이다. 아래 예는 3과 4 모두 지원하며, 소스를 보면 알겠.. 스킨을 직접 제작한 계기 이 블로그 초기에 블로그라는 주제로 글을 적었을 때, 모든 블로그는 아니나 나름 많은 것에 대해 다루었다. 설치형/가입형 워드프레스, 블로그스팟(구글블로그) 등 많은 블로그를 조금 다루었다. 그러면서 의도치 않게 워드프레스와 블로그스팟의 다이나믹한 스킨(테마)를 많이 봤다. 그 당시 두 곳의 스킨은 티스토리 블로그 스킨과 비교할 수 없이 다이나믹했다. 정말 스킨을 보고서 반했는데 항상 아쉬움이 남았다. 2010년, 티스토리 블로그에서 남이 만든 스킨을 적용해서 간단하게 꾸미는 것이 불가능했다. 왜냐하면, 자유성 그런 것 때문이 아니라 그 당시 티스토리에서 배포하는 스킨이나 티스토리 블로거가 배포하는 스킨은 너무 적었다. 그리고 다이나믹하지도 않았다. 남이 만들어 배포하는 스킨을 생각하지도 못했다. 마냥 .. 부트스트랩으로 스킨만들기 스킨을 만들 때 티스토리와 네이버 블로그의 일부분의 차이만 적고자 한다. 이 블로그를 부트스트랩(bootstrap)으로 만들었다. 그래서 부트스트랩을 사용하여 만들 수 있는지만 적고자 한다. 티스토리 치환자에 대한 설명은 하지 않으려 한다. 부트스트랩을 위키백과에서 아래처럼 정의하고 있으며 부트스트랩 공식 홈페이지에서도 비슷하게 정의하고 있다. 참고로 아래는 위키백과의 부트스트랩 설명에 대한 일부분이다. 부트스트랩(Bootstrap)은 웹사이트를 쉽게 만들 수 있게 도와주는 HTML, CSS, JS 프레임워크이다. 하나의 CSS로 휴대폰, 태블릿, 데스크탑까지 다양한 기기에서 작동한다. 다양한 기능을 제공하여 사용자가 쉽게 웹사이트를 제작, 유지, 보수할 수 있도록 도와준다. - 출처 : 위키백과 부트스.. 이전 1 2 3 4 5 6 ··· 8 다음
