목록전체 글 (91)
Rainbow
animate.style/ Animate.css | A cross-browser library of CSS animations. Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-guiding hints. animate.style PORTFOLIO_ANIMATION 텍스트 박스 회전하는 정육면체 div 태그 6개로 면6개를 만들어 줍니다 이어서con 태그로 감싸 하나의 객체처럼 만듭니다. position absolute를 적용하고 각각의 태그를 적당한 각도로 회전시킵니다. con에..
처음 웹페이지에 접속하면 브라우저는 서버로 요청을 보내 html, css, js 등의 파일을 다운로드 받고 파싱해서 화면에 보여준다. 이러한 브라우저 로딩과정은 다운로드, 파싱, 스타일, 레이아웃, 페인트, 합성 총 6단계로 나누어진다. 다운로드 유저가 브라우저에서 www.naver.com를 입력했을때, 브라우저는 naver의 서버로 html을 요청해서 응답을 받는다. 파싱 다운받은 html을 파싱한다. 파싱을 하면서 DOM Tree를 만들게 되는데, 파싱 도중에 link태그를 만나면 서버에서 CSS파일 다운로드하고 파싱해서 CSSOM Tree를 만든다. 스타일 HTML과 CSS의 파싱이 완료되면 DOM Tree와 CSSOM Tree를 합쳐서 Render Tree를 생성한다. DOM Tree에는 CSS로..
[jQuery] .text() 선택한 요소 내부의 텍스트를 읽거나 변경합니다. .text() 선택한 요소 내부의 텍스트를 읽거나 변경합니다. 문법(Syntax) $("선택자").text(); $("선택자").text("문자열"); $("선택자").text("함수"); 정의(Definition) .text() 메서드는 선택한 요소의 텍스트를 가져옵니다. .text("문자열") 메서드는 선택한 요소의 텍스트를 변경합니다. .text("함수") 메서드는 선택한 요소에 함수를 설정합니다.
.add() .add() 메서드는 선택된 요소와 새로운 요소를 추가적으로 효과를 줍니다. add()는 선택자, 객체, HTML 요소 등을 선택할 수 있습니다. 문법(Syntax) $("선택자").add("선택자"); $("선택자").add("태그"); $("선택자").add("요소"); 정의(Definition) 선택된 요소에서 선택자를 추가하여 효과를 줍니다. 또 다른 태그를 만든 것이 아니라 또 다른 효과를 주기위해 효과를 추가하는 것입니다. 선택된 요소에 추가적으로 태그를 추가하여 효과를 줄 수 있습니다.
.attr() 선택한 HTML 요소의 속성 값을 설정하거나 반환합니다. 문법(Syntax) $("선택자").attr("속성"); $("선택자").attr("속성", "속성값"); $("선택자").attr({"속성":"속성값", "속성":"속성값", .... }); $("선택자").attr("속성", 함수); 정의(Definition) .attr() 메서드는 선택한 요소의 속성 값을 가져옵니다. .attr() 메서드는 선택한 요소의 속성 값을 변경합니다. .attr() 메서드는 선택한 요소의 여러개 속성 값을 변경합니다. .attr() 메서드는 선택한 요소의 속성과 함수를 설정합니다.
.scrollTop() 선택한 요소의 세로 스크롤 값을 설정하거나 반환합니다. 문법(Syntax) $("선택자").scrollTop(); $("선택자").scrollTop("속성값"); 정의(Definition) .scrollTop() 메서드는 선택한 요소에 세로 스크롤 값을 가져옵니다. .scrollTop("속성값") 메서드는 선택한 요소에 세로 스크롤 값을 변경합니다. 속성(ATTRIBUTES) square scrollLeft() = 0 scrollTop() = 0 scrollLeft() = 0 scrollTop() = 0 리셋 클릭하면 원의 square의 scrollLeft() 좌표값을 표현합니다. 클릭하면 원의 square의 scrollTop() 좌표값을 표현합니다. 클릭하면 원의 브라우저의 sc..