HTML 기본 예제
이 장에서는 몇 가지 기본적인 HTML 예제를 보여줍니다.
아직 배우지 않은 태그를 사용하더라도 걱정하지 마세요.
HTML 문서
모든 HTML 문서는 문서 유형 선언으로 시작해야 합니다 <!DOCTYPE html>.
HTML 문서 자체는 로 시작 <html>하고 로 끝납니다 </html>.
HTML 문서의 보이는 부분은 과 사이 <body>에 </body>있습니다.
예시
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
<!DOCTYPE> 선언
<!DOCTYPE>선언은 문서 유형을 나타내며 브라우저가 웹 페이지를 올바르게 표시하는 데 도움이 됩니다 .
페이지 상단(HTML 태그 앞)에 한 번만 나타나야 합니다.
선언 은 <!DOCTYPE>대소문자를 구분하지 않습니다.
<!DOCTYPE>HTML5에 대한 선언은 다음과 같습니다 .
<!DOCTYPE html>
HTML 제목
HTML 제목은 <h1>to <h6>태그로 정의됩니다.
<h1>가장 중요한 제목을 정의합니다. <h6>가장 덜 중요한 제목을 정의합니다.
예시
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
HTML 단락
HTML 단락은 다음 <p>태그로 정의됩니다.
예시
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML 링크
HTML 링크는 다음 <a>태그로 정의됩니다.
예시
<a href="https://www.w3schools.com">This is a link</a>
링크의 대상은 href속성에 지정됩니다.
속성은 HTML 요소에 대한 추가 정보를 제공하는 데 사용됩니다.
속성에 대한 자세한 내용은 이후 장에서 배우게 됩니다.
HTML 이미지
HTML 이미지는 <img>태그로 정의됩니다.
소스 파일( src), 대체 텍스트( alt),
width및 다음과 height같은 속성이 제공됩니다.
예시
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
HTML 소스를 보는 방법?
웹 페이지를 보고 "이봐! 어떻게 그렇게 했지?"라고 생각한 적이 있습니까?
HTML 소스 코드 보기:
HTML 페이지에서 마우스 오른쪽 버튼을 클릭하고 "페이지 소스 보기"(Chrome) 또는 "소스 보기"(Edge) 또는 다른 브라우저에서 이와 유사한 것을 선택합니다. 그러면 페이지의 HTML 소스 코드가 포함된 창이 열립니다.
HTML 요소 검사:
요소(또는 빈 영역)를 마우스 오른쪽 버튼으로 클릭하고 "검사" 또는 "요소 검사"를 선택하여 어떤 요소로 구성되어 있는지 확인합니다(HTML과 CSS가 모두 표시됨). 열리는 요소 또는 스타일 패널에서 HTML 또는 CSS를 즉석에서 편집할 수도 있습니다.