[ HTML&CSS ] [CSS] 기본 설정 CSS
작성일 20-09-08 14:10
페이지 정보
작성자IPFT 조회 214회 댓글 0건본문
* 지속적으로 데이터를 수정 할 예정
* 기본으로 설정해두고 사용하기 편한 css
* 나름의 규칙성이 있어 스스로 추가하기 편안한 css
* 변경하실 내용은 댓글로 남겨주시면 적용해보도록 하겠습니다.
< 폰트 불러오기 >
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<css 파일 상단에 추가>
/*font-family*/
.roboto_font{font-family: 'Roboto', sans-serif;}
.noto_font{font-family: 'Noto Sans KR', sans-serif;}
.Montserrat_font{font-family: 'Montserrat', sans-serif;}
/*font-weight*/
.fw_300{font-weight:300;}
.fw_400{font-weight:400;}
.fw_500{font-weight:500;}
.fw_600{font-weight:600;}
.fw_700{font-weight:700;}
.fw_800{font-weight:800;}
/*font-size*/
.fz_0{font-size:0;}
.fz_12{font-size:12px;}
.fz_14{font-size:14px;}
.fz_16{font-size:16px;}
.fz_18{font-size:18px;}
.fz_20{font-size:20px;}
.fz_22{font-size:22px;}
.fz_24{font-size:24px;}
.fz_26{font-size:26px;}
.fz_28{font-size:28px;}
.fz_40{font-size:40px;}
.fz_44{font-size:44px;}
.fz_60{font-size:60px;}
/*font-color*/
.fc_404040{color:#404040;}
.fc_8c8c8c{color:#8c8c8c;}
.fc_0f0f0f{color:#0f0f0f;}
.fc_36a7d7{color:#36a7d7;}
.fc_666666{color:#666666;}
.fc_8e8e8e{color:#8e8e8e;}
.fc_fff{color:#fff;}
.fc_2c3c1b{color:#2c3c1b;}
.fc_d7dad4{color:#d7dad4;}
/*display*/
.dp_inb{display:inline-block;}
.dp_bl{display:block;}
/*text-align*/
.tt_an_c{text-align:center;}
.tt_an_l{text-align:left;}
.tt_an_r{text-align:right;}
/*vertical-align*/
.vl_an_t{vertical-align:top;}
.vl_an_m{vertical-align:middle;}
.vl_an_b{vertical-align:bottom;}
/*float*/
.f_le{float:left;}
.f_ri{float:right;}
/*padding*/
.pd_tb_rl_3_6{padding:3px 6px;}
.pd_tb_20{padding:20px 0px;}
.pd_t_95{padding-top:95px;}
.pd_t_100{padding-top:100px;}
.pd_t_140{padding-top:140px;}
/*MARGIN*/
.mar_0_auto{margin:0 auto;}
.mar_right_5{margin-right:5px;}
.mar_right_15{margin-right:15px;}
.mar_right_51{margin-right:51px;}
.mar_m_20{margin:0 20px;}
.mar_t_10{margin-top:10px;}
.mar_t_20{margin-top:20px;}
.mar_t_30{margin-top:30px;}
.mar_t_35{margin-top:35px;}
.mar_t_40{margin-top:40px;}
.mar_t_45{margin-top:45px;}
.mar_t_50{margin-top:50px;}
.mar_t_55{margin-top:55px;}
.mar_t_65{margin-top:65px;}
.mar_t_70{margin-top:70px;}
.mar_t_85{margin-top:85px;}
.mar_t_90{margin-top:90px;}
.mar_t_95{margin-top:95px;}
.mar_t_126{margin-top:126px;}
.mar_t_100{margin-top:100px;}
.mar_t_105{margin-top:105px;}
.mar_t_140{margin-top:140px;}
.mar_t_150{margin-top:150px;}
.mar_t_147{margin-top:147px;}
.mar_b_15{margin-top:15px;}
/*min-height*/
.mh46{min-height:46px;}
/*height*/
.h100{height:100%;}
.h52px{height:52px;}
.h80px{height:80px;}
.h100px{height:100px;}
.h300px{height:300px;}
.h580px{height:580px;}
.h710px{height:710px;}
.h1000px{height:1000px;}
/*width*/
.w100{width:100%;}
.w167px{width:167px;}
.w225px{width:225px;}
.w25_c10-5{width:calc(25% - 10.5px);}
/*position*/
.pn_r{position: relative;}
.pn_a{position: absolute;}
.pn_f{position: fixed;}
/*line-height*/
.lh1-25{line-height: 1.25;}
.lh1-5{line-height: 1.5;}
.lh1-7{line-height: 1.7;}
.lh1-52px{line-height: 52px;}
/*border*/
.bd_1_8e8e8e{border:1px solid #8e8e8e;}
.bd_1_0f0f0f{border:1px solid #0f0f0f;}
/*background*/
.ba_rgb_000-06{background:rgba(0,0,0,0.6);}
.ba_2c3c1b{background:#2c3c1b;}
댓글목록
등록된 댓글이 없습니다.