[부스트코스] 웹 UI 개발 : HTML 태그

1) HTML 태그 소개

 

 

 

2) 제목과 단락 요소

제목(Heading)

• 문서내에 제목을 표현할 때 사용
• <h1>~<h6> 숫자가 낮을수록 큰 제목, 높을수록 작은 제목

<h1>Hello</h1>

 

단락 태그

• Paragraph를 줄여서 p로 씀

 

개행

• <P>를 사용해서 닫ㄴ락으로 구분하여 자연스럽게 개행이 됨
• <p> 내부에서 임의로 개행 하고 싶은 경우 <br>을 사용

 

 

 

3) 텍스트를 꾸며주는 요소

텍스트 관련 태그들(B, I, U, S)

태그	특징
<b>	글자를 굵게 표현
<i>	글자를 기울여서 표현 특정이유(기술적인 용어, 외국어 문구 등)로 다른 글자와 구분하기 위해 사용
<u>	글자의 밑줄을 표현
<s>	글자의 중간선을 표현

 

 

4) 앵커 요소

앵커(ANCHOR)

• 다른 문서로 이동할 수 있는 링크 생성
• href : 링크의 목적지가 되는 URL을 지정
• target : 링크된 리소스를 어디에 표시할지 지정

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

 

 

 

target 속성

속성	특징
_self	현재 화면에 표시 target 속성이 선언되지 않으면 기본적으로 동작
_blank	새로운 창에 표시 외부 페이지가 나타나게 하는 속성
_parent, _top	특정 조건에서만 동작

 

내부 링크

• 페이지 내부의 특정 요소로 이동

• 웹페이지에서 'top' 또는 '맨 위로 이동하기'버튼이 이에 해당

<a href="#some-element-id">회사 소개로 이동하기</a>
 
... 중략.
 
<h1 id="some-element-id">회사 소개</h1>

 

 

 

5) 의미가 없는 컨테이너 요소

의미없이 요소를 묶기 위한 태그(Container)

• 별다른 의미없이 다른 목적으로 필요할 때 사용
• <div> : block-level, 한줄을 생성
• <span> : inline-level, 블록 레벨 요소의 한 줄 안에 표현 되는 요소

<div>
    <span>Lorem</span> ipsum dolor sit.
</div>

 

 

 

6) 리스트 요소

<ul>

• 순서가 없는 리스트 표현

• 순서가 상관없기 때문에 <ul> 선언 후 그 안에 <li>를 사용

<ol>

• 순서가 있는 리스트 표현

• 순서가 바뀌면 안되기 때문에 <ol> 선언 후 <li>를 사용

<dl>

• 용어와 그에 대한 정의를 표현 할 때 사용

• 용어와 설명이 하나의 세트로 항목을 이루고 하나 이상의 항목으로 리스트가 이루어지는 구조

• <dt> : 용어를 나타내는 태그

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

 

 

7) 이미지 요소

이미지(IMAGE)

• 문서에 이미지를 삽입
• src : 이미지 경로를 지정으로 필수 속성
• alt : 이미지의 대체 텍스트를 입력하는 속성으로 필수 속성
• width/height : 이미지의 크기를 지정

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

 

상대경로와 절대경로

• 상대경로 : 현재 웹페이지를 기준으로 상대적으로 이미지의 위치를 나타내는 경로
• 절대경로 : 실제 그 이미지가 위치한 곳의 전체 경로

<!-- 상대경로 -->
<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 : 제한적인 색을 사용하고 용량이 적으며 투명이미지와 애니메이션 이미지를 지원
• jpg : 사진이나 일반적인 그림에 쓰이며 높은 압축률과 자연스러운 색상 표현을 지원(투명은 지원 X)
• png : 이미지 손실이 적으며 투명과 반투명 모두 지원

 

 

8) 테이블 요소 1

표(TABLE)

• 데이터 표를 나타내는 태그
• row : 행(가로방향)
• column : 열(세로방향)

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

 

 

표의 구조와 관련된 태그

태그	특징
<caption>	표의 제목을 나타내는 태그
<thead>	제목 행을 그룹화하는 태그
<tfoot>	바닥 행을 그룹화하는 태그
<tbody>	본문 행을 그룹화하는 태그

 

 

9) 테이블 요소2

 

10) 폼 요소1

서버에 데이터를 전달하기 위한 요소들

• <input type> 이 대표적
• 내용이 없는 비요소
• type 속성을 통해 여러 종류의 입력 양식을 나타냄

 

 

type="text"

• 주로 아이디, 이름, 주소, 전화번호 등 단순한 텍스트 입력할 때 사용
• placeholder 속성이 존재 (사용자가 입력하기 전 미리 화면에 노출하는 값, 입력하는 값의 양식을 표현)

 

type="radio"

• 라디오 버튼 만들 때 사용
• 중복 선택이 불가능

 

type="checkbox"

• 체크 박스 만들 때 사용
• 중복 선택 가능

 

 

checked, name 속성

• checked 속성 : 값이 별도로 존재하지 않는 boolean 속성
• name 속성 : 라디오 버튼과 체크박스를 그룹화 시켜주는 속성

 

 

11) 폼 요소2

type="file"

• 파일을 서버에 올릴 때 사용

 

type="submit | reset | image | button"

• submt :form의 값을 전송하는 버튼
• reset : form 값을 초기화하는 버튼
• image :  이미지를 삽입할 수 있는 버튼
• button : 아무 기능이 없는 버튼

 

 

12) 폼 요소3

<select>

• 선택 목록 상자, 콤보박스
• 몇개의 선택지를 리스트 형태로 노출하고 그 중 하나를 선택 할 수 있게 하는 태그
• multiple을 사용하면 다중 선택 가능
• <select> 내부의 <option>으로 각 항목을 나타냄
• <option>의 속성으로는 selected가 있으며 선택된 항목을 의미 함

 

<textarea>

• 여러 줄의 텍스트 입력 가능
• cols : 가로 크기를 조절하는 속성
• rows : 세로 크기를 조절하는 속성

 

<button>

• submit, reset, button이 있음

 

 

13) 폼 요소4

<label>

• form 요소의 이름과 form요소를 명시적으로 연결시키기 위해 사용
• form 요소의 id 속성값과 <label>의 for 속성값을 같게 해야 함
• <label>을 클릭 할 경우 form 요소를 클릭한 것 처럼 동작 한다

 

<fieldset>, <legend>

• <fieldset> : 여러 개의 폼 요소를 그룹화하여 구조적으로 만들기 위해 사용
• <legend> : 폼 요소의 제목으로 <fieldset> 내부에 작성
• <legend>는 <fieldset>의 자식으로 반드시 최상단에 위치해야 한다

 

<form>

• form 요소들을 감싸는 태그
• 데이터를 묶어서 실제 서버로 전송해주는 역할을 하는 태그
• <fieldset>으로 구조화되어있다면 <fieldset>도 함께 감싸는 역할
• action : 데이터를 처리하기 위한 서버의 주소
• method : 데이터를 전송하는 방식을 지정
• method 속성값에는 get/post 2가지 방식이 존재
  • get : 데이터가 전송될 때 주소창에 파라미터 형태로 붙어 데이터가 노출
  • post : 데이터가 전송될 때 데이터가 노출되지 않음

 

 

 

 

 

<해당 포스트는 교육 목적을 위해 '부스트코스'의 강의를 듣고 강의자료를 개인적으로 정리한 것으로 모든 내용의 출처와 저작권은 부스트코스에 있습니다.>