부트스트랩 4 알파 사용

전에도 적었지만 부트스트랩 4.0 정식 버전은 아니고 알파가 오래전에 나왔다. 4.0 알파 버전은 불안하여 정식이 나올때까지 기다리기로 했다. 어떻게 4.0 알파를 사용할까 생각했는데 JSFiddle이라는 툴을 삽입하면 되겠다는 것을 생각했다. 티스토리는 HTML을 지원하므로 그 JSFiddle 툴을 삽입할 수 있다. 아래 보이는 것은 3.*에서는 지원하지 않고 4.0에서 지원할 카드(card)라는 것이다. HTML이라는 것을 보면 card가 있을 것인데 4.0에서 추가될 것이다. 결과를 보기 위해 result를 클릭해보기 바란다. 참고로 이 블로그 스킨은 3.3.6 정식을 사용해서 만들었다.

위는 JSFiddle 툴의 1번 Embed를 클릭하여 2번을 보면 페이지에 삽입할 수 있는 소스가 나오면 티스토리 에디터에 있는 외부컨텐츠나 HTML을 클릭하여 원하는 곳에 삽입하면 된다. JSFiddle을 사용해 본 사람은 알겠지만 외부 자바스크립트 파일이나 CSS 파일을 삽입할 수 있어서 좋다. 위 결과는 부트스트랩 4.0 알파인데 외부 CSS, 자바스크립트 파일로 3개를 사용했다. 

아랫그림 HTML에 나온 Card는 부트스트랩 4.0 알파에 추가된 기능으로 3.* 이하에는 없으니 알았으면 한다. 

- 팩스 11장 무료로 보내기 -

위와 같은 것을 네이버 블로그에 삽입하려고 개고생하지 말았으면 한다. 왜냐하면 안되니까. 이전 에디터가 HTML을 지원하지만 해당 스크립트를 지원하지 않는다. 내가 알기로 네이버 블로그는 스크립트는 지원하지 않으며 태그도 네이버 운영자가 허락하지 않는 태그도 지원하지 않는다 알고 있다. 티스토리 에디터에 있는 HTML과 네이버 블로그에서 볼 수 있는 HTML을 같은 HTML이 아니다.  바른 예는 아니지만 블로그라고 모두 같은 블로그는 아니다.

아래 그림 1번을 보면 JSFiddle인 경우 외부에서 불러올 수 있다. 부트스트랩 4.0 알파에는 CSS, Javascript(자바스트립트)가 3.*과 다르며 jQuery도 3.1.1을 한다. 나는 3번에 jQuery 3.1.1을 설정했다. 부트스트랩 버전은 2.*, 3.*, 4.0이 있으며 각 버전마다 그리드 방식과 여러 방식이 다르다. 각 버전 별로 그리드 방식의 차이만 적자면 2인 경우는 span을 사용했다. 3에서는 col-*을 사용했는데 4.0 알파를 보면 col-xs가 사라졌고 col-xl과 col이라는 것이 새롭게 생겼다.

MS오피스와 오피스365 차이