개발/HTML-CSS (15) 썸네일형 리스트형 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를 이용한 정오각형 그리기 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 데모버전을 사용했다. stroke-dasharray, stroke-dashoffset 속성 stroke-dasharray: 모양의 윤곽선을 그리는 데 사용되는 대시 및 간격의 패턴을 정의하는 프레젠테이션 속성 stroke-dashoffset: 관련된 stroke-dasharray의 렌더링 시작점에 대한 오프셋을 정의하는 프레젠테이션 속성 원의 경우 선(dash)의 시작점은 시계방향 90도 지점이다. 만약 원의 지름의 1/2 값을 stroke-dasharray에 지정할 경우 원의 둘레가 1/2만 그려진다. 참고로 dash는 여러 뜻이 있지만 수평선의 뜻을 가지고 있기도 하다. 사용 예제: codepen.io/hwanlee/pen/QWKBegG stroke dasharray, stroke dashoffset ... codepen.io 참고 - developer.mozilla.org/en-US/do.. Happy New Year! codepen.io/hwanlee/pen/wvzPpJO happy new year ... codepen.io 2021년 기념으로, 집에서 해돋이(?)를 보기위해 HTML, CSS, JS를 이용하여 마우스 호버시 태양이 떠오르는 페이지를 만들어봤습니다. 넓은 화면에서 보는 것을 추천합니다~ 다음에는 반응형으로 만들어 봐야겠습니다ㅎ 이전 1 2 다음
