dongkwon

dongkwon

HTML태그

제목과 단락요소

제목 태그

제목(heading) 태그는 문서 내에 제목을 표현할 때 사용

heading을 줄여서 h로 쓰며, <h1>~<h6> 까지 있다.

단락 태그

단락 별로 개행을 할 때 사용

단락 (paragraph) 태그는 p로 쓴다.

개행

html은 두 칸이상의 공백을 무시하기 때문에 개행을 할 수 없다.
따라서 <br> 태그를 사용하여 글의 줄바꿈을 생성한다.

텍스트를 꾸며주는 요소

텍스트 표현 태그

  • <b> : blod 글자를 굵게
  • <i> : italic 글자를 기울여서 > html5 특정 이유(기술적인 용어, 외국어 문구, 인물의 생각 등)로 다른 글자와 구분하기 위해 사용
  • <u> : underline 글자의 밑줄
  • <s> : strike 글자의 중간선

앵커

<a>

<a>(anchor)는 a태그, 앵커, 링크로 불림

<a href="http://www.naver.com/" target="_blank">네이버</a>

href

링크를 만들기 위해 <a>는 반드시 href(hypertext reference) 속성을 가지고 있어야 함
href 속성의 값은 링크 url

target

링크된 리소스를 어디에 표시할지를 나타내는 속성

  • _self : 현재 화면에 표시, target 속성이 선언되지 않으면 self로 동작
  • _black : 새로운 창에 외부 페이지가 나타나게 함 (새로운 탭)

내부링크

페이지 내부의 특정 요소로 초점을 이동 (책갈피 기능)
내부 링크를 사용할 때는 href 속성값에 #을 쓰고 이동하고자 하는 요소의 id속성값을 적는다.

<a href="#top">역사로 이동하기</a>
.
.
<h1 id="top">역사</h1>

의미가 없는 컨테이너 요소

의미가 없는 컨테이너 요소

태그 자체에 아무 의미가 없고 단순히 요소들을 묶기 위한 태그
사용빈도가 매우 높다
html 태그들은 문서를 웹에 나타내기 위해 제작되어 기본적으로 문서에 최적화 되어있는 의미를 지니는데 현재 웹의 형태는 문서 형태에서 많이 벗어났기 때문

<div>, <span>

div(division) 태그는 블록 레벨 태그
블록 레벨 요소는 기본적으로 한 줄을 생성해서 내용을 포함한다.
span 태그는 인라인 레벨 태그
인라인 레벨 요소들은 블록 레벨 요소의 한 줄 안에서 표현되는 요소들
<p>는 블록 레벨 태그이며 <b>,<i>,<u>,<s>는 인라인 레벨 태그이다.

리스트 요소

<ul>

ul(unorderd list)는 순서가 없는 리스트를 표현할 때 사용한다.

순서가 바뀌어도 상관이 없을 때 순서가 없는 리스트로 표현
<ul>을 선언한 후 그 안에서 <li>를 사용해 각 항목을 나태내서 사용한다.

<ol>

ol(orderd list)는 순서가 있는 리스트를 표현할 때 사용한다.

순서가 바뀌면 안될 때 순서가 있는 리스트로 표현
<ol>을 선언한 후 그 안에서 <li>를 사용해 각 항목을 나태내서 사용한다.

<dl>

dl(definition/description list)는 용어와 설명을 표현할 때 사용한다.

<ul>, <ol>은 항목을 단순히 나열하는 구조지만,
<dl>은 용어와 설명이 하나의 세트로 항목을 이루고 하나 이상의 항목으로 리스트가 이루어지는 구조이다.

  • <dt> : 용어를 나타내는 태그
  • <dd> : 용어에 대한 정의 또는 설명을 나타내는 태그

이미지 요소

<img>

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

<img src="./images/pizza.png" alt="피자">

속성

  • src : 필수 속성으로 이미지의 경로를 나타내는 속성
  • alt : 이미지의 대체 텍스트를 나타내는 속성, 웹 접근성에서 중요한 속성 반드시 들어가야 한다.
  • width/height : 이미지의 가로/세로 크기를 나타내는 속성

상대경로와 절대경로

  • 상대경로 : 현재 웹 페이지를 기준으로 상대적으로 이미지의 위치를 나타내는 경로
  • 절대경로 : 실제 그 이미지가 위치한 곳의 전체 경로
<!-- 상대경로 -->
<img src="./images/pizza.png" alt="피자">

<!-- 절대경로 -->
<img src="C:/users/document/images/pizza.png" alt="피자">
<img src="http://www.naver.com/pizza.png" alt="피자">

이미지 파일 형식

  • gif : 256색으로 제한적이지만 용량이 작고, 애니메이션과 투명 이미지가 가능하다.
  • jpg : 높은 압축률과 자연스로운 색상 표현이 가능하여 사진이나 일반적인 그림에 사용. 투명 지원 x
  • png : jpg와 비교했을 때, 이미지 손실이 없고 투명과 반투명 모두 지원한다.

테이블 요소

표

데이터 표를 나타내는 태그

표는 셀로 이루어져 있다.
표의 행(가로 방향)을 row, 열(세로 방향)을 column이라 한다.

태그

  • <table> : 표를 나타내는 태그
  • <tr> : 행을 나타내는 태그
  • <th> : 제목 셀
  • <td> : 셀

하나의 <table>은 하나 이상의 <tr>로 이루어져 있으며
<tr>은 셀을 나타내는 <th>, <td>를 자식을 갖는다.
표를 구성할 때는 위에서 밑으로, 좌측에서 우측으로 작성한다.

테이블 구조 관련 태그

표가 복잡해지면 음성으로 전달하는 스크린 리더기와 같은 보조기기를 통해 표의 내용을 이해하는 것이 더 어려워질 것이다.
따라서 표를 구조적으로 파악하기 위해 도움이 되는 태그를 사용해야 한다.

  • <caption> : 표의 제목
  • <thead> : 제목 행을 그룹
  • <tfoot> : 바닥 행을 그룹

폼 요소

input

폼 요소는 서버에 데이터를 전달하기 위한 요소이며 <input>은 대표적인 폼 요소이다.
<input>은 내용이 없는 빈 요소이며 type 속성을 통해 여러 종류의 입력 양식으로 나타난다.

type=”text”

<input type="text" placeholder="ooo">

단순한 텍스트 입력에 사용
type=”text”에는 placeholder 속성이 존재함
placeholder 속성은 사용자가 입력하기 전 미리 화면에 노출하는 값이다.

type=”password”

<input type="password">

암호 입력에 사용
실제로 입력할 때 값을 노출하지 않는다.

type=”radio”

<input type="radio" name="gender"> 남자
<input type="radio" name="gender"> 여자

라디오 버튼을 만들 때 사용
라디오 버튼은 중복 선택이 불가능하며 하나의 항목만을 선택해야 한다.

type=”checkbox”

<input type="checkbox" name="hobby"> 등산
<input type="checkbox" name="hobby"> 독서
<input type="checkbox" name="hobby"> 운동

체크박스를 만들 때
체크박스는 중복 선택이 가능하다.

type=”file”

<input type="file">

파일을 서버에 올릴 때

type=”submit|reset|image|button”

<input type="submit">
<input type="reset">
<input type="image" src="http://placehold.it/50x50?text=click" alt="click" width="50" height="50">
<input type="button" value="버튼">

<form>안에서 클릭 가능한 버튼을 만든다.

  • submit : action으로 값을 서버에 전달한다.
  • reset : 페이지 변화 없이 값을 초기 상태로 변경한다.
  • button : 아무 기능 없는 버튼
  • image : 이미지를 삽입할 수 있는 버튼

value속성을 통해 버튼의 이름을 변경할 수 있다.

select

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

선택 목록 상자 또는 콤보박스라고 한다.

<select>
    <option>서울</option>
    <option>경기</option>
    <option>강원</option>
    ...
</select>

<select>내부의 <option>으로 각 항목을 나타낸다.
<option>의 속성으로 selected가 있으며 이는 선택된 항목을 의미한다.

textarea

여러 줄의 텍스트를 입력할 때 사용

<textarea rows="5" cols="30">
</textarea>

<textarea>에는 텍스트 상자의 크기를 조절하는 rows, cols 속성이 있다.

  • cols : 가로 크기를 조절하는 속성 (한 줄에 들어가는 글자의 수, 정확x)
  • rows : 세로 크기를 조절하는 속성 (화면에 보여지는 줄 수)

button

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

<button type="submit|reset|button">ooo</button>

각 버튼은 이전에 배웠던 input 타입의 submit, reset, button과 같은 기능을 가짐
단, 빈 태그가 아니며 내용을 안에 직접 넣을 수 있어서 자유로운 스타일 표현이 가능하다.

label

<label>은 form 요소의 이름과 form 요소를 명시적으로 연결시켜주기 위해 사용한다.
웹 접근성 향상을 위해 필수적

<label for="name">이름</label>: <input type="text" id="name"><br>
<label for="nickname">이름</label>: <input type="text" id="nickname"><br>
<label for="address">이름</label>: <input type="text" id="address"><br>

form 요소의 id 속성값과 <label>의 for 속성값을 같게 적어주어야 한다.
<label>을 사용하면 클릭했을 경우 해당 form 요소를 클릭한 것처럼 동작한다.
또한, 스크린 리더기를 통해 듣게 되면 해당 form 요소에 접근시 <label>을 함께 읽어주게 된다.
<label>은 사용성, 접근성에서 중요하기 때문에 반드시 써주어야 한다.

fieldset, legend

<fieldset>, <legend>는 form 요소를 구조화 하기 위해 필요한 태그이다.

  • <fieldset> : 여러 개의 폼 요소를 그룹화하여 구조적으로 만들기 위해 사용
  • <legend> : 폼 요소의 제목으로 <fieldset> 내부에 작성

<fieldset>은 보통 form의 성격에 따라 구분한다.
<legend>는 <fieldset>의 자식으로 반드시 최상단에 위치해야 한다.

<fieldset>
    <legend>기본 정보</legend>
    ... 폼 요소들 ...
</fieldset>
<fieldset>
    <legend>부가 정보</legend>
    ... 폼 요소들 ...
</fieldset>>

form

form 데이터를 그룹화하여 실제 서버로 전송해주는 역할을 하는 태그
만약 <fieldset>으로 구조화되어 있다면 <fieldset>도 함께 감싸는 역할을 한다.

<form action="" method="">
    <fieldset>
        <legend>기본 정보</legend>
        ... 폼 요소들 ...
    </fieldset>
    <fieldset>
        <legend>부가 정보</legend>
        ... 폼 요소들 ...
    </fieldset>
</form>
  • action : 데이터를 처리하기 위한 서버의 주소
  • method : 데이터를 전송하는 방식을 지정 (get, post)
    • get : 데이터가 전송될 때 주소창에 파라미터 형태로 데이터가 노출됨
    • post : 데이터가 전송될 때 노출되지 않는다.

태그:

카테고리:

업데이트:

참고