전체 글 (31) 썸네일형 리스트형 캔버스 기본 도형 그리기 - 사각형 외 캔버스에서 사각형을 제외한 삼각형이나 원 같은 도형들은 별도의 메서드를 제공하지 않고 경로 그리기를 이용해 도형을 그립니다. 경로를 이용해 도형을 그릴 경우 다음과 같은 단계를 거칩니다. ① beginPath() 메서드를 이용해 경로가 시작됨을 알립니다. ② 직선이든, 호든 원하는 경로를 그립니다. 경로를 그리는 메서드는 캔버스 API에서 제공하고 있습니다. 경로에 따라 사용하는 메서드가 달라지겠죠? ③ closePath() 메서드를 이용해서 경로 시작점부터 끝나는 점까지 선을 그립니다. 이 메서드는 옵션 사항이기 때문에, 도형을 채울 경우에는 이 메서드를 사용하지 않아도 됩니다. ④ stroke() 메서드로 테두리를 그리거나 fill() 메서드로 도형을 채웁니다. 경로를 만들 때 사용하는 메서드 beg.. [캔버스] 기본 도형 그리기 canvas는 웹에서 직접 그림을 그리거나 표시할 수 있도록 HTML5에 도입된 그래픽 요소로, 자바스크립트 프로그램을 통해 무엇인가를 그리거나 색상을 칠할 수 있습니다. 이렇게 웹 상에 그림을 그릴 수 있게 해주는 기능들은 Canvas API에 모두 모여 있죠. 태그 태그는 웹 페이지에서 그래픽을 제어할 수 있는 캔버스 영역을 지정합니다. 캔버스 영역에서는 그림을 그릴 수 있을 뿐 아니라 이미지나 동영상을 불러와서 조작할 수도 있습니다. 태그만 사용하면 브라우저에서 기본으로 지정한 크기만큼 만들어지고, width와 height 속성을 사용하면 캔버스 크기를 직접 지정할 수 있습니다 크기를 지정하지 않을 때 크기를 지정했을 때 400*300 화면 전체를 캔버스로 사용하기 화면 전체를 캔버스로 사용하려면 .. 좌우로 왔다갔다 하는 CSS 애니메이션 1. CSS 애니메이션 만들기 CSS에서 기본 애니메이션을 만들려면 @keyframes 규칙을 사용하여 애니메이션을 정의한 다음 animation 속성을 사용하여 요소에 적용합니다. 다음은 box 요소를 왼쪽에서 오른쪽으로 이동시키는 간단한 애니메이션의 예입니다. /* 애니메이션 정의하기 */ @keyframes move-right { 0% { left: 0; } 100% { left: calc(100% - 50px); } } @keyframes move-left { 0% { left: calc(100% - 50px); } 100% { left: 0; } } /* 애니메이션 적용하기 */ .box { width: 50px; height: 50px; background-color: red; position.. 2023년부터는 나이가 줄어든다? - 만 나이 계산하기 외국의 나이 계산 방식과 우리 나라의 나이 계산 방식이 달라서, 그 동안 우리는 '세는 나이'와 '만 나이'를 따로 계산했었습니다. '세는 나이'는 태어나면서부터 1살이 되고 다음에 1월1일이 되면 1살씩 증가시키는 방법으로, 지금까지 우리가 사용하던 방법입니다. 현재 연도에서 태어난 연도를 뺀 후 1을 더해서 계산했었죠. 반면 '만 나이'는 출생 직후 0살에서 시작해 생년월일을 기점으로 1년이 지날 때마다 1살씩 늘어나는 방법입니다. 공공 기관 서류에 나이를 적거나 미성년/성년을 따질 때도 이 만나이를 사용합니다. 그리고 만 나이는 대부분의 국가에서 통용되는 나이 계산법이죠. 2023년 6월부터는 '세는 나이'를 없애고 '만 나이'를 사용하게 됩니다. 누군가는 그 날부터 나이가 2살 줄어든다고도 하고,.. 박스 모델 테두리에 이미지 넣기 박스 모델 테두리에 이미지를 넣기 위해서는 사용할 이미지를 지정하고, 그 이미지를 필요한만큼 쪼개서 가져와야 합니다. 여기서 중요한 것은 원본 이미지를 어떻게 나눌까, 하는 것입니다. 관련된 속성을 하나씩 살펴보면서 어떻게 적용되는지 살펴보죠. border-images-source 속성 박스 모델 테두리에 어떤 이미지를 넣을지 지정합니다. 만일 테두리 이미지를 가져오지 못할 경우를 대비해서 일반적인 테두리 스타일도 작성해야 합니다. 기본값은 none입니다. .box { width:300px; height: 300px; background-color: #eee; border: 36px solid orange; border-image-source : url('images/border.png’); } bord.. 이전 1 2 3 4 5 6 7 다음
