CSS 설계 기법 🚀 CSS 설계 기법 CSS는 왜 저렇게 쓸까?? 클래스명은 왜 저렇게 쓸까?? 나는 camelCase를 쓰고 싶어!! 등등 개개인의 코드 스타일이 있을 것이다. 하지만 어느 정도 기준은 필요하다 기준이 없다면 그저 대혼란이 올 수도 있기 때문이다. 예를 들어 클래스명을 내 맘대로 s-d_e_w_e_r-r 이런 식으로 작성한다면?? 생각만 해도 끔찍~~ 그래서 CSS는 대표적으로 3가지의 설계 기법이 존재한다. 1. OOCSS(Object Oriented CSS) / ref : https://www.slideshare.net/stubbornella/object-oriented-css OOCSS의 개념은 레고처럼 여러가지 모듈을 만들어서 조합하도록 하는 방법이다. 방법으로는 구조와 스킨을 분리한다. (같은.. Inline 박스 요소와 block 박스 요소 간의 차이 🚀 인라인 박스 vs 블록 박스 CSS에는 크게 두 가지 박스 유형이 있는데 바로 블록 박스와 인라인 박스이다. 둘의 차이점을 확인해보자!! 1. 블록 박스 사용 가능한 공간을 양 옆으로 100% 사용하며 사용하지 못하는 공간은 마진 영역으로 채운다. 상위 컨테이너에서 사용 가능한 공간을 채움 width, height 속성 사용 가능 padding, margin, border 사용 가능, 해당 속성들이 다른 요소들을 밀어냄 2. 인라인 박스 콘텐츠의 크기만큼 박스의 크기가 커지고 작아짐, 따라서 줄 바뀜이 없음 width, height 속성 사용 불가 padding, border 속성 사용 가능 하지만 margin은 좌우만 조절 가능, 해당 속성들은 다른 요소들을 밀어내지 않음!! 예시 See the P.. 이전 1 다음
