백.전.백.승. 블로그에 오신 것을 환영합니다.

부트스트랩 공식 홈페이지를 방문했더니 부트스트랩 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 모두 지원하며, 소스를 보면 알겠..

부트스트랩4은 3에서 많이 변했다. 만약 3을 그대로 사용한다면 4에서 특정한 것은 아예 안 될 것이다. 예로 3에서 사용하던 캐러셀(carousel)의 모양은 크게 변하지 않아 그대로 사용하면 될 것 같지만 정의 방법은 180도 변해 4에서 3처럼 한다면 100% 깨진다. 여기에서 캐러셀에 대해서 적을 것이 아니니 줄이겠다. 이 글에서 부트스트랩4를 사용해 티스토리 블로그 스킨을 만들면서 마음에 들었던 컴포넌트 하나에 대해 대해서 적으려고 한다. 부트스트랩3 사용자에게 card 콤포넌트는 생소할 것이다. 왜냐하면, 부트스트랩3에서 card라는 것이 없었기 때문이다. card는 3에 있던 panel과 비슷하다고 생각하면 된다. 그렇다고 같지는 않다. 참고로 4에서 panel이 없어졌다. 그리고 4의 co..

제목에 적었듯 부트스트랩 3과 4에서 아이콘 사용에 대해 적으려 한다. 이 블로그가 부트스트랩3으로 만들었으므로 이 블로그에서 사용하고 있는 어떻게 사용하는지 적어보려 한다. 부트스트랩3에서 아이콘 부트스트랩3는 기본적으로 위 그림에서 볼 수 있는 약 250개의 Glyphicons이라는 폰트 아이콘을 제공한다. 이 폰트 아이콘은 부트스트랩3을 사용하면 사용할 수 있다. 티스토리 블로그는 본문에 HTML을 지원하고 또한 스킨에 HTML 편집을 할 수 있어서 그 중 몇 개를 나타내면 아래와 같다. 참고로 아이콘의 색은 CSS로 얼마든지 변경할 수 있다. 그리고 아래 아이콘은 그림이 아니니 저장할 수 없다. 폰트 아이콘은 윈도우에 있는 wedings나 windings와 비슷하다고 해야 하나...참고로 2012..

부트스트랩 버전 4에서 Display에 대해서 적어보려 한다. 반드시 이 글은 부트스트랩 버전 4에 대해서 적는다는 것을 알고 글을 읽었으면 한다. 참고로 부트스트랩 버전3에서 display 속성이라는 것이 없었으며 4에서 display 속성이라는 것이 생겼다. 그러니 3에서 display 속성을 찾으면 고생한다. 부트스트랩3 그리드를 공부하면서 xs, sm, md, lg를 수치로 이해하지 않고 위 그림과 같이 기기로 이해했다. 즉 xs를 스마트폰, sm를 태블릿, md를 노트북, lg를 데스크탑이라고 이해했다. 간단히 이해한다는 것이... 그러니 글을 볼 때 xs를 수치가 아니라 스마트폰이라고 하니 이해하기 바란다. 부트스트랩 3 버전에서 스마트폰 기기에서 특정 요소에 숨기려면 위 그림을 보듯이 hid..

스킨을 만들 때 티스토리와 네이버 블로그의 일부분의 차이만 적고자 한다. 이 블로그를 부트스트랩(bootstrap)으로 만들었다. 그래서 부트스트랩을 사용하여 만들 수 있는지만 적고자 한다. 티스토리 치환자에 대한 설명은 하지 않으려 한다. 부트스트랩을 위키백과에서 아래처럼 정의하고 있으며 부트스트랩 공식 홈페이지에서도 비슷하게 정의하고 있다. 참고로 아래는 위키백과의 부트스트랩 설명에 대한 일부분이다. 부트스트랩(Bootstrap)은 웹사이트를 쉽게 만들 수 있게 도와주는 HTML, CSS, JS 프레임워크이다. 하나의 CSS로 휴대폰, 태블릿, 데스크탑까지 다양한 기기에서 작동한다. 다양한 기능을 제공하여 사용자가 쉽게 웹사이트를 제작, 유지, 보수할 수 있도록 도와준다. - 출처 : 위키백과 부트스..

부트스트랩에서 유튜브를 반응형으로 만드는 것을 적고자 한다. 부트스트랩에서 유튜브를 반응형 방식은 구체화하여 비율로 반응형으로 만들어주는 방법이 있다. 단순히 하나의 방법만 있는 것이 아니다. 3 버전에서는 2가지 비율이 있고 4 버전에서는 2가지 비율이 더 추가되어 총 4가지가 된다. 이것에 대해서는 아래 글을 읽으면 알 수 있다. - 16:9 비율 - 위는 16:9 비율의 소스로 유튜브 소스를 와 로 감싼 후 영상의 크기에 상관없이 class="embed-responsive-item"을 더하면 반응형으로 된다. 참고로 아래비교를 위해서 아래 동영상은 4:3 비율의 동영상이다. 4:3은 전통적인 텔레비전 및 컴퓨터 모니터 표준 비율이다. - 4:3 비율 - 16:9는 너비 16, 높이 9의 비율을 갖는..

이 블로그의 스킨은 부트스트랩 버전 3으로 만들었디. 부트스트랩 4로 스킨을 만들면서 이미지에 대한 것을 많이 사용하면서 3과 차이를 많이 느껴 적으려 한다. 위는 부트스트랩 버전 3에서 이미지를 둥글게 하는 방식이다. 티스토리 블로그는 글에 CSS가 적용되므로 아래처럼 바로 적용했다. 아래에서 왼쪽 마지막에 있는 것은 원본이다. 왼쪽에서 차례로 img-rounded, img-circle, img-thumbnail이다. 자세히 적으면 3에서 사각형 네 모서리를 약간만 둥글게 하는 것은 .img-rounded라 하고 완전히 둥글게 하는 것은 .img-circle이라고 한다. 그리고 썸네일로는 .img-thumbnail이라고 한다. 위와 같이 하면 방문자는 그림이 아니라 퍼가기 어렵다. 만약 글에서 CSS를..

이 글에서 적을 내용은 티스토리의 카테고리 다른 글이지만 부트스트랩4와 관련 된 글이라 점을 알았으면 한다. 그리고 글에 부트스트랩4라는 단어가 들어간다고 부트스트랩4에 대해 자세히 설명을 기대하지 말았으면 한다. - 카테고리 다른 글 - 이 블로그에서 보안 연결인 https를 적용하면서 부트스트랩4로 스킨을 계속 만들고 있다. 이 블로그가 http이면서 부트스트랩3이라 https와 부트스트랩4로 알아두고 싶어 과거에 운영했었던 거기에 부트스트랩4를 배우는 겸 적용하고 있다. 예전처럼 티스토리 블로그의 카테고리 다른 글, https, 치환자 등을 포함해 여러 가지를 적용하고 있다. 예전에 이 블로그에도 부트스트랩3를 사용해 카테고리 다른 글을 이미지 4개로 만들었으나 그만두고 간단히 플러그인을 사용 중이..

내가 방치하던 블로그를 보안 연결인 https로 설정한 후 부트스트랩3가 아닌 4로 스킨을 만들었다. 4는 완전하지 못하고 배우는 중이라 이 블로그에 적용은 안 했다. 그 스킨을 업데이트하려면 여기에 적용해야 할 것 같다. 왜냐하면 이 블로그를 많이 접하니...내가 스킨을 접하는 일은 여기에서 해야 할 것 같다. 만약 이 블로그는 부트스트랩3을 유지한다면 방치하는 블로그를 자주 방문해야 할 것 같다. 4로 스킨을 만들면서 느낀 점을 부정적으로 적자면 부트스트랩을 접하면 정상적인 CSS3 속성 등을 잊게 된다는 것이다. 예로 위로 여백을 지정하려면 정상적으로 margin-top:수치라고 하지만 부트스트랩 4에서는 클래스에 줄여서 mt-수치를 삽입하면 된다. mt는 margin과 top의 약자로 안다. 그리..

이 블로그에서 부트스트랩을 적으면서 이 블로그 스킨을 부트스트랩3을 사용해서 만들었다고 적었다. 참고로 현재 공식 부트스트랩 홈페이지를 보니 4.0 버전이 아닌 4.1이 나왔다. 부트스트랩4 알파 버전이 나왔을 때 조금 공부했었는데, 어려워 정식 버전이 나오기를 기다렸다. 정식 버전이 나왔을 때도 어려웠다. 무엇보다도 3보다 4에 대한 소스, 템플릿, 테마 등이 없어 부트스트랩4에 대한 생각을 접었다. 그런데 며칠 전에 부트스트랩4 영어 홈페이지를 번역한 홈페이지인 http://bootstrap4.kr/을 방문하고서 다시 부트스트랩4를 배울 생각이 났다. 아직 그곳은 100% 번역된 것은 아닌 것 같지만 부트스트랩4를 배우기에 수월할 것 같았다. 그리고 예전에 영어 공식 홈페이지에서 구글번역 등 번역 프..

어제 Flex는 IE8이상을 지원하는 부트스트랩3에 없었는데, IE10이상을 지원하는 4에 추가됐다고 적었다. 부트스트랩 3에서 4로 업그레이드되면서 새롭게 추가된 것이 많은데, 대표적인 것이 Flex다. 아래 동영상을 보면 Flex에 대한 개념을 어느 정도 이해할 수 있을 것이다. 제목에 CSS가 나왔는데, Flex의 속성에 대한 내용은 아니고 전반적인 내용이다. 그런데 CSS에서 브라우저 지원을 보니 Flex가 IE11이라 사용을 하지 않을 것 같다. 즉 익스플로러10이하는 Flex는 제대로 못 본다는 것이다. 그러니 부트스트랩4를 배워도 즐겨 사용하지 않을 것 같다. 그래도 배우고 싶은 사람은 있을 것이다. 부트스트랩4에서 Flex를 배우고 싶다면 부트스트랩 공식 홈페이지의 Flex 설명인 여기를 ..

이 글에서 Flex와 부트스트랩4의 브라우저 지원에 대해 적으려고 한다. Flex는 부트스트랩3에 없었으며 4에 새롭게 추가됐다. 그래서 부트스트랩4에서 Flex 공부하다가 Flex의 브라우저 지원에 대한 사실을 알았다. 아래 그림은 https://www.w3schools.com/css/css3_flexbox.asp에서 가져온 것으로 익스플로11부터 지원한다고 됐다. 아래 그림은 이 블로그 방문자의 브라우저에서 익스플로러만 본 것이다. 브라우저가 많지만 우리나라 사람들이 익스플로러를 많이 사용하니 봤다. 익스플로러를 본다면 10이하는 Flex를 지원하지 않으니 제대로 볼 수 없을 것이다. 참고로 통계는 한 달 동안 구글 애널리틱스로 본 것이다. 그래서 부트스트랩4의 브라우저 지원도 궁금했다. 전에 간단히..

먼저 이 블로그는 부트스트랩4가 아닌 3으로 만들었다는 것을 적으면서 시작할까 한다. 이 글을 쓰는 시점을 기준으로 최신 버전은4.1이다. 최신 버전은 부트스트랩 정식 홈페이지에서 항상 확인할 수 있다. 4 소스를 보다 pt-9, mr-3 ,p-2 등의 단어를 봤다. 처음에 아주 낯설었다. 왜냐하면 부트스트랩3에서 구경도 못 해본 단어였기 때문이었다. 나중에 알았는데 p는 padding이었고 m은 margin이었다. 그리고 t는 padding-top이나 margin-top이었으며 숫자는 수치였다. 그러면 pt-9는 padding-top=9라는 말이 된다. 참고로 4에서 CSS 단위가 PX(픽셀)이 아니 REM으로 바뀌었다. 그래서 수치가 2라면 2px가 되는 것이 아니라 2rem이 되며 px로 하면 16..

부드스트랩4에서는 3에 없었던 card라는 클래스가 추가됐다. 이 card 클래스를 이용해서 썸네일을 만드는데 도움이 될 것 같다. 아래에 card 클래스의 기본형,헤더,푸터와 제목, 설명, 링크를 더할 수 있다는 것을 적었다. 아래 글에 나오는 HTML이나 Result(결과)를 봐도 뭔지 모를 것이다. 4의 card 클래스에서 가장 많이 사용하는 것은 아래 결과에서 볼 수 있는 Card Images가 아닌가 한다. 왜냐하면 상/하위에 이미지가 있고 바로 아래에 제목과 설명을 넣을 수 있기 때문이다. 4에서 card 기본은 위와 같이 된다. 3으로 card를 만드는 소스를 봤는데 그냥 넘어갔다. 왜냐하면 너무 어려웠고 복잡했다. 위 코드에 대한 결과에는 안 나오지만 card 클래스를 사용하면 회색 테두리..

부트스트랩3에서 컬러는 default, primary, warning danger 등으로 구성되어 있다. 3에 있는 것을 포함하여 4에서 secondary, light, dark, muted, white가 추가됐다. muted는 텍스트에서만 사용하는 것 같고 색은 아래 그림을 보듯이 어두운 회색과 밝은 회색의 중간인 것 같다. muted는 사용해봐야 할 것 같다. text-light의 색은 밝은 회색인 것 같다. 그러니 아래 그림에서 흰색 배경으로 하지 않고 검색은색 배경을 한 것 같다. 위는 텍스트색에 관련됐는데 이번에 배경을 예로 들면 muted는 없지만 이해가 쉽다. 아래 그림처럼 secondary는 어두운 회색, light는 밝은 회색이다. 텍스트에서 muted와 배경에서 secondary가 비슷..

이 글에서 각진 사각형 이미지는 아래 그림 차례로 각진 모서리를 둥글게, 전체를 둥글게, 썸네일로 만들기를 부트스트랩3과 4에서 어떻게 처리하는지 적어보려 한다. 부트스트랩3에 적용한 블로그에 4를 적용했더니 이미지가 전부 각진 사각형이 나와 4에서는 변한 것을 알아 이 글을 적게됐다. 각진 이미지를 둥글게 3에서 이미지의 각진 모서리 부분을 둥글게 하기 위해서 img-rounded라는 했지만 4에서는 변했다. 어떻게 변했냐면 img- 뺀 rounded만 하면 된다. 아직까지 부트스트랩3로 모서리를 둥글게 처리하는 것을 사용한 적은 없다. 이 블로그 최근에 달린 댓글에 있는 이미지 각진 모서리를 둥글게 한 것은 부트스트랩을 사용한 것이 아니다. 사각형을 둥글게 이 블로그는 3으로 만들었으므로 상단에 있는..

이 블로그에서 carousel을 많이 사용하고 있다. 부트스트랩에서 carousel을 아래 결과(Result)를 보듯이 슬라이드라 할 수 있다. 이 글에서 부트스트랩3 carousel이 4에서 어떻게 변했는지 적고자 한다. 위 결과에서 봤던 carousel은 부트스트랩 4에서 지원하는 것이다. 부트스트랩3의 carousel을 사용했거나 봤다면 큰 변화가 없다는 것을 알 것이다. 아래 그림은 3의 carousel 그림으로 4에서는 1번이 직사각형이다. 3은 1번을 보듯이 둥글다. 위 결과를 보듯이 나머지는 변경된 것이 없다. 참고로 위는 부트스트랩4이고 이 블로그 제일 하단에 있는 것은 부트스트랩3의 carousel이다. 이 글을 쓰는 지금을 기준으로 이 블로그는 부트스트랩 3.3.6으로 만들었다. 나중에..

아래 부트스트랩 그리드에 대한 내용을 적지만 내가 이해하도록 4정식이 나오면서 어떻게 변했는지 적는 것이다. 그러니 부트스트랩 그리드에 대해 제대로 배우고 싶다면 부트스트랩 홈페이지를 참조했으면 한다. 3과 4의 차이는 아래 외에 많지만 대표적으로 내가 많이 사용하는 것만 적었다. 참고로 이 글은 내 관점으로 적었으니 어려울 것이다. 부트스트랩4 알파 그리드에서 xs가 없어지고 col과 xl이 추가된 것을 봤을 때 3에서 사용하던 그리드는 사용할 수 없을 것이라 생각했다. 그런데 나중에 4의 그리드를 신중히 봤는데 변화가 거의 없었다. 아래 그림처럼 부트스트랩 템블릿을 소스를 제공하는 사이트를 봤에서 4 소스에서 xs 그리드를 쓰는 것을 봤다. 3에서 사용하던 그리드를 그냥 사용하면 되는 것이었다. 4를..

이 블로그는 부트스트랩으로 만들었으며 최신인 4가 아닌 3.3.6으로 만들었다고 여러 번 적어 알 것이다. 그래서 정식 4.0이 나왔을 때 변경하려고 마음먹었는데 여러 사정이 있어서 그만두었다. 며칠 시간 내서 이 블로그를 부트스트랩 3.3.6을 4.0으로 변경하던 중 개고생하고 있음을 느꼈다. 4.0 정식이 나왔을 때 코드가 아니라 눈으로 보기에 큰 변화도 있는 줄 알았는데 별로 없었다. 간단한 예로 이 블로그 제일 아래 보이는 Carousel 차이는 부트스트랩 3.*에서 지원하는 것으로 부트스트랩 4.0과 거의 없다. 4.0에서 코드가 아닌 눈으로 보이는 차이가 있다면 carousel 아이템 수를 나타내는 아이콘이 원에서 선으로 변한 것 밖에 없다. 이렇듯 눈에 보이는 것은 card외에 별로 없는 것..