Orchemi

Orchemi

I start where others stop.

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

작성:    

업데이트:

카테고리:

태그: , ,

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>

실행결과

Hello, Orchemi


바. <mark> 태그

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

실행결과

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>

실행결과

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>

실행결과

  1. 순서가 있는 리스트A
  2. 순서가 있는 리스트B
  3. 순서가 있는 리스트C
  • 순서가 없는 리스트A
  • 순서가 없는 리스트B
  • 순서가 없는 리스트C


이를 <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 주석

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

댓글남기기

참고