-
[2022 하계 모각소] 1회차 결과2022 하계 모각소 2022. 7. 15. 01:58
[1. HTML의 DOM이란?]
DOM(Documet Object Model) == 문서 객체 모델
→ XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스
→ 문서 내의 모든 요소를 정의, 각각의 요소에 접근하는 방법 제공
→ DOM의 계층 구조
→ DOM == HTML문서를 브라우저가 이해할 수 있도록 만든 트리 자료구조
HTML의 DOM은 HTML 문서를 조작하고 접근하는 표준화된 방법을 의미한다. 모든 HTML 요소는 HTML DOM을 통해 접근이 가능하다.
- DOM은 뷰 포트에 무엇은 랜더링할지 결정하기 위해 사용된다.
- DOM은 페이지의 콘텐츠 및 구조, 그리고 스타일이 js 프로그램에 의해 수정되기 위해 사용된다.
- 항상 유효한 HTML 형식이다.
- js에 수정될 수 있는 동적 모델이어야 한다.
- 가상 요소를 포함하지 않는다. (ex. ::after)
- 보이지 않는 요소를 포함한다. (ex. display:none)
[2. HTML의 전체적인 구조와 필수태그]
- <html> : 웹페이지의 시작과 끝
** <! doctype> : 문서 유형을 지정하는 것
ex) <! doctype html> : 이 페이지를 html로 해석하라는 뜻
- <head> : 웹페이지의 정보, 문서에서 사용할 외부 파일들을 링크할 때 사용
<title>, <meta> 등
- <body> : 브라우저에 실제로 표시되는 내용
- <title> : 문서 제목
- <meta> : 문자 인코딩 및 문서 키워드, 요약 정보
ex) <meta charset=”utf-8”> : 웹 페이지의 문자 인코딩 방식을 utf-8로 지정하라는 뜻
- <div>
- <span>
**<div>와 <span>의 차이
<div> : block level element (줄바꿈 O)
<span> : inline level element (줄바꿈 X)
- <a> : anchor, 웹페이지나 외부 사이트 연결
ex) <a href=”연결할 링크의 경로”>내용</a>
- href=”#” : null link(링크역할을 하도록 만든 것)
- <script> : 코드 삽입
- <link> : 외부 파일 연결
ex) <link href=”외부 CSS파일 경로” rel=”stylesheet” type=”text/css”>
- <img> : 이미지 삽입
ex) <img src=”이미지 경로”>
- <p> : 단락
사용하면 내용 앞뒤로 빈 줄이 생기면서 단락이 생긴다.
- <li> : ul과 ol안에서 각 항목을 나열할 때 사용
- <ul> : unordered list
- <ol> : ordered list
- <br> : 줄바꿈
- <hn> : h1~h6까지 제목 작성할 때 사용
- <input> : form의 요소 중 하나, 사용자가 정보를 입력하는 부분을 만들어야 할 때 사용한다.
ex) <input type=”유형” 속성=”속성값”>
- <form> : form 생성
- <nav> : 문서 연결 링크
- <strong> : 중요 내용 강조
'2022 하계 모각소' 카테고리의 다른 글
[2022 하계 모각소] 3회차 결과 (0) 2022.07.27 [2022 하계 모각소] 2회차 결과 (0) 2022.07.27 [2022 하계 모각소] 3회차 계획 (0) 2022.07.27 [2022 하계 모각소] 2회차 계획 (0) 2022.07.20 [2022 하계 모각소] 1회차 계획 (0) 2022.07.13