차곡차곡 차곡차곡

문서 객체 모델(DOM)이란? DOM은 HTML 문서의 프로그래밍 interface입니다. 문서의 구조화된 표현을 제공하며 또한, 프로그래밍 언어가 DOM 구조에 접근하는 방법을 제공하고 그들이 문서구조, 스타일, 내용 들을 변경할 수 있게 돕습니다. DOM은 구조화된 nodes와 property와 method를 가지고 있는 object로 문서를 표현합니다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결 시켜주는 역할을 담당합니다. HTML 문서의 구조와 관계가 객체(Object)로 표현됩니다. HTML 하나의 엘리먼트 자식 엘리먼트입니다. 자식 엘리먼트입니다. JavaScript { tagName: 'DIV', id: 'example', classList: ['highli..

기본적으로 요소는 왼쪽 상단의 좌표가 (0, 0)이 되고, 픽셀 단위나 퍼센트 단위 등을 사용하여 위에서 아래로, 왼쪽에서 오른쪽으로 확장합니다. Box Mobel 크기의 속성은 외부여백(margin), 경계선(border), 내부여백(padding)으로 나뉩니다. box-sizing 기준에 따라서 크기가 다를 수 있기에 box-sizing으로 기준을 정해주어야 합니다. content-box (컨텐츠 기준) / border-box (경계선 기준) positioning & layout static: 기본값 relative: 기본값 + 상대적인 위치 fixed: 브라우저 화면의 좌상단을 기준으로 절대적인 위치 absolute: 부모 중 기준점이 있는 경우, 그 기준으로 절대적인 위치 sticky: 기본적으로..

CSS HTML이나 XML로 작성된 문서의 표현을 위해 쓰이는 스타일시트 언어입니다. 콘텐츠의 글꼴, 색상, 크기 및 간격을 변경하거나 여러 열로 분할하거나 애니메이션 및 기타 장식 기능을 추가하는 등의 웹 페이지 스타일 및 레이아웃에 사용됩니다. CSS적용방법 직접적용(Inline) inline 내부 (Internal CSS) Hello World! 외부 (External CSS) Hello World! /* 모든 h1 태그에 빨간색, 기울임꼴을 적용 */ h1 { color: red; font-style: italic; } CSS selector 스타일을 적용시킬 요소를 tag, ID, class를 활용하여 선택할 수 있습니다. Hello World! Hello World! Hello World! 태..

HTML 웹 페이지의 틀을 만드는 마크업 언어이고, 부등호( )로 묶인 tag들로 이루어져 있습니다. Hello World! contents Here Self-closing tag 태그 내부에 내용이 없다면, 와 같이 표현가능합니다. Division div 태그는 한 줄을 차지 Span span 태그는 컨텐츠 크기만큼의 공간 Image scr 라는 속성에 이미지 정보를 삽입하여 불러옴. 닫는태그 불필요 Link href 라는 속성에 링크삽입 & Unordered List & List Item Ordered List 컨텐츠 앞에 번호가 적힘 input (Text) ID PW input (Radio) A B input (Checkbox) 체크하세요 Multi-line Text Input 입력해보세요 ..