HTML과 JS를 통해, 불꽃놀이를 표현해 보았다.
https://truemaxdh.github.io/SpecialEffects/#aurora
SpecialEffects - Samples of special effects based on HTML and javascript
truemaxdh.github.io
| cmd 파일 검색 팁 (0) | 2023.06.21 |
|---|---|
| C# 32bit 실행 파일에서 64bit 메모리 사용 방법 (0) | 2022.01.25 |
| HTML5 불꽃놀이 (0) | 2020.07.15 |
| HTML의 DOCTYPE 선언은 정말 중요하다. (0) | 2019.11.02 |
| 잘 되던 톰캣이 갑자기 실행 안될 때 (0) | 2019.09.07 |
HTML과 JS를 통해, 불꽃놀이를 표현해 보았다.
https://truemaxdh.github.io/SpecialEffects/#fireworks
SpecialEffects - Samples of special effects based on HTML and javascript
truemaxdh.github.io
| C# 32bit 실행 파일에서 64bit 메모리 사용 방법 (0) | 2022.01.25 |
|---|---|
| HTML5 오로라 (0) | 2020.11.27 |
| HTML의 DOCTYPE 선언은 정말 중요하다. (0) | 2019.11.02 |
| 잘 되던 톰캣이 갑자기 실행 안될 때 (0) | 2019.09.07 |
| 나의 코드골프 (0) | 2019.08.07 |
얼마전, div 내부 내용을 가로 세로의 중앙으로 위치시키기 위해,
다음과 같은 코드를 적용했었다.
<html>
<head>
<style>
.box {
line-height:150px;
width:150px;
height:150px;
text-align:center;
font-size:14px;
color:#73AD21;
font-weight:bold;
border:1px solid #73AD21;
cursor:pointer;
}
.box p {
line-height: 1.5;
display:inline-block;
vertical-align:middle;
}
</style>
</head>
<body>
<div class="box"> <p>Center</p></div>
</body>
</html>그런데, 아무리 해도 그림과 같이 내용이 위쪽에 붙어서 보이는 것이었다.
<결과>
한참을 헤매다가, 되는 경우와의 차이점을 발견하였다.
바로, <!DOCTYPE html> 구문을 넣지 않아서였던 것이다.
다음과 같이 하니, 잘 되었다.
<!DOCTYPE html>
<html>
<head>
<style>
.box {
line-height:150px;
width:150px;
height:150px;
text-align:center;
font-size:14px;
color:#73AD21;
font-weight:bold;
border:1px solid #73AD21;
cursor:pointer;
}
.box p {
line-height: 1.5;
display:inline-block;
vertical-align:middle;
}
</style>
</head>
<body>
<div class="box"> <p>Center</p></div>
</body>
</html><결과>
그래서, 이 DOCTYPE이 뭔지 찾아보니, 다음과 같은 설명이 있었다.
https://maen2001.tistory.com/2
DOCTYPE 선언의 중요성과 참고자료
출처 : 하드코딩하는사람들 http://cafe.naver.com/hacosa/15708 HTML 문서를 보다 보면 문서 상단에 글들이 놓여 져 있다. 바로 DTD 라는 것인데 DTD란? Document Type Definition 는 브라우저 랜더링 모드를 지..
maen2001.tistory.com
짧은 구문이지만,
이게 없으면 원하는 형식으로 문서를 보여줄 수 없다.
알면 당연하고 쉽지만,
모르면 엄청난 시간과 노력이 낭비될 수도 있다.
세상에는 그런 일들이 참 많이도 있다.
| HTML5 오로라 (0) | 2020.11.27 |
|---|---|
| HTML5 불꽃놀이 (0) | 2020.07.15 |
| 잘 되던 톰캣이 갑자기 실행 안될 때 (0) | 2019.09.07 |
| 나의 코드골프 (0) | 2019.08.07 |
| JavaScript에서 CSV생성시 한글깨짐 해결 방법 (0) | 2019.08.07 |
사람들에게 나무를 그려보라고 하면,
그리는 사람에 따라 정말 다양한 나무 그림이 나올 것이다.
HTML5를 통해 나무를 그리는 것 역시, 다양한 결과물이 나온다.
WaysToDrawTree
Demonstration of various ways to draw tree in HTML5
truemaxdh.github.io
truemaxdh/WaysToDrawTree
Demonstration of various ways to draw tree in HTML5 - truemaxdh/WaysToDrawTree
github.com
https://truemaxdh.github.io/WaysToDrawTree/Tree1.html
truemaxdh.github.io
https://truemaxdh.github.io/WaysToDrawTree/Tree2.html
truemaxdh.github.io
https://truemaxdh.github.io/WaysToDrawTree/Tree3.html
truemaxdh.github.io
https://truemaxdh.github.io/WaysToDrawTree/Tree4.html
truemaxdh.github.io
그밖에 참고할 만한 링크
https://gist.github.com/gsluthra/3401766
Fractal Tree Generation using HTML5 Canvas and Random Numbers
Fractal Tree Generation using HTML5 Canvas and Random Numbers - tree_html5.html
gist.github.com
https://www.codediesel.com/javascript/drawing-trees-in-canvas/
Drawing Trees in Canvas - codediesel
Lately I’ve been experimenting with the new HTML5 Canvas element, and the best way to learn some new technology is to create something in it. For some time I’ve been dabbling in Processing and thought of porting some algorithms there in Canvas. Rather than
www.codediesel.com
https://github.com/PavlyukVadim
PavlyukVadim - Overview
PavlyukVadim has 37 repositories available. Follow their code on GitHub.
github.com
그리고, 이것도 있다.
FFF(Form Follows Function) - Plant Tree
Form Follows Function
FFF is a collection of interactive experiences. Each experience has its own unique design and functionality.
fff.cmiscm.com
HTML5로 나무를 그리는 방법은,
기본적으로는 CANVAS 및 재귀함수를 사용하여 그린다는 공통점이 있다.
하지만, 여기에 각자의 차이점들이 더해지면서,
실로 다양한 그림이 나올 수 있다는 것을 느꼈다.
그 차이점은, 프로그래밍 지식이나 스타일에 국한되지 않고,
사물에 대한 지식, 미적 감각, 관찰력, 상상력 및 창의성 등 다양한 분야에서 드러난다.
단순히 나무를 그리는 작업도, 생각보다 재밌는 놀이가 될 수 있다.
'놀이'(Play)라는 관점으로 접근하면, 많은 일들이 재밌어질 수 있을 것이다.
| JavaScript에서 file을 바로 만들어 다운로드 하는 방법 (0) | 2019.08.07 |
|---|---|
| Tibero 접속 및 사용로그 확인페이지 개발 (0) | 2019.08.01 |
| 한글깨짐 (0) | 2019.05.29 |
| c++ Socket프로그래밍에서 bind의 namespace 문제 해결방법 (0) | 2019.05.03 |
| 리눅스에 SVN 설치하기 (0) | 2019.04.29 |
| 리눅스에 SVN 설치하기 (0) | 2019.04.29 |
|---|---|
| WebAudio API를 이용한 간단한 화음 (0) | 2018.06.03 |
| CSS 위주로 만든 간단한 게임 (0) | 2018.05.05 |
| 자바스크립트 피아노 (0) | 2018.04.26 |
| [HTML/Javascript]Select Box 변경 못하게 막는 방법 (0) | 2018.04.23 |