CSS 썸네일형 리스트형 CSS와 Javascript로 Dom에서 node 위치 변경하기 Rotate! 위의 돌아가는 네게의 창은 div 네개로 만들어져있다. HTML은 아래같이 해놓았다. (더보기를 클릭) Div 하나에 4개의 div를 넣고 각각에 색칠을 해놓은 것 뿐이다. 그럼 저걸 돌아가게 만들어보쟈~! Rotate! 위와 같이 rotate 함수를 만들어서 setInterval로 1초마다 호출해주면 div_container에서 class가 r_div인 div 네개를 꺼내서 돌아가는 것처럼 보이게 순서를 재배치 해준다. 브라우저가 div를 다시 그려주기 때문에 돈는 것 처럼 보인다. Rotate 버튼을 눌러도 돈다~~ 구글 크롬의 개발자 도구 (F12를 누르면 나옴) 에서 살펴보면 1초마다 layout을 변경하고 paint를 다시 하는 것을 볼 수 있다. 한마디로 좋지 않음 ㅎ node들.. 더보기 CSS cascading style sheets 의 약자 HTML 문서가 어떻게 표현될 것인지를 나타내는 방법이다. 아래 링크로 접속해 보면 그림 1처럼 보인다. http://www.w3schools.com/css/ex2.htm [그림 1. CSS가 적용된 페이지] 하지만 실제 CSS로 표현된 것을 제외하면 아래 그림2 같다. [그림2. CSS가 적용되지 않은 페이지] 즉, text의 색상과 크기, 배경색 등을 다르게 보이게 정의 하면 그림 1 처럼 보이는 방법을 정의 할 수 있는 것이다. 그럼 실제 코드를 보자 This is a header 1 You can see that the style sheet formats the text This is a link 위에서 보면 HTML로 문서를 어떻게 정의 했는지 .. 더보기 이전 1 다음
