cdn의 연결과 버튼 입맛대로 바꾸기.
코딩문자 배우기 이번 시간에는 지난번에 이어 페스트붓 1.6.1의 기본 html 소스를이용해 작동 원리와 코드가 가진 요소에 대해 알아 보고 그것을 이용해서 새롭게 응용 적용해 보는 공부를 해 보도록 합니다.
페스트붓의 기본 프레임워크가 부트스트랩을 기반으로 하고 있다는 것은 지난 시간에 인지한 내용 이구요 현재 제 스킨의 폰트와 아이콘들은 폰트어워섬의 cdn으로 제공되고 있죠
부트 스트랩의 cdn링크로 다양한 버튼을 블로그의 메뉴바 와 폼에 적용 해 블로그를 다양하게 꾸밀수가 있습니다.
아래 부트스트랩이 빌더 형식으로 제공 하고 있는다양한 버튼 그룹 입니다.
아래는 현재 제 블로그의 검색리스트에 채택한 버튼의 모양 입니다.
위버튼들은 본문 검색 리스트의 세가지 형태의 리스트를 각 버튼들이 제어 하고 있는데요 위의 부트스트랩 목록중 default형 버튼을 채택한 모습 입니다.
아래 의 그림 모양의 버튼 입니다.
default
아래의 그림을 살펴 보면
코멘트와 댓글 달기의 폼 버튼에 채택한 버튼은 위의 목록중 primary형 을 채택한 모습입니다.
구별 해주고 있다는걸 알수 있을것 같습니다.
primary트랙백에 채택된버튼은 info 형버튼 입니다.info부트스트랩에서는 이렇게 보면 각 버튼은 사용처에 따라 색상으로구별 해주고 있다는걸 알수 있을것 같습니다.
주의나 경고용은 주황색 위험을 나타낼때의 경우는 적색 버튼을 채택 하고 있네요
그럼 자신에게 맞도록 컬러나 텍스트를 수정 할수는 없는 걸까요?
당연히 자기에게 맞도록 입맛대로 바꿀수는 있습니다.
그러나 부트스트랩과 링크된 경우 는 입맛대로 바꾸는것은 제한적 일 수 있습니다.그러나 에디터로는 입맛대로 바꿀수가 있죠 그럼 이번에는 위 버튼의 텍스터와 컬러를 변경 해보도록 합니다.
먼저 텍스터를 손가락 모형으로 변경 해 봤습니다
info ↓이번엔 배경 컬러를 바꾸어 봅니다.
info ↓이번엔 텍스터 손가락모형의 컬러를 변경 해 봤습니다.
info ↓이번엔 전체 크기를 조절 해 봅니다.
info ↓자 이렇게 입맛대로 바꿀수가 있겠죠
그리고 반드시 기억 할것은 이버튼을 채택 해서 활성화 시키기 위해서는 부트스트랩 CDN( Contents Delivery Network)을 링크로 연결 해야 한다는 것입니다.
기존 리디즈님의 버젼 cdn으로는 기능은 문제가 없는데요 모양과 형태 컬러가 제대로 반영이
안되므로 부트스트랩 3.0.0버젼 cdn을 링크 해야 합니다.
< link="http://natdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel=stylesheet"/> < link="//natdna .bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />위의 버젼3.0.0 으로 했을때 제대로 구현이 되었습니다.위의 링크 주소를 보면 dna와 cdn이라는 코드가 적색으로 강조해 보여 주고 있는데요
그럼 이 코드는 무엇을 뜻하는 것일까요? dna란 (digital network architecture)의 접두어 로 디지털 네트워크가 연결되는 구조를 설명 하는 것으로 부트스트랩 네트워크의 확장 도메인을 가르키는 것입니다. 즉 다음에 캐싱된 cdn의 위치 연결 주소를 가르킨다고 할수가 있을 것입니다.
그리고 cdn의 의미는 무엇을 뜻할까요? CDN(Contents Delivery Network)의 접두어로 부트스트랩이 제공 하는 일종의 콘텐츠 창고인 클라우드 서비스 라고 할수 있겠죠 보통 브라우져 상에 제공되는 콘텐츠를 서버를 통하지 않고 캐싱이라는 클라우드에 저장해둔 콘텐츠로 제공 함으로서 클라이언트의 호출에 즉각 대응할수있어 구현 속도를 크게 향상 시킬뿐만 아니라 클라이언트끼리의 충돌이 없어 다운되는사태를 일으키지 않아 앞으로의 업체들이 가장 크게 주목 하는 서비스 라고 할수 있을것입니다.
위의 캡쳐그림을 보면 본문 데이터 판넬의 라듸오 폼에는 info형을 배치 했네요
날일 시간그리고 카테고리 와 발행 비공개 전환 버튼의 경우info형의 다른 컬러 이구요 발행수정 버튼은 wrningwarningdel버튼은 danger 버튼형을 채택 했습니다.삭제자 이제 이렇게 기존에 배치 된 형태를 skin edit에서 새로운 모습으로 바꿔 보도록 해보겠습니다.
아래는 관리자 모드의 skin html에디터에 깔려있는 기존의 코드와 구현된 모습 입니다.
↓
아래는 제 블로그 검색 리스트의 기존 코드default를 primary코드로 바꾼후 구현된 모습 입니다.
↓
이렇게 페스트붓1.6.1 반응형 스킨의 판넬과 버튼들을 입맛대로 바꾸어 봤습니다.
오늘은 코딩문자 배우기 페스트붓 버젼 1.6.1의 스킨 에디터 에 기본으로 연결 된 버튼과 연결된 링크 구조에 대해 알아보고 버튼의 속성들을 변경적용 해 보는 시간을 가져 보았습니다.
다음 시간에는 구조화된 속성 치환자에 대해 알아보고 구조화 되어 있는 치환자로 인해 본문의 중간에 삽입 할수 없었든 에드센스 광고를 본문속에 입맛대로 원하는 위치에 삽입 할수 있는 방법에 대해 공부 해 보도록 하겠 습니다.