모바일메뉴

EOND

검색
마이페이지
홈페이지제작솔루션 CMS WEB 툴팁 위키 지식인 CMS 포럼 경매모듈 질문•답변
HTML5/CSS3
글쓰기
-
가
+
[부트스트랩] 부트스트랩 커스텀 padding, margin
이온디
2016.06.05 09:25
204
0
https://eond.com/376365
object(HotopayModel)#885 (23) { ["error"]=> int(0) ["message"]=> string(7) "success" ["variables"]=> array(0) { } ["httpStatusCode"]=> int(200) ["module"]=> string(7) "hotopay" ["module_info"]=> NULL ["origin_module_info"]=> NULL ["module_config"]=> NULL ["module_path"]=> string(52) "/home/eond/web/eond.com/public_html/modules/hotopay/" ["xml_info"]=> NULL ["module_srl"]=> NULL ["mid"]=> NULL ["act"]=> NULL ["template_path"]=> NULL ["template_file"]=> NULL ["layout_path"]=> NULL ["layout_file"]=> NULL ["edited_layout_file"]=> NULL ["stop_proc"]=> bool(false) ["user"]=> object(Rhymix\Framework\Helpers\SessionHelper)#884 (20) { ["member_srl"]=> int(0) ["user_id"]=> NULL ["user_name"]=> NULL ["nick_name"]=> NULL ["email_address"]=> NULL ["phone_number"]=> NULL ["homepage"]=> NULL ["blog"]=> NULL ["birthday"]=> NULL ["denied"]=> NULL ["status"]=> NULL ["is_admin"]=> string(1) "N" ["is_site_admin"]=> NULL ["profile_image"]=> NULL ["image_name"]=> NULL ["image_mark"]=> NULL ["signature"]=> NULL ["description"]=> NULL ["group_list"]=> array(0) { } ["menu_list"]=> array(0) { } } ["request"]=> object(Rhymix\Framework\Request)#10 (13) { ["method"]=> string(3) "GET" ["compat_method"]=> string(3) "GET" ["url"]=> string(28) "coding/376365/comment/465170" ["hostname"]=> string(8) "eond.com" ["domain"]=> NULL ["protocol"]=> string(5) "https" ["callback_function"]=> string(0) "" ["_route_status":protected]=> int(200) ["_route_options":protected]=> object(stdClass)#11 (5) { ["cache_control"]=> bool(true) ["check_csrf"]=> bool(true) ["is_forwarded"]=> bool(false) ["is_indexable"]=> bool(true) ["enable_session"]=> bool(true) } ["module"]=> string(5) "board" ["mid"]=> string(6) "coding" ["act"]=> string(16) "dispBoardContent" ["args"]=> array(5) { ["category"]=> string(6) "327266" ["document_srl"]=> string(6) "376365" ["comment_srl"]=> string(6) "465170" ["mid"]=> string(6) "coding" ["act"]=> string(16) "dispBoardContent" } } ["ajaxRequestMethod"]=> array(2) { [0]=> string(6) "XMLRPC" [1]=> string(4) "JSON" } ["gzhandler_enable"]=> bool(true) }

bootstrap의 그리드란 colrumn 을 12개로 나눠 화면을 분할하여 보여주는 것을 말합니다.

colrumn의 약자인 col 과 화면 사이즈를 나타내는 lg, md, sm, xs 그리고 화면 분할갯수 1~12까지를 

col-md-12 이런 식으로 나타내는 것이죠.

 

이것을 padding과 margin에도 적용해보면 어떨까 해서 만들어본 클래스입니다.

평소엔 이렇게 썼습니다.

.padding0_m{padding:0 0 0 0;}
.padding10_m{padding:0 10px;}
.blind_m{display:none;}
.display_m,
.block_m{display:block;width:100%;clear:both;}

.padding0_m 은 모바일 화면에서는 padding0 으로 한다는 뜻입니다.

이것을 부트스트랩의 xs 등 화면 사이즈 개념을 적용하여 아래와 같이 만들어보았습니다.

.pd-xs-0    { padding:0 0px; }
.pd-xs-5   { padding:0 5px; }
.pd-xs-10  { padding:0 10px; }

.mg-xs-0   { margin:0 0px; }
.mg-xs-5   { margin:0 5px; }
.mg-xs-10  { margin:0 10px; }

실효성이 어느 정도일지는 모르겠습니다만-_-?;;

숫자 부분은 1부터 10까지 5px로 늘어나거나 10px로 늘어나게 작성하는 것보다

좀더 직관적으로 바로 padding 간격을 숫자로 표기하는 것이 나을 것 같아서 저렇게 작성했습니다.

프로젝트마다 자주 사용하는 padding이나 margin값은 정해져있으니깐요 ;)

 

그 외에 몇 가지 작성 방법의 예를 만들어 봤습니다. 여러분은 어떤 게 더 직관적으로 느껴지시나요?

/* 부트스트랩의 기존 규칙에 맞게 작성된 예 */
.pd-xs-0   { padding:0 0px; }
.pd-xs-5   { padding:0 5px; }
.pd-xs-10  { padding:0 10px; }

/* 부트스트랩의 화면 규격을 지키면서 개인적으로 편리한 작성예 */
.pd0-xs { padding:0 0px; }
.pd5-xs { padding:0 5px; }
.pd10-xs { padding:0 10px; }

/* 너무 긴 예(?) - 평소 사용하던 방식;; */
.padding0_m{padding:0 0 0 0;}
.padding10_m{padding:0 10px;}

/* 너무 많이 줄인 예(?) */
.pd0_m{/* 모바일에서의 패딩 0 */}
.pd0_d{/* 데스크탑에서의 패딩 0 */}
0
0

라이믹스는 이온디와 함께

목록
글쓰기 신고 스크랩

댓글 0

댓글작성칸으로
HTML5/CSS3
-
가
+
전체 웹표준 웹접근성 부트스트랩 반응형 웹 UI HTML5 jQuery Script CSS Meta Table Form 미분류 PHP Flash CGI DIV 웹폰트 크로스브라우징 위지윅에디터 svg 프레임워크 map swiperjs
1
글쓰기
메뉴닫기
profile
로그인 해주세요.
자유게시판 글쓰기 저장함 쪽지
전체글보기 인기글 인기멤버 태그

전체 게시판

닫기

마이페이지

로그인을 해주세요

네이버로 로그인
ID/PW찾기 회원가입