분류 전체보기 (39) 썸네일형 리스트형 검은사제들 영화 후기 파묘 영화를 보고 나름 재미있게 보고 나서 추천을 받아 보게되었다. 파묘 처럼 오컬트 장르이고 같은 감독 영화였다. 파묘와 비슷한 플롯을 가졌는데 소재가 참신해서 그런지 무척 흥미진진했다. 배우들 연기도 잘 하고 스토리도 무섭기만 한 것이 아니라 감동적인 내용도 있어서 좋았다. 같은 감독 영화로 사바하도 있던데 봐야겠다. CSS의 box-shadow 속성을 이용하여 픽셀 찍기 CSS의 box-shadow 속성을 이용하여 픽셀을 찍을 수 있다. 방법은 간단하다. 우선 1x1 크기의 요소를 만든다. .canvas { width: 1px; height: 1px; } 그리고 box-shadow 속성을 사용하여 .canvas 요소와 동일한 크기의 그림자를 만들고 x-offset, y-offset 을 수정하여 그림자를 이동시키면 된다. .canvas { width: 1px; height: 1px; box-shadow: 1px 2px blue, 1px 0 red, 0 1px yellow, 2px 1px green, 1px 1px black; } 만약, 더 큰 픽셀을 찍고 싶다면 .canvas 요소의 크기를 조절하면 된다. 이때 box-shadow 속성의 x-offset, y-offset .. CSS를 이용한 3D 캔 CSS를 이용한 3D 캔 https://codepen.io/hwanlee/pen/vYjLdov 3D Can ... codepen.io 참고 강좌: Kevin Powell - 3D text animations with CSS https://www.youtube.com/watch?v=NSWr6dkc_Xw 1분 코딩 - CSS 3D https://www.youtube.com/watch?v=rFQFnaiskIc 네이버 블로그:마이구미 - 원주율의 역사 4. 정다각형법 https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=2gumin14&logNo=221026274092 CSS를 이용한 3D 책상 CSS를 이용한 3D 책상 https://codepen.io/hwanlee/pen/VwxeWpN 3D Desk ... codepen.io 참고 강좌: Kevin Powell - Create a 3D flipping animation with HTML and CSS https://www.youtube.com/watch?v=FeJEEE3zc4U 1분 코딩 - CSS 3D https://www.youtube.com/watch?v=LrdyyxN1zqM https://www.youtube.com/watch?v=rFQFnaiskIc CSS 3D 축 CSS에서의 3D 축은 다음과 같다. 3D 축을 HTML, CSS를 이용하여 다음과 같이 만들 수 있다. x y z body { position: relative; width: 100vw; height: 100vh; margin: 0; padding: 0; background-color: #000; } .container { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 500px; height: 500px; margin: auto; perspective: 600px; perspective-origin: top right; } .x-axis { position: absolute; top: 50%; width: 100%; height: .. SVG를 이용한 라인 그래프(Bar Chart) 만들기 SVG를 이용한 라인 그래프 만들기 계산 방식 데이터들 중 최솟값과 최댓값을 찾는다. 최댓값 - 최솟값을 하여 변화량(delta)을 구한다. y값을 계산하기 위해 데이터값에 최솟값을 빼주고 (svg 높이 / delta) 값을 곱해준다. ex) max=10, min=-10, svgHeight=100, data=0일 경우 y = (0 - (-10)) * (100 / 20) = 50 x값은 index * 컬럼 너비 + 컬럼 너비 / 2로 설정하여 각 컬럼의 중간에 기준점을 표시하도록 하였다. 데이터가 최솟값이거나 최댓값일 경우 svg로 표시할 경우 잘리는 경우가 발생할 수 있어 y에 offset을 더해주었다. y: (value - minValue) * (svgHeight / delta) + offset 코드 .. SVG를 이용한 정오각형 그리기 1. 정오각형 특징 정다각형은 모든 각의 크기가 같으며 모든 변의 길이도 같은 다각형이다. 오각형의 내각의 합은 540°이다. 따라서 정오각형의 한 각의 크기는 108˚이다. 또한 각 꼭짓점에서 중심점으로 이루는 선분들의 각이 72˚이다. 2. 삼각함수를 이용한 꼭짓점 위치 계산 정오각형은 원에 내접함으로 무게 중심을 (0, 0)이라고 하고 반지름을 h라고 했을 때 각 꼭짓점의 위치를 다음과 같이 나타낼 수 있다. 3. y축 방향 변경, 중점 변경 수학에서의 y좌표는 값이 증가할수록 위쪽으로 가지만 svg에서는 증가할수록 아래쪽으로 간다. 따라서 sin 값을 계산할때는 180˚를 더해주어야한다. 중점도 0, 0으로 두어 계산할 경우 음수값이 생길 수 있어 svg 크기를 (h * 2, h * 2)로 설정후.. aria-current 설정시 센스리더는 어떻게 읽어줄까 다음과 같은 코드를 센스리더에게 읽도록 해보았다. 스포츠 스포츠 스포츠 스포츠 스포츠 스포츠 결과는 전체 URL 정보가아닌 "#" 문자("fragment" or "named anchor" 라고 함)가 있을 경우 "스포츠 현재 페이지 링크"라고 읽어주며 그 외의 경우 모두 "스포츠 링크"라고 읽어준다. 즉, 아래 태그들만 "스포츠 현재 페이지 링크" 라고 읽어주었다. 스포츠 스포츠 스포츠 테스트는 센스리더 7.4 데모버전을 사용했다. 이전 1 2 3 4 5 다음
