[CSS] 기본 설정 CSS > 학습

* 지속적으로 데이터를 수정 할 예정

* 기본으로 설정해두고 사용하기 편한 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;}