본문 바로가기

분류 전체보기751

[bootstrap] 부트스트랩 – 버튼을 그룹(Button group)으로 묶어 사용하기 여러개의 버튼을 그룹으로 묶어 사용할 수 있는데 .btn-group 선택자를 사용합니다. Left Middle Right role=”group” 과 aria-label=”…”은 웹 접근성 측면에서 속성을 추가해 줍니다. 2016. 1. 31.
[bootstrap] 부트스트랩 – 폰트 아이콘(Glyphicons)을 버튼에 사용하기 버튼은 텍스트 없이 사용하면 aria-label 속성을 이용해 의미를 부여합니다. 버튼의 크기(.btn-lg)에 따라서 폰트이 크기도 변경됩니다. 2016. 1. 31.
[bootstrap] 부트스트랩 – 폰트 아이콘을 모아놓은 폰트어썸(Font awesome) 사용하기 폰트 아이콘을 모아놓은 폰트 어썸(Font awesome) 을 사용하면 다양한 아이콘들을 사용하실 수 있습니다. 기본 아이콘은 200개인데 폰트 어썸을 사용하면 훨씬 더 많은 500개 정도의 아이콘을 사용할 수 있고 계속 지속적으로 추가되고 있습니다. 폰트 어썸을 사용하려면 아래 소스를 사이에 넣어주셔야 하구요. 직접 설치하거나 다운로드를 받고 싶다면 아래 링크를 클릭하시면 됩니다. http://fortawesome.github.io/Font-Awesome/ 이 폰트 아이콘을 유료로 파는 곳도 있네요. 참고하세요~ http://glyphicons.com/ 사용법은 태그를 사용하는 방법과 태그에 유니코드를 넣어서 사용하는 두 가지 방법이 있는데요. 어떤 걸 사용하셔도 무방합니다.  폰트 어썸의 class.. 2016. 1. 31.
[bootstrap] 부트스트랩 – 폰트 아이콘(Graphicons) 사용하기 부트스트랩은 3.0 버전부터 폰트 아이콘을 사용합니다. 이전의 그래픽 아이콘인 Glyphicons를 폰트로 변환해서 사용하고 있습니다. 폰트 아이콘은 폰트의 성질을 그대로 갖고 있으므로 색상은 물론 font-size 속성을 이용해 크기도 변경할 수 있습니다. 기본 사용법은 span 태그를 사용하고 span 태그에는 내용이 없어도 아이콘이 표시됩니다. span 태그 안에 글자를 넣으면 아이콘 뒤에 글자가 표시됩니다. aira-hidden=”true”는 웹 접근성 측면에서 표시해 줍니다. 아이콘이 유니코드로 된 글자기 때문에 읽지 못하도록 차단하는 역할을 합니다. http://getbootstrap.com/components/ 이곳에 가면 수많은 아이콘들을 보실 수 있는데요. 아이콘에 있는 이름을 class.. 2016. 1. 31.
[bootstrap] 부트스트랩 – 반응형 선택자 반응형 선택자는 특정 기기를 대상으로 노출을 제한하는데 사용합니다. 모바일 환경에서는 모든 데스크톱 웹사이트에 있는 모든 콘텐츠를 보여줄 필요가 없는데요. 이럴 때 반응형 선택자를 삽입해주면 됩니다. 선택자는 하나 이상 동시에 사용할 수 있습니다.스마트폰(768px 미만)태블릿(768px 이상)데스크톱(992px 이상)대형 화면(1200px 이상).visible-xs-*보임안보임안보임안보임.visible-sm-*안보임보임안보임안보임.visible-md-*안보임안보임보임안보임.visible-lg-*안보임안보임안보임보임.hidden-xs안보임보임보임보임.hidden-sm보임안보임보임보임.hidden-md보임보임안보임보임.hidden-lg보임보임안보임안보임 별표가 있는 .visible-*-* 선택자는 다시 세.. 2016. 1. 31.
[bootstrap] 부트스트랩 – 이미지 대체 요즘은 이미지를 거의 사용하지 않고 아이콘도 모두 폰트 아이콘으로 대체되고 있는데요. 로고만은 이미지로 사용할 수밖에 없습니다. 대부분 사이트에서 로고가 위치한 곳에 사이트 제목도 추가하게 되는데, 이 제목을 보이지 않게 하기 위해 예전에는 text-indent:-9999px와 같이 설정하곤 했습니다. 그런데 이 방법은 글자를 오른쪽에서 왼쪽으로 쓰는 아랍권 국가에서는 하단에 수평 스크롤 바가 생성되기 때문에 적절하지 않은 방식입니다. 이를 위해 사용할 수 있는 선택자가 .text-hide입니다.제목 h1 태그에 대해서 CSS로 배경 이미지로 로고를 설정하면 글자는 보이지 않고 로고만 나타납니다. 사이트 이름이 투명 처리돼서 보이지는 않지만 검색 엔진은 글자를 알아보므로 검색 엔진 최적화에 필요합니다. 2016. 1. 31.
[MySQL] 테이블, 컬럼에 코멘트(comment) 달고 phpMyAdmin에서 확인하기 MySQL의 테이블과 컬럼에도 코멘트를 넣을 수 있습니다. 코멘트라 함은 테이블이나 컬럼을 설명하는 문구인데요. CREATE TABLE 구문의 컬럼과 테이블 끝에 COMMENT '설명' 이렇게 넣어주시면 됩니다.쿼리문에서는 대소문자 구별 안하는 거 아시죠? (대문자든 소문자든 편한대로 사용하시면 됩니다.) 예제를 보면 더 이해가 쉽겠죠? CREATE TABLE MOA_QA ( SEQ_NOBIGINT auto_increment NOT NULL KEY COMMENT '일련번호', TITLEVARCHAR(300) NOT NULL COMMENT 'QA 제목', SORTVARCHAR(20) NOT NULL COMMENT 'QA 형식(객관식/OX/단답형)', ANSWERVARCHAR(300) NOT NULL COM.. 2016. 1. 31.
[티스토리] Tistory에 스팸 댓글 차단 플러그인 Akismet 설정하기 (워드프레스닷컴 계정 사용하여 무료로 이용하기) 티스토리에 Akismet이라는 플로그인이 댓글 스팸을 차단해 주도록 지원을 해주고 있는데요.Akismet은 세계적인 댓글 스팸 프로그램입니다.믿고 사용할 수 있는 플러그인이죠.근데, 문제는 이게 유료인데요.워드프레스닷컴과 연계된 Akismet Key를 받으면 무료로 사용이 가능합니다. 사용 방법은 다음과 같습니다. 1. 워드프레스닷컴(http://wordpress.com)에 무료 가입하고 로그인하기2. 워드프레스닷컴과 연계된 Akismet Key 받기 (https://akismet.com/wordpress/)3. Akismet Key를 티스토리에 입력하기 1. 워드프레스닷컴에 무료 가입하고 로그인하기http://wordpress.com여기 가셔서 가입한 후 로그인을 하시고 로그인 한 상태로 놔두세요.아래.. 2016. 1. 30.
[Wordpress] 워드프레스에 스팸 댓글 차단 플러그인 Akismet 설치하기 제가 처음에 티스토리를 운영하면서 스팸 댓글 땜에 머리가 아팠는데요.지금은 티스토리에서 Akismet이라는 댓글 방지 플러그인을 지원해줘서 잘 사용하고 있습니다.덕분에 스팸이 거의 없는 상태가 되었는데요. 워드프레스에도 Akismet 플러그인을 설치하면 스팸 방지가 될꺼라 생각합니다.Akizmet이 Wordpress.com과 제휴를 맺었나 봅니다.Wordpress.com은 워드프레스로 가입형 블로그를 운영할 수 있는 곳인데요.이곳에서 무료 워드프레스 계정을 만들어서 블로그를 운영할수도 있습니다. http://wordpress.comAkismet은 이 워드프레스닷컴의 계정이 있어야 key를 받을 수가 있으므로 먼저 가입하시기 바랍니다. 먼저, 워드프레스 관리자페이지의 플러그인 메뉴로 가세요. Akismet.. 2016. 1. 30.
[티스토리] Tistory 글내용에서 저작권표시(CCL) 아이콘 안 보이게 하기 티스토리에서 글을 쓸 때 저작권 표시 아이콘을 표시할지 여부를 선택할 수 있습니다.이 글을 다른 사람들이 마음대로 사용할 수 있는지 여부죠. 글 내용 하단에 우측에 보이는 아이콘이 있는 이 부분입니다.저작자 표시 YES 상업적 이용 YES 컨텐츠 변경 YES 티스토리에서 별다른 설정을 하지 않았다면 이렇게 나올 겁니다. 저 같은 경우는 컨텐츠를 그대로 가져가도 크게 신경을 쓰지 않기 때문에 사실 이 부분이 필요 없는데요.그렇다면, 이 아이콘을 보여줄 필요가 없겠죠? [관리자페이지 > 글 설정]에 가서 CCL에 체크돼 있는 걸 체크해제하세요. 원래는 아래처럼 CCL에 체크가 돼 있었을 겁니다. 그럼, 글쓰기 화면으로 가볼까요? 기존에 썼던 글을 보면 CCL에 체크가 돼 있는 걸 보실 수 있습니다.체크해제를.. 2016. 1. 30.
[bootstrap] 부트스트랩 – 스크린 리더, 키보드 내비게이션 콘텐츠 일반 상태에서는 보이지 않지만 스크린 리더 사용자에게만 노출되게 하려면 .sr-only 선택자를 사용하며, 키보드를 사용하여 포커스 되게 하려면 .sr-only .sr-only-focusable 이렇게 사용하면 됩니다.콘텐츠로 이동 스크린 리더 사용자가 아니라면 아래 실행에서는 나타나지 않습니다. 2016. 1. 30.
[bootstrap] 부트스트랩 – 콘텐츠 보이기와 감추기 콘텐츠를 보이고 감추는 클래스들입니다. .invsible은 콘텐츠는 보이지 않지만 공간은 그대로 남아 있습니다.보이기 감추기 공간은 그대로 두고 감추기 2016. 1. 30.
[bootstrap] 부트스트랩 – 블록을 가운데로 정렬하기 너비가 정해진 요소를 중앙으로 배치할 때 .center-block 클래스를 사용하면 됩니다.가운데 정렬 2016. 1. 30.
[bootstrap] 부트스트랩 – 빠른 플로트(Quick float)와 클리어픽스(Clearfix) 선택자의 삽입만으로 float이 가능해서 빠른 플로트라 부릅니다. 플로트 되고 있는 요소는 아래의 요소와 겹치므로 .clearfix 선택자를 사용해야 겹치지 않습니다. 아래 샘플에서 .clearfix를 사용하지 않으면 윗줄과 아랫줄이 겹쳐서 보여집니다.좌측 글자 우측 글자 아랫 글자. clearfix를 사용하지 않으면 윗줄과 겹쳐서 보여집니다. 2016. 1. 30.
[bootstrap] 부트스트랩 – 캐럿(Carets) 드롭다운 메뉴에서 하위 메뉴가 있을 때 표시되게 합니다. 2016. 1. 30.

티스토리툴바