흰둥이는 코드를 짤 때 짖어 (왈!왈!왈!왈!왈!왈!왈!왈!왈!왈!왈!)

(HTML) 기본 태그1 본문

HTML, CSS, JS

(HTML) 기본 태그1

흰둥아솜사탕 2023. 3. 23. 17:56
728x90
반응형

HTML의 특수 태그

  • < : &lt;
  • > : &gt;
  • 띄어쓰기 : &nbsp;

줄바꿈 태그

  • <br> = </br>

주석

  • <!-- --> 한줄 또는 여러줄
<!-- 
	작성일: 2023-03-23
	작성자: 이현준
	내용: 최초의 내 웹사이트를 만들어봤음 ㅅㄱ
-->
안녕하세요. 이현준의 최초의 웹사이트 오신걸 환영합니다!!!!<br>
안녕하세요. 이현준의 최초의 웹사이트 오신걸 환영합니다!!!!<br>
라이브 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;서버 확인! &lt; &gt;

결과창

문단 태그 <p> ~ </p>

  • 문단을 나타내는 태그
  • 블록 태그(한 라인을 모두 차지함)
<p>1. 문단 태그</p>
<p>문단을 만드는 태그</p> 블록 태그

p태그 결과 창

제목 태그 <h1> ~ </h1>

  • h1 ~ h6까지 크기
  • 블록 태그
  • 검색엔진에서 제목으로 표현됨
<h1>안녕하세요. 제목태그 h1</h1>
<h2>안녕하세요. 제목태그 h2</h2>
<h3>안녕하세요. 제목태그 h3</h3>
<h4>안녕하세요. 제목태그 h4</h4>
<h5>안녕하세요. 제목태그 h5</h5>
<h6>안녕하세요. 제목태그 h6</h6>

제목 태그 결과창

서식 태그

  • 글자를 꾸며주는 태그
  • <del>: 텍스트를 지운것처럼 표현
<p>del 태그는 글자를 <del>지운 것</del>처럼 표현합니다</p>

del태그

  • <ins>: 텍스트에 밑줄 표현
<p>ins 태그를 사용하면 중요한 글자에 <ins>밑줄</ins>을 그어줍니다</p>

ins태그

  • <sup>: 텍스트중 수식을 표현
<p>sup 태그를 사용해서 수식을 표현: x<sup>2</sup> + y<sup>3</sup> = z</p>

sup태그

  • <sub>: 텍스트중 화학식을 표현
<p>sub 태그를 사용해서 화학식을 표현: H<sub>2</sub>O</p>

sub태그

  • <b>: 텍스트를 굵게 표현
  • <strong>: 텍스트를 굵게 표현, 리더기에서 거쎈 발음
<p>b 태그는 단순히 들자가 <b>굵게</b> 표현됩니다</p>
<p>strong 태그는 중요한 글자를 <strong>굵게</strong> 표현합니다</p>

b태그와 strong태그

  • <i>: 텍스트를 이탤릭체로 표현
  • <em>: 텍스트를 이탤릭체로 표현, 리더기에서 거쎈 발음
<p>i 태그는 단순히 극자를 <i>이탤릭체</i>로 표현합니다</p>
<p>em 태그는 중요한 글자를 <em>이탤릭체</em>로 기울여 표현합니다</p>

i태그와 strong태그

b태그와 i태그는 각각 strong태그와 em태그랑 같은 기능이지만 웹 접근성을 고려하여 strong태그와 em태그를 권장하고 있다.

✅웹표준

  • 웹에서 표준적으로 사용되는 기술이나 규칙
  • W3C가 권고하는 표준안에 따라 웹사이트를 작성할 때 이용하는 HTML, CSS, JavaScript등에 대한 규정

✅웹접근성

  • 장애인, 고령자 등이 웹사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장

목록 태그

  • <ul>: 순서가 없는 목록 태그, 블록 태그
<ul>
	<li>김사과</li>
	<li>오렌지</li>
	<li>반하나</li>
</ul>

ul태그

  • <ol>: 순서가 있는 목록 태그, 블록 태그
<ol>
    <li>김사과</li>
    <li>오렌지</li>
    <li>반하나</li>
</ol>

ol태그

  • <dl>: 정의 목록 태그, 블록 태그
<dl>
	<dt>류정원 선생님</dt>
        <dd>김사과 학생</dd>
        <dd>오렌지 학생</dd>
        <dd>반하나 학생</dd>
</dl>

dl태그

속성

  • 태그를 보완하는 역할
<!DOCTYPE html>: HTML 버전
<html lang="en">: lang="en", 리더기의 언어를 설정(en:영어, ko:한국어)
<head>
    <meta charset="UTF-8">: charset을 utf-8 설정, 전세계의 모든 국가의 OS/브라우저에서 언어셋을 모두 설정
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">: 모바일 브라우저에서 최적의 크기로 페이지를 보여주고, 확대/축소를 금지
    <title>목록 태그</title>
</head>

 

메타 태그

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

 

이미지 태그

  • 이미지를 브라우저에 출력
  • 인라인 태그(컨텐츠 크기만큼만 영역을 사용)
<img src='이미지가 위치하는 주소 또는 파일경로' alt='이미지를 대신할 문장'>
무료로 png 이미지를 얻을 수 있는 곳
https://www.iconfinder.com/
  1. 비트맵 이미지
    • 픽셀이 모여 만들어진 정보의 집합
    • 레스터 이미지라고도 부름
    • 픽셀단위로 화면에 렌더링함
    • 그림판, 포토샵 등 툴로 편집
  2. 백터 이미지
    • 수학적 정보의 형태들이 만들어내는 결과물
    • 이미지가 가지고 있는 점, 선, 면의 위치, 색상정보를 가지고 있음
    • 확대 및 축소를 해도 이미지가 깨지지 않음
    • 일러스트 같은 툴로 편집

jpg(jpeg)

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

gif

  • 이미지 파일내에 이미지 밒 문자열 같은 정보를 저장할 수 있는 파일
  • 여러장의 이미지를 한 개의 파일에 저장할 수 있음(움짤, 애니메이션)
  • 8비트(256색상) 컬러만 지원
  • 비손실 압축

png

  • gif의 대체 포멧으로 개발
  • 8비트, 24비트 컬러 이미지 처리
  • 알파 채널 지원
  • W3C 권장 포멧

webp

  • jpg, png, gif를 모두 대체할 수 있는 구글이 개발한 이미지 포멧
  • gif 같은 애니메이션 지원
  • 알파 채널 지원(손실, 비손실)
  • 가장 완벽한 포멧

 

파일 경로 작성 방법

1. 절대 경로

  • 물리적 경로

 

2. 상대 경로

  • 이미지가 HTML 문서와 같은 디렉토리에 있는 경우
<img src='파일명'>, <img src='./파일명'>
  • 이미지가 하위 디렉토리에 있는 경우
<img src='디렉토리명/파일명'>, <img src='./디렉토리명/파일명'>
  • 이미지가 상위 디렉토리에 있는 경우
<img src='../파일명'>, <img src='./../파일명'>
  • 이미지가 상위 디렉토리의 하위 디렉토리에 있는 경우
<img src='../하위디렉토리명/파일명'>, <img src='./../하위디렉토리명/파일명'>
728x90
반응형

'HTML, CSS, JS' 카테고리의 다른 글

(CSS) 기초 지식  (0) 2023.03.28
(HTML) 기본 태그3  (0) 2023.03.27
(HTML) 호스팅  (0) 2023.03.27
(HTML) 기본 태그2  (0) 2023.03.24
(HTML) 기초 지식  (0) 2023.03.23
'HTML, CSS, JS' Related Articles more
Comments