CSS
-
overflow와 clear 속성을 활용해 float을 해제하는 방법Knowledge/HTML & CSS 2019. 12. 10. 17:30
div는 블록 레벨 요소입니다. 새로운 줄에서 시작하고 좌우 양쪽으로 최대한 늘어나 가능한 모든 너비를 차지한다는 블록 레벨 요소의 특징( 참고 ) 에 따라 div를 두개 생성하면 하나의 div가 한 줄씩을 차지하여 위와 같은 형태로 나타나는 것을 확인할 수 있습니다. 코드 보기 더보기 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 float 해제 방법 .box_wrap { width: 400px; margin: 0 auto; } .box_parent { padding: 10px; } .box { width: 100px; height: 1..
-
CSS 클래스명을 정돈해보자 BEM ( Block, Element, Modifier ) 방법론Knowledge/HTML & CSS 2019. 11. 14. 15:06
- BEM BEM은 Block(블럭), Element(요소), Modifier(블럭 또는 요소의 속성)을 활용한 CSS 클래스 작성법이다. - Block Block은 어떤 요소를 담고 있는 컨테이너를 의미한다. 예를 들어 웹이 header, footer, sidebar, article 의 구조로 이루어져 있다면 이런 것들을 block이라 할 수 있다. block은 그냥 block의 이름을 클래스 명으로 적어주면 된다 1 2 3 4 5 6 .block {} /* ex */ .header {} .footer {} - Element element(요소)는 블럭이 포함하고 있는 한 조각을 의미한다. 그렇기 때문에 요소는 블럭의 클래스명을 적고 두 개의 밑줄 표시 (__)를 해준다음 요소명을 붙여주면 된다 1 2..