html6 [HTML5 웹 프로그래밍] 캔버스(canvas) 캔버스란? 자바스크립트 코드를 이용해서 웹브라우저에 그림을 그리는 기능 별도 프로그램 설치 없이 사용 그림을 그리고 합성 , 변환 애니메이션 같은 효과 표현 가능 캔버스 영역 지정 캔버스 영역 웹 페이지 에서 그림이 그려지는 투명한 사각형 영역 캔버스 객체와 캔버스 컨텍스트 객체 생성 캔버스 생성 → 캔버스 객체 생성 → 캔버스 컨텍스트 객체 생성 → 실제 그림을 그림 캔버스 객체 생성 let 변수명 = document.getElementById("canvcas_id_속성값"); let canvas = document.getElementById('maCanvas') 캔버스 컨텍스트 객체 생성 let 변수명 = canvas변수.getContext('2d'); let ctx = canvas.getContex.. 2023. 6. 13. [HTML5 웹 프로그래밍] 문서 & 브라우저 객체 모델 문서 객체 모델 ( DOM, document object model ) 문서 객체 HTML 문서의 각 요소를 자바스크립트에서 사용할 수 있도록 객체로 만든 것 DOM 브라우저가 HTML 문서에 접근 할 수 있도록 정의해 놓은 표준 모델 HTML 문서를 분석하고 표시하는 방식 문서가 적재되면 브라우저는 정적으로 DOM 생성 계층적인 구조를 갖는 트리로 표현 → DOM 트리 자바스크립트를 이용하면 프로그램 실행 중에 웹 문서의 내용, 구조 및 스타일에 대한 작업 가능 → 결과가 즉각 화면에 반영 브라우저 객체 모델(BOM , browser object model) 브라우저를 객체로 표현 window ┌ document : html 문서를 표현 (최상위) ├ history : 사용자가 방문한 URL을 저장 관.. 2023. 6. 13. [HTML5 웹프로그래밍] HTML5 웹 요소 텍스트 표현 요소 요소 의미 요소 의미 ~ h6 제목 태그 문단을 나누는 단락을 생성 줄바꿈 태그 수평선을 그려줌 , 콘텐츠 구분의 용도 편집기의 문자를 그대로 출력 인용문 생성 및 들여쓰기 공백 및 특수문자 &엔티티코드; 
진수; 진수; 특수이름 문자 엔티티코드 10진수 16진수 공백 nbsp 32 20 더하기 + plus 43 2B 빼기 - minus 45 2D 곱하기 * times 42 2A 나누기 / divide 47 2F 등호 = equals 61 3D 물리적 스타일 관련 요소 단순히 웹 브라우저에 표시되는 출력 모양만을 지정하는 요소 요소 의미 글씨체 굵게 bold 처리 글씨 이탤릭체 글씨 가운데 취소 선 글씨 언더라인 글씨 위로 정렬 아래로 정렬 글씨 작게 표시 논리적 스타일 .. 2023. 6. 13. 검색 엔진 최적화 (SEO, Search Engine Optimization) 검색엔진 최적화(SEO) 란? 검색 엔진은 웹 사이트 나 페이지의 데이터나 기능들을 봇이 읽어(크롤링)가서, 홈페이지의 구조와 기능을 파악하여 포털(검색엔진) 사이트에 노출을 시키게 된다. 이 과정에서 홈페이지의 구조와 페이지를 검색 엔진이 이해하기 쉽도록 개발하여, 상위에 노출 시킬 수 있도록 하는 작업을 검색엔진 최적화라 한다. 검색엔진 봇은 데이터를 크롤링 하는 과정에서 JavaScript 파일을 해석하지 못하고, html 문서 기준에서 정보를 수집해 가기 때문에 구조적 설계를 잘 해줘야 한다. CSR(Client-Side Rendering) 방식의 페이지 들의 경우 JS를 읽어 페이지를 구성해주는 형식이기에, JS를 사용하지 못하는 상태에서는 HTML문서에 아무것도 나타나지 않아, 검색 엔진이 제.. 2022. 12. 28. [HTML , Error] Failed to load resource: the server responded ... 1. 에러 상황 nodeJS 공부중 console 창만 키면 보임 / 서버가 돌아가는 부분에서 아무 문제가 없다. 2. 이유 상단 주소 부분에 favicon 링크가 존재하지 않아 생기는 오류이다. (거슬리지 않다면 안해도 무관.) 3. 해결 html파일 상단부분에 파비콘을 만들어서 넣어준다 하단 link 태그 를 넣어준다. // 지구본 모양 파비콘을 표시해준다. 2022. 11. 25. [HTML] <a> tag a 태그 태그는 하이퍼링크를 걸어주는 태그다. 속성 href: 클릭시 이동 할 링크 target: 링크를 여는 방법 _self: 링크를 현재 페이지에서 오픈. (기본값) _blank: 링크를 새로운 창 새로운 페이지에서 오픈. _parent: 링크를 현재 프레임의 부모 프레임에서 오픈. _top: 링크를 윈도우페이지에서 오픈. (최상위 페이지) 프레임이름: 직접 프레임이름을 명시하고, 명시한 프레임 이름이 있는 곳에서 오픈. 사용방법 링크 열기 a태그의 href를 사용하고 싶지 않을때, href속성을 사용하지 않고 onClick() 이벤트를 사용하거나, 디자인적으로 사용하기 위함이다. 그럴때 유용히 쓰는 방법이 href= "" 값에 특정 값을 넣어주는 방법이다. 01. # 해시(hash) # 해시(has.. 2022. 11. 25. 이전 1 다음 728x90
