반응형
반응형
Overview 이번 포스팅에서는... 캔버스의 기본을 이해하고 캔버스 2D 컨텍스트 설정 방법을 알게되고 캔버스 위에 마우스로 클릭하여 원하는 위치에 직선을 생성하는 것을 다룹니다. 캔버스 (Canvas) HTML5에서 추가된 요소 중 하나 스크립트(보통은 자바스크립트)를 사용하여 그림을 그리는 데에 사용 예) 그래프 그리기, 사진 합성, 애니메이션 등 다양한 그래픽 만들기 캔버스에 드로잉(Drawing) 영역을 생성하고 하나 이상의 렌더링 컨텍스트를 노출하여 출력할 컨텐츠를 생성 그래프 만들기, 도형 그리기 등 : 2D 렌더링 컨텍스트 WebGL, OpenGL ES 기반 : 3D 렌더링 컨텍스트 즉, 자바스크립트를 사용하여 캔버스의 렌더링 컨텍스트에 접근하여 콘텐츠를 생성하는 기능을 가짐 캔버스 요소..
Error 인터넷 익스플로러 혹은 엣지에서 IE 모드로 페이지를 접속하였을 때, 작성된 소스 코드가 실행되지 않으나 이상하게도 개발자 도구를 열면 정상 작동하는 현상이 발생하였다. IE의 버전 문제인가도 싶어서 개발자 도구에서 IE의 문서 모드, 인터넷 익스플로러 버전 등을 변경하였지만 연관성은 없어 보인다. 해결방법 메타 태그를 이용하여 브라우저가 렌더링 할 수 있도록 브라우저 호환성 모드를 설정하면 된다. 1. 문제가 발생한 페이지를 에디터로 연다. (Visual Studio Code, 메모장 등) 2. 메타 태그를 추가하거나 수정한다. 아래의 코드 html 문서 내에 추가 간단 설명 edge 엔진으로 렌더링하도록 브라우저에게 지시 최신 기능과 표준을 사용할 수 있음 즉, 이 글을 보는 우리는 엣지 ..
text-indent 블록에서 텍스트 줄 앞에 놓이는 빈 공간(들여쓰기)의 길이를 설정하는 속성 속성 값이 양수일 경우, 들여쓰기 들여쓰기 : 문장을 쓸 때 문자열을 오른쪽으로 당겨 주변의 문장과 구분하는 것 속성 값이 음수일 경우, 내어쓰기처럼 보이지만 화면을 벗어날 수 있으므로 주의해서 사용하여야 함 내어쓰기 : 들여쓰기의 반대 용어로 같은 문단에 있는 다른줄보다 왼쪽으로 더 내어 작성하는 것 구문 text-indent: 속성값 사용 예시 CSS에서 text-indent를 이용하여 들여쓰기를 적용한 문장입니다. 이 문장은 첫번째 줄이 들여쓰기가 되고 들여쓰기의 값은 30px의 여백을 가집니다. CSS에서 text-indent를 이용하여 내어쓰기를 적용한 문장입니다. 이 문장은 첫번째 줄을 제외한 나머..
SVG(Scalable Vector Graphics) 2차원 벡터 그래픽을 서술하는 XML 기반의 마크업 언어 텍스트 기반의 열린 웹 표준 중 하나 모든 사이즈에서 깔끔하게 렌더링 되는 이미지를 서술 CSS, DOM, JavaScript 등 다른 웹 표준과도 잘 작동하도록 설계 즉, HTML과 텍스트의 관계를 그래픽에 적용한 것 장점 벡터 이미지 이므로 손실이나 품질 저하 없이 모든 크기에서 렌더링 가능 XML 텍스트 파일러 정의하기 때문에 검색, 색인, 스크립트 적용, 압축, 아무 텍스트 편집기로 생성 및 편집 가능 도형 그리기 (Draw Shape) 사각형(Rectangle) x : 사각형의 좌측 상단 x 값 y : 사각형의 좌측 상단 y 값 width : 사각형의 폭 height : 사각형의 높이 ..
폰트 관련 속성 font : 속성 font-family : 폰트 종류 font-size : 폰트 크기 font-style : 폰트 형태 font-variant : 폰트 변형 font-weight : 폰트 두께 변환 관련 속성 transform : 변환 transform-origin : 변환 중심 transform-style : 변환 형태 perspective : 투시 수치 perspective-origin : 투시 중심 backface-visibility : 후면 가시성 변형 관련 속성 transition : 변형 transition-property : 변형 대상 transition-duration : 변형 진행 시간 transitiontiming-function : 변형 수치 변환 함수 transiti..
주석 태그 설명 : 부가 설명 HTML 구조 태그 표시 형태 : block 설명 : 문서 형태 표시 형태 : none 설명 : 문서 자체 표시 형태 : none 설명 : 문서 머리 표시 형태 : none 설명 : 문서 제목 표시 형태 : none 설명 : 문서 추가 정보 표시 형태 : block 설명 : 문서 본문 파일 태그 표시 형태 : none 설명 : 외부 파일 추가 표시 형태 : none 설명 : 스타일시트 표시 형태 : none 설명 : 스크립트 공간 태그 표시 형태 : block 설명 : block 형식의 공간 표시 형태 : inline 설명 : inline 형식의 공간 시멘틱 구조 태그 표시 형태 : block 설명 : 본문 표시 형태 : block 설명 : 수직 목록 표시 형태 : bloc..
내 블로그 - 관리자 홈 전환 |
Q
Q
|
---|---|
새 글 쓰기 |
W
W
|
글 수정 (권한 있는 경우) |
E
E
|
---|---|
댓글 영역으로 이동 |
C
C
|
이 페이지의 URL 복사 |
S
S
|
---|---|
맨 위로 이동 |
T
T
|
티스토리 홈 이동 |
H
H
|
단축키 안내 |
Shift + /
⇧ + /
|
* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.