Web

[CSS] 기본 문법

선택자{ 속성: 속성값, 속성: 속성값; } 선택자(Selector)로 속성과 값을 지정할 대상을 검색 속성과 값의 역할 : 검색된 대상에 지정될 CSS 명령 /* 주석 쓰는 방법*/ CSS 선언 방식 인라인(in-line) 방식 : HTML 요소(태그)의 'style'속성에 직접 작성(선택자 필요X) 내장(embedded) 방식 : HTML 안에 작성 링크(link) 방식 : HTML에서 를 이용하여 외부 문서로 CSS를 불러와 적용(강사님이 추천) *병렬방식호출 @import 방식 : CSS에서 @import를 이용하여 외부 문서로 CSS를 불러와 적용 *직렬방식호출이므로 주의(1번 호출이 끝나야 2번 호출이 가능) @import url("./common2.css");

[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 *유튜브 영상