B2024001225 윤지선

HTML 명령어와 용어 정리(1) 본문

2024년 1학기/기초 웹 프로그래밍

HTML 명령어와 용어 정리(1)

윤지선 2024. 5. 25. 14:18

HTML 문서의 기본 구조

 

태그 - <>로 둘러싸인 명령어. 정해진 키워드를 사용 

요소 - 태그의 의미를 결정. ex) <font>, <img>, <br> 등

속성 - 옵션. ex) size, color, bgcolor 등

변수 - 옵션 값

ex) <font size = "6" color = "red"> //여기서 font는 요소, size와 color은 속성, 6과 red는 변수

 

<title>: HTML 문서의 제목을 나타내는 태그. 웹 브라우저의 제목 표시줄에 나타내고자 하는 내용을 서술함.

            <head> 태그 내에서 사용.

 

# 대부분은 닫는태그도 써야하지만 <img>나 <br>처럼 닫는 태그가 없는 경우도 있음

# 빈 공백은 한 칸만 인식함. -> 아무리 띄어쓰기를 많이 해서 입력을 하더라도 한칸밖에 인식을 못함.

 


 

[태그 요소와 속 정리]

<Hn align = "position"> 쓰고싶은 문장 </Hn>

n: 1~6 => 여섯단계의 문자 크기 지정. 1이  가장 큰 크기

"position" : left, right, center 중 선택 가능  

태그를 닫고 난 뒤에 자동으로 줄바꿈이 됨.

ex) <h1 align = "right"> 안녕하세요! 이곳은 윤지선의 홈페이지 입니다 </h1>

Hn과 position을 쓴 예시
결과

 


 

<font size="n" color="#rrggbb" face="string"> 쓰고싶은 문장 </font>

n: 1~7 => 크기 지정 가능. 7이 가장 큰 크기

color: 색상 이름을 쓰거나 16진수(#33aacc과 같은 예)로 표현할 수 있음. 

string: 글꼴 이름

font와 font 속성 사용 예시
결과

 


 

 

줄바꿈과 공백 삽입

<p>: 단락바꿈. => 줄을 바꿀 때 위 아래로 공간이 생김

<br> :  줄 바꿈 => 줄만 바꿈

<b>: 글자를 두껍게 할 때 사용 (강조할 때 사용) ex) <b>안녕</b> = 안녕

<i> 글자를 기울임 ex) <i>안녕</i> = 안녕

 

공백문자와 특수문자 

&nbsp; : 공백 삽입 ex) <h1> &nbsp; &nbsp; &nsbp; 안녕 </h1> =    안녕

 

 

주석달기: <!--   --!> 로 사용

 


 

<center> : 문장을 중앙에 정렬함. 

center의 예시

 

 

 

<pre>: 코드를 작성한 그대로 보여줌 -> 띄어쓰기나 탭을 많이 써도 그대로 출력됨.

<pre>를 사용한 예시와 그 결과

 

비주얼 스튜디오 코드(VS Code)에서 사용할 수 있는 다양한 HTML 요소와 태그들을 정리한 표를 제공해 드리겠습니다. 각 요소와 태그는 간단한 설명과 함께 제공됩니다.

HTML 태그와 속성에 대한 예제를 각각 하나씩 들어 설명하겠습니다.

주요 HTML 태그와 속성

구조 태그

  • <html>
    • lang: 문서의 언어를 지정합니다. 예: lang="ko"
  • <head>: 메타데이터 및 참조 정보를 포함합니다.
    • 일반적으로 속성을 사용하지 않습니다.
  • <title>: 문서의 제목을 정의합니다.
    • 일반적으로 속성을 사용하지 않습니다.
  • <body>
    • onload: 문서가 로드될 때 실행할 JavaScript 코드를 지정합니다.
    • onunload: 문서가 언로드될 때 실행할 JavaScript 코드를 지정합니다.

텍스트 콘텐츠 태그

  • <h1> ~ <h6>: 제목을 정의합니다.
    • 일반적으로 속성을 사용하지 않습니다.
  • <p>: 단락을 정의합니다.
    • 일반적으로 속성을 사용하지 않습니다.
  • <br>: 줄바꿈을 삽입합니다.
    • 일반적으로 속성을 사용하지 않습니다.
  • <hr>: 수평선을 삽입합니다.
    • 일반적으로 속성을 사용하지 않습니다.
  • <a>: 하이퍼링크를 정의합니다.
    • href: 링크 대상 URL을 지정합니다.
    • target: 링크를 열 창을 지정합니다. (_blank, _self, _parent, _top)
    • title: 링크에 대한 추가 정보를 제공합니다.
  • <strong>: 강한 중요성을 나타냅니다.
    • 일반적으로 속성을 사용하지 않습니다.
  • <em>: 강조를 나타냅니다.
    • 일반적으로 속성을 사용하지 않습니다.

목록 태그

  • <ul>: 순서 없는 리스트를 정의합니다.
    • 일반적으로 속성을 사용하지 않습니다.
  • <ol>: 순서 있는 리스트를 정의합니다.
    • type: 리스트 아이템의 유형을 지정합니다. (1, A, a, I, i)
  • <li>: 리스트 항목을 정의합니다.
    • 일반적으로 속성을 사용하지 않습니다.

이미지 및 멀티미디어 태그

  • <img>: 이미지를 삽입합니다.
    • src: 이미지 파일 경로를 지정합니다.
    • alt: 이미지가 표시되지 않을 때 대체 텍스트를 지정합니다.
    • width: 이미지의 너비를 지정합니다.
    • height: 이미지의 높이를 지정합니다.
  • <audio>: 오디오 콘텐츠를 포함합니다.
    • src: 오디오 파일 경로를 지정합니다.
    • controls: 오디오 컨트롤을 표시합니다.
  • <video>: 비디오 콘텐츠를 포함합니다.
    • src: 비디오 파일 경로를 지정합니다.
    • controls: 비디오 컨트롤을 표시합니다.
    • width: 비디오의 너비를 지정합니다.
    • height: 비디오의 높이를 지정합니다.

폼 관련 태그

  • <form>: 사용자 입력을 받기 위한 폼을 정의합니다.
    • action: 폼 데이터를 전송할 URL을 지정합니다.
    • method: 폼 데이터를 전송할 HTTP 메서드를 지정합니다. (GET, POST)
  • <input>: 다양한 유형의 입력 필드를 정의합니다.
    • type: 입력 필드의 유형을 지정합니다. (text, password, checkbox, radio, submit, 등)
    • name: 폼 데이터를 전송할 때 사용할 이름을 지정합니다.
    • value: 입력 필드의 초기값을 지정합니다.
    • placeholder: 입력 필드의 힌트 텍스트를 지정합니다.
  • <textarea>: 여러 줄의 텍스트 입력을 위한 텍스트 영역을 정의합니다.
    • name: 폼 데이터를 전송할 때 사용할 이름을 지정합니다.
    • rows: 텍스트 영역의 줄 수를 지정합니다.
    • cols: 텍스트 영역의 열 수를 지정합니다.
  • <button>: 클릭 가능한 버튼을 정의합니다.
    • type: 버튼의 유형을 지정합니다. (button, submit, reset)
  • <select>: 드롭다운 목록을 정의합니다.
    • name: 폼 데이터를 전송할 때 사용할 이름을 지정합니다.
    • multiple: 여러 옵션을 선택할 수 있도록 허용합니다.
  • <option>: 드롭다운 목록의 옵션을 정의합니다.
    • value: 옵션의 값을 지정합니다.
    • selected: 기본적으로 선택된 상태로 표시합니다.

테이블 태그

  • <table>: 표를 정의합니다.
    • 일반적으로 속성을 사용하지 않습니다.
  • <tr>: 표의 행을 정의합니다.
    • 일반적으로 속성을 사용하지 않습니다.
  • <td>: 표의 데이터를 정의합니다.
    • colspan: 셀의 가로 병합 수를 지정합니다.
    • rowspan: 셀의 세로 병합 수를 지정합니다.
  • <th>: 표의 헤더 셀을 정의합니다.
    • scope: 헤더의 범위를 지정합니다. (col, row, colgroup, rowgroup)
  • <thead>, <tbody>, <tfoot>: 표의 머리글, 본문, 바닥글 섹션을 정의합니다.
    • 일반적으로 속성을 사용하지 않습니다.

'2024년 1학기 > 기초 웹 프로그래밍' 카테고리의 다른 글

2024.05.08 10주차 수업  (0) 2024.05.08
2024.04.24 8주차 수업  (0) 2024.04.24
2024.04.17 7주차 수업  (0) 2024.04.17
2024.04.03 5주차 수업  (1) 2024.04.03
2024.03.27 4주차 수업  (0) 2024.03.27