'IT.인터넷.생활 관련/부트스트랩' 카테고리의 글 목록::백.전.백.승.

IT.인터넷.생활 관련/부트스트랩에 해당되는 글98건

드디어 부트스트랩5로 변경

2013년에 버전 3 부트스트랩이 나온 후 그 후 약 10년 동안 이 블로그도 버전 3을 고집했다. 그동안 부트스트랩 버전 3으로 꾸민 스킨을 버리기 힘들었다. 2016년에 버전 4나 2021년에 버전 5가 출시했어도 버전 3을 고집했다. 최근 블로그 스킨에 신경 쓰지 않으니 버전 5로 변경하는 것에 대해 생각하게 됐다. 애드센스 수익이 100달러를 넘으면 변경하려고 했는데 100달러를 넘으려면 몇 달이 걸릴 것 같아 오늘 변경했다. 예전부터 또 다른 내 티스토리에 부트스트랩 5를 위한 스킨을 만들었었기 때문에 변경은 쉬웠다. 아래 그림을 보듯이 현재 기준으로 정식 버전은 5에서 5.3.3이고 이 블로그는 5.3.2를 사용 중이다. 나중에 css 및 js를 5.3.3이라는 숫자만 변경하면 된다. 예전에..

2024.05.23

overflow-hidden 때문에 고생했다.

over-hidden(overflow:hidden) 때문에 몇 시간을 고생했다. 예로 물체가 영역을 벗어나면 벗어난 부분은 보이지 않게 overflow-hidden을 사용했는데 자꾸 보이는 것이다. 그런데 다양한 방법을 사용해도 영역을 div에 클래스를 사용해서 별 방법을 사용해도 특정 영역을 벗어난 부분을 없앨 수 없었다. 그래서 CSS를 사용하지 말고 부트스트랩5를 사용하니 부트스트랩 5에 정의된 overflow를 사용하자고 생각했다. 부트스트랩에 보면 CSS와 비슷하게 overflow도 정의된다. 비슷해서 가끔 헷갈린다. 부트스트랩 5에서는 클래스를 overflow-hidden이라면 하면 된다. 그랬더니 감쪽같이 됐다. 참고로 이 블로그는 부트스트랩 버전 3이고 3에서는 overflow는 정의되지 ..

2024.01.29

부트스트랩5 소스와 테마의 수, 해결은 시간

이 블로그 스킨은 부트스트랩 버전 3으로 만들었다. 버전 3이 2015년에 출시했고 4나 5과 나온 후에 이 블로그 스킨도 4나 5로 변경하려고 했지만 그것이 쉽지 않았다. 2021년 5월 5일에 버전 5가 나왔을 때는 변경하려고 큰 마음먹고 멋있게 만들고 싶었지만 그것이 마음대로 되지 않았다. 이 블로그를 많이 존재하는 부트스트랩 3 소스를 보고 만들었다. 하지만 부트스트랩 5가 출시될 때만 하더라도 테마나 소스가 적었다. 직접 내가 창조적으로 할 수 있었지만 실력이 모자라 시간이 엄청 소모됐다. 버전 4에 대한 테마나 소스는 많았으나 5가 출시됐는데 4로 꾸미고 싶지 않았다. 무료 테마 2021.5.5. 이후 시간이 흐른 지금, 부트스트랩 5로 만든 테마나 소스가 많아졌다. 전에 몰랐던 https:/..

2023.12.21

부트스트랩5 폰트 아이콘

이 글에서 부트스트랩 버전 5에서 아이콘에 대해 적으려 한다. 이 블로그는 부트스트랩 버전 3으로 만들었다. 버전 3에서 사용할 수 있는 아이콘이 216개뿐이었다. 그래서 부트스트랩을 사용하면서 Font Awesome이라는 사이트에서 2,018개의 무료 폰트 아이콘을 사용 중이다. 참고로 유료로 사용한다면 2,018개가 아닌 19,403개가 된다. 이 블로그 폰트 아이콘에 대해서는 아래 글에서 자세히 설명했다. 이 블로그에서 사용하는 폰트 아이콘 이 블로그는 부트스트랩 버전 3으로 만들었고 다른 티스토리를 만들었다. 거기에서 버전 5의 여러 기능을 보고 있다. 알고 있듯이 버전 5는 아이콘을 제공하므로 1,500개 이상의 아이콘이 있는 고 min-blog.tistory.com 부트스트랩이 버전 5로 업그..

2023.02.07

부트스트랩5에 적절한 라이트박스를 찾았다.2

이 글에서 부트스트랩 버전 5에서 사용할 수 있는 라이트박스에 대해 적으려고 한다. 이 블로그에서 사용하고 있는 아래 라이트박스는 Lightbox for Bootstrap라는 라이트박스(lightbox)를 사용 중으로 마음에 든다. 라이트박스는 Jquery를 사용하는 부트스트랩 버전 3과 4에 사용할 수 있다. 티스토리에서 이미지를 클릭하면 나오는 것과 비슷하다. HTML 삽입 미리보기할 수 없는 소스 그런데 Jquery를 사용하지 않는 버전 5에서는 사용할 수 없다. 부트스트랩 버전 5에 적절한 멋있는 라이트박스를 찾았으나 마음에 드는 것이 없었다. 부트스트랩 공식 홈페이지에서 부트스트랩 5에 맞는 라이트박스로 https://trvswgnr.github.io/bs5-lightbox/에 있는 것을 소개하..

2022.12.06

12칼럼과 썸네일 수

유튜브를 보면 가끔 썸네일이 가로로 5개로 나온다. 이것을 보면 만들고 싶은 생각이 든다. 예전에 이 블로그에 썸네일 5개를 만들었다. 그런데 스마트폰이 아니라 PC에서 썸네일이 너무 작아 그냥 썸네일 4개를 택한 기억이 난다. 스마트폰과 태블릿에서 썸네일이 작을 일 없다. 왜냐하면 이 글을 읽으면 알 수 있다. 아래 그림처럼 부트스트랩은 12개의 칼럼을 조합하는 12 칼럼 그리드 시스템이다. 그런데 12 칼럼인 그리드 시스템을 택하고 있는 부트스트랩에서 방법을 쉽게 생각할 수 없다. 만약 이 블로그는 부트스트랩 버전 3으로 만들었고 3으로 쉽게 하고자 한다면 10이나 15 칼럼이 좋을 것 같다. 내 노트북 화면을 기준으로 이 블로그 홈에 썸네일을 가로로 썸네일이 4개를 사용하고 있다. 또한 카테고리 다..

2022.10.12

부트스트랩 5로 변경하려고 했지만 실패!

이 블로그 스킨을 부트스트랩 버전 3으로 만들었다. 그리고 부트스트랩 3은 2013.08.19에 출시됐으니 10년이 넘었다. 2016년에 버전 4가 출시했을 때 4로 만들고 싶었지만 3에 대한 미련이 남아 버전 5를 기약하면 버전 3을 유지했다. 그 후 2021년에 정식 버전 5가 출시됐다. 부트스트랩 버전 4와 5를 이 블로그가 아닌 다른 티스토리 블로그를 만들어 거기에서 여러 가지를 시험했다. 며칠 전 마음먹고 다른 블로그가 아닌 이 블로그 스킨을 버전 5로 변경했다. 이 글을 쓰는 지금을 기준으로 정확히 버전 5.2로 변경했다. 그런데 손댈 것이 정말 많았다. 내 다른 티스토리에서 적용한 버전 5로 만든 거의 완성된 스킨이어서 손댈 필요 없다고 생각했지만 그것이 아니었다. 내 눈에는 이 블로그에서 ..

2022.08.16

부트스트랩에서 중단점을 기기로 생각하면 이해가 쉽다.

나는 이 블로그 스킨을 부트스트랩 버전 3으로 만들었다. 부트스트랩에서 버전 5 그리드는 버전 3의 것을 따르는 것이 아닌 아래 그림을 보듯이 버전 5의 경우도 버전 4와 비슷하다. 버전 3을 중점적으로 익힌 나는 헷갈린다. 버전 4와 5의 중단점을 볼 때 숫자가 변해 헷갈렸다. 예로 버전 3에서는 md가 992px과 같거나 큰 경우였다면 버전 4와 5부터는 768px로 됐다. 그리고 기기로 생각한다면 992px은 노트북이고 768px은 태블릿 PC라 인식했다. 그러면 버전 4와 5에서는 992px과 같거나 큰 중단점은 md가 아닌 lg가 되고 md는 768px에 해당된다. 부트스트랩 버전 3만 출시했을 때 레이아웃을 만드는 사이트가 많았다. 그때 사이트 대부분이 이용자가 원하는 레이아웃을 선택하게 했다..

2022.07.16

개발자가 아닌 나에게 부트스트랩

개발자가 아닌 입장에서 부트스트랩을 내 입장에서 적어보려 한다. 이 블로그 스킨을 부트스트랩 버전 5에서 기존의 버전 3으로 다시 돌아갔다. 지금 부트스트랩 최신 버전은 5.2 베타 1이다. 참고로 부트스트랩 영어 홈페이지를 방문하면 최신 버전을 알 수 있다. 전에 2013년 8월에 발표된 부트스트랩 버전 3으로 만든 스킨을 사용했다. 부트스트랩 버전이 업데이트될 때마다 이 블로그 스킨도 최신 버전으로 변경해야겠다고 생각했지만 그게 쉽지 않았다. 대신 부트스트랩이 업데이트가 될 때 내가 만든 다른 티스토리에서 부트스트랩 버전 4, 5를 테스트했다. 장점 내가 부트스트랩 버전 2를 별로 사용하지 않고 3을 오랫동안 사용했다. 부트스트랩을 사용하면서 느낀 점은 정말 간단히 반응형 홈페이지를 만들 수 있다는 ..

2022.06.20

부트스트랩, 변화된 container

부트스트랩 버전 3의 container에 대한 내용은 특별히 배울 필요없이 단순하다. 콘텐츠를 포함하는 container와 container 가로 폭이 100%인 container-fluid 뿐이었다. 하지만 버전 4를 배울 때 container의 중첩점에 대해 변하는 것이 추가됐는데 버전 3처럼 단순할 것이라 생각하고 그냥 지나쳤다. 그래서 버전 5에서 1버전 4 이상부터 변한 container가 어떻게 변했는지 아래에서 적으려 한다. 버전 3에서 가로 폭이 100%되게 하려면 container-fluid를 한다고 알고 있다. 버전 4와 5를 여기에서 확장하여 container-중첩점(Breakpoints)을 사용하여 다양하게 설정할 수 있다. 특정 기기나 해상도에 도달하면 가로 폭을 100% 되게 할..

2022.05.10

부트스트랩, 콘텐츠를 포함하는 container

대부분 클래스(class)나 아이디(id) 이름을 만들 때 container라고 한다. 부트스트랩 3에서도 마찬가지로 container라고 콘텐츠 등을 포함하는 채우는 컨테이너가 있다. 이 컨테이너에 두 가지가 있는데 1200px인 고정과 가로폭이 브라우저 가장자리가 경계인 유동이 있다. 고정은 container라 하고 유동은 fluid를 더 해 contain-fluid라 한다. 이 블로그는 부트스트랩 버전 3으로 만들었는데 처음에 고정인 container를 사용하다가 나중에 fluid로 변경했다. 처음 내가 container-fluid를 사용할 때 아래 그림처럼 경계와 여백이 없어 보기 좋지 않아서 고정인 container를 사용했다. 아래 그림의 회색 경계는 브라우저 가장자리라 생각하면 된다. con..

2022.04.20

이 블로그에서 사용하는 폰트 아이콘

이 블로그는 부트스트랩 버전 3으로 만들었고 다른 티스토리를 만들었다. 거기에서 버전 5의 여러 기능을 보고 있다. 알고 있듯이 버전 5는 아이콘을 제공하므로 1,500개 이상의 아이콘이 있는 고품질 오픈 소스 아이콘 라이브러리를 제공한다고 알 것이다. 부트스트랩 버전 3에서 Glyphicons이라는 216개의 아이콘을 제공하지만 그렇게 유용하지 않아 이 블로그는 Font Awesome에서 제공하는 아이콘을 사용하게 됐다. 그 사이트에서 무료로 1,608개의 아이콘을 사용할 수 있다. 그리고 회전, 크기 확대만 아니라 애니메이션도 제공한다. 참고로 유료로 사용한다면 7,8646개를 사용할 수 있다. 폰트 아이콘도 폰트이고 아이콘을 모은 폰트로 보통 인터넷을 이용하여 아이콘을 천 개 이상을 사용하게 할 수..

2022.01.24

부트스트랩5 플러그인이 없다면?

이 글에서 부트스트랩 버전 5의 플러그인에서 대해 적어보려 한다. 부트스트랩에서 플러그인을 사용하면 훨씬 다이내믹한 웹사이트나 블로그를 만들 수 있다. 이 블로그도 부트스트랩 플러그인을 많이 사용했다. 플러그인을 사용하여 부트스트랩 모달에 사진 및 유튜브가 나오는 것이다. 예로 아래우 썸네일 사진을 클릭하면 큰 사진이 부트스트랩 모달에 나온다. 그런데 이 플러그인을 사용하려면 jquery를 필요로 한다. 아래도 비슷한데 썸네일을 클릭하면 부트스트랩 모달에 유튜브가 나온다. 위와 마찬가지로 jquery를 필요로 한다. 이것을 부트스트랩 버전 5로 구현은 https://trvswgnr.github.io/bs5-lightbox/에서 확인할 수 있다. 이 페이지는 부트스트랩 버전 3에서 하는 것이다. 버전 5로..

2022.01.01

어떻게 부트스트랩을 사용할지...

이 블로그는 부트스트랩 버전 3으로 만들었다. 부트스트랩 버전 3은 jquery를 사용하였고 https://bootsnipp.com/ 등 여러 곳에서 다이내믹한 소스를 얻어 이 블로그를 다이내믹하게 꾸몄다. 그런데 버전 5부터 jquery를 버렸다. 검색 그리고 검색을 통해 알았는데 여러 글에서 jquery에 대한 부정적인 글을 많이 보게 됐다. 그러니 나도 모르게 부트스트랩에 jquery를 사용하는 것이 꺼려졌다. 부트스트랩 4에 있는 기본인 그리드 레이아웃이 버전 5에서 사라졌는데 jquery를 사용한 모양이다. 5에서 사용하는 방법을 설명하는데 jquery를 사용하지 않는 모양이다. 이 블로그에서 운영하면서 괜찮게 본 스크립트가 몇 개 있다. 모바일과 글에서 안 보이지만 메인의 경우 유튜브가 나오는..

2021.12.05

부트스트랩5에서 벽돌쌓기, Masorny 레이아웃 구현2

이 글에서 부트스트랩 5에서 Masorny 레이아웃에 대해 적으려 한다. 부트스트랩 버전 5에서 jQuery를 사용하지 않는다는 것을 알 것이다. 그리고 아래 그림과 같은 레이아웃인 Masorny를 쉽게 구현하는 것도 없어졌다. 전에 알아보았듯이 masonry 뜻은 명사로 돌이나 벽돌 쌓기 공사를 뜻한다. 구글 이미지 검색에서 masonry라는 키워드로 검색하면 아래 두 번째 이미지가 검색된다. masonry 레이아웃을 보면 알겠지만 빈 공간이 없다. 아래 글에서 masonry 레이아웃에 대해 적었으니 참조했으면 한다. 벽돌리스트인 Masonry 레이아웃 구현하기 글에서 벽돌를 쌓는 것과 같은 레이아웃을 만드는 것에 대해 적으려고 한다. 벽돌을 쌓아올린 것과 같은 레이아웃을 Masonry 레이아웃이라고 ..

2021.08.03

다양한 부트스트랩 버전 소스를 얻을 수 없구나!

부트스트랩 2~4까지 공부하면서 https://bootsnipp.com/에서 부트스트랩 다양한 버전에 대한 소스를 얻었다. 그 사이트에서는 단지 부트스트랩 2, 부트스트랩 3, 부트스트랩 4 이런 식으로 소스를 제공하는 것이 아니다. 부트스트랩 3에 대한 소스를 제공한다면 단지 한 버전만 칭하여 제공하는 것이 아니라 3의 다양한 버전으로 제공한다. 가령 3.0.0, 3.0.1, 3.1.0, 3.2.0, 3.3.0이라고 세세한 버전에 맞는 소스를 제공한다. 만약 사용자가 부트스트랩 버전 3.0.0 사용한다면 CSS와 JS 또한 3.0.0이다. 그 사용자가 3.3.0 소스를 사용한다면 안 될 것이다. 되기 위해서는 부트스트랩 3.3.0에 맞는 CSS와 JS를 사용해야 한다. 부트스트랩은 업그레이드한 후 자주..

2021.06.09

내가 알고 있는 부트스트랩5 정보

이 블로그는 부트스트랩 3으로 만들었고 다른 티스토리 블로그를 부트스트랩 4에서 5로 변경하면서 정보를 얻었다. 부트스트랩 5는 jQuery를 사용하지 않기 때문에 jQuery를 많이 사용하는 이 블로그는 5로 변경할 수 없었다. 대신에 내 다른 티스토리 블로그를 부트스트랩 5로 변경했다. 부트스트랩 5가 jQuery를 버려서 다이내믹한 소스를 구하기 힘들었다. 부트스트랩 3과 4는 https://bootsnipp.com/에서 소스를 얻었는데 그 홈페이지는 이제 5에 대해 다루지 않아 너무 아쉽다. 대신 다른 홈페이지를 알았는데 5에 대한 멋진 소스가 많지 않아 만족스럽지 않았다. 내가 내 다른 티스토리 블로그를 5로 꾸미면서 알게 된 사이트는 아래 2개 사이트다. 아래 사이트가 좋았고 소스를 무조건 사..

2021.05.20

부트스트랩에서 아코디언

이 글에서 부트스트랩 5에서 지원하는 아코디언에 대해 적으려고 한다. 여기에서 적으려는 아코디언은 현악기를 말하는 것이 아니라 부트스트랩 5의 아코디언이다. 제목(?)을 클릭하면 접혀있던 내용이 보이는 스크립트다. 실제로 보기 위해서 부트스트랩 버전 3의 아코디언은 아래와 같다. 아래에서 볼 수 있는 아코디언은 부트스트랩이 포함하고 있다. 그러므로 부트스트랩에서 아코디언 코드를 작성하면 된다. 그리고 버전 4도 3과 비슷하다.* Collapsible Group Item #1 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupi..

2021.05.05

부트스트랩5에서 오프캔버스, 컨포넌트

아래는 부트스트랩 버전 3에 포함하고 있는 캐러셀이고 다양한 컴포넌트를 사용하면 블로그 등을 다이내믹하게 꾸밀 수 있다. 버전 5에서는 아래 더보기에 볼 수 있듯 이동점이 직사각형이고 이 블로그는 버전 3이므로 원이다. 참고로 아래 더보기 안을 보듯이 버전 4 이상부터 캐러셀 이동점이 직사각형으로 변했다. 더보기 See the Pen 부5:캐러셀 정식 by 백전백승 (@100_jskim) on CodePen. Previous Next 버전 5의 콘포넌트에 아코디언, 위에서 본 캐러셀, 오프캔버스 등 다양하다. 그중에서 나는 오프캔버스는 많이 사용할 것 같다. 알고 있듯이 오프캔버스는 버튼을 누르면 브라우저 옆, 아래에서 창이 나오는 알고 있다. 버전 3에서 이 기능이 없어 줄 수 없지만 티스토리 블로그 ..

2021.04.29

부트스트랩5에서 비율

며칠 전, 부트스트랩5에서 동영상 비율 및 반응형에 대해 적었다. 그때는 유튜브, 카카오TV, 네이버TV에서 퍼온 아이프레임 소스로 붙인 동영상 비율 및 반응형에 대한 것이었다. 아래에 부트스트랩 5에서 유튜브를 21:9, 16:9, 4:3, 1:1 비율로 나타낸 것이다. 코드펜에 유튜브를 로딩을 해야 하므로 느리다. 전부터 느끼자만 유튜브는 느리다. 코드펜이 이미 로딩한 후 유튜브도 로딩해야 한다. 참고로 아래는 무료로 온라인으로 HTML, CSS, 스크립트를 편집할 수 있는 코드펜이라는 것이다. 코드펜 안 동영상이 잘리는 것을 보기 바란다. 어떤 크기에서도 잘리지 않는 비율을 16:9 비율이라는 것을 알 수 있다. 동영상을 넓게 보고 싶다면 HTML을 클릭하면 된다. HTML만 보고 싶다면 Resul..

2021.04.05