[Toy Project] 웹페이지에서 랜덤한 픽셀 떨어뜨리기 애니메이션 구현하기 [CSS 애니메이션과 JavaScrip- 웹페이지에서 랜덤한 픽셀 떨어뜨리기 애니메이션 구현하기웹페이지에서 픽셀들이 화면 상단에서 하단으로 랜덤하게 떨어지는 간단한 애니메이션을 구현해보려 한다.HTML, CSS, JavaScript를yermi.tistory.com- 떨어지는 픽셀이 바닥에 쌓이는 애니메이션 구현하기이번에는 화면 상단에서 떨어지는 랜덤한 색상의 픽셀이 바닥에 쌓이는 애니메이션을 구현해보려고 한다.- stacking-pixels.htmlpixel-container를 포함한 HTML 기본 구조를 설정한다.이 컨테이너는 픽셀들이 쌓이는 공간이 된다. - stacking-pixels.csspixel-con..

- 웹페이지에서 랜덤한 픽셀 떨어뜨리기 애니메이션 구현하기웹페이지에서 픽셀들이 화면 상단에서 하단으로 랜덤하게 떨어지는 간단한 애니메이션을 구현해보려 한다.HTML, CSS, JavaScript를 사용하여 간단하게 만들어 볼 것이다.- falling-pixels.htmlHTML 파일에서는 기본적인 구조와 컨테이너 요소(pixel-container)를 정의한다.pixel-container는 픽셀들이 떨어질 영역을 지정한다. -falling-pixels.csspixel-container와 pixel 클래스에 대한 스타일을 지정한다.픽셀의 크기, 초기 위치, 애니메이션 키프레임(@keyframes fall)을 설정하여 픽셀들이 떨어지는 동작을 구현한다.body { margin: 0; p..

- .htm과 .html의 차이 "htm"과 "html"은 사실상 같은 것을 가리키는 용어이다. 과거에는 MS-DOS 및 Windows 운영체제의 파일 시스템이 8.3 형식(8글자의 파일 이름과 3글자의 확장자)으로 제한되어 파일 이름이 ".html"이 아닌 ".htm"으로 짧게 사용되는 경우가 있었는데, 이는 오래된 웹 프로젝트에서 종종 볼 수 있다. 웹 브라우저에서는 이 두 확장자를 동일하게 처리한다. 예를 들어, "index.html"을 "index.htm"으로 바꾸는 것은 기술적으로는 동일한 내용의 파일이지만, 파일 이름의 길이가 8자 이내로 제한되는 특정 상황에서 "HTM" 확장자를 사용하는 것이다. 그러나 현대의 운영 체제에서는 파일 이름의 길이에 제한이 거의 없어졌기 때문에 "HTML"이 더..

- 시맨틱 태그(semantic)란? semantic : 의미가 통하는 태그만 보고도 페이지 구조를 쉽게 이해할 수 있도록 정의된 태그 → 사용하지 않더라도 웹 문서를 만들 수 있으나, 웹 접근성 부분에서 매우 중요하다. Joandora 가장 제주다운 수산리집 이용 안내 객실 소개 예약 방법 예약하기 요안도라 소개 요안도라는 게스트 하우스(Guest House) 형식의 농어촌 민박입니다. 성산의 날씨는 다음주 내내 높은 구름에 ...... 오늘은 사진에 보이는 긴 돌담을 따라 ...... 내일은 두달 엳동안 밖거리에 만든 ...... 알립니다 게스트 하우스 예약은 전화 070-###-#### ...... 제주특별자치도 남제주군 성산읍 수산리 000번지 요안도라 yan##@naver.com Copyrigh..

- 여백을 조절하는 속성들 1. margin 속성 마진(margin)은 현재 요소 주변의 여백이다. → 한 요소와 다른 요소 사이의 간격을 조절할 수 있다. 제목 내용 제목 내용 제목 내용 제목 내용 2. padding 속성 패딩(padding)은 콘텐츠 영역과 테두리 사이의 여백이다. .outer div { width: 200px; height: 150px; border: 2px solid; margin: 30px; float: left; padding:10px; /* 위에 상자에서 padding 추가 */ } 참고문헌 : 고경희(2019), HTML5+CSS3 웹 표준의 정석, 이지스 퍼블리싱