반응형

IT/HTML & CSS 32

html5의 data- 속성 톺아보기

Data 속성은 HTML5 속성에서 제공하고 있으며 조금만 이해하고 실제 코드에 적용하여 사용하기 시작하면 굉장히 편리한 기능을 제공합니다. 지금부터 알아두면 쓸모 있는 신비한 "Data-" 대해서 살펴봅시다. 1) data 속성. 그는 누구인가? HTML5에서 새롭게 소개된 HTML5 data Attributes는 사용자 데이터 속성으로 태그 내에 'data- 로 시작하는 속성은 개인 데이터로 규정한다.'는 내용입니다. 여기서 핵심은 "사용자 데이터 속성" 이란 말인데요. 쉽게 설명하자면 data와 하이픈(-)이 조합된 형태로 data- 뒤에 개발자가 정의하고 싶은 마음대로 정의하면 된다는 이야기입니다. 그래도 이해가 잘 안 되시면 아래 예시 코드를 한번 살펴볼게요. A) data- 속성 적용 예시 /..

IT/HTML & CSS 2021.03.04

BEM 방법론 알아보기

프로젝트를 진행하거나 협업을 하게 되면 어떠한 업무든 보다 나은 방법이 없을까 고민을 하게 됩니다. 프로젝트나 버전 관리나 유지보수 등의 이유를 고려한다면 업무에 가이드(규칙)가 있는 게 좋습니다. 물론 혼자서 업무를 진행하게 되는 상황이어도 자신만의 가이드 규칙을 정리해서 사용하는 것이 자신을 위해서도 또 업무의 효율성을 위해서도 좋습니다. 그래서 오늘은 CSS의 여러 방법론 중 하나이며 현재 제가 사용하고 있는 BEM 방법론에 대해 알아보려고 합니다. 💡 BEM이 도대체 뭔데? BEM은 Block Element Modifier의 약자 block(전체를 감싸고 있는 블록요소)__element(내부 요소)--modifier(기능/수정) BEM 방법론은 ID에는 사용할 수 없고, 오직 클래스명에만 활용할 ..

IT/HTML & CSS 2021.02.26
반응형
//