Web/HTML5

[HTML] 특수기호 출력

가장 많이 쓰이는 특수기호만

[HTML] 전역 속성

전역속성(Global Attributes) 모든 HTML 요소에서 사용가능한 속성 속성 class : 요소의 별칭(여러 개 중복 가능) *CSS/JS에서의 요소선택기 속성 id : 문서에서 고유한 식별자 *CSS/JS에서의 요소선택기 속성 style : 요소에 적용할 CSS 인라인 방식 선언 속성 title : 요소의 설명 지정(마우스 올렸을 때 작게 뜬다) 굉장히 많이 사용된다 속성 lang : 요소의 언어 지정(한 사이트에서 lang 속성은 html에서 하나만 선언하는게 일반적) 속성 data-* : 사용자 정의 데이터 속성 지정. JS에서 이용할 수 있는 데이터를 HTML에 저장하는 용도 스타일 제목2 Google DIV Yujinss 속성 draggable : 요소가 Drag and Drop AP..

[HTML] 양식

입력받은 정보를 웹 서버로 제출 속성 action : 전송받은 정보를 처리할 URL 속성 autocomplete : 이전에 입력된 값으로 자동처리 할지 여부(자동완성기능) 속성 method : 서버로 전송할 HTTP 방식 ex)GET(default)/POST 속성 novalidate : input type form의 유효성검사를 하지 않는다. (특수 상황이나 test 할때 많이 사용) ex) 이메일의 경우 @ . 이 들어가는 양식인지 검사함 속성 name : 브라우저가 인식할 form 이름 속성 target : 서버로부터 응답받을 방식 지정(현재 탭/새로운 탭) 사용자에게 입력받을 양식 속성 autofocus : 페이지가 로드되자마자 자동포커스 속성 autocomplete : 이전에 입력된 값으로 자동처..

[HTML] 표 콘텐츠

표 영역 설정 table row 줄을 먼저만든다 talbe header 머리글 칸을 만든다 속성 abbr :abbreviation(약어)의 약어. 간단한 설명 속성 headers :자신의 상위 header의 id를 명시해서 연결함. 종속관계 설정 속성 colspan : 현재 위치에서 셀 병합 수 (수평) 속성 rowspan : 현재 위치에서 줄 병합 수 (수직) 속성 scope : 누구의 머리글인지 명시 예제 데이터 타입 값 알파벳 A 숫자 7 table data 칸을 만든다 속성 headers :자신의 상위 header의 id를 명시해서 연결함. 종속관계 설정 속성 colspan : 현재 위치에서 셀 병합 수 (수평) 속성 rowspan : 현재 위치에서 줄 병합 수 (수직) 시각적으로 표현하는 데에 ..

[HTML] 스크립트

자바 스크립트 코드를 작성하거나 외부 스크립트 문서를 가져올 때 사용 속성 async 스크립트의 비동기적(Asynchronously) => (순차적x 필요에 따라 사용) 실행 여부. src 필수 속성 src 외부 스크립트 사용 URL. src 적용 시 내부에 작성된 스크립트 코드는 무시됨. 속성 defer 문서파싱(구문 분석) 후 작동 여부. 실행 시점. src 필수. 속성 type 표준이 text/javascript라서 선언 안해도 된다 YUJINSS! const myName = document.getElementById('my-name'); console.log(myName.innerText); 코드가 순차적으로 읽히므로 head에 script를 연결하면 body의 내용을 script에서 연결 못한다..

[HTML] 내장 콘텐츠

다른 HTML 페이지를 삽입 속성 name 프레임의 이름 (여러 프레임이 들어갈 수 있으므로) 속성 src 속성 width 속성 height 속성 allowfullscreen 전체화면 속성 frameborder 프레임 테두리 사용(기본:1) 속성 sandbox 보안↑읽기전용으로 삽입. iframe은 외부 컨텐츠를 들여오는 것이므로 보안에 취약해서 사용. sandbox 사용하는 대신 외부 컨텐츠의 내부 코드가 일부 작동하지 않을 수 있음. 경우에 따라 아래 속성 사용 -allow-form -allow-scripts -allow-same-origin *유튜브 영상

[HTML] 멀티미디어

이미지 삽입 필수속성 src source의 약어. 이미지 URL 필수속성 alt alternative의 약어. 대체 텍스트 속성 width 속성 height => 크기를 조절하는 용도로 사용할 시 한쪽만 입력해도 됨, 별도의 픽셀단위 사용 x 숫자만 입력 css 통해서 이미지 크기 조절 가능. 이미지 크기가 고정된다(이미지 고정X, 크기 고정O) *반응형 웹사이트 제작 시 사용 srset에서 제시한 이미지 중에서 뷰포트의 너비에 최적화된 이미지를 브라우저가 골라서 출력하게 된다 속성 srcset source set의 약어. 출력될 이미지 후보들의 URL과 원본크기의 목록 정의. 이미지 2장 이상일 시 활용. px 단위가 아닌 w(Width descriptor 가로너비)나 x(Device pixel rat..