꿈꾸는느티나무

DOM 개념잡기 문서 객체 모델(DOM; Document Object Model)은 객체 지향 모델로써 구조화된 문서를 표현하는 형식이다. 동적으로 문서의 내용, 구조, 스타일에 접근하고 동일한 문서를 표현하고, 저장하고, 조작하는 방법을 제공한다. 자바스크립트와 같은 스크립팅 언어를 이용해 DOM 을 수정할 수 있다. DOM구조는 대략적으로 아래와 비슷하다. 참조 사이트 위키백과사이트1W3C DOM사이트관련카페

웹킷(Webkit) 위키백과는 웹킷(webkit)을 웹브라우저 엔진이라고 정의하고 있습니다. "웹컨텐트" 또는 "웹렌더링", "엔진", "오픈소스"로 이루어져 있으며, 웹킷은 웹브라우저 이외에 캘린더, 위젯과 같은 애플리케이션에서도 활발히 사용하고 있다. 구조와 원리http://rtcc.hanyang.ac.kr/sitedata/2015_2_ISP/howbrowserswork_20150915.pdf Vsync 활용http://www.slideshare.net/deview/133-vsync발표자료발표자료2발표자료3

position의 이해 포지션은 태그의 스타일을 지정하여 태그의 위치를 조절할 수 있습니다.정적(기본), 상대적, 화면 기준, 위치지정 CSS는 4가지의 위치 설정 방법이 존재한다.정적(static) 위치 설정 : 정상적인 흐름에 따른 배치이다.상대(relative) 위치 설정 : 정상적인 위치가 기준점이된다.절대(absolute) 위치 설정 : 컨테이너의 원점이 기준이된다.고정(fixed) 위치 설정 : 위도우의 원점이 기준이 된다. static HTML 정적인 배치 된 요소는 위쪽, 아래쪽, 왼쪽 및 오른쪽 속성의 영향을받지 않습니다. 위치가 정적 인 요소. 어떤 특별한 방법으로도 배치되지 않았습니다. 페이지의 정상적인 흐름에 따라 항상 배치됩니다. 이 요소의 위치는 static입니다.다음은 사용 된..

디스플레이 속성으로 인라인과 블록을 설정할 수있습니다.display : inline; display의 속성block : 블록inline : 인라인none : 없는 것으로 간주hidden :화면에서 감춰짐 inline과 block의 차이 HTML블록요소는 블록요소이거나 인라인 요소 중의 하나에 속한다. 일반적인 문서의 흐름에서 HTML 요소는 블록 요소냐 인라인 요소냐에 따라서 다음과 같이 화면에 표시된다. 블록요소(block)화면의 한 줄을 전부 차지한다. 즉, block은 무조건 한줄은 점유하고 다음줄로 가버림. ex) 가위, 풀, 종이, 색연필 결과)가위 풀종이색연필 인라인요소(inline)한 줄에 차래대로 배치된다. ex) 가위, 풀, 종이, 색연필 결과)가위, 풀, 종이, 색연필 inline의 대..

CSS3 애니메이션 @KeyframesKeyframes를 이용해 키 프레임을 지정한다 키프레임의 위치는 퍼센트로 지정하며 각 키프레임에서 속성의 값을 지정하면 된다. @keyframes ani/*키프레임을 ani라는 이름으로지정*/{0% {left : 0px; top 0px;}25% { left 100px; top 20px;}50% { left 200px; top 20px;}75% { left 300px; top 20px;}100% { left 400px; top 20px;}} div{animation : 2s ani; /*애니메이션의 지속시간과 프레임 규칙이름 */animation-interation-count:20;/*애니메이션의 반복 횟수*/} 무한반복 애니메이션@-webkit-keyframes b..

CSS는 다양한 효과를 설정할 수 있다. 아래에서 천천히 알아보자 투명도opacity 속성을 이용하면 요소의 투명도를 조절할수 있다. 투명도는 실수 0.0에서 1.0을 사용해서 지정한다.0.0이면 완전히 투명한 것이고 1.0이면 불투명한것이다. img{ opacity:0.4;} 가시성가시성이란 어떤 요소를 보이거나 안 보이게 하는 것이다. 속성으로는 visibility가 사용된다.hidden:요소를 보이지 않게 한다.visible(기본값) : 요소를 보이게 한다. a{ visibility:hidden;} 비슷한 것으로 display:none이 있다. 하지만 display:none;으로 설정하면 화면에서 자리도 차지하지 않고 완전히 제외된다. 따라서 일시적으로 어떤 요소를 보이제 않게 하려면 visibil..

박스모델 경계선 표시 요소 설명 속성 border-style 선의 종류를 설정함 none. dotted dashed solid double groove ridge inset outset 상 하 좌 우 설정가능border-top-style:border-bottom-style:border-left-style:border-right-style: 경계의 폭설정border-width 경계선 색상 설정border-color: 한줄로 경계선 속성 지정border : 3px solid blue; 경계선 곡률 생성하기border-radius:5px; 경계에 그림자 생성하기box-shadow: 가로오프셋 세로오프셋 번지는정도 그림자색;box-shadow: 20px; 10px 5px #abcdef;

테이블의 테두리 테이블 테두리는 아래와 같이 설정 할 수 있습니다.과 에 CSS 속성을 주로 적용합니다. Example ※ 소스 다운 받기

박스 스타일 모든 HTML 요소는 box를 고려합니다. CSS에서 박스 모델은 디자인과 레이아웃에서 다루게 됩니다. CSS 박스모델은 기본적으로 html 요소들을 감싸고 있습니다. 그래서 margins, boder, padding, content를 고려합니다. 박스모델은 우리가 요소에 벽을 추가하는 것에 따라 다릅니다. 그리고 요소의 공백을 정의합니다. 그림으로 설명하면 아래와 같습니다. 용어 설명 Content - 텍스트와 이미지가 표시되는 상자의 내용 Padding - Content 주위의 여백을 설정합니다. Padding 영역은 투명합니다. Border - border영역은 padding 영역을 감싸고 있습니다. Margin - Border 주변의 여백을 설정합니다. Margin영역은 투명합니다. ..

list 스타일 CSS리스트 속성은 아래와 같은 일을 할 수 있습니다.- 지정되어 있는 순서목록 이외의 다른 순서목록을 지정할 수 있습니다.- 지정되어 있는 비순서목록 이외의 다른 비순서목록을 지정할 수 있습니다.- 이미지를 목록으로 지정할 수 있습니다. 리스트는 두가지 스타일이 있는데 하나는 1, 2, 3과 같은 순서를 표시하는 리스트이고다른 하나는 ●, ■ 와 같이 순서가 없는 리스트 목록 입니다. 속성 설명 값 list-style-type 글머리표 종류 none, disc, circle, square, lower-roman, upper-roman, decimal, lower-alpha, upper-alpha list-style-image 글머리표 그림 url(파일명) list-style-positi..