프로그램공부

툴팁 부트스트랩이용해서 생성하기

제이쿼리, 부트스트랩을 로딩한다

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>

제이쿼리를 정의한다

//부트스트랩 툴팁액션정의
$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

버튼을 정의하고 그안에

데이터토글data-toggle="tooltip"

데이터플레이스먼트는 툴팁의 위치를 정해준다. 옵션으로 top, left, right, bottom 가능 data-placement="bottom"

타이틀을 정의 title="여기있는내용이 툴팁안에 출력된다"

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>

브라우저 폭에 따라서 div 박스의 줄당 배치수를 바꾸고 싶은데요.

예를 들어 폭 100px 짜리 div 박스가 5개가 있다면
폭 1000px 화면에서는

div1 div2 div3 div4 div5

이렇게 배치되고, 폭 200px 화면에서는

div1 div2
div3 div4
div5

이런식으로 배열하고 싶은데요. 이게 자바스크립트를 이용하지 않고도 가능했던거 같은데 혹시 아시는분 계신가요?

답변1

<div style="width:100%; overflow:hidden;">
<div style="float:left; width:100px; height:20px;">1</div>
<div style="float:left; width:100px; height:20px;">2</div>
<div style="float:left; width:100px; height:20px;">3</div>
<div style="float:left; width:100px; height:20px;">4</div>
<div style="float:left; width:100px; height:20px;">5</div>
</div>

답변2

float:left 혹은 display:inline이 줄줄이 붙는 스타일 속성입니다.
div를 예로 드셨으니 이런경우 display:inline-block 속성도 가능한데
지원하지 않는 브라우저도 있으니 float:left(왼쪽 정렬)사용이 가장 좋습니다.

대신 float을 사용하면 꼭 해제(clear)를 해주거나 부모객체에 높이값을 지정해주는게 좋습니다.

DIV Position

static
 - CSS로 특별한 값을 지정해 주지 않아도 적용되는 기본값이다.
 - HTML 파일에서 중첩되지 않은 여러개의 div를 작성하면, 위에서 부터 차곡차곡 쌓이는 기본적인 형태이다.

relative
 - 한개의 div가 있고 relative로 설정할 경우엔 static과 큰 차이는 없다.
 - 하위에 div가 있을 경우엔 하위의 div를 absolute 배열 할 수 있다.

absolute
 - 흔히 레이어라는 개념으로 알고 있는 값이다.
 - div에 top, bottom, right, left 값을 지정해서 원하는 위치에 고정되게 띄울 수 있다.

fixed
 - 기본적으로 absolute와 같다.
 - absolute는 canvas의 스크롤에 따라 올라가고 내려가지만 fixed의 경우는 스크롤에 상관없이 지정한 위치에 고정된다.

inherit
 - 상위에서 지정한 값을 상속한다.

position : absolute(절대위치), relative(상대위치), static(기본값), fixed(고정)

top : 위부터 아래쪽으로 위치
left : 왼쪽부터 오른쪽으로 위치
width : 레이어 가로 길이
height : 레이어 세로 길이
z-index : 레이어 순서(값이 높을수록 위쪽)
visibility : hidden(레이어 숨김), visible(레이어 보임)
background : 레이어 배경색
overflow : visible(정해진 크기 무시하고 모두 보여줌), hidden(정해진 크기만큼만 보여줌, 넘는 내용은 짤림), scroll(수평,수직 스크롤을 보여줌), auto(내용이 넘치는 방향으로 스크롤 보여줌)
font-family : 폰트종류
font-size : 폰트크기
padding-top : 위쪽으로부터의 안쪽 여백
padding-left : 왼쪽으로부터의 안쪽 여백
padding-right : 오른쪽으로부터의 안쪽 여백
padding-bottom : 아래쪽으로부터의 안쪽 여백
※ 레이아웃에 관련된 속성
출처ㅣhttp://hancoma.springnote.com/pages/2206294

float:left - 레이어가 좌측으로 정렬되며, 이후 추가되는 레이어는 옆(좌측)으로 붙게 된다.
float:right - 레이어가 우측으로 정렬되며, 이후 추가되는 레이어는 옆(우측)으로 붙게 된다.
clear:both - 위의 적용이 해제된다.