공부하는 히욤이

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

boostcourse/웹 UI 개발

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

히욤이 2019. 3. 28. 23:51

1) HTML 태그 소개

 

 

 

2) 제목과 단락 요소

제목(Heading)

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

 

단락 태그

  • Paragraph를 줄여서 p로 씀

 

개행

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

 

 

 

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

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

태그 특징
<b> 글자를 굵게 표현
<i>

글자를 기울여서 표현

특정이유(기술적인 용어, 외국어 문구 등)로 다른 글자와 구분하기 위해 사용

<u> 글자의 밑줄을 표현
<s> 글자의 중간선을 표현

 

 

4) 앵커 요소

앵커(ANCHOR)

  • 다른 문서로 이동할 수 있는 링크 생성
  • href : 링크의 목적지가 되는 URL을 지정
  • target : 링크된 리소스를 어디에 표시할지 지정
1
<a href="http://www.naver.com/" target="_blank">네이버</a>
cs

 

 

 

target 속성

속성 특징
_self

현재 화면에 표시

target 속성이 선언되지 않으면 기본적으로 동작

_blank

새로운 창에 표시

외부 페이지가 나타나게 하는 속성

_parent, _top 특정 조건에서만 동작

 

내부 링크

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

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

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

 

 

 

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

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

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

 

 

 

6) 리스트 요소

<ul>

  • 순서가 없는 리스트 표현

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

<ol>

  • 순서가 있는 리스트 표현

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

<dl>

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

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

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

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

 

 

7) 이미지 요소

이미지(IMAGE)

  • 문서에 이미지를 삽입
  • src : 이미지 경로를 지정으로 필수 속성
  • alt : 이미지의 대체 텍스트를 입력하는 속성으로 필수 속성
  • width/height : 이미지의 크기를 지정
1
<img src="./images/pizza.png" alt="피자">
cs

 

상대경로와 절대경로

  • 상대경로 : 현재 웹페이지를 기준으로 상대적으로 이미지의 위치를 나타내는 경로
  • 절대경로 : 실제 그 이미지가 위치한 곳의 전체 경로
1
2
3
4
5
6
<!-- 상대경로 -->
<img src="./images/pizza.png" alt="피자">
 
<!-- 절대경로 -->
<img src="C:/users/document/images/pizza.png" alt="피자">
<img src="http://www.naver.com/pizza.png" alt="피자">
cs

상대경로에서의 ',/'는 페이지가 있는 현재 폴더를 나타냄

 

 

이미지 파일 형식

  • 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 : 데이터가 전송될 때 데이터가 노출되지 않음

 

 

 

 

 

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