13일차 - (복습)플러그인?ver= & 웹표준

밀레·2022년 10월 12일

코딩공부

목록 보기

42/135

1. 기본 세팅

1-1) 트래픽 아끼기

필수 요소들만 남겨두고 지우는 습관을 들이자

1-2) 플러그인CSS & 부트스트랩 버전 표기☆☆

1-3) head 순서 (복복습)

메타 태그(광고)
폰트 : 구글폰트 & 아이콘(폰트어썸/xeicon)
부트스트랩
플러그인(animate.css / device-mockups 등)
나의 커스터마이징 CSS
...
나의 커스터마이징 javascript

2. 웹표준

모든 웹에서 동일하게 보이도록 지정해주는 것 (≒reset cdn 떠올려보라)
CSS 맨 위에 배치함

ex) 부트스트랩v3.3.7 웹표준

<script>

html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
}
body {
  margin: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}
audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline;
}
audio:not([controls]) {
  display: none;
  height: 0;
}
[hidden],
template {
  display: none;
}
a {
  background-color: transparent;
}
a:active,
a:hover {
  outline: 0;
}
.
.
.
</script>

ex) 네이버 웹표준

.input_txt, textarea{*margin:-1px 0} 공통 클래스에 거는 것 이전까지.
https://www.nhn.com/renewal/css/common.css

<script>

/*common*/
*{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select{margin:0;padding:0;-webkit-text-size-adjust:none}
html,body{width:100%;height:100%}
body{font-family:NanumBarunGothic,nbg,"êµ´ë¦¼",Gulim,"Apple SD Gothic Neo",Sans-serif;font-size:12px;color:#333;-webkit-text-size-adjust:none}
h1,h2,h3,h4,h5,h6{font-size:12px;text-align:left}
table{border-collapse:collapse;border-spacing:0}
img,fieldset,iframe{border:0 none}
img{vertical-align:top}
li{list-style:none}
a{color:#555;text-decoration:none}
a:hover{text-decoration:underline}
em,address{font-style:normal}
button,label{cursor:pointer}
button{border:0;background:transparent}
button::-moz-focus-inner{padding:0;border:0}
input[type=text],input[type=password],input[type=image],textarea,button{font-family:NanumBarunGothic,nbg,"êµ´ë¦¼",Gulim,"Apple SD Gothic Neo",Sans-serif;-webkit-appearance:none;-webkit-text-size-adjust:none;border-radius:0;-webkit-border-radius:0}
select{font-family:NanumBarunGothic,nbg,"êµ´ë¦¼",Gulim,"Apple SD Gothic Neo",Sans-serif;-webkit-appearance:none;-moz-appearance:none;appearance:none}
select::-ms-expand{display:none}
textarea{overflow:auto}
hr{display:none}
legend{*width:0}
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}

iframe{width:100%}

input:focus,button:focus{outline:none}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  box-shadow: 0 0 0px 1000px #fff inset;
  -webkit-box-shadow: 0 0 0px 1000px #fff inset;
}

</script>

3. 폰트

폰트 : 구글폰트 ←에서 지정한 폰트 중, 태그마다 다른 폰트를 지정할 수 있음

<style>

body{
	font-family : "A폰트" , "B폰트", C폰트;
    font-size : 16px;
    font-weight : 100-900;
}

h1, h2, h3{
	font-family : "Z폰트" , "B폰트", C폰트;
    font-weight : 100-900;
    font-transform: uppercase;
}

</style>