Web API - Canvas 기본 사용법 - 웹 페이지에서 캔버스로 원하는 위치에 직선 그리기

Overview 이번 포스팅에서는... 캔버스의 기본을 이해하고 캔버스 2D 컨텍스트 설정 방법을 알게되고 캔버스 위에 마우스로 클릭하여 원하는 위치에 직선을 생성하는 것을 다룹니다. 캔버스 (Canvas) HTML5에서 추가된 요소 중 하나 스크립트(보통은 자바스크립트)를 사용하여 그림을 그리는 데에 사용 예) 그래프 그리기, 사진 합성, 애니메이션 등 다양한 그래픽 만들기 캔버스에 드로잉(Drawing) 영역을 생성하고 하나 이상의 렌더링 컨텍스트를 노출하여 출력할 컨텐츠를 생성 그래프 만들기, 도형 그리기 등 : 2D 렌더링 컨텍스트 WebGL, OpenGL ES 기반 : 3D 렌더링 컨텍스트 즉, 자바스크립트를 사용하여 캔버스의 렌더링 컨텍스트에 접근하여 콘텐츠를 생성하는 기능을 가짐 캔버스 요소..

• format_list_bulleted Web/html & css & xml
• · 2023. 7. 10.
• textsms

jsTree - 페이지에서 트리(디렉토리) 구조를 만들어주는 라이브러리 사용 방법

jsTree란? 대화형 트리를 제공하는 jQuery 플러그인 쉽게 확장, 테마 설정 및 구성이 가능 HTML 및 JSON 데이터 소스와 AJAX 로딩 지원 jQuery의 이벤트 시스템을 사용하여 트리의 다양한 이벤트에 콜백을 바인딩 jsTree 사용 설정 jsTree 테마 (CSS) 호출 (CDNJS) jsTree 사용을 위한 jQuery 호출 (CDNJS) jsTree 호출 html 전체 소스 코드 jsTree 구조 설계 해당 코드는 태그 내에 작성 jsTree 컨테이너 생성 jsTree 구조 설계 아래와 같이 총 루트 노드 2개와 각각 2개의 자식노드를 갖도록 가정 루트 노드1 1-자식노드1 1-자식노드2 루트 노드2 2-자식노드1 2-자식노드2 jsTree 생성 및 노드 선택 이벤트 자바스크립트의 ..

• format_list_bulleted Web/Javascript
• · 2023. 6. 26.
• textsms

IE Error) 인터넷 익스플로러 - 개발자 도구 열었을 때만 정상 작동하는 경우 대처법

Error 인터넷 익스플로러 혹은 엣지에서 IE 모드로 페이지를 접속하였을 때, 작성된 소스 코드가 실행되지 않으나 이상하게도 개발자 도구를 열면 정상 작동하는 현상이 발생하였다. IE의 버전 문제인가도 싶어서 개발자 도구에서 IE의 문서 모드, 인터넷 익스플로러 버전 등을 변경하였지만 연관성은 없어 보인다. 해결방법 메타 태그를 이용하여 브라우저가 렌더링 할 수 있도록 브라우저 호환성 모드를 설정하면 된다. 1. 문제가 발생한 페이지를 에디터로 연다. (Visual Studio Code, 메모장 등) 2. 메타 태그를 추가하거나 수정한다. 아래의 코드 html 문서 내에 추가 간단 설명 edge 엔진으로 렌더링하도록 브라우저에게 지시 최신 기능과 표준을 사용할 수 있음 즉, 이 글을 보는 우리는 엣지 ..

• format_list_bulleted Web/html & css & xml
• · 2023. 5. 31.
• textsms

JS Variable Error) 인터넷 익스플로러에서의 const와 let

서론 회사의 업무 절차는 현재 개발된 프로그램에 의해 IE로 작업을 진행한다. 때문에 우리 회사는 디버깅을 할 때 IE의 호환성의 여부를 가장 중요시 여긴다. 어느 순간, 내가 새로 추가한 코드로 인해 익스플로러에서 작동을 하지 않는다는 접수가 들어왔다. 문제가 무엇일까...? IE에서의 const와 let 결론부터 말하면, 인터넷 익스플로러에서는 const와 let 타입의 변수 명시는 허용하지 않는다. 정확히 말하면 인터넷 익스플로러 10 이하에서 지원하지 않는다. 때문에 자바스크립트의 코드가 작동하지 않으며 오류가 발생하는 것이다. 인터넷 익스플로러까지 고려한 코드 설계를 하려면 IE 핵을 사용하거나, 아니면 마음편하게 var 로 변수를 명시하는 것이 마음 편하다. IE Hack 포스팅 자세히 보러 ..

• format_list_bulleted Web/Javascript
• · 2023. 5. 30.
• textsms

CSS - text-indent (텍스트 들여쓰기, 내어쓰기)

text-indent 블록에서 텍스트 줄 앞에 놓이는 빈 공간(들여쓰기)의 길이를 설정하는 속성 속성 값이 양수일 경우, 들여쓰기 들여쓰기 : 문장을 쓸 때 문자열을 오른쪽으로 당겨 주변의 문장과 구분하는 것 속성 값이 음수일 경우, 내어쓰기처럼 보이지만 화면을 벗어날 수 있으므로 주의해서 사용하여야 함 내어쓰기 : 들여쓰기의 반대 용어로 같은 문단에 있는 다른줄보다 왼쪽으로 더 내어 작성하는 것 구문 text-indent: 속성값 사용 예시 CSS에서 text-indent를 이용하여 들여쓰기를 적용한 문장입니다. 이 문장은 첫번째 줄이 들여쓰기가 되고 들여쓰기의 값은 30px의 여백을 가집니다. CSS에서 text-indent를 이용하여 내어쓰기를 적용한 문장입니다. 이 문장은 첫번째 줄을 제외한 나머..

• format_list_bulleted Web/html & css & xml
• · 2023. 4. 28.
• textsms

HTML - SVG를 이용하여 도형 그리기

SVG(Scalable Vector Graphics) 2차원 벡터 그래픽을 서술하는 XML 기반의 마크업 언어 텍스트 기반의 열린 웹 표준 중 하나 모든 사이즈에서 깔끔하게 렌더링 되는 이미지를 서술 CSS, DOM, JavaScript 등 다른 웹 표준과도 잘 작동하도록 설계 즉, HTML과 텍스트의 관계를 그래픽에 적용한 것 장점 벡터 이미지 이므로 손실이나 품질 저하 없이 모든 크기에서 렌더링 가능 XML 텍스트 파일러 정의하기 때문에 검색, 색인, 스크립트 적용, 압축, 아무 텍스트 편집기로 생성 및 편집 가능 도형 그리기 (Draw Shape) 사각형(Rectangle) x : 사각형의 좌측 상단 x 값 y : 사각형의 좌측 상단 y 값 width : 사각형의 폭 height : 사각형의 높이 ..

• format_list_bulleted Web/html & css & xml
• · 2023. 4. 28.
• textsms