HTML

October 17, 2022

📌 용어 정리

인터넷(Internet)

많은 수의 컴퓨터 네트워크를 전세계적으로 연결한 네트워크

웹 페이지

인터넷에서 웹브라우저로 볼 수 있는 하나의 화면

웹 페이지는 HTML 마크업 언어로 기술된 텍스트파일(HTML파일)

웹사이트(web site)

여러 웹페이지를 모아 하나로 묶은 것

HTML(HyperText Markup Lagnguage)

HTML은 웹페이지를 기술하기 위한 언어이다. 웹페이지가 어떤 구조로 이루어져있는지 태그를 이용해 제목,단락, 표 등을 정의한다.
또한 이미지, 텍스트, 비디오, 버튼 등 웹사이트에 보여줄 내용을 구성한다. 브라우저(safari, chrome, ie..)는 HTML파일을 통해 어떻게 화면에 그려내면 되는지 파악한 후에 웹 페이지를 생성한다.

2. HTML 파일

HTML은 .html 확장자가 붙은 텍스트 파일이다.
텍스트편집기(Text Editor)같은 간단한 메모작성 앱을 열고, .html 확장자로 저장한 후에 해당파일을 브라우저(크롬)에 drag & drop 하면 브라우저에서 HTML로 작성한것을 확인 할 수 있다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>문서 제목</title>
    <style>
      /* 내부 CSS */
    </style>
    <script>
      // 내부 JavaScript
    </script>
  </head>
  <body>
    <header>
      <h1>제목</h1>
    </header>
    <nav>
      <ul>
        <li><a href="#">홈</a></li>
        <li><a href="#">소개</a></li>
      </ul>
    </nav>
    <main>
      <section>
        <h2>섹션 제목</h2>
        <p>섹션 내용</p>
      </section>
    </main>
    <footer>
      <p>&copy; 푸터 내용</p>
    </footer>
  </body>
</html>

3. HTML tag

브라우저는 HTML문서를 읽고 알아서 tag를 붙여주지만, 개발자라면 문법에 맞게 HTML 코드를 작성할 수 있어야 한다고한다.
HTML파일에 필요한 최소한의 태그는 아래와 같다. 추가하기 태그와 관련하여 HTML 기초 용어(tag, content, attribute, element)를 알아보자.

3-1. tag(태그), content(내용)

HTML에서는 <>로 감싼 태그 기호를 사용해서 웹페이지에 표시할 텍스트나 이미지, 링크 등을 기술 할 수 있다. 브라우저는 태크 안의 내용을 읽고 ‘아, 이것은 텍스트구나, 저것은 이미지구나’하고 알 수 있다.
태그는 <> 로 감싸져 있다.

브라우저에서 태그(tag)(<태그이름>과 )은 보여주지 않는다. 즉, 내용(content) 부분만 보여준다. 내용의 왼쪽에 있는 것이 시작 태그(opening tag)이고, 내용 우측에 있는 것이 종료 태그(closing tag)이다. 종료태그 괄호를 닫기전에 /(slash)가 있다는 것을 꼭 기억하자. 대부분의 태그는 시작하면 꼭 끝맺음을 해야한다. 즉, 시작태그가 있으면 끝 태그도 꼭 있어야한다는 의미이다.

아래의 태그는 시작과 끝 태그가 존재한다.

추가하기

반면에 시작과 동시에 종료되는 태그도 존재한다. 이런 태그는, 태그와 태그 사이에 내용부분이 필요 없기 때문이다. 나중에 직접 써보며 더 자세히 살펴보자.

https://www.w3schools.com/tags/tag_a.asp 에서 태그들을 확인 할 수 있다.

3-2. attribute(속성)

속성은 시작 태그에 위치하며 한 태그에 여러 속성을 지정할 수 있다. div, a, img는 태그이고 class, href, src, alt는 속성이다.

Twitter Facebook LinkedIn

Kimsu

HTML

📌 용어 정리

인터넷(Internet)

웹 페이지

웹사이트(web site)

HTML(HyperText Markup Lagnguage)

2. HTML 파일

3. HTML tag

3-1. tag(태그), content(내용)

3-2. attribute(속성)

공유하기

댓글남기기