HTML - html 태그(제목, 목록, 미디어, 테이블, input, radio, textarea, form, button), Eclipse 단축키

 

1) Eclipse 윈도우에서 확인하는 단축키(Chrome)

 

ⓐ Window > Preferences > General > Web Browser > Chrome > Location에서 chrome.exe 파일 있는 경로 선택(C:\Program Files (x86)\Google\Chrome\Application\chrome.exe)

ⓑ Run New_Configuration > External Tools Configurations > Program 더블클릭 > New_configuration > Location에서 chrome.exe 파일 있는 경로 선택 > Arguments : ${selected_resource_loc}

ⓒ Window > Preferences > General > Keys > last > Run Last Launched External Tool > Binding : 원하는 단축키(Ctrl+b) / When : In Windows

 

---

※ HTML 태그

 

<h>제목 태그</h>

 

<p>이 문장은 <i>이탤릭체</i>로 표시됩니다.</p>

<p>이 문장은 <b>굵은 글씨</b>로 표시됩니다.</p>

<p>이 문장은 <strong>중요한 내용</strong>을 담고 있습니다.</p>

<p>이 문장은 <em>강조된 내용</em>을 포함하고 있습니다.</p>

 

공백 : &nbsp;

 

줄바꿈 : <br>

 

미디어 태그 : img, audio, video, iframe
① Format
ⓐ img : jpg(jpeg), gif, png, svg 
ⓑ Video : MP4, WebM, Ogg
ⓒ Audio : MP3, OGG, WAV

② attribute
ⓐ img
1. src : 이미지 경로
2. alt : 이미지 대체 텍스트
3. title : 이미지 도움말
4. align : 이미지 정렬
5. Border : 이미지 테두리
6. Height, Width : 이미지 넓이
ⓑ video
1. controls : 영상 컨트롤 막대 표시. 컨트롤 막대에는 재생/멈춤, 진행바, 볼륨 등이 있다.
2. width, height : 화면에 표시되는 영상의 크기를 조절
3. autoplay : 영상을 자동 재생
4. loop : 영상을 반복해서 재생
5. muted : 영상은 재생하지만 소리는 음소거
6. preload : 영상을 재생하기 전에 미디어 파일을 다운로드 할 것인지 정함.
7. poster : 브라우저나 인터넷 문제 등으로 영상을 재생할 수 없을 경우 표시
ⓒ audio
1. controls : 웹 화면에 컨트롤 막대를 표시. 컨트롤 막대에는 재생/멈춤, 진행바, 볼륨 등이 있다.
2. autoplay : 오디오를 자동 재생
3. loop : 오디오를 반복해서 재생
4. muted : 오디오는 재생하지만 소리는 음소거
5. preload : 재생 버튼을 눌러 재생하기 전에 오디오 파일을 다운로드해서 준비
ⓓ iframe
1. height : 웹페이지의 세로 길이
2. width : 웹페이지의 가로 길이
3. src : 웹 페이지의 주소

 

 

목록 태그

결과

 

 

 

<table>테이블태그<thead><tr><td></td></tr></thead></table>

 

thead = 표 상단
th = 표 상단 thead의 칸을 나타낼 때 사용. 또한, td(데이터들)의 제목이 되는 부분에는 th를 사용할 수 있다.
tbody = 표 본문
tfoot은 tbody뒤에 위치
행(Row)을 지정하는 요소 : tr(Table Row). 한 줄
열(Column)을 지정하는 요소 : td(Table Data)는 한 칸의 cell data를 표현. 한 줄 안에 들어가는 데이터
:전구: tr이 한 줄을 표현, td는 줄의 칸 수

결과

 

 

 

input 태그 : 웹 페이지에서 사용자로부터 정보를 입력받을 수 있는 요소
이 태그를 사용하여 텍스트, 숫자, 날짜, 이메일 등 다양한 형식의 데이터를 입력받을 수 있다.

input 태그의 속성 type = 입력받을 데이터 유형 (text, number, email, date, time, hidden, file)
required = 입력받는 데이터가 필수인 것들
placeholder = 작성 예시 문구
name = 프로그래밍 언어에서 데이터를 가져올때 사용되는 네임
readonly = 입력된 데이터의 값을 변경 못하게 방지
disabled = 요소를 비활성화 value = 입력된 데이터

 

결과

 

radio 태그 : 여러 개의 선택지 중에서 단 하나의 선택을 할 수 있는 요소, 주의할점은 name을 일치시켜야 중복 선택이 안됨

check box 태그 : 여러 개의 선택지 중에서 다중 선택이 가능한 체크박스를 생성하는 태그, radio와 마찬가지로 name을 일치시켜야함

결과

 

 

 

 

textarea 태그

여러 줄의 텍스트를 입력할 수 있는 입력란을 생성하는 태그

rows = 입력란의 높이를 지정
cols = 입력란의 너비

 

 

 

 

form 태그

사용자 입력을 받는 부분을 정의하고, 해당 입력을 서버로 제출하는 역할

action = 데이터가 전송될 URL을 지정
method = 데이터를 서버로 전송하는 HTTP 메서드를 지정
- GET: 폼 데이터를 URL 매개변수로 첨부하여 전송, 주로 데이터를 조회하는 용도로 사용되며, URL에 데이터가 노출
- POST: 폼 데이터를 HTTP 요청 본문에 담아 전송, 주로 데이터를 생성하거나 수정하는 용도로 사용되며, URL에 데이터가 노출되지 않음
enctype = 데이터가 서버로 전송될 때 인코딩 방식을 지정, 파일 업로드와 같은 이진 데이터를 전송해야 할 경우 multipart/form-data로 설정

 

method="get"

method="post"

 

 

 

 

button 태그

 

사용자와 상호작용할 수 있는 버튼을 생성하는 데 사용되며, 버튼을 클릭하거나 탭하면 정의된 동작이 실행

기본 button = 일반적인 버튼
submit = form태그 내에서 동작하며 클릭 시 데이터 전송
reset = form태그 내에서 동작하며 클릭 시 데이터 초기화

결과