HTML은 HyperTextMarkupLanguage의 약자로 웹 언어에 가장 기본이 되는 언어이며, 어떤 언어로 웹 페이지를 만들던 HTML은 빠질 수 없다. 따라서 간단히 살펴보도록 하자.

◆ HTML

▶ 태그사용법

태그는 ‘<태그> ~ ’ 의 형태로 사용되고 열고 닫을 필요가 없는 태그는 ‘<태그>‘로 열고 닫기를 동시에 처리한다.
( 이는 xml형태의 문법은 모두 동일 )

▶ 몇 가지 태그

<br/>

줄바꿈
<hr/>

수평선 긋기
<h1>내용</h1> ~ <h5>내용</h5>

제목 등을 설정할 때 쓰는 태그 ( 숫자가 작을수록 두꺼운 글씨 )
<p>내용</p>

내용의 문단을 구분할 때 사용. ( 위아래 공백을 주는 태그 )
<div> 내용 </div>

영역을 설정하는 태그로 다음 태그는 줄바꿈되어 나온다.(display:block)
<ul> <li> 목록 </li> … </ul>

순서 없는 항목으로 표시할 때 사용
<ol> <li> 목록 </li> … </ol>

순서 있는 항목으로 표시할 때 사용
<small> 내용 </small>

작은 텍스트 내용
<marquee direction=”up”> 내용 </marquee>

흐르는 이펙트 효과가 있는 내용 ( 방향은 up, down, left, right으로 설정가능 )

◆ Form태그

<form> 태그는 특정 주소(경로)로 파라미터(데이터)들을 전달해 줄 수 있는 태그로, form태그도 div태그처럼 display:block의 영역이 잡혀있는 태그이다.
(display는 당장은 몰라도 된다.)

▶ form 태그사용법

<form> ~ </form>
클라이언트가 입력 혹은 선택한 내용들을 특정 주소에 전달을 시켜주는 요청 유도 태그로, form태그 안에 여러 입력태그들을 넣어두고 사용한다.

▶ form태그 속성

action

전달할 주소 ( ~~.jsp )
method

전달 메서드 방식 ( get / post )

▶ form태그 안에서 쓰이는 인풋 태그들

input태그들은 데이터를 입력 또는 선택할 수 있게 만들 수 있는 태그이고, type옵션에 따라 입력형식이 달라 지게 된다.

▶ input 태그의 기본 옵션

type

text, password, number, checkbox, hidden 등등이 있다.
name

전달받은 페이지에서 데이터를 뽑아낼 용도로 사용하는 이름

▶ <select> 태그

select태그도 인풋태그의 한 종류이지만 <input type>의 형식으로 쓰지 않고 아래와 같은 형식으로 사용한다.

<select name=""> 
<option value="">목록</option> 
....  
</select>

위 처럼 여러 목록 중 하나를 선택할 수 있게 해주는 태그로, name 은 select태그에 넣어주면 해당 이름에 option에 설정된 value값이 넘어 간다

<select> 태그의 multiple이라는 옵션을 주게 되면 여러 개를 선택할 수 있게 된다.

▶ <button> 태그

버튼을 만들어 내는 태그이다. form에서는 입력한 모든 정보들을 보낼 페이지로 전달하기 위해 사용되기도 한다.

<button type=“sumit”>확인</button>
또는
<input type=“submit” value=“확인”/>

이때, 버튼의 타입이 submit이어야 폼 태그의 데이터들이 전달하는 역할의 버튼을 만들 수 있고 submit이 아닌 경우는 그냥 버튼이다.

버튼의 type이 “reset”인 경우에는 폼 태그에 입력한 모든 데이터들을 리셋 시켜준다.

▶ 폼 태그의 action경로를 여러 개로 설정하기

: 폼 태그에 action없이 <form autocomplete=”off”>로 등록하고 버튼을
<button type=”submit” formaction=”/admin/deletep.jsp”>삭제처리 요청</button>
<button type=”submit” formaction=”/admin/updateshow.jsp”>변경처리 요청</button>
이런 식으로 버튼에 경로를 등록하면 폼의 정보를 버튼에 따라 다른 곳으로 보낼 수 있다.

▶ textarea태그

<textarea>~</textarea>
여러 줄을 입력할 수 있는 텍스트 창
<textare>태그와 </textarea>태그 사이에 문자를 입력하는 것은 아니지만 <textarea/>로 한 줄로 처리할 시 다른 문구가 들어가게 됨으로 textarea태그는 열고 닫기를 해주어야 한다.

▶ input요소를 select처럼 사용하기

input태그의 옵션에 list를 등록시키고 id값을 넣어준다. 그리고 <datalist>태그의 id옵션으로 list에 등록시킨 id를 넣어주고 <option>태그를 이용하여 값을 넣으면 select같이 사용할 수 있다.

 
<input type="number" name="number" list="place"/> 
<datalist id="place">
<option value=“1”> 1 </option>
</datalist>

◆ a태그

a태그는 링크로 연결된 문구 또는 이미지를 설정할 수 있는 태그이고 href옵션으로 경로를 설정할 수 있다.
설정된 경로에 ~.jsp?num=1 등의 형식으로 매개인자를 보낼 수 도 있다.

ex ) <a href=”naver.com”>네이버</a>
=> 네이버

◆ 이미지 태그

프로젝트내부의 이미지나, 인터넷상 경로에 있는 이미지를 끌어다 페이지에 띄울 수 있도록 해주는 태그.
ex) <img src=”/assets/img/portfolio/cake.png” style=”width: 50%; border-radius: 30%” />

자바에서는 workspace.metadata.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps\프로젝트명\image 디렉터리에 등록된 이미지를 가져다 쓰는 것이다.
=> 캐시에 저장되기 때문에 한번 올라간 파일은 파일명이 바뀌어도 실제 웹 브라우저에서 바뀌지 않는다. ( 캐시를 삭제해야함 )

◆ html 태그의 주요 옵션

input type 태그 계열에 placeholder=”비밀번호” 등의 옵션을 넣으면 힌트문구가 생긴다
a태그에 style=”text-decoration: none” 의 옵션을 넣으면 밑줄이 사라짐
input태그에 required라는 옵션을 쓰게 되면 필수 입력사항이 된다.
input type=“text”에서 pattern옵션으로 정규식 패턴을 체크할 수 있다.

 
<input type="text" name="phone" pattern="01[01789]-[0-9]{3,4}-[0-9]{4}"
placeholder="xxx-xxxx-xxxx" style="padding: 2px;" required/>

▶ display 속성

none일 경우 보이지 않게 되고, 값이 없거나 block일 경우 보이게 된다.

▶ ondblclick

더블 클릭 시 호출되는 함수

▶ onblur

다른 곳으로 포커스가 이동할 시 호출

◆ css 옵션

css는 style로 설정되는 옵션들이다. style을 하나의 옵션으로 잡고, 그 안에서 옵션:옵션값; 으로 세팅한다.
ex ) <div style=“width:30px; height:20px”>

▶ style=”margin-top=20px;”

마진을 줄 수 있는 옵션

▶ style=”padding-top=20px;“

패딩을 줄 수 있는 옵션

▶ style=”opacity: 0.5;”

opcity는 불투명 상태를 조절 0 ~ 1 ( 0은 안보임 )

◆ 절대위치좌표

style=”position: absolute; left: 40px; top: 50px; width: 300px; height: 50px;”
=> position:absolute;를 하게 되면 절대위치로 좌표를 잡게 되고 위치를 설정해 주어야 한다.
( 절대위치로 잡을 경우 다른 것들과 겹쳐서 보일수도 있다. )

스크롤 위치반환

document.getElementById(“list”).scrollTop 스크롤의 위치를 반환

Developer home

1. HTML