★기본 CSS노말라이즈★

기초코드

★기본 CSS노말라이즈★

표자 2022. 10. 21. 00:19

728x90

<노말라이즈 기본> - 습관화 할 것

* {
  margin:0;
}

html, body{
  height:100%;
  width:100%;
}

/* HMTL 부분 기본설정 */

</div>

</section>

/* CSS 기본설정 */

/* 폰트 시작 */
@font-face {
  font-family: 'LotteMartDream';
  font-style: normal;
  font-weight: 400;
  src: url('//cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamMedium.woff2') format('woff2'), url('//cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamMedium.woff') format('woff');
}

@font-face {
  font-family: 'LotteMartDream';
  font-style: normal;
  font-weight: 700;
  src: url('//cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamBold.woff2') format('woff2'), url('//cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamBold.woff') format('woff');
}

@font-face {
  font-family: 'LotteMartDream';
  font-style: normal;
  font-weight: 300;
  src: url('//cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamLight.woff2') format('woff2'), url('//cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamLight.woff') format('woff');
}

html {
  font-family: 'LotteMartDream', sans-serif;
}
/* 폰트 끝 */

/* 노말라이즈 시작 */
body, ul, li {
  margin:0;
  padding:0;
  list-style:none;
}

a {
  color:inherit;
  text-decoration:none;
}
/* 노말라이즈 끝 */

/* 라이브러리 시작 */
.con {
  margin-left:auto;
  margin-right:auto;
}

.block {
  display:block;
}

.img-box > img {
  width:100%;
  display:block;
}

.bg-red {
  background-color:red;
}

.bg-blue {
  background-color:blue;
}

.inline-grid {
  font-size:0;
}

.inline-grid > * {
  font-size:1rem;
  display:inline-block;
  vertical-align:top;
}

.width-10p {
  width:10%;
}
/* 라이브러리 끝 */

/* 커스텀 시작 */
:root {
  --site-width:1200px;
}

.con-min-width {
  min-width:var(--site-width);
  padding:0 10px;
}

.con {
  width:var(--site-width);
}

/* 이미지 리스트 박스 시작 */
/* 이미지 리스트 박스 끝 */

/* 커스텀 끝 */

728x90