HTML의 기초 구성 - 바로 실행해보면서 배우는 HTML5/CSS3
바로 실행해보면서 배우는 HTML5/CSS3
  • HTML의 기초 구성
    learn
    Practice
    learn
    03 HTML 기초
    HTML의 기초 구성

    HTML(Hypertext Markup Language)은 컨텐츠의 구조를 정의하는 마크업 언어로, 컨텐츠(내용)에 태그(마크)를 씌워 구조를 구분하여 정의합니다. HTML에서는 <제목>바로 실행해보면서 배우는 HTML5/CSS3</제목>과 같은 한 덩어리를 요소(Element)라고 합니다. 요소의 구성에 대해 좀 더 자세히 살펴봅시다.

    HTML에서 요소는 시작 태그(Start tag)종료 태그(End tag), 컨텐츠(Contents)로 구성되어 있습니다. 컨텐츠는 말 그대로 사용자가 접하는 텍스트, 이미지 등을 지칭합니다. 태그(Tag)는 이러한 컨텐츠가 어떤 역할을 수행해야 하는지 지정하고, 그 사용 영역을 구분하여 구조를 정의합니다.

    여러 가지 태그 중 시작 태그는 <>로 감싸 내용의 시작을 표시하고, 종료 태그는 </>로 감싸 내용의 끝을 표시합니다. 제목, 부제목, 내용을 태그로 구분한 예시를 살펴봅시다.

    컨텐츠마다 앞뒤로 시작 태그와 종료 태그가 작성되어 있어 각 컨텐츠가 어떤 역할을 수행하는지 바로 구분할 수 있습니다. 하지만 이 코드는 여러분의 이해를 위해 한글로 작성되었기 때문에, 실제로 동작 가능한 HTML 코드로 변환해야 합니다.
    제목, 부제목, 내용은 각각 <h1>, <h2><p> 태그를 사용합니다. 태그는 대문자로 작성할 수는 있지만, 주로 소문자로 작성하길 권장해 드립니다.

    정보를 위와 같이 구조화하지 않고 컴퓨터에 전달하면 컴퓨터는 어디까지 제목이고 어디까지 내용인지 구분할 수 없어, 사용자가 예상하는 결과와 다른 처리를 실행할 수 있습니다. 그 때문에 우리는 HTML을 통해 컨텐츠를 구조화해야 합니다. 이외에 검색엔진 최적화와 접근성 등 여러 가지 이유가 있지만, 차차 공부하며 알아가실 수 있을 겁니다.

    Practice

    <제목>, <부제목> 그리고 <내용>에 해당하는 태그는 각각 <h1>, <h2>, <p>입니다.알맞은 HTML 태그로 바꿔서 실행해 봅시다.

    learn
    Practice
    Q & A
    Q&A forum that anyone can ask and answer.
    Share your questions and answers with other students and grow together!
    Registered Questions(0)