logo
Search검색어를 포함하는 게시물들이 최신순으로 표시됩니다.
    Navigation
    Table of Contents
    [HTML] HTML의 구성, 태그와 주석

    이미지 보기

    HTMLFE LanguageHTML모두의HTML5&CSS3

    [HTML] HTML의 구성, 태그와 주석

    • 21.07.05 작성
    • 읽는 데 9분
    메인
    프론트엔드
    HTML
    [HTML] HTML의 구성, 태그와 주석

    TOC

    HTML 언어의 역할

    • 텍스트와 이미지처럼 웹 사이트에서 정보라고 불리는 요소 입력
    • 메뉴, 배너, 본문 등 다양한 콘텐츠가 들어가는 공간을 미리 설정
      ※ 구체적인 공간의 크기와 배치는 CSS 언어로 지정

    HTML 태그의 구성 요소와 HTML 문서의 기본 구조

    <태그A 속성="속성값"> 콘텐츠 </태그A>
    • 태그 : 입력된 정보의 성격
    • 속성 : 그 태그가 가진 역할
    • 속성값 : 태그가 어떤 역할을 수행할지 구체적인 명령
    • 콘텐츠 : 열린 태그와 닫힌 태그 사이에 있는 내용물

    예시)

    <스마트폰 전원버튼="ON" 볼륨="OFF"> 전원을 켜고 볼륨을 끕니다. </스마트폰>

    스마트폰이라는 태그가 실제로 동작한다면 스마트폰을 켜고 볼륨을 끄면서 문구를 출력.



    예제

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="description" content="Web Tutorial" />
    <meta name="keywords" content="HTML, CSS" />
    <meta name="author" content="Orchemi" />

    <title>웹 프로그래밍 기초</title>
  </head>
  <body></body>
</html>
    • <!DOCTYPE html> 은 해당 문서가 HTML로 작성되었다고 선언하는 태그
    • <html> 태그는 HTML 문서의 시작과 끝을 알리는 태그
    • <html lang="en"> lang 속성은 언어를 인식하여 자동으로 음성을 변환하거나 해당 언어에 적합한 발음을 제공할 수 있도록 함
    • <meta> 태그는 HTML 문서의 한 줄 요약, 키워드, 작성자 등 문서의 특징
      <head>와 </head> 사이에 작성.
      일반적으로 charset, name, content 속성 사용
    • <body> 는 HTML 문서 본문의 시작과 끝을 알리는 태그

    HTML 주요 태그

    가. <a> 태그

    • 닻(anchor)을 의미
    • 이 태그의 컨텐츠를 클릭하면 특정 영역이나 페이지로 이동
    • 보통 메뉴 버튼을 만들 때 사용
    <!DOCTYPE html>
<html lang="en">
  <head>
    <title>a 태그 사용</title>
  </head>
  <body>
    <a href="http://www.naver.com" target="_blank" title="네이버로 이동"
      >네이버</a
    >
  </body>
</html>
    • href 속성은 hypertext reference의 약자로 연결할 주소를 지정할 때 사용
    • URL 주소가 정해지지 않았다면 # 기호를(a href = #) 기본값으로 입력
    • target 속성은 웹사이트를 이동할 때 어떤 위치에서 열리게 할지 결정하는 요소
      속성값으로는

      _blank : 새 탭 또는 새 창을 띄워서 페이지 이동
      _self : 현재 탭에서 페이지를 이동 을 주로 사용한다.

    • title 속성은 <a>태그를 클릭했을 때 이동하게 되는 페이지의 정보
      생략하더라도 웹 표준에 어긋나지는 않는다.

    나. <img> 태그

    • 정보성 이미지를 삽입할 때 사용
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>img 태그 사용</title>
  </head>
  <body>
    <img scr="logo.png" width="300px" height="300px" alt="회사 로고A" />
  </body>
</html>
    • scr 속성은 이미지 파일 위치를 입력할 때 사용
    • width/height 속성은 이미지 파일 크기를 임의로 지정할 때 사용
      보통 웹 디자이너가 제작한 이미지 크기에 맞춰서 웹 사이트를 제작하므로 보통은 변경하지 않음.
    • alt 속성은 alternative text의 약자로 브라우저가 이미지를 제대로 표시하지 못한 경우에 이미지 대신 텍스트로 대체해서 표시하기 위해 사용. 스크린 리더 프로그램이 이미지 정보를 읽어 전달하는 경우에도 사용되므로 웹 접근성 측면에서 빠질 수 없는 속성

    다. <h1>~<h6> 태그

    • 헤드라인을 의미하는 태그
    • 보통 회사 이름이나 로고에 대한 정보를 <h1> 태그를 사용
      때문에 보통 <h1> 태그는 문서 1개당 1번만 사용

    라. <p> 태그

    • 단락을 의미하는 paragraph의 약자 'p'
    <!DOCTYPE html>
<html lang="ko">
  <head>
    <title>p 태그 사용</title>
  </head>
  <body>
    <p>Nice to meet you</p>
  </body>
</html>

    실행결과

    Nice to meet you


    마. <span> 태그

    • 문단 안에 있는 특정 단어나 문장에 디자인을 지정할 때 사용
    <!DOCTYPE html>
<html lang="ko">
  <head>
    <title>span 태그 사용</title>
  </head>
  <body>
    <p>Hello, <span style="color:orange;">Orchemi</span></p>
  </body>
</html>

    바. <mark> 태그

    • 단어나 개념을 설명하는 문장이나 이용된 문장에서 특정 텍스트를 강조할 때 사용
    • <mark> 태그가 적용된 영역에는 기본값인 노란 배경색이 들어감
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>mark 태그 사용</title>
  </head>
  <body>
    <p><mark>HTML</mark> 어렵지만 재밌다!</p>
  </body>
</html>

    ※ 만약 기본값인 노란 배경색을 바꾸고 싶다면?
    CSS 언어를 사용하여 수정!

    <!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>mark 태그 배경색 변경</title>
  </head>
  <body>
    <p><mark style="background-color:red;">HTML</mark> 어렵지만 재밌다!</p>
  </body>
</html>

    사. <ol>, <ul>, <li> 태그

    • <ol> : ordered list, 순서가 있는 목록
    • <ul> : unordered list, 순서가 없는 목록
    • <li> : list item, 목록의 항목들
    <!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>list 태그 활용</title>
  </head>
  <body>
    <ol>
      <li>순서가 있는 리스트A</li>
      <li>순서가 있는 리스트B</li>
      <li>순서가 있는 리스트C</li>
    </ol>
    <ul>
      <li>순서가 없는 리스트A</li>
      <li>순서가 없는 리스트B</li>
      <li>순서가 없는 리스트C</li>
    </ul>
  </body>
</html>

    이를 <a> 태그와 결합하여 메뉴/목록 을 만들 수 있다.

    <!DOCTYPE html>
<html lang="ko">
  <head>
    <title>list 태그 활용하여 목록 만들기</title>
  </head>
  <body>
    <ul>
      <li><a href="#">순서가 없는 리스트A</a></li>
      <li><a href="#">순서가 없는 리스트B</a></li>
      <li><a href="#">순서가 없는 리스트C</a></li>
    </ul>
  </body>
</html>

    아. <input /> 태그

    • 사용자에게 정보를 입력받을 때 사용
    • 주로 웹 사이트에서 회원 가입을 할 때 회원 정보를 입력하는 영역에 사용
    <!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>input 태그 활용</title>
  </head>
  <body>
    <input type="text" value="이름" />
    <input type="submit" value="제출" />
    <p>당신의 취미는 무엇입니까?</p>
    <input type="checkbox" />영화감상 <input type="checkbox" />사진
    <input type="checkbox" />운동
  </body>
</html>

    input 태그 디버깅에서 <label> 이라는 태그를 자꾸 붙이라고 하는데 이유를 잘 모르겠다. 이에 대해서는 추구 탐구해보기로 한다.



    • type 속성이 어떤 속성값을 갖는지에 따라 형태가 달라진다.
    • text 속성은 단어나 짧은 문장을 입력할 수 있는 텍스트박스 생성
    • submit 속성은 전송 버튼 생성
    • checkbox 속성은 다중 선택이 가능한 체크 박스 생성
    • 기타 password, reset, radio, date 등 여러 종류가 있다.
    • type 속성값 확인

    자. HTML 주석

    • 브라우저에는 표시되지 않지만 코드의 파악에 도움을 주는 일종의 '메모'
    <!-- 주석으로 표기해야 하는 설명 -->
    profile

    FE Developer 박승훈

    노력하는 자는 즐기는 자를 이길 수 없다

    Github
    Linkedin
    Email