본문 바로가기

분류 전체보기751

[bootstrap] 부트스트랩 – 알림메시지(alerts) – 링크 추가 메시지 내부에 링크를 추가할 때에는 .alert-link 선택자를 사용합니다.Well done! You successfully read this important alert message 2016. 2. 3.
[bootstrap] 부트스트랩 – 알림메시지(alerts) Well done! You successfully read this important alert message. .alert 와 색상을 위한 선택자를 추가함으로 에러나 중요 알림 메시지를 출력할 수 있습니다. ×Close Warning! Better check yourself, you’re not looking too good. 알림메시지에 닫기 기능을 추가하려면 .alert-dismissible 선택자 하위에 .close 선택자가, data-dismiss=”alert” 속성이 있어야 합니다. 2016. 2. 3.
[bootstrap] 부트스트랩 – 썸네일 … a 태그에 .thumnail 선택자를 넣어주고 holder.js 자바스크립트 플러그인을 사용하면 간단하게 더미 이미지를 만들 수 있는데요. http://imsky.github.io/holder 여기에서 holder.js 파일을 다운로드 받아서 사용하시면 됩니다. 2016. 2. 3.
[이클립스] 톰캣 실행시 타임아웃에 걸렸을 때 타임아웃 늘려주는 방법 이클립스에서 톰캣 실행시 다음과 같은 에러가 났다면? Server Tomcat v8.0 Server at localhost was unable to start within 45 seconds. If the server requires more time, try increasing the timeout in the server editor. 타임아웃에 걸린 겁니다.즉, 톰캣이 시작될 때 45초 시간 제한에 걸려서 작동이 중단된 겁니다.이럴 땐 간단하게 Timeout 시간을 늘려주면 됩니다. 톰캣을 마우스로 더블클릭하시고 Timeouts 시간이 시작할 때는 45초, 중지할 때는 15초로 돼 있네요.즉, 시작은 45초, 중지는 15초 이내에 완료되어야 실행이 된다는 의미입니다. 저는 450, 150으로 수정했.. 2016. 2. 2.
[bootstrap] 부트스트랩 – 페이지 헤더 .page-header 선택자를 사용하여 페이지나 글의 제목으로 사용합니다. .small 태그를 이용해 부제를 만들수도 있습니다. Example page header Subtext for header 2016. 2. 2.
[bootstrap] 부트스트랩 – 점보트론 .jumbotron 선택자를 사용하며 내부의 모든 글자 크기가 커집니다.… 또한 .container와 .jumbotron의 위치에 따라 레이아웃이 달라집니다. … … 2016. 2. 2.
[bootstrap] 부트스트랩 – 버튼 – 레이블(Lable)과 배지(Badge) 글자나 숫자를 하이라이트하기 위해 사용하며 글자는 레이블, 숫자는 배지를 사용합니다. 레이블은 span 태그에 .lable 선택자와 색상 변경을 위한 선택자를 사용합니다.Default Primary Success Info Warning Danger 배지는 선택자가 없으며, 버튼에 배지를 추가해 사용하면 버튼의 색상에 따라 배지의 배경색이 바뀝니다. 이것은 필(Pills)에도 적용됩니다. 배지를 필에 사용할 경우 선택된 필이 하이라이트 돼서 버튼 형태로 되면 배지의 배경 색도 흰색으로 바뀝니다. Inbox 42 Messages 4 숫자가 없을 경우, 예를 들어 읽을 메시지가 없으면 이 요소에 :empty 선택자를 사용하므로 IE8에서는 제대로 동작하지 않습니다. 2016. 2. 2.
[bootstrap] 부트스트랩 – 이전, 다음 버튼 이전, 다음 버튼만 있는 간단한 형태의 페이지 처리입니다. ul 태그에 .pager 선택자를 사용합니다. 2016. 2. 2.
[bootstrap] 부트스트랩 – .nav – 페이지 번호의 크기 조절하기 .pagination-lg와 .pagination-sm 두 개의 선택자로 크기를 조절합니다. 기본 크기를 포함해 총 3개의 사이즈가 있습니다.… … 2016. 2. 2.
[bootstrap] 부트스트랩 – .nav – 페이지 번호 활성, 비활성 상태 처리하기 페이지 번호에 활성, 비활성 처리는 다음 선택자만 넣어주면 됩니다..active : 활성 .disabled : 비활성 더 이상 페이지를 이동할 수 없는 경우 왼쪽이나 오른쪽 화살표에 .disabled 선택자를 넣어주면 됩니다. 2016. 2. 2.
[bootstrap] 부트스트랩 – .nav – 페이지 번호 보여주기 페이지도 내비게이션에 해당하므로 nav 태그를 사용하고 목록이므로 ul 태그에 .pagination 선택자를 사용합니다. 2016. 2. 2.
[bootstrap] 부트스트랩 – 내비게이션 메뉴바 [냅바(navbar)] – 브레드크럼(Breadcrumb) 페이지의 상단에서 메뉴나 카테고리의 순서를 표시할 때 사용합니다. 순서있는 목록 태그인 ol에 .breadcrumb 선택자를 사용합니다. 2016. 2. 2.
[bootstrap] 부트스트랩 – 내비게이션 메뉴바 [냅바(navbar)] – 브랜드 이미지 내비게이션 바에 로고를 추가할 경우 .navbar-brand 선택자가 있는 a 태그에 img 태그를 사용해 삽입합니다. 2016. 2. 2.
[bootstrap] 부트스트랩 – 내비게이션 메뉴바 [냅바(navbar)] 내비게이션 바에는 .navbar 선택자를 기본으로 사용합니다..navbar-default : 밝은색 .navbar-inverse : 어두운색 그리고 .container-fluid 선택자를 바로 하위에 사용해 주어야 합니다. … 768px 해상도 이상에서는 아래와 같이 정상적으로 메뉴가 보여지지만 768px 해상도 미만에서는 아래와 같이 메뉴가 숨겨져서 나옵니다. 2016. 2. 2.
[bootstrap] 부트스트랩 – .nav – 탭 – 필(Pills) 전체 정렬 전체 너비로 필을 사용하려면 .nav-justified 를 넣어주면 됩니다. 아래 실행에서 [새창으로 확인] 클릭하셔서 확인하세요~ 2016. 2. 1.