열정 실천

Box-sizing box-sizing은 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성이다. content-box box-sizing: content-box; width: 100px; padding: 10px; ✔ 요소 사이즈에 패딩과 테두리 포함x ✔ 콘텐츠만 100px로 최종 너비는 120px(100px+10px+10px)이 된다. ❗❗ 생각했던 요소의 크기 + ( ) border-box box-sizing: border-box; width: 100px; padding: 10px; ✔ 요소 사이즈에 패딩과 테두리 포함o ✔ 테두리와 패딩까지 합해서 최종 너비 100px 기본값은 내용이 차지하는 영역에만 사이즈가 적용되는 content-box로 생각했던 크기보다 최종 크기가 커지게 하지 않기..

Margin 테두리(border) 바깥 쪽 여백 ✔ 상하좌우 모두 margin : 10px ; ✔ 상하, 좌우 margin : 10px 20px ; ✔ 상,우,하,좌 (위쪽부터 시계방향) margin : 10px 20px 10px 20px ; ✔ 각각 지정하기 margin-top : 10px; margin-right : 10px; margin-bottom : 10px; margin-left : 10px; 📌 margin collapsing 마진 상쇄 margin-top과 margin-bottom이 각각 10px로 지정되어있는 두 태그(블록요소)가 20px 이어야하는 둘 사이의 마진이 실제로는 10px로 표현되는 현상이다. 이를 마진 상쇄(margin collapsing) 또는 마진 겹침(margin ov..

color 색상 변경 font-style 폰트의 스타일 - 주로 기울임꼴 표현을 위해 사용(italic, oblique) font-weight 글자의 두께(100부터 900까지) font-variant:small-caps; 주로 대소문자를 강제로 변환하는 용도로 사용 (대문자는 그대로, 소문자는 크기가 작은 대문자로) font-size 폰트 크기 지정 font-family 글꼴 변경 text-align 글자의 정렬 방향 지정 (left, right, center) font-decoration 글자에 밑줄을 그을 때 사용 (underline, overline, line-through) 💡예시 💡결과 💡예시 💡결과