나 이정민
Study more about HTML 본문
3.2 어트리뷰트 (Attribute)
어트리뷰트(Attribute 속성)이란 요소의 성질, 특징을 정의하는 명세이다. 요소는 어트리뷰트를 가질 수 있으며 어트리뷰트는 요소에 추가적 정보(예를 들어 이미지 파일의 경로, 크기 등)를 제공한다. 어트리뷰트는 시작 태그에 위치해야 하며 이름과 값의 쌍을 이룬다. (e.g. name=”value”)
<img src="html.jpg" width="104" height="142">
위의 예에서 어트리뷰트 src는 이미지 파일의 경로와 파일명, width는 이미지의 너비, height는 이미지의 높이 정보를 브라우저에 알려준다. 이 정보들을 사용하여 브라우저는 img 요소를 화면에 출력한다.
3.2.1 글로벌 어트리뷰트 (HTML Global Attribute)
글로벌 어트리뷰트는 모든 HTML 요소가 공통으로 사용할 수 있는 어트리뷰트다. 몇몇 요소에는 효과가 적용되지 않을 수 있지만, 글로벌 어트리뷰트는 대체로 모든 요소에 사용될 수 있다.
자주 사용되는 글로벌 어트리뷰트는 아래와 같다.
Attribute Description
| id | 유일한 식별자(id)를 요소에 지정한다. 중복 지정이 불가하다. |
| class | 스타일시트에 정의된 class를 요소에 지정한다. 중복 지정이 가능하다. |
| hidden | css의 hidden과는 다르게 의미상으로도 브라우저에 노출되지 않게 된다. |
| lang | 지정된 요소의 언어를 지정한다. 검색엔진의 크롤링 시 웹페이지의 언어를 인식할 수 있게 한다. |
| style | 요소에 인라인 스타일을 지정한다. |
| tabindex | 사용자가 키보드로 페이지를 내비게이션 시 이동 순서를 지정한다. |
| title | 요소에 관한 제목을 지정한다. |
3.3 HTML 주석 (Comments) <!-- -->
주석(comment)는 주로 개발자에게 코드를 설명하기 위해 사용되며 브라우저는 주석을 화면에 표시하지 않는다.
<!--주석은 화면에 표시되지 않는다.-->
시맨틱 웹(Semantic Web)
검색엔진은 대체로 h1 요소 내의 콘텐츠를 웹문서의 중요한 제목으로 인식하고 인덱스에 포함시킬 확률이 높다. 또한 사람도 h1 요소 내의 콘텐츠가 제목임을 인식할 수 있다. 시맨틱 요소로 구성되어 있는 웹페이지는 검색엔진에 보다 의미론적으로 문서 정보를 전달할 수 있고 검색엔진 또한 시맨틱 요소를 이용하여 보다 효과적인 크롤링과 인덱싱이 가능해졌다. 즉, 시맨틱 태그란 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할을 한다. 시맨틱 태그에 의해 컴퓨터가 HTML 요소의 의미를 보다 명확히 해석하고 그 데이터를 활용할 수 있는 시맨틱 웹이 실현될 수 있다.
시맨틱 웹이란 웹에 존재하는 수많은 웹페이지들에 메타데이터(Metadata)를 부여하여, 기존의 잡다한 데이터 집합이었던 웹페이지를 ‘의미’와 ‘관련성’을 가지는 거대한 데이터베이스로 구축하고자 하는 발상이다.
시멘틱 테그 : 구조와 의미를 명확히 나타냄.
비시멘틱 테그: < div>, <span> 등은 구조와 의미를 나타내지 않음.
src 어트리뷰트를 사용하면 외부 JavaScript 파일을 로드할 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="main.js"></script>
</head>
<body>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</body>
</html>
~~~
meta tag
meta 요소는 description, keywords, author, 기타 메타데이터 정의에 사용된다. 메타데이터는 브라우저, 검색엔진(keywords) 등에 의해 사용된다.
charset 어트리뷰트는 브라우저가 사용할 문자셋을 정의한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>안녕하세요</p>
<p>Hello</p>
<p>こんにちは</p>
<p>你好</p>
<p>שלום</p>
<p>สวัสดี</p>
</body>
</html>
SEO(검색엔진 최적화)를 위해 검색엔진이 사용할 keywords을 정의한다.
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
웹페이지의 설명을 정의한다.
<meta name="description" content="Web tutorials on HTML and CSS">
웹페이지의 저자을 명기한다.
<meta name="author" content="John Doe">
웹페이지를 30초 마다 Refresh한다.
<meta http-equiv="refresh" content="30">
~~~
.글자 형태 (Text Formatting) 태그
#2.1 b
bold체를 지정한다. 제목 태그와 같이 의미론적(Semantic) 중요성의 의미는 없다.
<!DOCTYPE html>
<html>
<body>
<p>This text is normal.</p>
<b>This text is bold.</b>
<p style="font-weight: bold;">This text is bold.</p>
</body>
</html>
2.3 i
Italic체를 지정한다. 의미론적(Semantic) 중요성의 의미는 없다.
<!DOCTYPE html>
<html>
<body>
<p>This text is normal.</p>
<i>This text is italic.</i>
<p style="font-style: italic;">This text is italic.</i>
</body>
</html>
2.6 mark
highlighted text를 지정한다.
<!DOCTYPE html>
<html>
<body>
<h2>HTML <mark>Marked</mark> Formatting</h2>
</body>
</html>
2.7 del
deleted (removed) text를 지정한다.
<!DOCTYPE html>
<html>
<body>
<p>The del element represents deleted (removed) text.</p>
<p>My favorite color is <del>blue</del> red.</p>
</body>
</html>
#2.8 ins
inserted (added) text를 지정한다.
<!DOCTYPE html>
<html>
<body>
<p>The ins element represent inserted (added) text.</p>
<p>My favorite <ins>color</ins> is red.</p>
</body>
</html>
#2.9 sub / sup
sub 태그는 subscripted(아래에 쓰인) text를 sup 태그는 superscripted(위에 쓰인) text를 지정한다.
<!DOCTYPE html>
<html>
<body>
<p>This is <sub>subscripted</sub> text.</p>
<p>This is <sup>superscripted</sup> text.</p>
</body>
</html>
~~~~
연속적 공백을 삽입하는 방법은 아래와 같다.
<!DOCTYPE html>
<html>
<body>
<p>This is a para graph</p>
</body>
</html>
hr
수평줄을 삽입한다.
<!DOCTYPE html>
<html>
<body>
<h1>HTML</h1>
<p>HTML is a language for describing web pages.</p>
<hr>
<h1>CSS</h1>
<p>CSS defines how to display HTML elements.</p>
</body>
</html>3.6 blockquote
긴 인용문 블록을 지정한다. 브라우저는 blockquote 요소를 들여쓰기한다. css를 이용하여 다양한 style을 적용할 수 있다.
<!DOCTYPE html>
<html>
<body>
<p>Browsers usually indent blockquote elements.</p>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</blockquote>
</body>
</html>
~~~~~
한 텍스트에서 다른 텍스트로 건너뛰어 읽을 수 있는 이 기능을 하이퍼링크(hyper link)라 한다.
HTML link는 hyperlink를 의미하며 a(anchor) tag가 그 역할을 담당한다.
<!DOCTYPE html>
<html>
<body>
<a href="http://www.google.com">Visit google.com!</a>
</body>
</html>
href 어트리뷰트에 사용 가능한 값은 아래와 같다.
ValueDescription| 절대 URL | 웹사이트 URL (href=”http://www.example.com/default.html”) |
| 상대 URL | 자신의 위치를 기준으로한 대상의 URL (href=”html/default.html”) |
| fragment identifier | 페이지 내의 특정 id를 갖는 요소에의 링크 (href=”#top”) |
| 메일 | mailto: |
| script | href=”javascript:alert(‘Hello’);” |
<!DOCTYPE html>
<html>
<body>
<a href="http://www.google.com">URL</a><br>
<a href="html/my.html">Local file</a><br>
<a href="file/my.pdf" download>Download file</a><br>
<a href="#">fragment identifier</a><br>
<a href="mailto:someone@example.com?Subject=Hello again">Send Mail</a><br>
<a href="javascript:alert('Hello');">Javascript</a>
</body>
</html>
1. 목록 (List)
순서없는 목록 (Unordered List) UI
순서있는 목록 (Ordered List) OI
ui , oi 부모 태그 자식 태그는 li
type 어트리뷰트를 사용하여 순서를 나타내는 문자를 지정할 수 있다
ValueDescription| “1” | 숫자 (기본값) |
| “A” | 대문자 알파벳 |
| “a” | 소문자 알파벳 |
| “I” | 대문자 로마숫자 |
| “i” | 소문자 로마숫자 |
<ol type="I">
<li value="2">Coffee</li>
<li value="4">Tea</li>
<li>Milk</li>
</ol>
2. 테이블
표(table)를 만들 때 사용하는 태그이다. 과거에는 테이블 태그를 사용하여 레이아웃을 구성하기도 하였으나 모던 웹에서는 주로 공간 분할 태그인 div 태그를 사용하여 레이아웃을 구성한다.
tagDescription| table | 표를 감싸는 태그 |
| tr | 표 내부의 행 (table row) |
| th | 행 내부의 제목 셀 (table heading) |
| td | 행 내부의 일반 셀 (table data) |
테이블 태그의 어트리뷰트는 아래와 같다.- 자세한 사항 은 페이지 참조-
attributeDescription| border | 표 테두리 두께 지정. (CSS border property를 사용하는 것이 더 나은 방법이다.) |
| rowspan | 해당 셀이 점유하는 행의 수 지정 |
| colspan | 해당 셀이 점유하는 열의 수 지정 |
. 이미지
웹페이지에 이미지를 삽입하는 경우, img tag를 사용한다.
attributeDescription| src | 이미지 파일 경로 |
| alt | 이미지 파일이 없을 경우 표시되는 문장 |
| width | 이미지의 너비 (CSS에서 지정하는 것이 일반적) |
| height | 이미지의 높이 (CSS에서 지정하는 것이 일반적) |
<!DOCTYPE html>
<html>
<body>
<img src="assets/images/doug.jpg" alt="doug" width="100">
<img src="assets/images/wrongname.gif" alt="이미지가 없습니다.">
</body>
</html>
~~~~
2. 미디어
2.1 audio
audio 태그는 HTML5에서 새롭게 추가된 태그이다. IE8 이하에서는 사용할 수 없다.
attributeDescription| src | 음악 파일 경로 |
| preload | 재생 전에 음악 파일을 모두 불러올 것인지 지정 |
| autoplay | 음악 파일을 자동의 재생 개시할 것인지 지정 |
| loop | 음악을 반복할 것인지 지정 |
| controls | 음악 재생 도구를 표시할 것인지 지정. 재생 도구의 외관은 브라우저마다 차이가 있다. |
<!DOCTYPE html>
<html>
<body>
<audio src="assets/audio/Kalimba.mp3" controls></audio>
</body>
</html>
웹브라우저 별로 지원하는 음악 파일 형식이 다르다. 파일 형식에 따라 재생되지 않는 브라우저가 존재한다는 뜻이다.
BrowserMP3WavOgg| Internet Explorer | YES | NO | NO |
| Chrome | YES | YES | YES |
| Firefox | YES(24~) | YES | YES |
| Safari | YES | YES | NO |
| Opera | YES(25~) | YES | YES |
source 태그를 사용하여 파일 형식의 차이 문제를 해결 할 수 있다. type 어트리뷰트는 생략 가능하다.
<!DOCTYPE html>
<html>
<body>
<audio controls>
<source src="assets/audio/Kalimba.mp3" type="audio/mpeg">
<source src="assets/audio/Kalimba.ogg" type="audio/ogg">
</audio>
</body>
</html>
2.2 비디오
video 태그는 HTML5에서 새롭게 추가된 태그이다. IE8 이하에서는 사용할 수 없다.
attributeDescription| src | 동영상 파일 경로 |
| poster | 동영상 준비 중에 표시될 이미지 파일 경로 |
| preload | 재생 전에 동영상 파일을 모두 불러올 것인지 지정 |
| autoplay | 동영상 파일을 자동의 재생 개시할 것인지 지정 |
| loop | 동영상을 반복할 것인지 지정 |
| controls | 동영상 재생 도구를 표시할 것인지 지정. 재생 도구의 외관은 브라우저마다 차이가 있다. |
| width | 동영상의 너비를 지정 |
| height | 동영상의 높이를 지정 |
audio 태그와 마찬가지로 파일 형식의 차이 문제가 발생할 수 있다. source 태그를 사용하여 형식 차이 문제를 해결한다. type 어트리뷰트는 생략 가능하다.
BrowserMP4WebMOgv| Internet Explorer | YES | NO | NO |
| Chrome | YES | YES | YES |
| Firefox | YES(21~) | YES | YES |
| Safari | YES | NO | NO |
| Opera | YES(25~) | YES | YES |
<!DOCTYPE html>
<html>
<body>
<video width="640" height="360" controls>
<source src="assets/video/wildlife.mp4" type="video/mp4">
<source src="assets/video/wildlife.webm" type="video/webm">
</video>
</body>
</html>1. form
form 태그는 사용자가 입력한 데이터를 수집하기 위해 사용되며 input, textarea, button, select, checkbox, radio button, submit button 등의 입력 양식 태그를 포함할 수 있다.
<form>
...
form elements (input, checkbox, radio button, submit button...)
...
</form>
| action | URL | 입력 데이터(form data)가 전송될 URL 지정 |
| method | get / post | 입력 데이터(form data) 전달 방식 지정 |
<!DOCTYPE html>
<html>
<body>
<form action="http://jsonplaceholder.typicode.com/users" method="get">
ID: <input type="text" name="id" value="1"><br>
username: <input type="text" name="username" value="Bret"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
submit button이 클릭되면 input 태그에 입력된 데이터가 form 태그의 method 어트리뷰트에 지정된 방식으로 action 어트리뷰트에 지정된 서버측의 처리 로직에 전달된다.
2. input
input 태그는 form 태그 중에서 가장 중요한 태그로 사용자로부터 데이터를 입력받기 위해 사용된다.
input 태그는 다양한 종류가 있는데 type 어트리뷰트에 의해 구분된다. form 태그 내에 존재하여야 입력 데이터를 전송할 수 있으나 ajax를 사용할 시에는 form 태그 내에 존재하지 않아도 된다.
서버에 전송되는 데이터는 name 어트리뷰트를 키로, value 어트리뷰트를 값으로하여 key=value의 형태로 전송된다.
type어트리뷰트값 Description HTML5 추가 IE FF CR SF OP| button | 버튼 생성 | ◯ | ◯ | ◯ | ◯ | ◯ | |
| checkbox | checkbox 생성 | ◯ | ◯ | ◯ | ◯ | ◯ | |
| color | 컬러 선택 생성 | ◯ | X | ◯ | ◯ | X | ◯ |
| date | date control (년월일) 생성 | ◯ | X | X | ◯ | ◯ | ◯ |
| datetime | date & time control (년월일시분초) 생성. HTML spec에서 drop되었다. | ◯ | X | X | X | X | X |
| datetime-local | 지역 date & time control (년월일시분초) 생성 | ◯ | X | X | ◯ | ◯ | ◯ |
| 이메일 입력 form 생성. subumit 시 자동 검증한다. | ◯ | ◯(10~) | ◯ | ◯ | X | ◯ | |
| file | 파일 선택 form 생성 | ◯ | ◯ | ◯ | ◯ | ◯ | |
| hidden | 감추어진 입력 form 생성 | ◯ | ◯ | ◯ | ◯ | ◯ | |
| image | 이미지로 된 submit button 생성 | ◯ | ◯ | ◯ | ◯ | ◯ | |
| month | 월 선택 form 생성 | ◯ | X | X | ◯ | ◯ | ◯ |
| number | 숫자 입력 form 생성 | ◯ | ◯(10~) | ◯ | ◯ | ◯ | ◯ |
| password | password 입력 form 생성 | ◯ | ◯ | ◯ | ◯ | ◯ | |
| radio | radio button 생성 | ◯ | ◯ | ◯ | ◯ | ◯ | |
| range | 범위 선택 form 생성 | ◯ | ◯(10~) | ◯ | ◯ | ◯ | ◯ |
| reset | 초기화 button 생성 | ◯ | ◯ | ◯ | ◯ | ◯ | |
| search | 검색어 입력 form 생성 | ◯ | X | X | ◯ | ◯ | X |
| submit | 제출 button 생성 | ◯ | ◯ | ◯ | ◯ | ◯ | |
| tel | 전화번호 입력 form 생성 | ◯ | X | X | X | X | X |
| text | 텍스트 입력 form 생성 | ◯ | ◯ | ◯ | ◯ | ◯ | |
| time | 시간 선택 form 생성 | ◯ | X | X | ◯ | ◯ | ◯ |
| url | url 입력 form 생성 | ◯ | ◯(10~) | ◯ | ◯ | X | ◯ |
| week | 주 선택 입력 form 생성 | ◯ | X | X | ◯ | ◯ | ◯ |
<page 참조>
<!DOCTYPE html>
<html>
<body>
<h3>button</h3>
<input type="button" value="Click me" onclick="alert('Hello world!')">
<hr>
<h3>checkbox</h3>
<input type="checkbox" name="fruit1" value="apple" checked> 사과<br>
<input type="checkbox" name="fruit2" value="grape"> 포도<br>
<input type="checkbox" name="fruit3" value="peach"> 복숭아<br>
<hr>
<h3>color</h3>
<input type="color" name="mycolor">
<hr>
<h3>date</h3>
<input type="date" name="birthday">
<hr>
<h3>datetime</h3>
<input type="datetime" name="birthdaytime">
<hr>
<h3>datetime-local</h3>
<input type="datetime-local" name="birthdaytime">
<hr>
<h3>email</h3>
<input type="email" name="useremail">
<hr>
<h3>file</h3>
<input type="file" name="myfile">
<hr>
<h3>hidden</h3>
<input type="hidden" name="country" value="Norway">
hidden filed는 사용자에 표시되지 않는다.
<hr>
<h3>image</h3>
<input type="image" src="img/img_submit.gif" alt="Submit" width="48" height="48">
<hr>
<h3>month</h3>
<input type="month" name="birthdaymonth">
<hr>
<h3>number</h3>
<input type="number" name="quantity" min="2" max="10" step="2" value="2">
<hr>
<h3>password</h3>
<input type="password" name="pwd">
<hr>
<h3>radio</h3>
<input type="radio" name="gender" value="male" checked> 남자<br>
<input type="radio" name="gender" value="female"> 여자<br>
<hr>
<h3>range</h3>
<input type="range" name="points" min="0" max="10" step="1" value="5">
<hr>
<h3>reset</h3>
<input type="reset">
<hr>
<h3>search</h3>
<input type="search" name="googlesearch">
<hr>
<h3>submit</h3>
<input type="submit" value="Submit">
<hr>
<h3>tel</h3>
<input type="tel" name="mytel">
<hr>
<h3>text</h3>
<input type="text" name="myname">
<hr>
<h3>time</h3>
<input type="time" name="mytime">
<hr>
<h3>url</h3>
<input type="url" name="myurl">
<hr>
<h3>week</h3>
<input type="week" name="week_year">
</body>
</html>
5. button
button 태그는 클릭할 수 있는 버튼을 생성한다. <input type="button">과 유사하지만 input 태그는 빈 태그인 반면 button 태그는 그렇지 않다. 따라서 button 요소에는 텍스트나 이미지 같은 콘텐츠를 사용할 수 있다.
type 어트리뷰트는 반드시 지정하는 것이 바람직하며 어트리뷰트값으로 button, reset, submit를 지정할 수 있다.
<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
<input type="button" value="Click Me!" onclick="alert('Hello world!')">
</body>
</html>
6. fieldset / legend
fieldset 태그는 관련된 입력 양식들을 그룹화할 때 사용한다. legend 태그는 fieldset 태그 내에서 사용되야 하며 그룹화된 fieldset의 제목을 정의한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<fieldset>
<legend>Login</legend>
Username <input type="text" name="username">
Password <input type="text" name="password">
</fieldset>
</body>
</html>
웹페이지의 레이아웃을 구성하기 위해서 공간을 분할할 필요가 있다.
tagDescription
| header | 헤더를 의미한다 |
| nav | 내비게이션을 의미한다 |
| aside | 사이드에 위치하는 공간을 의미한다 |
| section | 본문의 여러 내용(article)을 포함하는 공간을 의미한다 |
| article | 분문의 주내용이 들어가는 공간을 의미한다 |
| footer | 푸터를 의미한다 |
주요 시맨틱 태그
- <header>
- 문서나 섹션의 헤더(머리말)를 정의합니다.
- 예: 로고, 제목, 내비게이션 메뉴 등이 포함될 수 있음.
- <nav>
- 내비게이션 링크(메뉴)를 정의합니다.
- 주요 사이트 메뉴 또는 페이지 내 탐색 링크를 그룹화.
- <main>
- 문서의 주요 콘텐츠를 나타냅니다.
- 페이지의 핵심 콘텐츠를 정의하며, 보통 한 문서에 한 번만 사용.
- <section>
- 문서의 주제를 나타내는 섹션을 정의합니다.
- 주제별로 문서를 구분할 때 사용.
- <article>
- 독립적이고 완결된 콘텐츠를 정의합니다.
- 예: 블로그 글, 뉴스 기사, 포럼 게시물 등.
- <aside>
- 본문과 간접적으로 관련된 콘텐츠를 나타냅니다.
- 예: 광고, 사이드바, 관련 링크 등.
- <footer>
- 문서나 섹션의 푸터(꼬리말)를 정의합니다.
- 예: 저작권 정보, 연락처, 사이트 맵 등이 포함될 수 있음.
- <figure> 및 <figcaption>
- figure: 이미지, 다이어그램, 코드 등 독립적인 콘텐츠를 그룹화.
- figcaption: figure의 설명을 추가.
- <mark>
- 강조하거나 검색 결과 하이라이트를 나타낼 때 사용.
- <time>
- 시간 또는 날짜를 표현할 때 사용.
예제 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>시맨틱 태그 예제</title>
</head>
<body>
<header>
<h1>내 웹사이트</h1>
<nav>
<ul>
<li><a href="#home">홈</a></li>
<li><a href="#about">소개</a></li>
<li><a href="#contact">연락처</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>소개</h2>
<p>이 섹션은 사이트에 대한 소개입니다.</p>
</section>
<article>
<h2>블로그 글 제목</h2>
<p>여기에 블로그 글 내용이 들어갑니다.</p>
</article>
</main>
<aside>
<p>사이드바 콘텐츠</p>
</aside>
<footer>
<p>© 2024 내 웹사이트</p>
</footer>
</body>
</html>
~~~~~~~~
HTML에서 Document는 웹 페이지를 구성하는 최상위 객체이자, HTML 문서 전체를 표현하는 개념입니다. 브라우저가 HTML 파일을 읽고 해석하면서 생성하는 구조적 표현으로, DOM(Document Object Model)의 최상위 루트(root) 노드가 됩니다.
HTML Document란?
- 브라우저에서의 역할
- HTML 파일은 브라우저가 읽고 화면에 렌더링하기 위해 해석하는 문서입니다.
- HTML 문서의 모든 내용은 Document 객체로 관리됩니다.
- Document Object Model (DOM)
- HTML 문서가 브라우저에 의해 파싱되면, DOM이라는 계층적 트리 구조가 생성됩니다.
- 이 트리 구조의 최상위 객체가 document입니다.
- JavaScript를 통해 document 객체를 조작하여 동적인 웹 페이지를 만들 수 있습니다.
Document의 주요 특징
- HTML 문서의 루트
HTML 문서의 모든 요소(<html>, <head>, <body> 등)는 document 아래에 포함됩니다. - DOM 트리의 시작점
document는 DOM의 루트(root)로, 모든 HTML 요소에 접근할 수 있는 출발점 역할을 합니다. - 브라우저 API의 일부
- document는 브라우저의 JavaScript 환경에서 제공하는 객체입니다.
- 이를 사용하여 웹 페이지의 요소를 선택하고, 수정하거나, 새로운 요소를 추가할 수 있습니다.
JavaScript에서의 Document 사용
document 객체를 활용하면 웹 페이지의 요소에 접근하고 조작할 수 있습니다.
예제 1: HTML 요소 접근
예제 2: 요소 선택
console.log(header); // <header> 요소 출력
예제 3: 요소 조작
예제 4: 새로운 요소 추가
newElement.textContent = '새로운 문단입니다.';
document.body.appendChild(newElement); // 문단 추가
HTML 문서 구조와 Document
HTML 문서가 어떻게 document 객체로 표현되는지 확인해보겠습니다.
HTML 코드
<html lang="en">
<head>
<title>HTML Document Example</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>Welcome to the HTML document structure.</p>
</body>
</html>
DOM 트리
Document
├── html
│ ├── head
│ │ └── title: "HTML Document Example"
│ └── body
│ ├── h1: "Hello, World!"
│ └── p: "Welcome to the HTML document structure."
document는 위 트리의 최상단 루트를 나타냅니다.
Document와 관련된 주요 프로퍼티 및 메서드
- 프로퍼티
- document.title: 문서 제목
- document.body: <body> 요소
- document.head: <head> 요소
- document.documentElement: <html> 요소
- document.URL: 현재 문서의 URL
- 메서드
- document.querySelector(selector): 선택자를 사용해 요소 선택
- document.createElement(tagName): 새로운 HTML 요소 생성
- document.getElementById(id): ID로 요소 찾기
결론
Document는 HTML 문서를 표현하는 최상위 객체로, 웹 페이지를 프로그래밍적으로 조작할 수 있는 출발점입니다. 브라우저는 이 객체를 통해 HTML 콘텐츠를 화면에 렌더링하고, JavaScript는 이를 이용해 동적이고 상호작용이 가능한 페이지를 만듭니다.
차이점
- <!DOCTYPE html>: 선언이며, 브라우저가 문서를 올바르게 렌더링하도록 돕습니다.
- 사람이 사용하는 것이 아니라 브라우저가 참고하는 선언입니다.
- document: 브라우저가 HTML을 해석해서 생성하는 JavaScript 객체입니다.
- JavaScript로 문서에 접근하거나 조작하려면 document를 사용합니다.
2가지 메소드 를 더 쉽게 풀어보자,, 이해가 잘 안됐으니 난 생초보니까~
1.document.querySelector(selector)
이 메서드는 "웹 페이지에서 특정 요소를 찾아오는 도구"라고 생각하면 돼요. CSS에서 요소를 스타일링할 때 사용하는 선택자(class, id, 태그 이름 등)를 그대로 사용해서 원하는 요소를 찾아옵니다.
HTML 코드:
<div class="box">이건 div 요소입니다</div>
<p id="intro">이건 p 요소입니다</p>
JavaScript 코드:
// 클래스 이름이 "box"인 첫 번째 요소 찾기
const boxElement = document.querySelector('.box');
console.log(boxElement); // <div class="box">이건 div 요소입니다</div>
~~~~~
// ID가 "intro"인 요소 찾기
const introElement = document.querySelector('#intro');
console.log(introElement); // <p id="intro">이건 p 요소입니다</p>
결론: CSS 선택자(예: .box, #intro, div)로 원하는 HTML 요소를 찾는 방법입니다.
2.document.createElement(tagName)
역할: 새로운 HTML 요소를 "만드는" 메서드입니다.
이해하기 쉽게 설명
이 메서드는 "빈 HTML 태그를 새로 만드는 도구"입니다. 예를 들어, HTML 문서에 <p>(문단), <div>(컨테이너) 같은 태그를 추가하고 싶다면 이 메서드를 사용합니다. 하지만 만들기만 하면 화면에 보이지 않고, 추가로 원하는 위치에 붙여줘야 합니다.
HTML 코드:
<div id="container">여기에 새로운 요소가 추가됩니다!</div>
JavaScript 코드:
// 새로운 <p> 태그 생성
const newParagraph = document.createElement('p');
// 생성된 태그에 텍스트 추가
newParagraph.textContent = '안녕하세요! 새로 만든 문단입니다.';
// 생성된 요소를 <div id="container"> 안에 추가
const container = document.querySelector('#container');
container.appendChild(newParagraph);
주석// `appendChild()**는 JavaScript에서 부모 요소에 새로운 자식 요소를 추가하는 메서드입니다
부모요소.appendChild(자식요소); `//주석
결과:
<div id="container">
여기에 새로운 요소가 추가됩니다!
<p>안녕하세요! 새로 만든 문단입니다.</p>
</div>
결론: 새로운 HTML 태그(예: <p>, <div>, <span> 등)를 만들어서 페이지에 동적으로 추가할 때 사용합니다.
~~~~~
너가 document 객체로 어떻게 표현되는지 알려준다고 보여준건데 잘 이해가안돼서 더 쉽게 설명해줘 to chat gpt 선생님
1. HTML 문서의 기본 구조
HTML 문서는 우리가 브라우저에 작성해서 보여주는 코드입니다.
예를 들어, 아래처럼 생긴 HTML 문서가 있다고 해봅시다:
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Document Example</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>Welcome to the HTML document structure.</p>
</body>
</html>
주요 요소:
- <html>: 문서 전체를 감싸는 가장 큰 요소.
- <head>: 웹 페이지의 제목이나 메타데이터를 담는 부분.
- <body>: 사용자가 실제로 보게 되는 내용.
- <h1>, <p>: 본문의 제목과 텍스트.
~~~~~
2. 브라우저는 이 HTML 문서를 읽고 "트리 구조"로 변환합니다
브라우저가 HTML 문서를 읽으면, 코드를 DOM 트리라는 구조로 만들어 관리합니다.
DOM 트리는 HTML 문서의 계층 구조를 시각적으로 나타낸 것이라고 보면 됩니다.
- 트리의 최상위: Document (전체 문서의 루트)
- 그 아래: <html> 요소, 그리고 그 하위로 계속 분기됩니다.
DOM 트리로 변환
Document (최상위 루트)
├── html
│ ├── head
│ │ └── title: "HTML Document Example"
│ └── body
│ ├── h1: "Hello, World!"
│ └── p: "Welcome to the HTML document structure."
3. JavaScript로 DOM 트리에 접근
HTML 코드를 JavaScript에서 사용하려면 document 객체를 통해 접근할 수 있어요.
document는 브라우저가 HTML 문서를 DOM 트리로 변환했을 때 생성된 최상위 객체입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Document Example</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>Welcome to the HTML document structure.</p>
</body>
</html>
~~~~
JavaScript:
console.log(document); // 전체 DOM 트리를 출력 (HTML 전체 구조)
console.log(document.title); // "HTML Document Example" 출력
console.log(document.body); // <body> 태그의 내용을 출력
console.log(document.querySelector('h1').textContent); // "Hello, World!" 출력
4. document는 DOM 트리의 시작점
document 객체는 DOM 트리의 최상위 노드이며, HTML 문서의 모든 요소에 접근할 수 있는 출발점입니다.
- 최상위: document
- 그 아래: <html> → <head> → <body>와 같은 HTML 요소들.
흐름 요약:
- 브라우저가 HTML 코드를 읽음.
- HTML 구조를 기반으로 DOM 트리를 만듦.
- DOM 트리의 최상위에 document 객체가 생김.
- JavaScript로 document를 사용해 DOM 트리를 탐색하거나 조작.
5. 책으로 비유를 해본다. //보통 책으로 비유를해서 알려줬지만 이해가안됐었다. 하지만 위에 gpt선생님을 통해 이해가됐고 책비유까지 이해할수있게 해주셨다.
HTML 문서를 책으로 비유해봅시다:
- HTML 코드: 책의 원고
- DOM 트리: 책을 읽고 만든 목차나 지도
- document 객체: 목차의 첫 페이지 (책 전체를 탐색할 수 있는 시작점)
핵심 요약
- HTML 문서가 브라우저에서 DOM 트리라는 구조로 변환됩니다.
- DOM 트리의 최상위는 document 객체입니다.
- JavaScript에서 document를 사용해 HTML 요소에 접근하거나 수정할 수 있습니다.
~~~~
객체는 데이터를 저장하고 그 데이터와 관련된 동작(메서드)을 포함하는 프로그래밍의 구조입니다.
- 데이터를 **속성(property)**라고 부르고, 동작은 **메서드(method)**라고 부릅니다.
const person = {
name: "Alice", // 속성
age: 25, // 속성
greet: function () { // 메서드
console.log("Hello, I'm " + this.name);
},
};
// 속성에 접근
console.log(person.name); // "Alice"
// 메서드 실행
person.greet(); // "Hello, I'm Alice"
프로그래밍 철학에서 객체
**객체지향 프로그래밍(OOP)**에서 객체는 핵심 개념입니다.
- 객체는 **데이터(속성)**와 **동작(메서드)**를 하나로 묶는 방식으로 시스템을 설계합니다.
- 객체끼리 서로 메시지를 주고받아 프로그램이 동작합니다.
~~~~~~
변수란 이름과 값이 있다.
변수는 데이터를 저장하기 위해 이름을 붙여주는 상자와 같아요.
- 이름: 변수의 이름 (여기서는 div).
- 값: 변수에 저장된 데이터 (여기서는 document.querySelector('div')로 찾은 HTML 요소).
const div = document.querySelector('div');
JavaScript에서 변수를 선언할 때 var, let, const를 사용할 수 있습니다.
**const**는 변수 선언 방식 중 하나이며, **"상수(constant)"**의 약자입니다.
const 변수는 "값을 바꿀 수 없다"**는 말은 숫자 값뿐만 아니라 모든 **데이터 유형(value)**에 해당합니다.
이 값은 숫자뿐 아니라 문자열, 객체, 배열, 함수, HTML 요소 등 다양한 유형의 데이터를 포함합니다.
~~