1. h2 { line-height: 1.7; } =>간격을 글자에 1.7배(170%도 가능)
2. .post-info{ position: relative; } => 밑에 자식에서 absolute 설정이 있을것 같다
3. display: block; => 줄바꿈이 이러나게 한다
4. 너비 지정하고, margin: 0 auto; => 중앙정렬하기
5 .grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr } => CSS3 부터 그리드 지원 함으로 쉬워졌다
grid-template-columns: repeat(3, 1fr) , grid-template-columns: repeat(auto-fit, minmax(240px,1fr))
6. form > fieldset >legend => 구룹단위로 칸을 쳐줌
7. label { display:inline-block; width:120px; } => label 에 사이즈 설정
8. font-weight: 400 (기본), 700(적당하게굵게)
9. font-size: 1em(대문자M 크기), 2em(두배크기) // 200%(상대크기) // 16px x 2(절대크기)
10. 글자색깔표기
16진수표기: #000000(검은색): 빨강00, 초록00, 파랑00 , #ffffff(흰색): 빨강ff, 초록ff, 파랑ff
rgb : rgb(255,0,0): 빨강(가득), 초록(0), 파랑(0)
rgba : 마지막에 알파값추가(불투명도): 1(불투명), 0(투명)
11. <label for="id">이름:<lable>
<input id="id" type="text"> => label 의 for값과 input의 id 값이 일치하면 이름클릭시 focus가 input id 입력란에 위치
12. <p contenteditable="">입력해보아요</p> div 태그도 가능
13. .bTn{ width;100px; hieght: 100px; background-color: brown; text-align: center;line-height: 100px}
=> div 로 버튼만들때 height와 line-height를 같게 놔야 text-align: center 속성이 정 가운데 먹는다
14. clear: left, right, both => float 속성 클리어 시킴
15. div:nth-child(1) => 형제 사이에서의 순서에 요소선택(의사클래스)
16. box-sizing : content-box => 콘텐트영역을 기준으로 크기를 정한다
box-sizing: border-box => 테두리를 기준으로 크기를 정한다
17. 버튼 고유기능 삭제
<button xxxxonclick="newRegister()"; return false;">추가</button>
18. img css 약간 틀어질때 => vertical-align: top;
19. 비디오속도 콘솔에서 조절하기 => (function(){document.querySelector('video').playbackRate = 0.5}())
20. 윈도우 부분 켑쳐 => WIN + Shipt + S
21. 화면의 정중앙에 위치
.wrap{
position : absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
.wrap{
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
22. 100vh : 보는 화면에 꽉차게(배경화면)
23. <colgroup>
<col width="50px" style="background:red" />
<col width="10%" style="background:purple" />
</colgroup>
24. style="height:calc(100vh - 257px)"