object(HotopayModel)#1143 (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)#1142 (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/465326"
["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(4) {
["document_srl"]=>
string(6) "376365"
["comment_srl"]=>
string(6) "465326"
["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
댓글작성칸으로