일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
- 웹개발
- java
- 프로그래머스
- 백준
- BOJ
- 건보필기
- 이클립스
- 코딩
- 공부
- 농은면접
- 중소기업면접
- 프로그래밍언어
- 후기
- algorithm
- 알고리즘
- CSS
- 프로그래밍
- HTML
- 한국재정정보원
- 부스트코스
- 연결요소의개수
- 인강
- 필기
- 필기후기
- 웹프로그래밍
- 수박수박수박수박수?
- 웹
- 정수내림차순으로배치하기
- Linux
- 확인문제
- Today
- Total
공부하는 히욤이
[부스트코스] 웹 UI 개발 : HTML 태그 본문
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 : 데이터가 전송될 때 데이터가 노출되지 않음
<해당 포스트는 교육 목적을 위해 '부스트코스'의 강의를 듣고 강의자료를 개인적으로 정리한 것으로 모든 내용의 출처와 저작권은 부스트코스에 있습니다.>
'boostcourse > 웹 UI 개발' 카테고리의 다른 글
[부스트코스] 웹 UI 개발 : 폰트, 텍스트 (0) | 2019.07.30 |
---|---|
[부스트코스] 웹 UI 개발 : 단위, 배경, 박스모델 (0) | 2019.07.29 |
[부스트코스] 웹 UI 개발 : CSS 이해하기 (0) | 2019.07.27 |
[부스트코스] 웹 UI 개발 : 콘텐츠모델, 시멘틱마크업, 블록 & 인라인 (0) | 2019.07.24 |
[부스트코스] 웹 UI 개발 : HTML 이해하기 (0) | 2019.03.28 |