반응형 Web30 DOM이란? DOM이란? 문서 객체 모델(The Document Object Model, DOM)은 HTML, XML 문서의 프로그래밍 인터페이스이다. 즉, 우리가 작성해놓은 HTML문서를 브라우저가 해석해서 만들어 놓은 것 1. 뷰포트에 무엇을 렌더링 할것인지 결정 2. 페이지의 콘텐츠 및 구조, 그리고 스타일이 자바스크립트 프로그램에 의해 수정되기 위해 사용 ▶ 항상 유효한 HTML 형식입니다. ▶ 자바스트립트에 수정될 수 있는 동적모델 ▶ 가상요소를 포함하지 않는다 ▶ 보이지 않는 요소를 포함하지 않는다. DOM은 어떻게 생성되고 보이는 걸까? - DOM의 개체 구조는 "노드 트리"로 표현된다. - 하나의 부모(줄기)가 여래개의 자식(가지)을 가지고 있고, 자식(가지)은 후손(잎)을 가질 수 있는 나무 구조 -.. 2020. 12. 16. CSS 삽입방법 CSS 첫번째 문서에서 한번 언급을 했지만 정리하고 가면 좋을거 같아서 따로 정리한번더 하겠습니다//^.^ 인라인 스타일(inline style) Hello World 실행결과 - HTML태그에 CSS 명령을 직접 입력하는 방식 - HTML 문서에 가장 간단하게 CSS를 삽입할 수 있는 인라인 스타일 - CSS를 HTML 태그과 같은 행에 사용하여 HTML 태그가 복잡 실전에서는 거의 사용하지 않는다!! 하지만 티스토리에서 글을 작성하면서 기본모드가 아닌 HTML모드를 보게되면 인라인 스타일로 작성이 되는것을 볼수 있다. 티스토리를 하기 위해서 HTML, CSS를 배우는 중이라면 인라인스타일로도 충분히 스타일을 줄수 있다!! 내부 스타일 시트(internal style sheet) Hello World .. 2020. 10. 14. CSS란? CSS(Cascading Style Sheets) CSS란 웹 페이지에서 HTML 태그를 보조하여 페이지를 꾸미는 역할을 한다. 웹 개발자는 CSS를 이용하여 웹 사이트의 디자인을 더욱 풍부하게 하고 사이트의 유지 · 보수도 간편하게 가능 CSS 기본 구조 실전에서는 CSS파일을 따로 작성을 하여서 불러와서 적용을 시키지만 저는 공부할때는 복잡한 소스가 아닌이상 애국가 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려강산 대한 사람 대한으로 길이 보전하세 실행결과 ▼ 소스코드 살펴보기 - 7~10행에서 CSS입력되었음며, CSS는 6행과 11행 태그 안에 들어간다. - 7행의 p에 의해 16행의 태그 영역의 글자색상과 크기가 변경된다. - 8행과 9행의 ;(세미콜론)은 .. 2020. 10. 2. HTML태그 - 시멘틱 태그 HTML 태그 - 시멘틱 태그 Header Navigation Sidebar Content Footer 실행결과 일단 html 속성만 확인하기위해서 css부분은 css공부할 때 다시 한번더 언급해서 설명해드릴꼐요ㅎㅎ 우선은 css보다는 html 틀을 확인만 하는 소스로만 참고해주세요 ▼ 소스코드 살펴보기 herder 태그 : 문서의 헤더를 설정 (보통 로고, 제목, 검색 등을 포함) nav 태그: 콘텐츠를 담고 있는 문서를 사이트 간에 서로 연결하는 역할을 담당 (메뉴, 목차, 색인 등을 설정) aside 태그 : 사이드바라고 불리며, 본문 이외의 내용을 담고 있는 태그 (페이지 왼쪽이나 오른쪽에 메뉴, 배너 등의 콘텐츠) article 태그 : 독립적으로 구분되거나 재사용 가능한 영역을 설정 foote.. 2020. 10. 2. 이전 1 ··· 3 4 5 6 7 8 다음 반응형
