개발이 좋아서/HTML이 좋아서
html 커스텀 속성
data- 로 시작하는 속성을 정의 -> 자바스크립트에서는 dataset이라는 객체로 만듬 ex) -> dataset={ color: 'red', size: 'big', } -> div.dataset.color -> div.dataset.size ex) 50일 100일 오늘은 button.dataset { key: date, value: 50, }
html - label 태그
label 태그 : 양식 입력 창의 요소들을 위한 캡션을 명시함 1. 명시적 작성방법 label의 for속성과 input의 id속성을 명시함으로써 연결해주는 방식 ex) 이름 2. 암시적 작성방법 label태그 안에 input태그를 넣음으로써 for속성을 명시하지 않더라도 암묵적으로 연결하는 방식 ex) 이름
html - 변수 표기법
1) 카멜표기법 my first variable myFirstVariable 2) 파스칼표기법 my first variable MyFirstVariable 3) 팟홀표기법 my first variable my_first_variable
html - ID, CLASS속성/ 요소 복제/ 넘버링/ 텍스트 {}/ 그룹핑/ 커스텀 속성
* ID, CLASS속성 div#idname : id값이 idname인 div태그 div.classname : class값이 classname인 div태그 * 요소 복제 li*3 : * 넘버링 - $ 위치에 값이 1부터 1씩 증가(1,2,3,4...) li.list$*3 * 텍스트 {} p{text} : text * 그룹핑 div>(div>h1+ul)+h2 * 커스텀 속성 a[href="http:naver.com"]
html - 태그정리
태그 웹페이지의 정보나 스타일시트 자바스크립트 파일 연결 태그 : 웹페이지의 정보를 웹브라우져에게 명시함 태그 : 웹페이지 제목 태그 : html문서 내에서 스타일 언어를 명시함 태그 : html문서 내에서 스크립트 언어를 명시함 실제 웹페이지의본문영역 제목태그 문단태그 : 순서형 목록 : 비순서형 목록 : 리스트 : 용어 정의 : 용어의 제목 : 용어 설명글 : 텍스트 서식
html - img, video
1) 이미지 요소 태그 : html문서안에 이미지를 넣을 수 있음. 빈요소이다. src속성 : 이미지경로를 지정함. alt속성 : 이미지를 지원하지 않는 환경에서 이미지를 대체하는 텍스트 2) 비디오 요소 태그 : 비디오와 영화 등 비디오 파일을 명시함 태그 : video요소의 원본 파일에 대한 파일 형식 및 파일 주소를 명시함 src속성 : 비디오 파일의 경로를 명시함 witdh속성 : 비디오 파일의 너비를 명시함 height속성 : 비디오 파일의 높이를 명시함 loop속성 : 비디오 반복재생 여부를 명시함 controls속성 : 비디오의 기본적인 동작을 조절할 수 있는 패널을 명시함 muted속성 : 비디오의 음소거를 명시함 autopaly속성 : 비디오의 자동재생을 명시함
html - form, select, input, type
폼 태그 - 사용자로부터 입력을 받을 수 있는 태그 select 선택상자 선택항목1 선택항목2 선택항목3 -input 태그 속성 type 속성 : 입력필드 타입을 지정함 -type 1. text : 텍스트를 입력하는 창을 생성 2. password : 비밀번호를 입력하는 창을 생성 3. radio : 라디오 버튼을 생성 4. checkbox : 체크박스를 생성 5. hidden : 사용자에게 보이지는 않지만 서버로 전송됨 6. submit : 서버로 제출/전송하는 버튼을 생성 7. reset : 입력필드를 초기화 시키는 버튼을 생성 8. file : 파일 이름을 입력하는 창을 생성 name 속성 : 서버로 전달되는 이름 value 속성 : 입력태그의 초기값 placeholder 속성 : 사용자가 값을 입..
html - table, p, span, div, img, button
table 만들기 - 행 - 열 제목이 있을 때 colspan - 열 합치기 rowspan - 행 합치기 - 인라인요소, 블럭요소 (작은 묶음) (큰 묶음) - 그룹핑 역할을 하는 태그 블럭 태그 - 브라우저 너비만큼 다 씀 인라인 태그 - 속한 요소만 씀 img 태그 - 빈요소 ./ - 현재 내 위치 ../ - 이전 위치 button - 클릭 가능한 버튼을 나타냄 확인 확인 취소
html 기본
html + css + javascript html : 마크업 언어 hypertext markup language - 배우기 쉽다 - 웹페이지의 뼈대 역할 css : 표현 언어 javascript : 동적 언어 상위요소-하위요소 : 위, 아래 부모요소-자식요소 : 바로 위, 아래 형제요소 : 옆