프로그래밍 언어/부트스트랩(Bootstrap)139 [bootstrap] 부트스트랩 – 인라인 폼(Inline form) 인라인폼은 가로로 배열된 형태로 태그에 .form-inline 클래스를 사용합니다. file input 에서 lable과 파일 선택 버튼이 세로로 되는데 가로로 보이게 하려면 이렇게 style=”display:inline-block”이라고 넣어주어야 합니다. 레이블이 있고 플레이스홀더의 내용이 중복되는데요. 이럴 경우 레이블을 제거해서 레이블이 나타나지 않게 할 수 있겠지만, 레이블이 없으면 스크린 리더를 사용하는 사용자는 어떤 내용인지 알 수 없게 되어 웹 접근성에 위배됩니다. 이럴 때에 lable 태그에 .sr-only 선택자를 사용합니다. 이 선택자를 사용하면 평상시에는 나타나지 않지만 스크린 리더가 읽을 수 있는 상태가 됩니다. (스크린 리더 : 시력에 장애가 있는 사람을 위해 글자를 읽어주는 기.. 2016. 1. 27. [bootstrap] 부트스트랩 – 폼(form)의 기본 형태 폼의 기본 형태는 다음과 같습니다. … 이 기본 형태 아래에 입력상자 같은 폼의 요소들을 추가하면 됩니다. .form-control 선택자는 입력상자의 스타일을 만들고 너비를 100%로 만들어주므로 input이나 textarea에는 반드시 사용하며, 같은 input 태그라도 type이 file일 때에는 필요하지 않습니다. 2016. 1. 26. [bootstrap] 부트스트랩 – 반응형 테이블 부트스트랩에서는 화면 폭이 좁을 때(768px 이하) 하단에 스크롤바가 나타나며 수평으로 스크롤해서 테이블을 볼 수 있게 했습니다. 태그 외곽에 태그로 감싸서 .table-responsive 클래스를 추가하면 반응형 테이블로 사용할 수 있습니다. … 2016. 1. 26. [bootstrap] 부트스트랩 – 테이블(table) 문맥 클래스(class) 부트스트랩은 에 몇 가지 색상이 있는 클래스를 정의해서 사용합니다. 이를 테이블 태그에 사용하면 행이 해당 색상으로 나타나게 됩니다..active : 특정 행이나 셀에 마우스 오버 색상 적용 .success : 성공 또는 긍정적인 작업 표시 .info : 중립적인 정보 변경이나 작업 표시 .warning : 주의를 필요로 ㅎ는 경고를 표시 .danger : 위험 또는 잠재적으로 부정적인 작업 표시 2016. 1. 26. [bootstrap] 부트스트랩 – .table-condensed 클래스 태그에 .table-condensed 클래스를 추가하면 셀 패딩이 반으로 감소돼 작은 크기의 테이블이 됩니다. 2016. 1. 26. [bootstrap] 부트스트랩 – .table-hover 클래스 태그에 .table-hover 클래스를 추가하면 테이블에 마우스를 올렸을 때 마우스 커서가 있는 행이 다른 색으로 변합니다. 즉, mouseover 효과가 생깁니다. 2016. 1. 26. [bootstrap] 부트스트랩 – .table-bordered 클래스 태그에 .table-bordered 선택자를 추가하면 모든 셀에 테두리가 만들어 집니다. 2016. 1. 26. [bootstrap] 부트스트랩 – .table-stripe 클래스 태그에 .table-stripe 선택자를 추가하면 한 줄 건너 배경색이 달라지는 스트라이프 형태의 테이블이 됩니다. 2016. 1. 26. [bootstrap] 부트스트랩 – .table 클래스 태그에 .table 선택자를 사용하면 각 행의 아래에 테두리가 있는 테이블이 만들어집니다. 2016. 1. 25. [bootstrap] 부트스트랩 – samp 태그 – 프로그램 실행 결과 출력을 나타낼 때 부트스트랩에서 태그는 프로그램 실행 결과 출력을 나타낼 때 사용하며 코딩 폰트로 나타납니다. 2016. 1. 25. [bootstrap] 부트스트랩 – var 태그 – 코드의 변수를 표시하며 이탤릭체로 전환 부트스트랩에서 태그는 코드의 변수를 표시하며 이탤릭체로 전환됩니다. 2016. 1. 25. [bootstrap] 부트스트랩 – pre 태그 – 수직 스크롤바 부트스트랩에서 태그를 사용하면 배경색과 테두리가 생기는데요. 코드가 많을 경우, .pre-scrollable 클래스로 max-height가 340px로 제한되면서 수직 스크롤바가 나타납니다. 2016. 1. 25. [bootstrap] 부트스트랩 – pre 태그 – 배경색과 테두리가 만들어 집니다. pre 태그를 사용하면 배경색과 테두리가 만들어집니다. 단락 구분을 하거나 여러줄의 코드를 보여줄 때 유용합니다. 2016. 1. 25. [bootstrap] 부트스트랩 – kbd 태그 – 키보드로 입력한다는 것을 알려주는 용도 태그는 부트스트랩에서 키보드로 입력한다는 것을 알려주기 위해 사용합니다. 2016. 1. 25. [bootstrap] 부트스트랩 – code 태그 태그로 HTML 태그에 강조의 효과를 나타낼 수 있습니다. 2016. 1. 20. 이전 1 ··· 5 6 7 8 9 10 다음