기본적인 틀 *n BEM (Block Element Modifier); HTML클래스 속성의 작명법 1. 요소__일부분 ; Underscore기호로 요소의 일부분을 표시 2. 요소--상태 ; Hyphen기호로 요소의 상태를 표시 1. head 더보기 더보기 더보기 2. body .inner > a.logo > img > .sub-menu > ul.menu > (li > a) *n > .search > input.text, .material-icons > main-menu> .item > .item__name > .item__contents > .contents__menu > ul.inner > (li > h4 , (ul > li) * n) *n * n .bg-left (inner 바깥에 배경연장할 것이 ..
전역 속성 ; HTML에서, 모든 요소에 적용할 수 있는 속성 title="설명" ; 요소의 정보나 설명을 지정 style="스타일" ; 요소에 적용할 스타일을 지정 class="이름" ; 요소를 지칭하는, 중복 가능한 이름 id="이름" ; 요소를 지칭하는, 고유한 이름. 자주 사용 x data-이름="데이터" ; 요소에 데이터를 지정, 보통 js에서 사용 ex) 사과> 바나나 js) const els=document.querySelectorAll('div') ; els.forEach(el=>{ console.log(el.dataset.fruitName) }
1. form - action ; 입력받은 데이터를 처리할 서버 상의 스크립트 파일의 주소 명시 - method ; 입력받은 데이터를 서버에 전달할 방식을 명시 get ; 주소에 데이터를 추가하여 전달하는 방식, 데이터가 주소 입력창에 그대로 나타남, 데이터 크기 제한적 post ; 데이터를 별도로 첨부하여 전달하는 방식, 데이터가 외부에 드러나지 않고, 데이터 크기 제한 x 2. input 1. text ; 한 줄의 텍스트 입력 2. password ; 한 줄의 비밀번호 입력(별표처리) 3. radio ; 옵션 선택 - name="" 통일해주어야함, value =""; 선택했을 때 제출되는 값, checked ; 기본 선택 4. checkbox ; radio와 같음 but 다중 선택 가능 5. file..
글자/단락 태그 인라인 요소 ; 글자를 만들기 위한 요소들 - 요소가 수평으로 쌓임 - 가로,세로 ; 포함한 콘텐츠 크기만큼 자동으로 줄어듬! - width, height 설정 불가 - margin과 padding은 좌우만 설정 가능! 상하는 불가! - span>div는 불가 / span>span은 가능 span ; 특별한 의미가 없는 구분을 위한 요소 a ; 다른,같은 페이지로 이동하는 하이퍼링크를 지정하는 요소 / href(링크 URL), target(링크 URL의 표시 위치) ; _blank(새 창), _self(현재 프레임), _parent(부모 프레임), _top(현재 창에서 가장 상위 프레임) img ; 이미지를 삽입하는 요소 / src(삽입할 이미지의 경로),alt (삽입할 이미지의 이름) ..
HTML (HyperText Markup Language) 태그 ; 웹 페이지의 디자인, 기능 결정 내용 # 빈 태그 ; 등과 같이 종료 태그 없는 태그 태그 내용 ex) 내용 기본 구조 ; 현재 문서가 HTML5 문서임을 명시, 종료태그 없음 html ; HTML문서의 루트 요소 정의 - lang="ko"로 한국어로 작성될 것임을 명시 head 웹페이지의 제목, 설명, 사용할 파일 위치, 스타일(CSS)같은 웹페이지의 보이지 않는 정보 작성 ex) , 태그 안에 작성해도 됨 ex) ; title옆에 있는 로고 설정(로고를 보통 favicon(favorite Icon)이라 부름) script ex) ; JS불러오기 or 태그 안에 작성해도 됨 body ; 사용자 화면을 통해 보여지는 로고, 헤더, 푸터,..
