웹29 자바스크립트 - DOM 과 노드 DOM DOM은 Document Object Model의 약자로, 웹 피이지의 구조와 콘텐츠를 표현하는 데 사용되는 API를 말합니다. 웹 페이지를 스크립트나 프로그래밍 언어와 연결하여 상호작용할 수 있도록 해줍니다. 문서를 논리적인 트리 구조로 표현하며, 각 노느에는 객체가 포함됩니다. DOM메서드를 사용하면 문서의 구조, 스타일 또는 콘텐츠를 프로그래밍적으로 변경할 수 있습니다. 웹 브라우저에서 HTML, XML 문서를 표현하는데 사용되며, 문서를 노드 트리로 나타냅니다. 또한 노드를 생성, 이동 및 변경할 수 있으며, 이벤트 리스너를 추가할 수 있습니다. DOM 메서드 getElementById : 주어진 ID를 지니고 있는 요소를 DOM 트리에서 찾아서 접근하는데 사용됩니다. getElements.. 2023. 7. 13. CSS 박스 모델 (Box Model) Margin, Padding, border 더보기 목차 CSS 박스 모델 콘텐츠 영역 패딩(padding) 영역 테두리(border) 영역 바깥(margin) 영역 CSS 박스 모델 (Box Model) CSS 박스는 4개의 영역으로 이루어집니다. 각 영역은 콘텐츠(contents) 영역, 안쪽(padding) 영역, 테두리(border) 영역, 바깥(margin) 영역이라고 부릅니다. 콘텐츠 영역 콘텐츠 영역은 Contents edge가 감싼 영역으로, 글이나 이미지, 비디오 등 요소의 실제 내용을 포함하고 있는 영역을 말합니다. 콘텐츠 영역의 크기는 contents width와 contents height로 정해지고, 배경색과 배경 이미지를 가질 수 있습니다. div { width: 160px; height: 80px; background-c.. 2023. 6. 29. CSS - 계단식 ( Cascade ) 웹 프로젝트를 진행하다 보면 요소에 적용시킨 CSS 가 제대로 작동하지 않는 현상이 발생하는 경우가 있습니다. 보통 이런 상황에서 가장 먼저 확인해야할 사항은 동일 요소에 두 가지 규칙이 작성되었는지를 확인하는 것입니다. CSS에는 동일 요소에 두 가지 규칙이 작성되었을 때 계단식(Cascade)과 밀접하게 관련된 우선 순위 개념을 사용하여 충돌을 제어합니다. 계단식 CSS에서는 규칙의 순서가 매우 중요합니다. 동일한 요소에 적용된 두 가지 규칙에 대해서 CSS는 마지막에 나오는 규칙이 사용됩니다. 아래의 예시에서는 h1에 대해 2가지의 스타일을 적용합니다. 하나는 글자의 색을 빨강으로 하나는 글자의 색을 파랑으로 설정했습니다. HTML 삽입 미리보기할 수 없는 소스 CSS는 이처럼 중첩된 단락이 본문에.. 2023. 6. 28. CSS - 속성(3) CSS 리스트 CSS에서 사용할 수 있는 list-style 속성 1. list-style-type 2. list-style-image 3. list-style-position list-style-type 리스트 요소의 앞에 위치하는 숫자나 기호를 마커(marker)라고 합니다. list-style-type 속성을 이용하면 리스트에 다양한 마커를 적용할 수 있습니다. list-style-type 속성을 이용한 마커의 변경 사과 멜론 바나나 수박 참외 옥수수 감자 상추 고구마 오이 배추 시금치 list-Style-image list-style-image 속성을 이용하면 마커로 자신만의 이미지를 사용할 수 있습니다. list-style-position list-style-position 속성을 이용하면 리스.. 2023. 6. 27. 이전 1 2 3 4 ··· 8 다음
