뇌 채우기 공간

기본적인 표 만드는 법 table태그는 표가 들어올 영역을 차지하는 태그입니다. tr은 행을 이야기 하는 것이고 행이 있어야 열이 있을 수 있습니다. 그러니까 tr먼저 사용합니다. 그리고 td는 열을 의미하는 것입니다. tr의 자식으로 들어옵니다. th는 제목입니다. table head라는 뜻이고 저절로 두껍게 표시가 됩니다. 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 27 28 29 Document 타입 값 알파벳 A 숫자 7 Colored by Color Scripter cs index.html 1 2 3 4 5 6 7 8 9 10 11 12 table{ border-collapse: collapse; } td{ bord..

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..