반응형 웹사이트 만들기 (부트스크랩 프레임 워크 2 - CSS)

부트스크랩에는 폼이나 버튼, 이미지, 표 등 웹 문서 안에서 사용하는 여러 요소들에 이용할 수 있는 스타일이 미리 만들어져 있어서 스타일을 만들고 수정하는 번거로움 없이 그대로 가져다 사용할 수 있습니다.

회원 가입 양식이나 게시판 양식 등 사용자가 입력할 부분에 사용하는 폼 요소들은 화면에 보기 좋게 나열하기 위해 css를 이용해야 합니다. 물론 한 번에 끝나지 않고 여러 번 화면으로 확인해 가며 수정해야 하는데요, 부트스크랩을 이용하면 폼 요소들도 간단히 만들 수 있습니다. 그래서 사이트를 만들 때 다른 툴을 이용하더라도 폼 부분만큼은 부트스트랩의 css를 가져다 로그인 폼이나 회원 가입 폼을 만들기도 합니다.

.form-inline 클래스

<div class="login"> <form role="form" class="form-inline" name="loginform" id="loginform" action="wp-login.php" method="post"> <div class="form-group"> <label for="user_login">사용자명</label> <input type="text" name="log" id="user_login" class="form-control" placeholder="사용자명"> </div> <div class="form-group"> <label for="user_pass">비밀번호</label> <input type="password" name="pwd" id="user_pass" class="form-control" placeholder="비밀번호"> </div> <div class="form-group"> <label for="rememberme"></label> <input name="rememberme" type="checkbox" id="rememberme" value="forever"> 기억하기 </div> <input type="submit" name="wp-submit" id="wp-submit" class="btn btn-default" value="로그인"> </form>

.sr-only 클래스

<div class="login"> <form role="form" class="form-inline" name="loginform" id="loginform" action="wp-login.php" method="post"> <div class="form-group"> <label for="user_login" class="sr-only">사용자명</label> <input type="text" name="log" id="user_login" class="form-control" placeholder="사용자명"> </div> <div class="form-group"> <label for="user_pass" class="sr-only">비밀번호</label> <input type="password" name="pwd" id="user_pass" class="form-control" placeholder="비밀번호"> </div> <div class="form-group"> <label for="rememberme"> <input name="rememberme" type="checkbox" id="rememberme" value="forever"> 기억하기</label> </div> <input type="submit" name="wp-submit" id="wp-submit" class="btn btn-default" value="로그인"> </form> </div>

.form-horizonta 클래스

부트스트랩을 이용해 폼 요소를 나열하면 레이블 다음 줄에 입력 필드가 표시되는데 <form> 태그에 .form-horizontal이라는 클래스 스타일을 적용하면 레이블을 왼쪽에, 입력 필드는 오른쪽에 표시할 수 있습니다. 이때 부트스트랩의 그리드 시스템을 그대로 적용합니다.

<div class="login"> <form role="form" class="form-horizontal" name="loginform" id="loginform" action="wp-login.php" method="post"> <div class="form-group"> <label for="user_login" class="col-md-2 control-label">사용자명</label> <div class="col-md-10"> <input type="text" name="log" id="user_login" class="form-control" placeholder="사용자명"> </div> </div> <div class="form-group"> <label for="user_pass" class="col-md-2 control-label">비밀번호</label> <div class="col-md-10 col-sx-8"> <input type="password" name="pwd" id="user_pass" class="form-control" placeholder="비밀번호"> </div> </div> <div class="form-group"> <div class="col-md-offset-2 col-md-10"> <label for="rememberme"> <input name="rememberme" type="checkbox" id="rememberme" value="forever"> 기억하기 </label> </div> </div> <div class="form-group"> <div class="col-lg-offset-2 col-lg-10"> <input type="submit" name="wp-submit" id="wp-submit" class="btn btn-default" value="로그인"> </div> </div> </form> </div>

.form-control 클래스

부트스크랩에서 <input> 태그에 .form-control 클래스 스타일을 적용하면 폼 요소의 너비는 자동으로 100%로 설정되지만 부트스크랩의 그리드 시스템을 이용하여 폼 요소의 너비를 조절할 수도 있습니다. 

데스크톱 화면 - 태블릿 화면 - 모바일 화면

<div class="login"> <form role="form" name="loginform" id="loginform" action="wp-login.php" method="post"> <div class="row"> <div class="form-group col-md-5 col-sm-6"> <label for="user_login" class="sr-only">사용자명</label> <input type="text" name="log" id="user_login" class="form-control" placeholder="사용자명"> </div> <div class="form-group col-md-5 col-sm-6"> <label for="user_pass" class="sr-only">비밀번호</label> <input type="password" name="pwd" id="user_pass" class="form-control" placeholder="비밀번호"> </div> <div class="form-group col-md-2 col-sm-12"> <input type="submit" name="wp-submit" id="wp-submit" class="btn btn-primary btn-block" value="로그인"> </div> </div> </form> </div>

.col-md-* 클래스 스타일을 사용해 5칼럼, 5칼럼, 2칼럼씩 배치하고, 태블릿 이하 화면일 경우 .col-sm-* 클래스 스타일을 사용해 6칼럼, 6칼럼, 12칼럼씩 배치하는 것입니다. .col-sm-* 클래스 스타일을 사용할 때 전체가 12칼럼이 넘기 때문에 모바일 화면일 경우 두 줄로 표시됩니다.

로그인 폼 스타일

<style> .login { background:#fff; width:620px; margin: 30px auto ; padding:20px; border:1px solid #e5e5e5; -moz-box-shadow: rgba(200,200,200,.7) 0 4px 10px -1px; -webkit-box-shadow: rgba(200,200,200,.7) 0 4px 10px -1px; box-shadow: rgba(200,200,200,.7) 0 4px 10px -1px; } .login h1 a { background-image:url(images/logo.png); background-repeat:no-repeat; background-position:center top; background-size:189px 47px; height:47px; margin:0 auto 25px; padding:0; width:189px; text-indent:-9999px; overflow:hidden; display:block; } .login h1 a { width:100%;} .login form { margin:0px auto; border:none; margin-top:30px; padding:20px; } </style>

버튼 스타일 

버튼은 <button> 태그나 <input type="submit">, <input type="button"> 태그, <a> 태그등을 이용해 만들 수 있습니다. <form> 태그가 아닌 다른 곳에서 버튼을 사용할 경우 웹 표준에 맞게 HTML5의 <button> 태그를 사용하는 것이 좋습니다. 

1. 버튼 색상 변경

 일단 버튼이 만들어졌다면 부트스크랩의 버튼 클래스 스타일을 적용해서 그 의미나 중요도에 따라 여러 색상으로 표현할 수 있습니다.

스타일	의미
btn	버튼 형태 지정
btn-default	기본 버튼 스타일
btn-primary	중요한 내용 강조
btn-success	성공이나 긍정적인 느낌
btn-info	정보성 내용
btn-warning	주의, 사용자 눈낄 끌기
btn-danger	위험하거나 부정적인 느낌
btn-link	버튼을 텍스트 링크처럼 표시

2. 버튼 크기 조절

스타일	의미
(없음)	기본 버튼
.btn-lg	큰(large) 버튼
.btn-sm	작은(small) 버튼
.btn-xs	아주 작은(extra small) 버튼

3. 버튼 너비 조절

버튼은 보통 텍스트 길이를 기준으로 버튼 너비가 정해집니다. 하지만 디자인에 따라 더 넓게 표시해야 할 경우도 있는데 이 때 .btn-block 스타일을 사용해 버튼을 블록 레벨로 만들면 버튼을 둘러싸는 상위 요소 너비의 100% 만큼의 버튼을 만듭니다.