[Web Fe] HTML 태그

이번 포스팅은 HTML 태그 파트를 공부 및 정리 겸 더 알아본 부분을 정리했습니다.

 

HTML은 태그들의 집합입니다.

HTML은 버전이 업그레이드되면서 태그가 새로 추가되기도 하고 삭제되기도 합니다.

그 모든 태그를 전부 외우긴 힘들고 쓰임새가 있다는 것만 알아두면 좋을 거 같습니다.

 

제목과 단락요소

<h1>태그

<h2>태그 등

제목 태그가 있는데 그 중요도에 따라 h1 h2 등을 부여하면 됩니다.

 

본문 태그는 body안에 기재합니다.

<p>태그 | paragraph , 본문을 표시.

<br>태그 | break, 줄 바꿈.

 

더 알아본 태그들.

 

+ <pre> 태그 | preformatted  입력한 그대로 표시

<strong> 태그 | 굵은체로 변환

<em>태그 | 기울임

<sub> 태그 | 글자를 아래로 내려서 기입.

<sup> 태그 | 글자를 위로 올려기입

<ins> 태그 | 글자 아래 밑줄 삽입

<del> 태그 | 취소선 삽입

 

 

p태그는 안에서 띄워쓰기 해도 줄바꿈 불가능.

-> br로써 줄바꿈 가능.

 

 

텍스트를 꾸며주는 요소

 

• <b> : bold 태그는 글자를 굵게 표현하는 태그입니다.
• <i> : italic 태그는 글자를 기울여서 표현하는 태그입니다.
• <u> : underline 태그는 글자의 밑줄을 표현하는 태그입니다.
• <s> : strike 태그는 글자의 중간선을 표현하는 태그입니다.

엥커 요소

 

<a>(anchor 태그)는 a태그, 앵커, 링크 등 여러 이름으로 불립니다.

href : a태그가 연결할 주소를 표시.

_self는 현재 화면에 표시한다는 의미로, target 속성이 선언되지 않으면 기본적으로 self와 같이 동작합니다.

_blank는 새로운 창에 표시한다는 의미로 외부 페이지가 나타나게끔 하는 속성입니다.

 

 

의미가 없는 컨테이너 요소

 

의미가 없는 컨테이너 요소

태그 자체에 아무 의미가 없으며, 단순히 요소들을 묶기 위해 사용되는 태그입니다.

스타일을 주거나 서버에 보내는 데이터를 담기 위한 용도로 이런 의미 없는 요소들이 사용됩니다.

이런 의미 없는 태그의 사용빈도는 매우 높습니다.

 

<div>태그와 <span>태그

div(division) 태그는 블록 레벨 태그입니다. ( p태그)

블록 레벨 요소는 기본적으로 한 줄을 생성해서 내용을 표현합니다.( b i u s 등 텍스트들을 꾸며주었던 태그들)

반면, span 태그는 인라인 레벨 태그입니다.

인라인 레벨 요소들은 블록 레벨 요소의 한 줄 안에서 표현되는 요소들입니다.

 

리스트 요소

<ul>

ul(unordered list) 태그는 순서가 없는 리스트

 

<ol>

ol(ordered list) 태그는 순서가 있는 리스트

 

<li> 리스트 내의 항목.

 

<dl>태그

dl(definition/description list) 태그는 용어와 그에 대한 정의를 표현할 때 사용합니다.

<dl>은 용어와 설명이 하나의 세트로 항목을 이루고 하나 이상의 항목으로 리스트가 이루어지는 구조입니다.

 

리스트 태그_속성

 

start=""속성 | 리스트가 시작하는 시점 지정

type="" | 리스트의 순서 문자 지정

reversed | 리스트의 번호를 역순으로

 

<img>

<img>는 문서에 이미지를 삽입하는 태그로, 닫는 태그가 없는 빈 태그 입니다.

src 속성

<img>의 필수 속성으로 이미지의 경로를 나타내는 속성입니다.

alt 속성

이미지를 설명하는 글을 나타내는 속성입니다.

width/height 속성

이미지의 가로/세로 크기를 나타내는 속성입니다.

 

 

표의 구성 요소

데이터 표를 나타냄.

표는 셀(내용이 들어가는 하나의 칸)로 이루어져 있습니다.

표의 행(가로 방향)을 row, 열(세로 방향)을 column이라 합니다.

 

• <table> : 표를 나타내는 태그
• <tr> : 행을 나타내는 태그
• <th> : 제목 셀을 나타내는 태그
• <td> : 셀을 나타내는 태그
• <caption>: 표의 제목을 나타내는 태그
• <thead>: 제목 행을 그룹화하는 태그
• <tfoot>: 바닥 행을 그룹화하는 태그
• <tbody>: 본문 행을 그룹화하는 태그

숙제 :

 

<colgroup> 태그는 테이블에서 서식 지정을 위해 하나 이상의 열을 그룹으로 묶을 때 사용합니다.

<colgroup> 요소는 <table> 요소의 자식 요소로, 모든 <caption> 요소보다 뒤에 위치해야 하며 모든 <thead>, <tbody>, <tfoot>, <tr> 요소보다는 앞에 위치해야 합니다.

 

 

 

 

<col> 태그는 <colgroup> 요소에 속하는 각 열(column)의 속성을 정의할 때 사용합니다.

<col> 요소는 각 행(row)이나 셀(cell)의 스타일을 반복하지 않고, 열(column)마다 각각 다른 스타일을 적용하고 싶을 때 유용하게 사용할 수 있습니다.

 

scope 속성

<th> 태그의 scope 속성은 해당 헤더 셀이 관련되는 셀의 종류를 명시합니다.

 

일반 웹 브라우저에서는 <th> 요소에 scope 속성을 명시해도 아무런 시각적 효과도 나타나지 않지만, 스크린 리더기와 같은 장치에서는 유용하게 사용될 수 있습니다.

 

 

headers 속성

 

<td> 태그의 headers 속성은 해당 데이터 셀과 연관된 하나 이상의 헤더 셀(header cell)을 명시합니다.

 

폼요소

 

 

<input>은 내용이 없는 빈 요소이며 type 속성을 통해 여러 종류의 입력 양식으로 나타나게 됩니다.

 

주로 아이디, 이름, 주소, 전화번호 등 단순한 텍스트를 입력할 때 사용합니다.

type="text"에는 placeholder 속성이 존재합니다.

 

type="password"

암호와 같이 공개할 수 없는 내용을 입력할 때 사용합니다.

화면에는 type="text"와 같게 나타나지만 실제로 입력할 때 값을 노출하지 않습니다.

 

type="checkbox"

 

체크박스를 만들 때 사용합니다.

체크박스는 중복 선택이 가능합니다.

 

type="file"

파일을 서버에 올릴 때 사용합니다.

브라우저에 따라 표현되는 형태는 조금씩 다르지만, 모두 같은 역할을 합니다.

 

 type="submit|reset|image|button" 

 

submit, reset, image, button 타입은 모두 클릭 가능한 버튼을 만듭니다.

 

• submit : form의 값을 전송하는 버튼
• reset : form의 값을 초기화하는 버튼
• image : 이미지를 삽입할 수 있는 버튼 (submit과 동작이 동일함)
• button : 아무 기능이 없는 버튼

<select>

<select>는 선택 목록 상자 또는 콤보박스라고도 합니다.

몇 개의 선택지를 리스트 형태로 노출하고 그중 하나를 선택할 수 있게 하는 태그입니다

 

<textarea>

한 줄만을 입력할 수 있는 <input type="text" >와 달리 여러 줄의 텍스트를 입력할 때 사용합니다.

 

<button>

버튼을 만들 때 사용하며 submit, reset, button 3가지의 타입이 있습니다.

 

<label>

<label>은 form 요소의 이름과 form 요소를 명시적으로 연결시켜주기 위해 사용합니다.

form 요소의 id 속성값과 <label>의 for 속성값을 같게 적어주어야 합니다.

 

<form> 

     

<form>은 form 요소들을 감싸는 태그로 데이터를 묶어서 실제 서버로 전송해주는 역할을 하는 태그입니다.

만약 <fieldset>으로 구조화되어있다면 <fieldset>도 함께 감싸는 역할을 합니다.

 

 

종합적으로 완성해본 예제.