본문 바로가기

프로그래밍 언어/부트스트랩(Bootstrap)139

[bootstrap] 부트스트랩 – 입력상자에 체크박스와 라디오버튼 추가 기본 형태의 입력 박스에 체크박스와 라디오버튼을 추가한 형태입니다. 2016. 2. 1.
[bootstrap] 부트스트랩 – 입력상자 그룹(Input groups)의 사이즈 입력상자 그룹의 크기는 총 3개입니다.기본 크기 .input-group-lg .input-group-sm 다음과 같이 .input-group 과 함께 사용하면 됩니다.… 2016. 2. 1.
[bootstrap] 부트스트랩 – 입력상자 그룹(Input groups) – 기본 형태 부트스트랩에서 다음과 같이 입력상자를 그룹으로 묶을 수 있습니다. 아래와 같이 .input-group과 .input-group-addon 선택자를 사용합니다. @ 2016. 2. 1.
[bootstrap] 부트스트랩 – 버튼 그룹의 다양한 크기 버튼 그룹은 총 3가지 크기가 있는데요. 사이트에 맞게 class에 사용하시면 됩니다..btn-group-lg .btn-group-sm .btn-group-xs 2016. 1. 31.
[bootstrap] 부트스트랩 – 버튼 툴바(버튼 그룹의 묶음) 버튼을 그룹으로 묶은 것을 다시 그룹화 한 것이 버튼 툴바랍니다. .btn-toolbar 와 role=”toolbar” 속성을 추가해서 구현합니다. … … … 2016. 1. 31.
[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.
[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.

티스토리툴바