Emmet 기능 (html 기본 문서 포맷 만들기)
html:5 + [tab]
<meta charset="utf-8" />
이렇게 <> 안에 솰라솰라 써놓고 바로 /를 붙이는 경우가 있는데, 이것은 <meta> </meta> 형식으로 따로따로 기술할 필요 없이 그냥 열자마자 닫아버리는 축약형(?) 형식.
span.em {font-size: 2em;}
→ 이하에서 span에 em이 붙으면(<span class="em">), 2em으로 설정하겠다는 뜻.
span.rem {font-size:2rem;}
→ 이하에서 span에 rem이 붙으면(<span class="rem">), 2rem으로 설정하겠다는 뜻.
em 그리고 rem
span.em(font-size: 2em;}이라는 말은, 2em=즉 2배 커진다는 것.
이하에서
<span class="em">내용1<span class="em"> 내용2 </span></span>
이라고 서술되어 있으면,
내용1의 경우 앞에 <span class="em">이 한 번 기재되어 있으므로 2em=즉 2배 커짐
내용2의 경우 앞에 <span class="em">이 두 번 기재되어 있으므로 2X2em=4em=4배 커지는 것
반면 rem은 좀 다름.
<span class="rem">내용1<span class="rem">내용2</span></span>
이라고 서술되어 있으면,
기준점은 디폴트 설정인 16px이므로
내용1도 16px의 2배로 커지고, 내용2도 16px의 2배로 커짐.
em은 중첩될수록 크기가 너무 커지거나 작아지는 반면, rem은 비교적 정확한 조절이 가능해서 후자를 사용하는 추세.
<style>
#(아이디) {color: blue;}
</style>
<body>
<h1 id="(아이디)">내용</h1>
#(아이디)에 적용된 설정을 이하 아이디 기재한 부분에 적용할 수 있는 것
.(아이디) {color: blue;}
</style>
<body>
<h1 class="(아이디)">내용</h1>
이것도 마찬가지... .(아이디)->class="(아이디)"
width/height
width/height는 content 영역만의 너비/높이임이 디폴트이지만,
box-sizing 프로퍼티가 border-box로 지정되어 있다면,
이들은 content+padding+border를 합한 영역의 너비/높이가 됨.