반응형 HTML38 [JavaScript] HTML - DOM, getElementById, getElementsByTagName, getElementsByClassName HTML DOM( Document Object Model) 웹 페이지를 로드할 때 브라우저는 DOM(Document Object Model) 모델을 만든다. HTML DOM의 경우 객체의 트리형식으로 만들어져 있다. 위의 그림을 차근차근 설명하면 처음에 문서에서 시작하여 시작 요소 하위 요소에는 와 가 존재하며 하위에는 이 이것의 하위 텍스트는 "Mytitle"이 존재한다. 마찬가지로 의 하위에는 와 이 하위요소로 있으며 의 경우 속성이 "href"가 된다. DOM 사용하는 이유? 객체 모델(DOM)을 통해 JavaScript의 필요한 기능을 얻을 수 있다. 자바스크립트 페이지 안에서 HTML 요소를 바꿀 수 있다. 자바스크립트 페이지 안에서 HTML 속성을 바꿀 수 있다. 자바스크립트 페이지 안에서 C.. 2023. 10. 5. [bootstrap 5] 부트스트랩 그리드(Grid) & 실습 연습 그리드 시스템(Grid System) 그리드 시스템은 페이지에 총 12열로 나눠진다. 그리드 시스템은 반응형이며, 화면 크기에 따라 열이 자동으로 다시 정렬된다. span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 4 span 4 span 4 span 4 span 8 span 6 span 6 span 12 그리드 클래스(Grid Class) col = 576px col-md >= 768px col-lg >= 992px col-xl >= 1200px col-xxl >=1300px 여기서 그리드 클래스의 px 크기를 잘 보아야 한다. 반응형으로 만들기위해서는 그리드 클래스는.. 2023. 9. 16. [bootstrap 5] Container vs Fluid Container Container vs Fluid Container 사이트 레핑하는 방법이 두가지로 나뉜다. Container와 Fluid Container이다. Container : 반응형 고정 너비 container를 제공한다. Fluid Container : viewport의 전체 너비에 걸쳐있는 전체 너비 container를 제공한다. Container 예시코드 및 실행화면 The First Bootstrap Page This part is inside a .container class. the container class provides a responsive fixed width container. Resize the browser window to see that the container width will.. 2023. 9. 14. [bootstrap 5] Bootstrap 5 시작하기 Bootstrap이란? Bootstrap은 더 빠르고 쉬운 웹 개발을 위한 무료 프런트 엔드 프레임워크이다. bootstrap에는 typography, forms, buttons, tables, navigation, modals, image caruousels 등을 위한 HTML 및 CSS 기반 디자인 템플릿과 JavaScript 플러그인이 포함되어 있다. Bootstrap은 반응형 디자인을 쉽게 만들 수 있는 기능을 제공한다. Bootstrap 5 Bootstrap 5는 Bootstap의 최신 버전이다.(2021년 출시) 새로운 구성요소, 더 빨라진 스타일시트, 응답성을 제공한다. Bootstrap 5는 모든 주요 브라우저 및 플랫폼의 최신 안정적인 릴리스를 지원한다. 단. Internet Explor.. 2023. 9. 14. 이전 1 2 3 4 5 ··· 10 다음 728x90 반응형
