뇌 채우기 공간

1 2 3 4 5 6 7 8 9 10 11 12 13 14 Document 안녕하세요! 자바 스크립트를 지원하지 않는 환경입니다. Colored by Color Scripter cs index.html body에 noscript로 문구를 적어두었습니다. 실행을 하면 지금은 자바 스크립트를 지원하는 환경이기에 noscript에 들어있는 내용이 출력되지 않습니다. 1 2 3 4 5 6 7 8 9 10 11 12 Document Colored by Color Scripter cs noscript.html 이 파일에 iframe으로 index.html을 연결해주었습니다. 마지막에 sandbox가 있는데 샌드박스가 있으면 noscript에 적은 내용이 출력되고 , 없으면 출력되지 않습니다.

2021.04.08 - [WEB/html] - [html][js] html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 Document javachip ppchino console.log('안녕하세요'); Colored by Color Scripter cs body에 script에 src로 js파일을 넣고 그 밑에 script안에 내용을 적으면 js파일에 있는 것만 실행이 되고 script태그 안에 있는 내용은 무시되어 실행되지 않습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 Document javachip ppchino Colored by Color Scripter cs head에 script를 연결할때는 type을 설정해주고 src로 자바스크립트 파일을 ..

js파일과 html파일을 연결해보겠습니다. html파일 1 2 3 4 5 6 7 8 9 10 11 12 13 Document javachip ppchino Colored by Color Scripter cs js파일 1 2 3 const myName = document.getElementById('my-name'); console.log(myName.innerText); cs html파일을 보면 head에 script태그를 사용하여 js파일을 연결했습니다. 콘솔에 보면 js파일이 실행이 안되었습니다. 그 이유는 html파일은 위에서 부터 순서대로 실행이 되는데 body부분에 있는 코드를 분석하지도 않고 js파일이 실행되는 순서이기 때문입니다. 그럴때는 js파일 뒤에 defer이라고 치면 됩니다. 구문 분..

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 Document const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); ctx.fillStyle = 'rgb(200,0,0)'; ctx.fillRect(10,10,50,50); ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; ctx.fillRect (30, 30, 50, 50); Colored by Color Scripter cs

이렇게 유튜브 동영상을 페이지에 삽입해보겠습니다. 유튜브 동영상에서 공유하기를 누르고 퍼가기를 누르면 iframe태그가 나옵니다. 그러면 그냥 코드에 복붙하면 됩니다.. 사이트도 넣을 수 있습니다. 그런데 이것은 보안이 취약하기 때문에 sandbox라는 속성을 통해서 읽기 전용으로만 삽입할 수도 있습니다. allow-form: 양식 제출 가능, allow-scripts: 스크립트 실행 가능 , allow-same-origin: 같은 출처(도메인)의 리소스 사용 가능

poster="이미지링크"

이미지 소스셋에 대해 알아보겠습니다. 브라우저 크기에 따라 이미지가 바뀌도록 설정해보겠습니다. 브라우저 크기가 가로가320px일때 , 640px일때, 1024px일때 왼쪽에서 부터 송강 사진이 바뀝니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 Document Colored by Color Scripter cs 링크가 길어서 뒤에는 안보이겠지만 srcset에 이미지 링크를 넣고 하나 띄우고 320w 이라고 쓰면 브라우저 크기가 가로 320px일때 그 이미지가 나온다는 뜻입니다. 그리고 밑에 src와 alt가 있는데 그건 srcset에 이미지가 없을때 저 이미지가 나온다는 뜻입니다. 개발자 도구로 가서disable cache를 눌러줍니다. 왜냐하면 이미지가..

abbr태그 1 2 3 4 5 6 7 8 9 10 11 12 13 14 Document Using html is fun! Colored by Color Scripter cs

1. h1~h6 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 Document 제목1 제목2 제목3 제목4 제목5 제목6 Colored by Color Scripter cs 2. main태그 1 2 3 4 5 6 7 8 9 10 11 12 13 14 Document Colored by Color Scripter cs 3. article태그 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 Document 제목 제목2 내용 제목2 내용 Colored by Color Scripter cs 4.section태그 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 1..

1. 블록요소 1. div, h1,p 2. 사용 가능한 최대 가로 너비를 사용한다. 3. 크기를 지정할 수 있다. 4. width: 100%, height:0으로 시작한다. 5. 수직으로 쌓임 7. margin, padding 위, 아래, 좌, 우의 여백을 사용 가능하다. 8. 레이아웃을 잡는데 사용한다. 2. 인라인요소 1.span, img 2. 필요한 만큼의 너비를 사용한다. 3. 크기를 지정할 수 없다. 4. width:0, height:0 으로 시작한다. 5. 수평으로 쌓임 6. 줄바꿈을 하면 띄워쓰기가 되고 아니면 띄워쓰기 안됨 7. margin, padding 중 위 아래는 사용할 수 없다. 좌우만 가능하다. 8. text에 주로 사용한다. display: block; 인라인 요소를 block..