YoonStudyNote

속성 의미 값 기본값 특징 async 스크립트의 비동기적 실행 여부 Boolean src 속성 필수 crossorigin 별도의 도메인을 사용하는 사이트의 오류 로깅을 허용하기 위해 사용 anonymous, use-credentials defer 문서 파싱(구문 분석) 후 작동 여부 Boolean src 속성 필수 src 참조할 외부 스크립트 URL URL 포함된 스크립트 코드는 무시 type MIME 타입 text/javascript 1. SRC HEROPY! 다음과 같이 작성하면, console창에 "안녕하세요를 볼 수 없다." script태그를 이용해서 source속성을 이용해서 외부에 있는 자바스크립트 파일을 호출하게 된다면 스크립트 내부에 작성되어 있는 자바스크립트 코드는 무시된다. 2. TYP..

스크립트 코드를 문서에 포함하거나 참조(외부 스크립트) 자바스크립트를 가져올 수 있는 스크립트 태그이다. 속성 의미 값 기본값 특징 async 스크립트의 비동기적 실행 여부 Boolean src 속성 필수 crossorigin 별도의 도메인을 사용하는 사이트의 오류 로깅을 허용하기 위해 사용 anonymous, use-credentials defer 문서 파싱(구문 분석) 후 작동 여부 Boolean src 속성 필수 src 참조할 외부 스크립트 URL URL type MIME 타입 text/javascript cf. 동기 VS 비동기 동기 : 순차적으로 실행하는 것 비동기 : 순차적인것이 아니며, 필요에 의해서 건너띄거나 다시 돌아간다는것이 가능하다. async는 직접적으로 입력할 일이 거의 없다. d..

Canvas API이나 WebGL API를 사용하여 그래픽이나 애니메이션을 랜더링 한다. 이 영역에 그림을 그린다는 뜻이다. 자바스크립트로 그림을 그려야하며, html이나 css로 그리는것이 아니다! 예제 이와같이 이용하면, 에니메이션 활용도 가능하며, 외부의 이미지를 가져와서 여기서 그려서 밖으로 내보내기도 가능하고 그 외의 많은 활동도 가능하다. (자바스크립트를 이용할때 사용해보자)

다른 HTML 페이지를 현재 페이지에 삽입한다. 속성 의미 값 기본값 name 프레임의 이름 src 포함할 문서의 URL URL width 프레임의 가로 너비 height 프레임의 세로 너비 allowfullscreen 프레임 테두리 사용 여부 0, 1 1 sandbox 보안을 위한 읽기 전용으로 삽입 * (보안은 강화 되지만, 이 사이트에서 이용되는 입력양식, 자바스크립트 코드가 동작하지 않을 수 있다. 그래서 옆에 값을 설정해야지 이용이 가능하다.) Boolean or allow-form : 양식 제출 가능, allow-scripts : 스크립트 실행 가능, allow-same-origin : 같은 출처(도메인)의 리소스 사용 가능 iframe은 보안적인 이슈가 있기 때문에 신중하게 사용해야 한다.

다음과 같이 입력시, 사람은 이것의 이미지와 설명을 연결해서 이해할 수 있지만, 브라우저는 인식을 하지 못한다. 해로피 이미지 입니다. 그러므로 다음과 같이 입력하는것을 선호한다. 해로피 이미지 입니다.

srcset은 브라우저에 제시할(사용할) 이미지들과 그 이미지들의 원본 크기를 지정한다. 사용할 이미지를 사이즈별로 2장 이상 준비하여 srcset 속성에 작성한다. 단, 주의사항은 이미지의 크기로 px단위가 아닌 w 디스크립터 혹은 x 디스크립터를 입력해야 하며, 작은 크기 이미지부터 순서대로 입력한다. 1. W unit w단위 (width descriptor)는 이미지의 원본 크기(가로 너비)를 의미한다. 예를들어 400X300(px)크기의 w의 값은 400w 이다. 2. X descriptor x 디스크립터(Device pixel ratio descriptor)는 이미지의 비율 의도를 의미한다. 위 w 디스크립터에서 사용했던 예제를 다음과 같이 수정할 수 있다.

속성 의미 값 특징 srcset 브라우저에게 제시할 이미지 URL과 크기의 목록을 정의 w, x sizes 미디어 조건과 해당 조건일 때의 이미지 크기를 정의 보통 srcset과 sizes는 반응형 웹을 제작할 때 많이 사용한다. 일반적으로 반응형 웹에서 이미지를 지원하기 위해, ‘미디어쿼리’라고 부르는 CSS Media Rule(@media)에서 background-image 속성을 많이 사용하는데, 반응형 이미지를 처리하기 위해 뷰포트(Viewport)의 크기부터 사용자 화면의 해상도 등 많은 환경을 고려해야 합니다. 하지만 우리는 HTML IMG의 srcset과 sizes를 통해 쉽게는 이미지의 크기를 설정하는 것만으로 대부분의 고려 사항을 사용자 브라우저(User agent)에 떠넘길 수 있습니다.

이미지를 삽입. 속성 의미 값 특징 src (필수) 이미지 URL URL alt (필수) 이미지의 대체텍스트 width 이미지의 가로 너비 height 이미지의 세로 너비 srcset 브라우저에게 제시할 이미지 URL과 크기의 목록을 정의 w, x sizes 미디어 조건과 해당 조건일 때의 이미지 크기를 정의 crossorigin 가져 오기가 CORS를 사용하여 수행되어야하는지 여부 anonymous, use-credentials ismap 서버 측 이미지 맵으로 지정해 클릭하여 좌표를 쿼리스트링으로 서버에 전송할지 여부 Boolean 가 유효한 href 속성을 가진 의 하위 요소인 경우에만 허용 usemap 클라이언트 측 이미지 맵으로 지정 의 ID속성 값 , 의 하위 요소인 경우 사용 불가 크기를 조..

1. 삭제된(변경된) 텍스트의 범위를 지정. 속성 의미 값 cite 변경을 설명하는 리소스의 URI URI datetime 변경이 일어난 유요한 날짜 문자 Date del {display : inline;} 기존에는 있었지만, 나중에 시간이 지나고 보니까 필요가 없을것 같은 부분. 하지만 완전히 삭제하지는 않고 흔적을 남기는 방법이 이것이다. 그래서 지울때 속성을 쓰고 왜 지웠는지 설명을 하는것을 넣어야 한다. 2. 새로 추가된(변경된) 텍스트의 범위를 지정. 속성 의미 값 cite 변경을 설명하는 리소스의 URI URI datetime 변경이 일어난 유요한 날짜 문자 Date ins {display : inline;} 기존에 없었는데, 새로 생길때 사용한다. 새로 생긴 정보가 있으면 속성을 이용해서 설..

줄바꿈을 설정. br { display: inline; } html에서 br태그를 여러번 쓰는것은 절대 안된다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 이렇게 하는것이 아닌, 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 p{ line-height : 50px; } 이런식으로 CSS를 이용하여, 한 문단 단락(줄의 높이)을 50px 크기로 잡아서 설정하는것이 좋다.