챌린지 08일차.
HTML 파일을 작성할 때에 꼭 주의해야하는 부분이 있다. 바로 클래스명 작성인데 CSS를 입혔을 때에 원하지않는 부분까지 영향을 끼치지않기 위해서는 클래스명 정하는데 중복없이 잘 적어야한다. 비슷한 경험을 1월 모각코를 진행할 때에 겪었었는데, 클래스가 많아지면서 이름을 정하는데에 헷갈리고 많이 헤맸었던 경험이 있다. 당시에는 BEM에 대하여 몰랐을 때지만 지금은 강의를 통하여 BEM에 대하여 공부하였다. BEM이 무엇인지 간단하게 알아보자.
BEM ( Block Element Modifier)
HTML 클래스 속성의 작명방법이다.
요소__일부분 : Underscore(Lodash) 기호 2개로 요소의 일부분을 표시한다.
요소--상태 : Hyphen(Dash) 기호 2개로 요소의 상태를 표시한다.
위와 같이 클래스명을 선언하게 된다면 CSS 작업을 할 때에 .container .name 으로 작성할 것이다. 하지만 이렇게 되는 경우 name이라는 클래스명이 2개이기 때문에 원하는 css 작업을 item 하위의 name 부분에 입혀지는 불상사가 발생하게 된다. 이런 경우를 대비하기 위해 적는 일종의 약속이 BEM이며 아래와 같이 수정할 수 있다.
이런식으로 이전 클래스뒤에 __(언더바 2개)를 사용하여 상위 클래스의 일부분을 나타내는 것임을 명시할 수 있으며 좀 더 직관적이고 명확하게 클래스명을 작성할 수 있다.
위 방법은 --(하이픈 2개)를 사용하여 요소의 상태를 보다 더 명확하게 나타낸 것이다. 클래스명을 작성할 때에 헷갈리고 명확한 이름을 적을 방법을 생각해내지 못했었는데 앞으로 BEM을 참고하여 작성하게 된다면 좀 더 쉽고 명확하게 작성할 수 있을 것 같다
패스트캠퍼스 [직장인 실무교육]
프로그래밍, 영상편집, UX/UI, 마케팅, 데이터 분석, 엑셀강의, The RED, 국비지원, 기업교육, 서비스 제공.
fastcampus.co.kr
본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.
#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #한번에끝내는프론트엔드개발초격차패키지online
