Offset
-
JavaScript 입문 : Canvas 이론 정리 - 마우스 이벤트로 좌표 이해 및 (clientX, clientY, offsetLeft, offsetTop) 클릭되는 지점 원 그리기컴퓨터 알아가기/JavaScript 2022. 11. 25. 19:30
이번 시간에는 캔버스 위에 마우스로 작은 원을 찍는 개념을 보고자 합니다. 이를 위해서는 캔버스와 화면에서 위치를 나타내는 속성에 대한 이해가 필요한데 강좌의 내용과도 다른 내용도 있어 자신만의 환경에 맞는 상황들을 분석해 가면서 위치에 대한 개념을 잡는게 중요하다고 봅니다. 역시 본 내용은 '1분코딩 HTML5 캔버스 라이브 강좌'를 기본으로 공부해 보고자 합니다. 1. 원 그리기 함수 만들기 캔버스 위에 클릭이벤트를 활용한 원 그리기 함수를 만들어 봅니다. 마우스를 클릭하면 x, y축으로부터 100씩 떨어진 반지름 10인 원이 다음과 같이 그려집니다. 여기까지야 쉽게 만들수 있습니다. 2. 매개변수(event) 속성 확인 궁극적 목적은 마우스를 클릭하는 지점마다 원을 그리는 것이기 때문에 매개변수로 ..
-
CSS 기본 Position, Position : Relative, Position : Absolute, Position : Fixed컴퓨터 알아가기/HTML CSS 2021. 3. 29. 19:30
지난 시간까지 CSS의 중요한 요소인 BOX 모델에 대해 개념을 잡아 보았습니다. 이제부터는 본격적으로 CSS의 근본적인 스타일링 중에서 위치를 잡아가는 내용에 대해 알아보도록 하겠습니다. ▒ Position (위치) 개요 다음 HTML과 CSS내용을 참조해 보시고 브라우저에 어떤 형태로 나오는지 상상해 보세요. 위 이미지를 보면 두개의 태그가 나타내는 공간은 서로 겹쳐지지 않습니다. 그리고 왼쪽으로 일관되게 배치가 됩니다. 지금은 위치에 대한 속성이 기본값으로 설정되어 있고 이는 왼쪽 위부터 자리를 차지하게 됩니다. 위치에 대한 속성은 position으로 나타내고 속성값은 다음 4가지로 요약할 수 있습니다. ▶ static (기본 설정값입니다. 지정할 필요가 없습니다.), relative, absolu..