본문 바로가기
코딩/Web

HTML 태그

by Song1234 2024. 4. 3.

HTML 특수 태그

< : &lt;

> : &gt;

(공백): &nbsp;
<br>: 다음줄로 개행

주석

<!---->

웹 접근성(Web accessibility)

모든 사용자, 장애를 가진 사람들이 웹 컨텐츠를 인식, 이해, 사용할 수 있도록 설계된 웹 사이트 및 어플리케이션을 가리킴. 장애를 가진 사람들뿐만 아니라 모든 사용자가 웹을 이용하는데 있어 동등한 기회를 제공하는 것을 목표로함

웹 표준(Web standards)

웹에서 사용되는 기술과 프로토콜에 대한 권고가항과 규약. 웹페이지 및 어플리케이션을 개발할 때 준수해야하는 지침이며 구조, 동작, 표현을 정의하는데 사용

<태그 속성="속성값" 속성="속성값" 속성="속성값"...>
속성: 태그를 보완하는 역할. 작은 따옴표 또는 큰 따옴표를 사용

<!DOCTYPE html> : 선언문, HTML5 나타냄
<html lang="en">: 리더기의 언어를 설정(en: 영어, ko: 한국어)
<head>
    <meta charset="UTF-8"> : 언어셋을 설정(예: euc-kr)
    <meta name="viewport" content="width=device-width, initial-scale=1.0">: 모바일 환경에 대한 설정
    <title>목록태그</title>: 제목 표시줄에 텍스트 출력
</head>
<html>
	<head>
		<title>내 웹사이트</title>
	</head>

	<body>
	내 사이트에 오신 걸 환영한다
	</body>

</html>

문단태그

<!-- 
     작성일: 2024-04-03
     작성자: 송윤섭
     내용: 문단 태그
 -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>문단태그</title>
</head>
<body>
    <p>문단을 만드는 태그</p> 일반 글자
    또 일반 글자&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;또 일반 글자
    <p>문단을 만드는 태그</p>
    &lt;p&gt;<br>
    개행<br>개행<br>개행<br>
</body>
</html>

제목태그

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>제목 태그</title>h2
</head>
<body>
    <h1>안녕하세요. 제목태그 h1</h1>
    <h2>안녕하세요. 제목태그 h2</h2>
    <h3>안녕하세요. 제목태그 h3</h3>
    <h4>안녕하세요. 제목태그 h3</h4>
    <h5>안녕하세요. 제목태그 h3</h5>
    <h6>안녕하세요. 제목태그 h3</h6>
    일반 문자
</body>
</html>

서식태그

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>서식태그</title>
</head>
<body>
    <h2>서식 태그</h2>
    <p>b 태그는 글자를 <b>굵게</b> 표현</p>
    <p>strong 태그도 글자를 <strong>굵게</strong> 표현</p>
    <p>i 태그는 글자를 <i>이텔릭체</i>로 표현</p>
    <p>em 태그도 글자를 <em>이텔릭체</em>로 표현</p>
    <p>ins 태그는 <ins>중요한</ins> 글자를 표현</p>
    <p>del 태그는 <del>글자를 지운 것</del>처럼 표현</p>
    <p>sup 태그로 수식을 표현: x<sup>2</sup>+y<sup>3</sup> = z</p>
    <p>sub 태그로 화학식을 표현: H<sub>2</sub>O</p>
</body>
</html>

목록 태그

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>목록태그</title>
</head>
<body>
    <h2>목록태그</h2>
    <p>순서가 없는 목록</p>
    <ul>
        <li>김사과</li>
        <li>오렌지</li>
        <li>반하나</li>
    </ul>
    <!-- ul>li*3 -->
    <ul>
        <li>김사과</li>
        <li>오렌지</li>
        <li>반하나</li>
    </ul>

    <hr>
    <p>순서가 있는 목록</p>
    <ol>
        <li>김사과</li>
        <li>오렌지</li>
        <li>반하나</li>
    </ol>
        
        <hr>
        
    <!-- dl>dt+dd*3 -->
    <dl>
        <dt>류정원 선생님</dt>
        <dd>김사과</dd>
        <dd>오렌지</dd>
        <dd>반하나</dd>
    </dl>
</body>
</html>

ul>li*3, dl?dt+dd*3 와 같은 형식으로 여러 목록을 간편하게 만들수있다

 

 

 

메타태그

  • <meta>: HTML 문서에 대한 정보를 정의할 때 사용
  • <head> ~ </head>사이에 적용
  • name, content, http-equiv, author, viewport, keyword, description 등 여러가지 속성들을 사용

이미지

  1. 비트맵 이미지
    •     픽셀이 모여 만들어진 정보의 집합
    •     레스터 이미지라고 부름
    •      픽셀 단위로 화면에 렌더링함
    •      그림판, 포토샵 등 툴로 편집
    •      bmp, jpg(jpeg), gif, png, webp ...
  2. 벡터 이미지
    •      수학적 정보의 형태들이 만들어내는 결과물
    •      이미지가 가지고 있는 점, 선, 면의 위치, 색상정보를 가지고 있음
    •      확대, 축소를 해도 이미지가 깨지지 않음
    •      일러스트 같은 툴로 편집

jpg(jpeg)

  • 압축률이 훌륭하여 사진이나 예술분야에 많이 사용
  • 가장 널리 쓰이는 이미지 포멧
  • 손실 압축
  • 표현 색상(24비트, 약 1600만 색상)이 뛰어나 고해상도 표시장치에 적합

gif

  • 이미지 파일내에 이미지 및 문야열 같은 정보를 저장할 수 있는 파일
  • 여러장의 이미지를 한 개의 파일에 저장할 수 있음
  • 8비트(256 색상) 컬러만 지원
  • 비손실 압축

png

  • gif의 대체 포멧으로 개발
  • 8비트, 24비트 컬러 이미지 처리
  • 알파 채널 지원(투명화 가능)
  • w3c 권장 포멧

webp

  • 구글에서 만든 가장 완벽한 포멧
  • jpg, png, gif를 모두 대체할 수 있는 포멧
  • 알파 채널 지원(손실, 비손실)

이미지 태그

    <img src='파일경로' alt='문자열'>
  1. 절대 경로(물리적 경로)
  2. 상대 경로
    • 이미지가 HTML문서와 같은 디렉토리에 있는경우
      <img src='파일명'>, <img src='./파일명'>
    • 이미지가 하위 디렉토리(img)에 있는 경우
      <img src="img/파일명">, <img src="./img/파일명">
    • 이미지가 상위 디렉토리에 있는 경우
      <img src="../파일명">, <img src="./../파일명">
    • 이미지가 사위 디렉토리의 하위 디렉토리(images)에 있는 경우
       
      <img src="../images/파일명">, <img src="./../images/파일명">

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>이미지 태그</title>
</head>
<body>
    <h2>이미지 태그</h2>
    <img src="https://www.tcpschool.com/img/logo.png" alt="TCP스쿨 로고">
    <img src="C:\Song\KDT\Web\HTML\Day1\rain1.png" alt="비 이미지"> <!--사용하지 않음-->
    <hr>
    <img src="./rain2.png" alt="비 이미지">
    <img src="./img/rain3.png" alt="비 이미지">
    <img src="./../rain4.png" alt="비 이미지">
    <img src="./../images/rain5.png" alt="비 이미지">
</body>
</html>

'코딩 > Web' 카테고리의 다른 글

CSS 배경  (0) 2024.04.09
CSS 텍스트  (0) 2024.04.08
CSS 선택자  (1) 2024.04.08
HTML 태그(2)와 호스팅  (1) 2024.04.04
HTML 개요  (3) 2024.04.03

관련글

티스토리툴바