[HTML]핵심 태그들 정리하기

Front-end/HTML & CSS

[HTML]핵심 태그들 정리하기

영벨롭 2022. 3. 10. 22:12

1. <div> - 블록 요소, 특별한 의미가 없는 구분을 위한 요소

<div>
	내용
</div>

2. <h1> - 블록 요소, 제목을 의미하는 요소

<h1> 제목 </h1>

제목을 의미하는 요소로, 일반 텍스트보다 굵고 진하게 표시됩니다.

<h1> 부터 <h6> 까지 사용가능하며, 숫자가 작을수록 더 중요한 제목을 정의합니다.

3. <p> - 블록 요소, 문장을 의미하는 요소

<p> 텍스트 </p>

텍스트 단락을 만다는 태그로 줄바꿈 없이 텍스트를 한 줄로 표시합니다.

이때 텍스트 줄이 브라우저 창의 너비보다 길어질 경우, 줄이 자동으로 바뀝니다.

4. <br/> - 인라인 요소, 줄바꿈 요소

<p>Hello<br/>World</p>

<br/> 태그를 <p> 태그 내부에 사용하게 되면 줄바꿈을 할 수 있습니다.

5. <span> - 인라인 요소, 특별한 의미가 없는 구분을 위한 요소

<p>Hello <span style="color:blue">New</span> World</p>

<span> 태그는 특별한 의미 없이 구분을 위한 요소로 텍스트 단락 안에서 일부 텍스트만 묶어 스타일을 적용하려고 할 때 주로 사용합니다.

6. <ul> - 블록 요소, 순서가 필요없는 목록의 집합을 의미하는 요소,

<li> - 블록 요소, 목록 내 각 항목을 의미하는 요소

<ul>
	<li>사과</li>
    	<li>딸기</li>
    	<li>체리</li>
</ul>

이때, </li> 닫는 태그를 생략해도 <li> 태그가 다음에 오는 <li> 태그를 만나면 자동으로 그 전에 </li> 태그가 있는 것처럼 인식합니다.

7. <table> - 테이블 요소, 표를 나타내는 요소, 행과 열의 집합

<table>
	<tr> 
		<td>A</td> 
		<td>B</td>
	</tr>
	<tr> 
		<td>C</td> 
		<td>D</td>
	</tr>
</table>

<tr> 태그는 테이블의 행을 나타내고, <td> 태그는 각 행의 열을 나타냅니다.

<th> 태그 - 표에 제목 셀 만들기

<th> 태그도 <td> 태그와 마찬가지로 셀을 만드는 태그입니다. 해당 셀에 들어가는 내용을 셀의 중앙에 배치하고 굵게 표시합니다.

<body>
  <table>
    <tr>
      <th>제목 셀</th>
      <td>1행 2열</td>
      <td>1행 3열</td>
    </tr>
    <tr>
      <th>제목 셀</th>
      <td>2행 2열</td>
      <td>2행 3열</td>
    </tr>
  </table>
</body>

colspan, rowspan 속성 - 행 또는 열 합치기

<td> 태그나 <th> 태그에 속성으로 colspan="합칠 셀의 개수" rowspan="합칠 셀의 개수"를 부여하면 행 또는 열을 합칠 수 있습니다.

<caption> 태그 - 표 위쪽 중앙에 제목 붙이기

<table> 태그 바로 밑에 <caption>표 제목</caption>을 작성하면 표의 위쪽 중앙에 제목을 표시할 수 있습니다.

<body>
  <table>
    <caption>
    	<strong>Strong 표 제목</strong>
        <p>표 제목</p>
    </caption>
    <tr>
      <th>제목 셀</th>
      <td>1행 2열</td>
      <td>1행 3열</td>
    </tr>
    <tr>
      <th>제목 셀</th>
      <td>2행 2열</td>
      <td>2행 3열</td>
    </tr>
  </table>
</body>

<figure>, <figcation> 태그 - 표 위쪽/아래쪽에(중앙 X) 제목 붙이기

<figure> 태그로 <table> 태그를 감싼 뒤, <figcation>을 <table> 태그 앞 쪽에 추가하면 표 위쪽에 제목을 표시하고, </table> 태그 뒤 쪽에 추가하면 표 아래에 제목을 표시합니다.

<body>
  <figure>
    <figcaption>
      <p>표 제목</p>
    </figcaption>
    <table>
      <tr>
        <th>제목 셀</th>
        <td>1행 2열</td>
        <td>1행 3열</td>
      </tr>
      <tr>
        <th>제목 셀</th>
        <td>2행 2열</td>
        <td>2행 3열</td>
      </tr>
    </table>
  </figure>
</body>

<thead>, <tbody>, <tfoot> 태그 - 표 구조 정의하기

위 태그들을 사용하여 표의 제목/본문/요약 부분을 구분할 수 있습니다. 구분하고 자 하는 행(<tr>)을 감싸주면 됩니다.

8. <img/> - 인라인 요소, 이미지를 삽입하는 요소

기본형은 <img src="이미지 경로" alt="대체 텍스트" [속성="값"]/> 입니다.

width, height 속성을 사용하여 이미지 크기를 조정할 수 있습니다. 만약 아무 값도 지정하지 않으면 원본 이미지 크기 그대로 브라우저 화면에 표시됩니다.

<body>
  <img src="./images/tisotry.png" alt="블로그 아이콘">
</body>

9. <a> - 인라인 요소, 다른/같은 페이지로 이동하는 하이퍼링크를 지정하는 요소

<a href="링크할 주소">내용</a>는 브라우저에서 내용을 눌렀을 때 해당 링크 주소로 이동하는 태그입니다.

내용에는 text가 들어갈 수도있고 이미지가 들어갈 수도 있습니다.

<body>
  <a href="https://naver.com/" target="_blank">NAVER</a>
</body>

<a> 태그의 주요 속성인 target은 링크한 내용이 표시될 위치를 지정하는 속성입니다.

속성 값	설명
_blank	링크 내용이 새 창에서 열림
_self	링크가 있는 화면에서 열림(기본값)
_parent	프레임을 사용했을 때 링크 내용을 부모 프레임에 표시
_top	프렘을 사용했을 때 프레임에서 벗어나 링크 내용을 전체 화면에 표시

10. <input/> - 인라인/블록 요소(inline-block), 사용자가 데이터를 입력하는 요소

<input> 태그는 인라인 요소이면서 블록 요소의 특징도 가지고 있습니다.

요소들이 수평으로 쌓이지만, 가로/세로 너비를 지정할 수 있고, 위/아래/좌/우 여백도 지정 가능합니다.

<body>
  <input type="text" value="name">
  <div>
    <input type="checkbox" name="box">사과
    <input type="checkbox" name="box">딸기
  </div>
</body>

자주 사용되는 속성들을 살펴 보겠습니다.

type

type 속성을 사용하여 사용자에게서 입력받을 데이터의 타입을 지정합니다. 속성 값은 다양하며 그 중 몇 가지 속성 값을 보겠습니다.

속성 값	설명
text	텍스트
tel	전화번호
url	URL 주소
button	버튼

value

value="데이터" 를 사용하여 입력 창에 미리 입력될 값을 지정합니다.

placeholder

placeholder="힌트" 를 사용하여 사용자에게 입력할 값의 힌트를 줍니다.

disabled

disabled 를 사용하여 입력 요소를 비활성화 시킵니다.

checked

type이 "checkbox"일 때 속성으로 checked를 주면 미리 체크해 줍니다.

name

type이 "radio"일 때 속성으로 name="그룹이름"을 지정하면 같은 그룹이름 내에서 하나의 radio만 선택 가능합니다.

11. <label> - 인라인 요소, 라벨 가능한 요소의 제목을 나타내는 요소

<label> 태그를 사용하여 폼 요소에 레이블을 붙일 수 있습니다.

<body>
  <div>
    <label>아이디 <input type="text" placeholder="이름을 입력하세요."></label>
  </div>
  <div>
    <label>비밀번호 <input type="password"></label> 
  </div>
</body>

저작자표시 비영리 변경금지