본문 바로가기

FrontEnd/HTML2

BEM ( Block Element Modifier ) BEM이란? HTML 클래스 속성의 작명법 요소__일부분 : Underscore(LoDash)기호로 요소의 일부분을 표시 요소--상태 : Hyphen(Dash) 기호로 요소의 상태를 표시 BEM이 필요한 이유 요소__일부분 아래 코드를 먼저 보자. container내부에 name이라는 class가 있고, item내에도 name이라는 클래스가 있다. 후손 선택자를 사용해서 구분할 수도 있지만, 복잡해지기 때문에 명확하게 하기 위해서 BEM을 사용해서 바꿔 줄 수 있다. 아래 그림처럼 사용한다면 css만 봐도 어떤 부분의 요소를 선택해서 작성하였는지 알 수있다. 요소--상태 버튼의 경우 버튼을 클릭하기 전 후 그외의 상태들이 존재 할 수 있다. 또 버튼들이 동시에 가져야 할 속성들도 있을 수 있다. 아래코드.. 2022. 10. 11.
HTML Basic HTML의 기본 구조 : 문서의 html의 버전을 지정 : html의 시작과 끝을 브라우저에게 알려주는 역할 : 문서의 정보를 나타내는 범위 웹 페이지가 해석해야 할 웹페이지의 제목, 설명, 사용할 파일 위치, 스타일(CSS)같은 웹페이지에 보이지 않는 정보를 나타냄 : 문서의 구조를 나타내는 범위 사용자의 화면에 보여지는 로고나 버튼 등..웹페이지의 보여주는 구조를 작성 태그란? HTML의 모양과 행동양식을 정해주는 명령어 태그사용법 태그는 시작태그와 종료태그로 끝나고 중간에 내용이 들어가는 형식으로 되어 있다. 이 형식을 하나의 요소라고 칭한다. 태그안에 태그를 넣을 수 있는다 태그 안에 첫 번째는 자식요소라 부르고 첫 번째를 포함한 모든 내부 태그는 하위 요소라 부른다. 바로 밖 태그는 부모요소라 .. 2022. 9. 6.