프론트엔드(Web)/HTML

HTML 필수 태그

만능 엔터테이너 2024. 7. 9. 16:39
728x90
반응형
SMALL

 

텍스트 작성하기


<hn> 태그 : 제목이나 주제를 나타내는 텍스트를 표현 (헤딩 태그)

<hn>제목</hn>

 

hn 태그는 h1부터 h6 태그까지 총 6개가 존재하는데, 중요도가 가장 높음 h1 부터 중요도가 가장 낮은 h6 까지 숫자가 커질수록 글자의 크기가 점점 작아집니다.

※ 웹 브라우저의 검색 엔진에서 h1부터 탐색하다가 h1,h2,h3,h5 이렇게 작성하게 되면 중간에 h4 태그가 존재학지 않으므로 h4 뒤인 h5,h6를 탐색하지 않고 종료합니다. 이러한 특징으로 헤딩 태그를 사용할 때는 차례대로 사용하여야 합니다.

 

<p> 태그 : 본문의 문단을 작성할 때 사용 (Paragraph)

<p>하나의 문단을 작성할 때는 p 태그를 사용합니다.</p>

 

HTML에서는 제목이나 주제 텍스트가 아니면 대부분 본문이기에 p태그를 자주 사용합니다.

 

<br> 태그 : 문단에서 줄 바꿈할 때 사용

<br>

<p> 안녕하세요, <br>
코딩 공부하기 좋은 날입니다.
</p>

 

이처럼 줄 바꿈 표시할 부분에 br태그를 사용하여 문단의 줄 바꿈 처리를 합니다.

※ HTML은 모든 명령이나 지시를 태그로 입력하여야 합니다. 따라서, p 태그를 사용해서 코드 내부에서 줄바꿈 처리를 하였더라도 실제 웹 브라우저에서는 줄바꿈 처리가 되지 않은 한 줄로 작성되게 됩니다. 

 

<blockquote> 태그 : 출처에서 인용한 문단 단위의 텍스트를 작성할 때 사용

<blockquote cite="출처 URL">문단 단위 인용문</blockquote>

 

이때, 출처가 확실한 인용문은 cite 속성을 추가하여 출처 경로를 명시하여야 합니다.

※ blockquote 내부에 반드시 1개 이상의 p태그를 포함해야 합니다. 따라서, p태그 내용에 blockquote 태그는 포함이 불가능합니다.

예시}

<blockquote cite="출처 URL"> 

  <p> ~ </p>

</blockquote>

 

<q> 태그 : 문단 안에 텍스트 단위의 짧은 인용문을 작성할 때 사용

-  q 태그를 사용한 콘텐츠는 큰 따옴표(" ")로 묶임

<q cite="출처 URL">짧은 인용문</q>

 

예시)

<p> 전용학 <q>프론트엔드 개발자</q> </p>

 

출력 : 전용학"프론트엔드 개발자"

 

<ins> 태그 : 새로 추가된 텍스트를 나타낼 때 사용, 글자의 밑줄 표시 기능  / text

<ins>추가 텍스트</ins>

<del> 태그 : 기존에 있던 텍스트가 삭제된 텍스트임을 나타낼 때 사용, 글자의 가운데 취소선 표시 기능 / text

<del>삭제 텍스트</del>

 

<sub> 태그 : 글자의 아래 첨자를 표시하는 기능

<sub>아래 첨자</sub>

<sup> 태그 : 글자의 위 첨자를 표시하는 기능

<sup>위 첨자</sup>

 

예시)

<p>물의 원소 기호는 H<sub>2</sub>O<p>

<p>2<sup>2</sup>는 4입니다.</p>

 

출력)

물의 원소 기호는 H₂O

 

 

는 4입니다. (제곱)

 

 

 


그룹 짓기

html 코드를 작성하다 보면 검색 영역, 로그인 영역, 본문 영역 등 그룹으로 묶는 경우가 많습니다. 이때, 관련있는 요소끼리 그룹화하여 작성하게 되면 구조를 명확하게 작성할 수 있습니다.

 

{공간 분할 태그} : 관련 있는 요소끼리 그룹 짓는 작업을 다른 영역과 분리한다는 의미입니다. 주로 div와 span 태그를 사용합니다.

 

<div> 태그 : 블록 요소와 인라인 요소를 그룹으로 묶을 때 사용

<div>구분할 요소</div>
<div class="나누기">
  <p> 나누는 방법 </p>
  <p> 모든 걸 다 나누어 보자</p>
</div>
class 속성
html의 모든 태그에서 class 속성이 사용 가능한데 css를 적용하기 위한 식별자로 활용됩니다.

 

<span> 태그 : 인라인 요소를 그룹으로 묶을 때 사용

<span></span>
<p>영화 소개</p>
<p>이번 영화의 <span>하이라이트</span> 장면은 바로 여기입니다. </p>

 

p태그에서 "하이라이트" 텍스트 부분만 css 속성으로 다르게 스타일을 지정하고 싶으면 다음과 같이 작성합니다.


목록 만들기

<ul> 태그 : 순서가 없는 비순서형 목록을 생성할 때 사용합니다.

이때, ul 단독 사용이 불가능하고 반드시 <li>태그와 함께 사용하여야 합니다.

<ul>
	<li>목록 내용</li>
    <li>목록 내용</li>
    <li>목록 내용</li>
</ul>
<ul>
      <li>바나나</li>
      <li>사과</li>
      <li>패션후르츠</li>
    </ul>

ul 태그를 사용하게 되면 다음과 같은 글머리 기호가 붙어서 출력이 됩니다.

 

<ol> 태그 : 순서형 목록을 생성할 때 사용 

이때, ul 단독 사용이 불가능하고 반드시 <li>태그와 함께 사용하여야 합니다.

<ol>
    <li>목록 내용</li>
    <li>목록 내용</li>
</ol>
<ol>
      <li>바나나</li>
      <li>사과</li>
      <li>패션후르츠</li>
    </ol>

ol태그를 사용하면 다음과 같이 목록 내용에 번호가 붙어서 출력이 됩니다.

    <ol>
      <li>1.1 개발</li>
      <li>1.2 최초 규격</li>
      <li>1.3 표준 버전의 역사</li>
      <ol>
        <li>1.3.1 html 버전 스케쥴</li>
        <li>1.3.2 html 초안 버전 스케쥴</li>
        <li>1.3.3 xhtml 버전</li>
      </ol>
    </ol>

※ 다음과 같이 ol과 li 태그로 정의형 형식을 작성할 수 있습니다.

<dl> 태그 : 정의형 목록을 만들 때 사용 

정의형 목록이란 용어와 용어 설명을 나열한 형태(일종의 백과사전)

정의형 목록은 용어와 용어 설명을 나열한 형태의 목록

dl 태그로 목록을 생성할 때li 태그 대신 dt(description term) 태그로 용어 / dd(description details) 태그로 용어 설명

<dl>
    <dt>용어 1</dt>
    <dd>용어 설명</dd>
    <dt>용어 2</dt>
    <dd>용어 설명</dd>
</dl>
<dl>
      <dt>html</dt>
      <dd>하이퍼 텍스트 마크업 랭귀지</dd>
      <dt>css</dt>
      <dd>색칠공부</dd>
    </dl>


링크와 이미지 넣기

링크란? 문서와 문서 간 연결을 의미

 

<a> 태그 : HTML에서 내부 및 외부 링크를 생성합니다.

a 태그는 문서의 경로를 의미하는 href 속성을 필수로 하고, 그 외에 target, title 속성을 선택하여 사용가능합니다.

<a href="대상 경로" target="링크 연결 방식" title="링크 설명">링크를 연결할 텍스트</a>

 

href 속성 : a 태그로 생성하는 링크의 대상 경로를 입력할 때 사용

문서의 경로가 명확하지 않을 때
<a href="#">링크</a>

a 태그를 사용할 경우에 문서의 경로가 명확하지 않으면 href 속성 값으로 #을 추가하면 a태그의 내용을 클릭하여도 외부의 다른 페이지 혹은 내부의 경로로 연결되지 않습니다. 추후, 문서의 경로가 명확해지면 속성값은 올바른 대상 경로로 변경하여야 합니다.

 

target 속성 : a 태그로 링크를 생성할 때 대상이 연결되는 방식을 지정합니다.

 

target_blank : 새 창에서 생성

target_self : 현재 창에서 생성

 

title 속성 : 링크를 설명할 수 있는 텍스트를 작성합니다. a 태그의 콘텐츠만으로 표현하지 못한 설명을 작성

<a href="www.naver.com" target="_blank" title="네이버 웹페이지">네이버</a>

 

<img> 태그 : HTML에서 이미지 객체를 삽입하고 싶을 때 사용

<img src="이미지 경로" alt="이미지 설명">

 

src 속성

삽입하려는 이미지의 경로를 입력하는 속성으로, html에서 이미지 경로는 항상 웹 브라우저에서 실행되는 html 파일의 위치가 기준

./ : 현재 폴더 - 삽입하려는 이미지 파일이 html파일과 같은 폴더에 있을 때 사용

../ : 상위 폴더 - 삽입하려는 이미지 파일이 html파일과 다른 폴더에 있을 때 사용

 

이때, 현재 폴더를 의미하는 ./ 기호는 생략이 가능합니다!

 

alt 속성

삽입할 이미지 객체를 설명하는 대체 텍스트를 넣습니다. 이미지 파일의 경로 문제 혹은 다른 문제로 인해 이미지가 제대로 출력되지 않을 경우 대체 텍스트가 대신 출력이 됩니다.

 

이미지 링크
a 태그 안에는 텍스트뿐만이 아닌 여러 요소가 올 수 있습니다. 만약, img 태그를 a 태그 내부에 사용하면 이미지를 클릭했을 때 특정 링크로 이동할 수 있게 작성이 가능합니다.
<a href="대상 경로">
  <img src="이미지 경로" alt="대체 텍스트">
</a>

 

 

<a href="https://www.google.com" target="_blank">
  <img src="./google.logo.png" alt="구글 로고">
</a>

이렇게 작성하게 되면 구글 로고 이미지를 웹 페이지에서 클릭하면 새 창에서 구글 사이트가 열리게 됩니다.


텍스트 강조하기

<strong> 태그 : 텍스트의 의미를 강조할 때 사용

strong 태그는 스타일에서 차이를 두어 웹 브라우저에 중요한 부분임을 알려주는 역할을 수행합니다.

<strong>중요한 의미가 있는 텍스트</strong>

 

<p> 자바스크립트<strong> 백엔드까지</strong> 완성하기</p>

 

출력)

자바스크립트 백엔드까지 완성하기

 

strong 태그는 중첩해서 사용이 가능하며 strong 태그 내부에 strong 태그를 작성할 수 있습니다. 강조 효과는 동일하지만 구조적으로 더 중요한 부분임을 나타낼 수 있습니다.

 

<em> 태그 : 텍스트의 의미를 강조할 때 사용, 텍스트 기울임 효과

<em>강조하고 싶은 텍스트</em>

 

<p> 위기탈출 <em>넘버원</em></p>

 

출력)

위기탈출 넘버원

 

em 태그도 중첩해서 사용이 가능하며, 중첩하면 강조 효과는 동일하지만 구조적으로 더 강조하는 의미가 됩니다.


폼 구성하기

폼은 html에서 사용자의 정보를 입력받아 서버로 전송하기 위한 양식을 말합니다.

 

<form> 태그 : 폼 양식 / HTML의 폼을 구성하는 태그는 모두 form 태그 내부에 작성합니다.

<form action="서버 url" method="get 또는 post"></form>

 

action 속성

폼 요소에서 사용자로부터 입력받은 값을 전송할 서버의 url 주소를 작성하는 곳입니다.

 

method 속성

입력받은 값을 서버에 전송할 때 송신 방식을 작성하는 곳입니다.

 

method 속성값
폼 요소의 전송은 서버에서 처리하기에 서버 영역을 담당하는 개발자가 작성합니다. 따라서, action 속성값은 #으로 적고, method 속성값보안이 요구되는 정보이면 "post" 아니면 "get"으로 작성하면 됩니다.

 

<input> 태그 : 아이디와 비밀번호처럼 입력받는 요소를 생성할 때 사용

<input type="종류" name="이름" value="초깃값">

 

이떄, type 속성은 필수로 작성하고 name과 value 속성은 선택하여 작성할 수 있습니다.

 

type 속성

type 속성에 입력된 값에 따라 사용자의 상호작용 요소의 종류를 결정합니다.

 

{input 태그로 생성할 수 있는 입력 요소와 type 속성값}

text : 한 줄 텍스트를 입력할 수 있는 요소를 생성합니다.

password : 비밀번호를 입력할 수 있는 요소를 생성합니다.

tel : 전화번호 형식을 입력할 수 있는 요소를 생성합니다.

number : 숫자만 입력할 수 있는 요소를 생성합니다.

url : URL 주소 형식을 입력할 수 있는 요소를 생성합니다.

search : 검색용 텍스트를 입력할 수 있는 요소를 생성합니다.

email : 이메일 형식을 입력할 수 있는 요소를 생성합니다.

checkbox : 체크박스 요소를 생성합니다.

radio : 라디오버튼 요소를 생성합니다.

file : 파일 업로드 요소를 생성합니다.

button : 버튼 요소를 생성합니다.

image : 이미지로 버튼 요소를 생성합니다. 따라서 img 태그처럼 src 속성을 사용해야 합니다. 단, alt 속성은 사용하지 않습니다.

hidden : 사용자 눈에 보이지 않는 입력 요소를 생성합니다.

date : 날짜(연,월.일)를 선택할 수 있는 입력 요소를 생성합니다.

datetime-local : 사용자 시간대에 맞는 날짜(년,월,일,시,분)를 선택할 수 있는 입력 요소를 생성합니다.

month : 날짜(연,월)를 선택할 수 있는 입력 요소를 생성합니다.

week : 날짜(연,주차)를 선택할 수 있는 입력 요소를 생성합니다.

time : 시간을 선택할 수 있는 입력 요소를 생성합니다.

range : 숫자 범위를 선택할 수 있는 슬라이드 요소를 생성합니다.

color : 색상을 선택할 수 있는 요소를 생성합니다.

submit : 폼 전송 역할을 하는 버튼 요소를 생성합니다.

reset : 폼 요소에 사용자가 입력한 값을 초기화하는 버튼 요소를 생성합니다.

name 속성

입력 요소의 이름을 작성합니다. form태그에 의해 서버로 전송될 때, 서버에서 지정된 이름으로 입력요소를 식별할 수 있습니다.

 

value 속성

입력 요소의 초깃값을 작성합니다. 입력 요소는 보통 사용자에게 수동으로 값을 입력받지만, 미리 초깃값을 설정해두고 사용자는 초깃값을 지우거나 추가하여 작성할 수 있습니다.

 

<label> 태그 : form 태그 안에서 사용하는 상호작용 요소에 이름을 붙일 때 사용/ just 기능에 맞는 상자 생성

label 태그의 암묵적인 방법 - label 태그 내에 상호작용 요소를 포함시키는 방법

<label>
  아이디
  <input type="text"> -> 상호작용 요소
</label>

 

label 태그의 명시적인 방법 - label 태그의 for 속성과 상호작용 요소의 id 속성을 같은 값으로 설정하는 방법

<label for="userpw">비밀번호</label>
<input type="password" id="userpw">

for 속성값과 id 속성값이 같아야 함

 

label 태그의 암묵적 & 명시적 방법 함께 사용

<label for="username">
  <input type="text" id="username">이름
</label>

 

※ label 태그를 사용하는 이유 : label을 사용하지 않으면 input 태그를 정확하게 클릭해줘야 선택이되지만 label 태그를 사용함으로써 그 주변부를 클릭하여도 input 요소가 선택되도록 지정할 수 있습니다.

 

fieldset와 legend 태그 : form 태그 내부에 사용된 상호작용 요소들을 그룹화 

<form action"#">
  <fieldset>
    <legend>그룹 이름</legend>
    <!--상호작용 요소-->
  <fieldset>
</form>
<fieldset>
      <legend>기본 정보</legend>
      아이디 <input type="text" /> <br />
      비밀번호 <input type="password" /> <br />
      이메일 주소 <input type="email" />
    </fieldset>

 

fieldset 내부에 작성하게 되면 선으로 input 요소들을 그룹화하여 표시합니다.

legend는 그룹화한 요소들의 제목으로 표시합니다.

 

<textarea> 태그 : 여러 줄의 입력 요소를 생성

※ textarea는 input태그와 다르게 닫는 태그가 존재합니다. 따라서 input 태그의 초깃값은 value 속성으로 정의하는 대신, textrea는 콘텐츠 영역에 초깃값을 정의합니다.

<textarea>초깃값</textarea>
   <fieldset>
      <legend>기본 정보</legend>
      아이디 <input type="text" /> <br />
      비밀번호 <input type="password" /> <br />
      이메일 주소 <input type="email" /> <br />
      자신의 좌우명
      <textarea name="best" id="best"></textarea>
    </fieldset>

 

select,option,optgroup 태그 : select 태그를 사용하면 콤보박스를 생성

콤보박스에 항목 하나를 추가할 때는 option 태그 / 항목들을 그룹으로 묶고 싶다면 optgroup 태그를 사용

<select>
  <optgroup label="그룹 이름">
    <option value="서버에 전송할 값">웹 브라우저에 표시할 값</option>
  </optgroup>
</select
<fieldset>
      <legend>지역</legend>
      <select name="city" id="city">
        <option value="강북구">강북구</option>
        <option value="강남구">강남구</option>
        <option value="서초구">서초구</option>
        <option value="중원구">중원구</option>
        <option value="분당구">분당구</option>
      </select>
    </fieldset>

 
<fieldset>
      <legend>지역</legend>
      <select name="city" id="city">
        <optgroup label="서울">
          <option value="강북구">강북구</option>
          <option value="강남구">강남구</option>
          <option value="서초구">서초구</option>
          <option value="중원구">중원구</option>
          <option value="분당구">분당구</option>
        </optgroup>
        <optgroup label="경기도 성남">
          <option value="중원구">중원구</option>
          <option value="분당구">분당구</option>
        </optgroup>
      </select>
    </fieldset>

 

option 태그는 서버에 전송할 값을 value 속성으로 지정할 수 있는데, 속성을 생략하게 되면 option 태그의 콘텐츠로 적은 텍스트가 값으로 전송됩니다.

 

size 속성

콤보박스에서 화면에 노출되는 항목 개수를 지정하는 속성 / 속성값으로 숫자를 적고, 적지 않을 경우 기본으로 1개 항목이 표시됩니다.

<fieldset>
      <legend>지역</legend>
      <select name="city" id="city" size="4">
        <optgroup label="서울">
          <option value="강북구">강북구</option>
          <option value="강남구">강남구</option>
          <option value="서초구">서초구</option>
          <option value="중원구">중원구</option>
          <option value="분당구">분당구</option>
        </optgroup>
        <optgroup label="경기도 성남">
          <option value="중원구">중원구</option>
          <option value="분당구">분당구</option>
        </optgroup>
      </select>
    </fieldset>

 

multiple 속성

select 태그로 생성하는 콤보박스는 기본 1개 항목만 선택이 가능한데, multiple 속성을 이용하면 여러 항목을 동시에 선택할 수 있습니다.

※ 여러 항목을 지정할 때는 ctrl + 마우스 왼쪽 버튼으로 선택이 가능합니다.

   <fieldset>
      <legend>지역</legend>
      <select name="city" id="city" multiple>
        <optgroup label="서울">
          <option value="강북구">강북구</option>
          <option value="강남구">강남구</option>
          <option value="서초구">서초구</option>
          <option value="중원구">중원구</option>
          <option value="분당구">분당구</option>
        </optgroup>
        <optgroup label="경기도 성남">
          <option value="중원구">중원구</option>
          <option value="분당구">분당구</option>
        </optgroup>
      </select>
    </fieldset>

selected 속성

콤보박스는 첫 번째 option 태그의 값이 기본 선택된 상태로 표시되는데 selected 속성을 사용하여 기본 선택 항목을 변경할 수 있습니다.

<fieldset>
      <legend>지역</legend>
      <select name="city" id="city" multiple>
        <optgroup label="서울">
          <option value="강북구">강북구</option>
          <option value="강남구" selected>강남구</option>
          <option value="서초구">서초구</option>
          <option value="중원구">중원구</option>
          <option value="분당구">분당구</option>
        </optgroup>
        <optgroup label="경기도 성남">
          <option value="중원구">중원구</option>
          <option value="분당구">분당구</option>
        </optgroup>
      </select>
    </fieldset>

이때, 여러 개의 option 태그에 selected를 사용하게 되면 마지막으로 selected 속성이 사용된 태그가 기본값으로 설정됩니다.

 

<button 태그> : input 태그에서 type 속성값으로 생성이 가능하고 별도의 button 태그로 생성 가능합니다.

<button type="종류">버튼 내용</button>

button 태그도 type 속성값을 가지는데,

폼을 서버에 전송할 목적 - submit / type="submit"

상호작용 요소에 입력된 내용을 초기화하는 버튼 - reset / type="reset"

단순한 버튼 - button / type="button"

 <button type="submit">
      <img src="instagram.ong" alt="인스타그램 버튼" />
      인스타그램 계정 생성
    </button>

 

input 태그로 생성한 버튼 vs button 태그로 생성한 버튼
별다른 차이는 없고 단지 기능의 추가된 업데이트의 차이일 뿐 일반적으로 input 태그보다는 button 자체로 생성하여 단순한 텍스트 외에 이미지, 태그 같은 것을 포함시킬 수 있는 button을 사용하는 것을 권장

 

폼 관련 태그에서 사용가능한 추가 속성

disabled 속성

상호작용 요소를 비활성화하고 input, textarea, select, button 태그에서 사용이 가능합니다.

<태그 disabled>
 <body>
    <input type="text" disabled />
    <button type="button" diabled>비활성화</button>
  </body>

 

readonly 속성

상호작용 요소를 읽기 전용으로 변경합니다. 읽기 전용이 되면 요소에 텍스트를 입력할 수 없지만, 요소 선택 및 드래그 하여 내용 복사는 가능합니다. textarea 와 input 태그에서 사용 가능합니다. 단, input 태그에서는 text, search, url, tel, email, password, date, month, week, time, datetime-local, number 일 때만 사용이 가능합니다.

<태그 readonly>
<input type="pasword" readonly />
    <textarea readonly></textarea>

just 읽기 및 드래그, 복사만 가능합니다.

 

※ disabled 속성은 form 태그로 서버에 값을 전송하지 않지만, readonly 속성은 값이 전송된다는 차이가 존재합니다.

 

maxlength 속성

입력할 수 있는 글자 수를 제한합니다. 속성값으로는 숫자를 입력하고 textarea 태그input 태그text, search, url, tel, email, password, date, month, week, time, datetime-local, number일 때 사용합니다.

<태그 maxlength="숫자">
 <input type="url" maxlength="4" />
    <textarea maxlength="4"></textarea>

maxlength 속성값을 4로 설정하면 4글자까지만 입력이 가능합니다. 

 

checked 속성

요소를 선택된 상태로 표시합니다. 이때, 선택 요소가 있어야 하기에 input 태그의 type 속성값checkbox나 radio인 요소에서만 사용이 가능합니다.

<태그 checked>
<fieldset>
      <legend>좋아하는 과일</legend>
      <input type="checkbox" id="banana" name="banana" value="banana" />
      <label for="banana">banana</label><br />
      <input type="checkbox" id="apple" name="apple" value="apple" />
      <label for="apple">apple</label><br />
      <input type="checkbox" id="orange" name="orange" value="orange" checked />
      <label for="orange">orange</label>
    </fieldset>

 

 

placeholder 속성

입력 요소에 어떠한 값을 입력하면 되는지 힌트를 적는 용도로 사용합니다.

<input placeholder="입력값에 대한 힌트">
    <input type="tel" placeholder="전화번호를 입력해 주세요." />
 


표 만들기

표는 행, 열, 행과 열이 만나는 셀로 구성됩니다.

 

table 태그

HTML에서 표를 생성할 때는 table 태그를 사용합니다. 폼과 마찬가지로 표 관련 태그는 모두 table 태그 내부에 작성하여야 합니다. / Just 영역 지정

<table></table>

 

caption 태그

표의 제목을 작성할 때 사용합니다. 이때, 표를 작성할 때는 반드시 caption 태그를 사용하여야 합니다.

<table>
	<caption>표 제목</caption>
</table>

 

tr 태그

표에서 행을 생성합니다. tr 태그 하나 당 1개의 행이 생성되므로 여러 행을 작성할 경우 tr태그를 여러 번 사용합니다.

<table>
  <tr></tr>
</table>

 

th, td 태그

표에서 열을 생성할 때 사용합니다. th 태그는 표에서 제목을 나타내는 열 생성 / td 태그는 표에서 일반적인 데이터를 나타내는 열을 생성할 때 사용합니다.

{표를 만들 때 일반적인 형식} - 1행 기준

<table>
  <tr>
    <th>제목</th>
    <td>내용</td>
  </tr>
</table>
<table>
      <tr>
        <th>번호</th>
        <th>상품명</th>
        <th>수량</th>
        <th>가격</th>
      </tr>
      <tr>
        <td>1</td>
        <td>콜라</td>
        <td>1개</td>
        <td>1,500원</td>
      </tr>
      <tr>
        <td>2</td>
        <td>사이다</td>
        <td>2개</td>
        <td>1,000원</td>
      </tr>
      <tr>
        <td>3</td>
        <td>탄산수</td>
        <td>3개</td>
        <td>1,000원</td>
      </tr>
    </table>

※ html로만 작성하게 되면 표의 테두리가 존재하질 않습니다. 표의 테두리는 css 속성으로 스타일을 따로 지정해주어야 합니다.

 

rowspan과 colspan 속성

행과 행을 병합할 때는 rowspan / 열과 열을 병합할 때는 colspan 속성을 사용합니다.

이때, 병합하고 싶은 셀의 개수를 적고 병합한 셀의 개수만큼 다음 행 또는 열을 비웁니다.

<table>
      <tr>
        <th>번호</th>
        <th>상품명</th>
        <th>수량</th>
        <th>가격</th>
      </tr>
      <tr>
        <td>1</td>
        <td>콜라</td>
        <td>1개</td>
        <td>1,500원</td> <!-- 행 병합 -->
      </tr>
      <tr>
        <td>3</td>
        <td>탄산수</td>
        <td>3개</td>
        <!-- 4행 4열은 3행 4열과 병합했으므로 생성하지 않습니다. -->
      </tr>
      <tr>
        <td>총 금액</td>
        <td colspan="3">6,500원</td> <!-- 열 병합 -->
        <!-- 4행 2열부터 열 3개를 병합했으므로 나머지 열을 생성하지 않습니다. -->
      </tr>
    </table>

thead, tfoot, tbody 태그

표에서 행을 묶어 그룹화 하는 방식, thead 태그는 헤더 영역에 해당하는 행 / tfoot 태그는 푸터 영역에 해당하는 행 / tbody 태그는 본문 영역에 해당하는 행을 그룹화합니다.

이때, 반드시 thead -> tfoot -> tbody 순서로 작성하여야 합니다.

thead와 tfoot 태그는 한 번만 사용 가능하고 thead 태그로 그룹화한 행은 th 태그로 열을 생성합니다.

<table>
  <thead>
    <th> ... </th>
  </thead>
  <tfoot>
  <td> ... </td>
  </tfoot>
  <tbody>
    <td> ... </td>
  </tbody>
</table>
<thead>
      <tr>
        <td>번호</td>
        <!-- 중략 -->
      </tr>
    </thead>
    <tfoot>
      <tr>
        <td>총 금액</td>
        <!-- 중략 -->
      </tr>
    </tfoot>
    <tbody>
      <tr>
        <td>1</td>
        <td>콜라</td>
        <!-- 중략 -->
      </tr>
    </tbody>

 

위 작성한 내용을 thead, tfoot, tbody 태그 형식으로 작성한 형태입니다. / 가독성을 높이기 위해 사용합니다.

 

col과 colgroup 태그

표에서 열을 그룹화할 때 사용하며 col 태그는 하나의 열 / colgroup 태그는 span 속성과 함께 2개 이상의 열을 그룹화

<col>
<colgroup span="그룹화할 열의 개수">
<col style="width: 80px;">
      <colgroup span="2" style="width: 150px;"></colgroup>
      <col style="width: 100px;">

 

4열 기준 80 150 150 100 으로 열의 너비가 설정됩니다. (왼 -> 오)

 

scope 속성

제목을 나타내는 셀의 범위를 지정합니다. 따라서, 표에서 제목을 나타내는 th태그에서만 사용이 가능합니다.

태그의 범위를 지정하기 위해 사용되며, scope 속성은 col,colgroup,row를 값으로 넣을 수 있습니다. 이때, 속성값이 col이면 세로 방향, row이면 가로 방향이라고 생각하면 됩니다.

<table>
      <tr>
        <th scope="col">구분</th>
        <th scope="col">중간고사</th>
        <th scope="cole">기말고사</th>
      </tr>
      <tr>
        <th scope="row">전공</th>
        <td>A+</td>
        <td>B+</td>
      </tr>
      <tr>
        <th scope="row">교양</th>
        <td>C-</td>
        <td>B</td>
      </tr>
    </table>

표 영역의 가로 세로 구분을 명확하게 해주는 역할을 합니다.


멀티미디어 설정하기

<audio> 태그 : 웹 브라우저에서 오디오 파일을 구현합니다.

<audio src="오디오 파일 경로" controls></audio>

 

audio태그는 항상 src 속성과 함께 사용되며 src 속성값으로 오디오 파일의 경로를 작성합니다. 또한 오디오 컨트롤 패널이 웹 브라우저에 노출되도록 controls를 작성합니다.

    <audio src="sound.mp4" controls></audio>
 

 

<video> 태그 : 웹 브라우저에서 비디오 요소를 구현합니다.

<video src="비디오 파일 경로" controls></video>

 

video 태그는 src 속성을 필수로 사용하여야 하며 controls 속성을 추가해 사용자가 컨트롤할 수 있는 컨트롤 패널도 표시합니다.

    <video src="https://www.youtube.com/watch?v=EjbshYCuNjc" controls></video>

<source> 태그 : audio 태그와 video 태그에서 리소스(파일)의 경로와 미디어 타입을 명시하는데 사용

<audio controls>
  <source src="파일 경로" type="미디어 타입">
</audio>
<video controls>
  <source src="파일 경로" type="미디어 타입">
</video>

 

<audio controls>
      <source src="sample.wav" type="audio/wav">
      <source src="sample.mp3" type="audio/mp3">
      지원하지 않는 웹 브라우저입니다.
    </audio>

 

source 태그는 필수는 아니지만, 만약 웹 브라우저에서 지원하지 않는 파일들을 작성했을 경우, 위와 같이 작성하게 되면 모든 멀티미디어 파일이 작동하지 않으면 "지원하지 않는 웹 브라우저입니다."라는 글자를 사용자에게 표시합니다.


웹 페이지 구조를 설계하는 시맨틱 태그

 

 

웹 사이트마다 시맨틱 구조가 다르므로 참고용으로만 이해합니다. 

 

<header> 태그: 웹 페이지에서 헤더 영역을 구분하는 데 사용합니다.

<header>
	헤더 구성 요소
</header>

 

헤더 영역은 웹 사이트의 최상단 or 좌측에 위치하고 로고, 검색, 메뉴와 같은 요소들을 포함합니다.

<nav> 태그 : 웹 페이지에서 내부의 다른 영역이나 외부를 연결하는 링크 영역을 구분하는데 사용합니다.

<nav></nav>

 

이때, 내부 or 외부 연결 링크가 전부 nav 태그일 필요는 없고, 웹 사이트의 주요 탐색 링크 영역만 포함해도 상관없습니다.

<section> 태그 : 웹 페이지에서 관련 있는 내용 영역을 구분할 때 사용합니다.

<section></section>

 

just 내용 영역을 구분할 때, section 태그를 사용하면 됩니다.

<article> 태그 : 웹 페이지에서 독립적인 영역을 구분할 때 사용합니다.

<article></article>

 

여기서 section 태그와 article 태그를 주로 혼동하는데 section 태그는 웹 페이지 내부에서 관련 있는 내용을 구분하고, article 태그는 어느 웹 페이지에서든 독립적으로 사용될 수 있는 영역을 구분합니다.

<aside> 태그 : 웹 페이지 내부에서 독립적인 내용으로 보기 어려워 article 및 section 태그로 영역을 구분하기 힘들 때 사용합니다.

<aside></aside>

 

<footer> 태그 : 웹 페이지에서 푸터 영역을 구분할 때 사용합니다. 일반적으로 페이지 최하단 영역에 위치하며, 저작권 정보 및 연락처, 사이트 맵 등의 요소를 포함합니다.

<footer></footer>

 

<main> 태그 : 웹 페이지의 주요 내용을 지정할 때 사용하는 태그입니다.

main 태그에는 문서에서 반복적으로 등장하는 요소를 포함하면 안됩니다. main 태그를 article, asdie, footer, header, nav 태그의 하위에 포함할 수도 없습니다.


태그 종류에 상관없이 사용하는 글로벌 속성 {전역 속성}

class 속성 - 요소에 클래스명을 지정할 때 사용합니다. 클래스명은 css의 클래스 선택자로 활용 / 중복이 가능합니다.

<p class="front-end">...</p>

 

id 속성 - 요소에 아이디를 지정할 때 사용합니다. css에서 아이디 선택자로 활용 / 중복이 불가능합니다.

<h1 id="title">...</h1>

 

style 속성 - css 코드를 인라인으로 작성할 때 사용합니다. 

title 속성 - 요소에 추가 정보를 넣을 때 사용합니다. title 속성을 넣은 요소에 마우스를 올리면 툴팁으로 표시됩니다. 

lang 속성 - 요소에 사용한 텍스트이 언어 코드를 지정할 때 사용합니다.

<html lang="ko">

 

data -* 속성 - 사용자 커스텀 속성을 만들 때 사용합니다. 

<p data-name="spiderMan" data-hero="true">...</p>
728x90
반응형
LIST

'프론트엔드(Web) > HTML' 카테고리의 다른 글

HTML 핵심 요소 정리, 주석, 전역 속성  (0) 2024.07.07
HTML 기본 문법  (0) 2024.07.07