block 2

[CSS] CSS 설계기법

들어가기에 앞서 . . ❓ css방법론을 사용하는 이유는 ❓ - 코드의 재사용성을 위하여 - 유지보수를 좀 더 효율적으로 하기 위해 - 확장을 가능하게 하기위해 - 클래스명으로 무슨의미인지 예측 가능하게 하기 위해 🚀 OOCSS (Object Oriented CSS) ? -이름에서도 알 수 있듯이 객체지향에 따라 고안된 설계방식 , 레고처럼 여러가지 모듈을 만들어 조합하는 방법론이다 . 특징 1. 구조와 외형을 분리 - 구조 : width , height , border ,margin 등.. - 외형 : color , font-color , background-color , border 등 .. .btn { width: 200px; height: 80px; font-size: 30px; } .btn-cl..

FE/HTML,CSS 2022.04.18

[CSS ] 마진 겹침 현상 | inline | block

🚀 inline vs block inline block 컨텐츠 부분만큼만 영역을 차지한다. 한줄을 모두 차지한다. 높이와 너비가 조절이 불가능하다. (css로 적용안됨) 높이,너비 모두 조정 가능하다. padding , border 속성 사용 o / margin 좌우만 가능하다. padding , border , margin 모두 사용가능하며 해당 속성들이 다른요소를 밀어낸다. Q. 만약 inline요소처럼 가로로 배치되면서 높이와 너비를 설정해주고 싶다면? A. inline-block 사용하자! 🚀 마진 겹침 현상 (margin collapsing) 1. 요소와 요소 사이에 margin-top OR margin-bottom의 공간이 있을경우 더 높은 값의 마진이 적용 See the Pen Untitle..

FE/HTML,CSS 2022.04.06