meta태그로 이동을 하면 시간 제어가 가능하다.
다음 코드를 실행하면 실행 3초 후 지정된 페이지로 이동한다.
refresh는 새로고침,
content의 3은 시간을 의미한다. 단위는 second
<body>
<meta http-equiv="refresh" content="3; url=http://www.naver.com">
</body>
| 입력 양식 - Hidden (0) | 2022.08.05 |
|---|---|
| 입력 양식 - 회원가입 (0) | 2022.08.05 |
| 입력 양식 - 게시판 (0) | 2022.08.05 |
| 입력 양식 - 로그인 폼의 login.jsp 생성, GET방식과 POST방식 (0) | 2022.08.05 |
| 입력 양식 - 로그인 폼 (0) | 2022.08.04 |
1. hidden.html을 생성하고 다음과 같이 코드를 입력, 실행해본다.
<form action="hidden.jsp">
<!-- 메소드를 생략하면 자동으로 겟방식이 된다. -->
<input type="hidden" name="myid" value="1234">
<input type="text" name="myid01" value="1234" readonly="readonly">readonly
<br>
<input type="text" name="myid02" value="1234" disabled="disabled">disabled
<br>
<input type="submit" value="전송">
</form>
reaonly와 disabled는 둘다 값을 수정할 수 없어서 코드 입력 시 값을 지정해주어야 한다.
또, hidden은 화면에 노출되지 않는다.
2.
hidden.jsp 파일을 생성하고 다음과 같이 코드를 입력한다.
myid : <%=request.getParameter("myid") %> <br>
myid01 : <%=request.getParameter("myid01") %> <br>
myid02 : <%=request.getParameter("myid02") %> <br>
3. hidden.html을 실행하여 전송 버튼을 누르면 다음과 같은 값이 출력된다.
이것으로 알 수 있는 것.
1) hidden은 사용자 화면에는 출력하지 않고 값이 넘어가는 역할을 한다.
2) readonly, disabled 둘 다 폼이 비활성화 되어 값을 수정할 수 없다.
그래서 코드 작성 시 값을 지정해주어야 한다.
3) action 설정 페이지로 값이 넘어가는 것은 readonly 만이다.
4) 메소드 값을 (post or get) 생략하면 get 방식이 되어 전송 값이 노출된다.
| meta 태그를 이용한 이동 (0) | 2022.08.16 |
|---|---|
| 입력 양식 - 회원가입 (0) | 2022.08.05 |
| 입력 양식 - 게시판 (0) | 2022.08.05 |
| 입력 양식 - 로그인 폼의 login.jsp 생성, GET방식과 POST방식 (0) | 2022.08.05 |
| 입력 양식 - 로그인 폼 (0) | 2022.08.04 |
1. 가장 상단에 폼 태그를 입력하고
값을 전달할 방식, 페이지가 넘어갔을때 출력할 파일명을 지정한다.
지금은 폼만 만들지만, 추후 자바스크립트나 제이쿼리에서 각 기능을 추가할 예정이다.
<form method="post" action="member.jsp">
내용
</form>
2. 이제 폼 태그 사이의 내용을 입력해본다.
레이아웃을 쉽게 제어하기 위해 테이블 태그를 사용해서 그 안에 양식들을 넣을 계획이다.
테이블은 꼭 써야 하는 것은 아니다.
먼저 아이디 입력란과 중복검사 버튼을 만들었다.
이 때, 중복검사 버튼은 submit이 아닌 button으로 생성한다.
submit은 무조건 값을 넘겨버리기 때문이다.
기능은 추후 만들고, 지금은 중복검사 버튼만 생성해본다.
ID
<input type="text" name="id" id="id" autofocus>
<input type="button" value="중복검사">
3. 비밀번호와 성명란을 생성한다.
비밀번호
<input type="password" name="passwd" id="passwd">
성명
<input type="text" name="name" id="name">
4. 주민번호를 입력받아야 한다.
이 때, 입력란이 두 개 여야 하는데
앞자리는 6자리로 제한, 뒷자리는 7자리로 제한한다.
또, 7자리는 노출되면 안된다.
주민번호
<input type="text" size=6 maxlength=6 name="jumin1" id="jumin1">
-
<input type="password" size=7 maxlength=7 name="jumin2" id="jumin2">
5-1) 이메일 양식 란을 생성한다.
두 칸을 생성해 앞 쪽은 아이디, 뒤쪽은 도메인을 입력 받는다.
E-mail
<input type="text" size=10 name="mailid" id="mailid">
@
<input type="text" size=15 name="domain" id="domain">
5-2) 이메일 양식 란을 생성하는데,
아이디는 사용자가 직접 입력을 하도록 하고,
도메인은 직접 입력하지 않고 선택지를 고를 수 있도록 한다.
E-mail
<input type="text" size=10 name="mailid" id="mailid">
@
<select>
<option value="">직접입력</option>
<option value="naver.com">네이버</option>
<option value="daum.net">다음</option>
<option value="naver.com">네이트</option>
<option value="gmail.com">지메일</option>
</select>
6. 전화번호 / 휴대폰
여기에는 숫자만 입력받을 수 있게 하는 기능을 넣어야 하는데,
숫자/문자 판별은 추후 기능을 넣는다.
select 옵션의 항목 중 하나에 select="selected" 를 넣는다면
처음 화면이 로딩되자마자 그 항목이 기본값으로 선택되어 있다.
전화번호
<input type=tel1 size=4 maxlength=4 name="tel1" id="tel1">
-
<input type=tel2 size=4 maxlength=4 name="tel2" id="tel2">
-
<input type=tel3 size=4 maxlength=4 name="tel3" id="tel3">
휴대폰
<select name="phone1" id="phone1">
<option value="">번호선택</option>
<option value="010">010</option>
<option value="011">011</option>
<option value="016">016</option>
<option value="018">018</option>
</select>
-
<input type=phone2 size=4 maxlength=4 name="phone2" id="phone2">
-
<input type=phone3 size=4 maxlength=4 name="phone3" id="phone3">
7. 우편번호, 우편번호 검색 버튼, 주소를 입력 받는다.
우편번호 검색은 추후 기능을 넣을 예정이니 button 타입을 사용한다.
주소 또한 자동으로 입력 되도록 할 예정
우편번호
<input type="text" size=5 maxlength=5 name="post" id="post">
<input type="button" value="우편번호 찾기">
주소
<input type="text" size=70 name="address" id="address">
8. 성별을 선택할 수 있도록 한다.
양자택일이기 때문에 라디오 버튼을 생성하여 입력 받는다.
그런데 하나만 선택할 수 있도록 해야 하는데 다음과 같이 입력하면 다중 선택이 되기 때문에
제 기능을 할 수 없다.
성별
<input type="radio"> 남자
<input type="radio"> 여자
이 때, name 값으로 두 라디오 버튼을 하나의 네임값으로 묶어 준다면,
단일 선택이 가능해진다.
성별
<input type="radio" name="gender" value="남자"> 남자
<input type="radio" name="gender" value="여자"> 여자
9. 취미 선택란을 생성한다.
역시 같은 카테고리로 묶여야 하기 때문에 하나의 네임값으로 묶어준다.
그리고 성별란의 단일 선택을 하는 라디오 버튼과는 달리
체크 박스는 다중 선택이 가능하다.
여기에 check="checked" 라는 속성을 추가해주면
처음 실행될때부터 자동으로 체크되도록 해준다.
취미
<input type="checkbox" name="hobby" value="공부">공부
<input type="checkbox" name="hobby" value="영화">영화
<input type="checkbox" name="hobby" value="그림">그림
<input type="checkbox" name="hobby" value="음악">음악
<input type="checkbox" name="hobby" value="고양이">고양이
10. 자개소개란을 생성한다.
text 란이 아닌 textarea를 생성한다.
자기소개
<textarea rows="5" cols="70" name="intro" id="intro" placeholder="자기소개를 입력해주세요."></textarea>
11. 마지막으로 회원가입 버튼과 취소 버튼을 생성한다.
<input type="submit" value="회원가입">
<input type="reset" value="취소">
전체 코드
<form method="post" action="member.jsp">
<table border=0 width=700 align=center>
<caption>회원가입 폼</caption>
<tr>
<th>ID</th>
<td>
<input type="text" name="id" id="id" autofocus>
<input type="button" value="중복검사"> </td>
</tr>
<tr>
<th>비밀번호</th>
<td><input type="password" name="passwd" id="passwd"></td>
</tr>
<tr>
<th>성명</th>
<td><input type="text" name="name" id="name"></td>
</tr>
<tr>
<th>주민번호</th>
<td><input type="text" size=6 maxlength=6 name="jumin1" id="jumin1">
-
<input type="password" size=7 maxlength=7 name="jumin2" id="jumin2"></td>
</tr>
<tr>
<th>E-mail</th>
<td><input type="text" size=10 name="mailid" id="mailid">
@
<select>
<option value="">직접입력</option>
<option value="naver.com">네이버</option>
<option value="daum.net">다음</option>
<option value="naver.com">네이트</option>
<option value="gmail.com">지메일</option>
</select></td>
</tr>
<tr>
<th>전화번호</th>
<td><input type=tel1 size=4 maxlength=4 name="tel1" id="tel1">
-
<input type=tel2 size=4 maxlength=4 name="tel2" id="tel2">
-
<input type=tel3 size=4 maxlength=4 name="tel3" id="tel3"></td>
</tr>
<tr>
<th>휴대폰</th>
<td>
<select name="phone1" id="phone1">
<option value="">번호선택</option>
<option value="010">010</option>
<option value="011">011</option>
<option value="016">016</option>
<option value="018">018</option>
</select>
-
<input type=phone2 size=4 maxlength=4 name="phone2" id="phone2">
-
<input type=phone3 size=4 maxlength=4 name="phone3" id="phone3"></td>
</tr>
<tr>
<th>우편번호</th>
<td><input type="text" size=5 maxlength=5 name="post" id="post">
<input type="button" value="우편번호 찾기"></td>
</tr>
<tr>
<th>주소</th>
<td><input type="text" size=70 name="address" id="address"></td>
</tr>
<tr>
<th>성별</th>
<td>
<input type="radio" name="gender" value="남자"> 남자
<input type="radio" name="gender" value="여자"> 여자
</td>
</tr>
<tr>
<th>취미</th>
<td>
<input type="checkbox" name="hobby" value="공부" checked="checked">공부
<input type="checkbox" name="hobby" value="영화">영화
<input type="checkbox" name="hobby" value="그림">그림
<input type="checkbox" name="hobby" value="음악">음악
<input type="checkbox" name="hobby" value="고양이">고양이
</td>
</tr>
<tr>
<th>자기소개</th>
<td>
<textarea rows="5" cols="70" name="intro" id="intro"
placeholder="자기소개를 입력해주세요."></textarea>
</td>
</tr>
<tr>
<td colspan=2>
<input type="submit" value="회원가입">
<input type="reset" value="취소">
</td>
</tr>
</table>
</form>
추후 자바스크립트와 제이쿼리를 배우게 되면 그 때 이 폼에 기능을 추가할 예정이다.
| meta 태그를 이용한 이동 (0) | 2022.08.16 |
|---|---|
| 입력 양식 - Hidden (0) | 2022.08.05 |
| 입력 양식 - 게시판 (0) | 2022.08.05 |
| 입력 양식 - 로그인 폼의 login.jsp 생성, GET방식과 POST방식 (0) | 2022.08.05 |
| 입력 양식 - 로그인 폼 (0) | 2022.08.04 |
1. 가장 상단에 폼 태그를 입력하고
값을 전달할 방식, 페이지가 넘어갔을때 출력할 파일명을 지정한다.
<form method="post" action="board.jsp">
내용
</form>
2. 이제 폼 태그 사이의 내용을 입력해본다.
레이아웃을 쉽게 제어하기 위해 테이블 태그를 사용해서 그 안에 양식들을 넣을 계획이다.
테이블은 꼭 써야 하는 것은 아니다.
작성자
<input type="text" size=20 name="writer" id="writer" placeholder="작성자명 입력">
placeholder 빈칸일때는 메시지를 출력하다가, 값을 넣으면 사라진다.
위 코드에는 placeholder를 썼기 때문에 작성하지 않았지만,
value 를 사용하면 초기값이 텍스트란에 들어가있도록 설정할 수 있다.
3. 비밀번호 양식을 생성한다.
비밀번호
<input type="password" size=20 name="passwd" id="passwd" placeholder="2~8자 이내 입력">
4. 제목 입력란을 생성한다.
제목
<input type="text" size=50 name="subject" id="subject" placeholder="내용을 입력하세요"></td>
4. 글 내용 입력란을 생성한다.
여태 사용해온 input type 대신 textarea를 사용한다.
textarea를 입력하고 Shift+Space 단축키를 사용하면 rows와 cols 값을 입력받도록 자동 완성된다.
내용
<textarea rows="5" cols="50"
name="content" id="content" placeholder="내용을 입력하세요"></textarea>
<!-- input type은 많은 내용을 받을 수 없다. -->
<!-- 지정된 크기보다 더 많은 내용을 입력하면 스크롤바가 자동으로 생성된다. -->
input type에서 초기값을 지정할 때에는 value 속성을 사용했는데,
textarea는 조금 다르게 초기값을 나타낸다.
<textarea>이 쪽에 값을 입력해야 한다.</textarea>
또 공백이 있어서는 안된다.
내용
<textarea rows="5" cols="50"
name="content" id="content">글내용</textarea>
5. 첨부파일란을 생성한다.
브라우저에 따라 다르게 생겼다.
파일첨부
<input type="file" name="myfile" id="myfile">
6. 마지막으로 글 작성 버튼과 취소 버튼을 생성한다.
글 작성
<input type="submit" value="글 작성">
취소
<input type="reset" value="취소">
전체 코드 (테이블을 포함)
<table border=1 width=500 align=center>
<caption>게 시 판</caption>
<tr>
<th>작성자</th>
<td><input type="text" size=20 name="writer" id="writer"
placeholder="작성자명 입력"> </td>
</tr>
<tr>
<th>비밀번호</th>
<td><input type="password" size=20 name="passwd" id="passwd"
placeholder="2~8자 이내 입력"></td>
</tr>
<tr>
<th>제목</th>
<td><input type="text" size=50 name="subject" id="subject"
placeholder="제목을 입력하세요"></td>
</tr>
<tr>
<th>내용</th>
<td><textarea rows="5" cols="50"
name="content" id="content"
placeholder="내용을 입력하세요"></textarea></td>
</tr>
<tr>
<th>파일첨부</th>
<td><input type="file" name="myfile" id="myfile"></td>
</tr>
<tr>
<td colspan=2 align=center>
<input type="submit" value="글 작성">
<input type="reset" value="취소">
</td>
</tr>
</table>
추가로, 여러가지 기능의 버튼을 만들어보았다.
전송 기능 있음
<input type="submit" value="글 작성1">
아무 기능이 없음
<input type="button" value="글 작성2">
아무 기능이 없음
<button> 글작성3 </button>
전송 기능 있음
<button type="submit"> submit </button>
초기화 기능 있음
<button type="reset"> reset </button>
아무 기능이 없음
<button type="button"> button </button>
초기화 기능 있음
<input type="reset" value="취소">
button은 눌러도 아무런 일이 일어나지 않는다.
| 입력 양식 - Hidden (0) | 2022.08.05 |
|---|---|
| 입력 양식 - 회원가입 (0) | 2022.08.05 |
| 입력 양식 - 로그인 폼의 login.jsp 생성, GET방식과 POST방식 (0) | 2022.08.05 |
| 입력 양식 - 로그인 폼 (0) | 2022.08.04 |
| 기본 태그 - 테이블 table (0) | 2022.08.04 |
이전 글에서 이어지는 포스트↓
입력 양식 - 로그인 폼
입력 양식, 폼 태그, 폼 객체 사용자에게 정보를 입력받는 요소 사용자에게 입력받은 데이터를 전달하는 방식에는 GET, POST 두 가지가 있는데, 주소를 변경하지 않고 보안을 유지하며 데이터를
kiwikiwisae.tistory.com
1. 앞서 작성한 포스트의 로그인 폼, 비밀번호 폼 코드에 다음과 같은 내용을 추가한다.
name 속성으로 값을 전달한다.
변경된 내용이 포함된 전체 코드
<form method="post" action="login.jsp">
<table align=center>
<caption>로그인</caption>
<tr>
<td align=center>ID</td>
<td>
<input type="text"
size=20 maxlength=10
autofocus="autofocus"
required="required"
name="id"> <!-- ID를 변수로 설정 -->
</td>
</tr>
<tr>
<td align=center>PW</td>
<td>
<input type="password"
size=20
required="required"
name="passwd"> <!-- passwd를 변수로 설정 -->
</td>
</tr>
<tr><td><br></td></tr>
<tr>
<td colspan=2 align=center>
<input type="submit" value="로그인">
<input type="reset" value="취소">
</td>
</tr>
</table>
2. jsp 파일 하나를 생성한다. 이름은 login.jsp
로그인 버튼을 누르면 입력한 아이디와 비밀번호를 출력하는 기능을 넣어볼 예정이다.
3. 다음과 같은 코드를 입력한다.
ID : <%=request.getParameter("id")%>
<!-- 앞서 설정한 변수인 id를 매개변수로 넣어준다. --> <br>
비밀번호 : <%=request.getParameter("passwd")%>
<!-- 앞서 설정한 변수인 passwd을 매개변수로 넣어준다. --> <br>
4.저장 후 로그인 폼을 실행시켜 아이디와 비밀번호를 1234로 입력 후 로그인했다.
어제는 로그인하면 페이지를 찾을 수 없다는 오류 창이 떴는데,
이제는 아이디와 비밀번호가 출력된다.
5. 지금까지는 값을 넘기는 방식이 post 방식이었다.
이번엔 get 방식으로 실행해 보았다.
최상단의 코드를 post -> get 으로 변경한다.
<form method="get" action="login.jsp">
6. 똑같이 로그인해본다
확실히 사용자가 입력한 데이터가 모두 노출되는 get 방식은 보안에 취약해보인다.
아직 jsp에 대해 배운 바가 없어 간략히 코드만 입력했지만,
get 방식과 post 방식의 차이점에 대해서 배울 수 있었다.
| 입력 양식 - 회원가입 (0) | 2022.08.05 |
|---|---|
| 입력 양식 - 게시판 (0) | 2022.08.05 |
| 입력 양식 - 로그인 폼 (0) | 2022.08.04 |
| 기본 태그 - 테이블 table (0) | 2022.08.04 |
| 기본 태그 - 앵커 태그 a (0) | 2022.08.04 |
사용자에게 정보를 입력받는 요소
사용자에게 입력받은 데이터를 전달하는 방식에는
GET, POST 두 가지가 있는데,
주소를 변경하지 않고 보안을 유지하며 데이터를 전달하는 POST 양식을 좀 더 많이 쓴다.
가장 쉬운 양식.
ID란과 PW란 두개를 만들어 보았다.
login.jsp 라는 파일은 생성하지 않았지만 임의로 지정했다.
<form method="post" action="login.jsp">
<!-- action: 웹 프로그램 명, method: 값을 전송하는 방식 get / post>
생성할 로그인폼
</form>
이제 위의 form 태그 사이에 들어갈 내용을 작성해야 한다.
폼은 <input type> 이라는 태그로 생성하는데,
input type만 입력해도 어떤 양식을 쓸 수 있는지 목록이 나온다.
그러니 모든 목록을 외울 필요는 없지만
어떤 타입이 어떤 기능을 수행하는지는 기억해둘 필요가 있다.
먼저 ID 폼을 작성한다.
ID
<input type="text" size=20 maxlength=10 autofocus="autofocus" required="required">
size : text 폼이 담을 수 있는 바이트 크기
maxlength=10 : 최대입력수를 10글자로 제한
autofocus : 페이지에 진입하자마자 이 폼이 활성화되어 커서가 깜빡거린다.
required : SQL의 not null 같은 유효성 검사 기능을 수행한다.
null 값으로 로그인 하려 하면 다음과 같은 메시지가 뜨며 넘어가지 않는다.
다음은 비밀번호 폼이다.
PW
<input type="password" size=20>
값을 입력하지 않으면 id에 쓰인 text 타입의 폼과 같은 것처럼 보이지만,
password 폼은 입력하는 내용이 노출되지 않는다.
로그인과 취소 버튼을 만든다.
로그인 버튼
<input type="submit" value="로그인">
취소 버튼
<input type="reset" value="취소">
submit 타입은 전송 기능이 있다.
이 코드를 작성하며 가장 상단에 다음과 같은 코드를 적었는데
<form method="post" action="login.jsp">
login.jsp 라는 파일은 존재하지 않지만 임의로 작성했다고 서술했다.
저 파일이 존재한다면 사용자가 입력한 로그인 정보가 데이터베이스에 저장되어 유효성을 검사하고
일치/불일치 여부에 따라 어떤 페이지를 출력할지 결정할 것이다.
또, submit 타입은 값을 입력하지 않아도 무조건 값이 넘어간다.
그것을 방지하기 위해 ID란에 not null 과 같은 기능을 수행하는 required 기능을 추가한 것이다.
취소 버튼은 말 그대로 reset 타입이다.
이것을 누르면 ID와 PW란의 모든 값이 지워지며 초기화된다.
전체 코드는 다음과 같은 모습이다.
레이아웃을 제어하기 쉽도록
테이블을 생성해서 그 안에 폼을 넣는 방식으로 하였다. (border 값을 지정하지 않아서 투명하게)
<form method="post" action="login.jsp">
<table align=center>
<caption>로그인</caption> <!-- 표의 타이틀 값. h 태그를 써도 상관x -->
<tr>
<td align=center>ID</td>
<td>
<input type= size=20 maxlength=10 autofocus="autofocus" required="required">
</td>
</tr>
<tr>
<td align=center>PW</td>
<td>
<input type="password" size=20>
</td>
</tr>
<tr><td><br></tr>
<tr>
<td colspan=2 align=center>
<input type="submit" value="로그인">
<input type="reset" value="취소">
</td>
</tr>
</table>
</form>
로그인 정보를 처리할 login.jsp 파일을 생성하지 않았기 때문에
로그인 버튼을 누르면 다음과 같은 에러 메시지가 뜬다. ☺
| 입력 양식 - 게시판 (0) | 2022.08.05 |
|---|---|
| 입력 양식 - 로그인 폼의 login.jsp 생성, GET방식과 POST방식 (0) | 2022.08.05 |
| 기본 태그 - 테이블 table (0) | 2022.08.04 |
| 기본 태그 - 앵커 태그 a (0) | 2022.08.04 |
| 기본 태그 - 목록 만들기 ol, ul (0) | 2022.08.04 |
th, tr, td, border, cellspacing, cellpadding, colspan, rowspan
<th> 표 제목 table heading 생성 </th>
<tr> 표의 행 table row 먼저 생성 </tr>
<td> 표의 일반 셀 table data 생성 </td>
border 테두리, 값이 클수록 테두리가 두꺼워진다.
이 보더값을 지정하지 않으면 테두리가 전혀 출력되지 않는다.
<table border=1 width=200 height=200 align=center>
<th> 표 제목 </th>
<tr>
<td><center> 데이터 1 </center></td>
</tr>
<tr>
<td><right>데이터2</right></td>
</tr>
</table>
cellspacing 셀과 셀 사이의 간격을 설정(경계선의 두께)
cellpadding 셀 테두리와 셀 내용간의 간격
데이터를 작성할때에는
1열 왼쪽에서 오른쪽
2열 왼->오
3열 왼-> 오... 이런 순서로 작성한다.
아래 코드를 보면 고양이, 토끼, 햄스터, 강아지 순서로 작성했는데,
| 고양이 | 토끼 |
| 햄스터 | 강아지 |
이다.
<table border=2 width=300 height=200
align=center
cellspacing=0
cellpadding=10>
<th> 내가 좋아하는 동물 </th>
<tr>
<td><center>고양이</center></td>
<td><right>토끼</right></td>
</tr>
<tr>
<td><center>햄스터</center></td>
<td><center>강아지</center></td>
</tr>
</table>
<!-- 셀마다 <center></center> 를 지정하지 않고 <tr align=center> 이렇게만 작성해도 된다.-->
그런데 테이블 제목인 '내가 좋아하는 동물' 셀이 두 행으로 나눠져 있다.
이것을 합쳐 하나의 셀로 만들려면 어떻게 해야 할까?
colspan
열 병합.
th, td 태그 안에서만 사용할 수 있다.
속성값을 지정해야 하는데 병합할 열의 개수만큼 입력한다.
<table border=2 width=300 height=200
align=center
cellspacing=0
cellpadding=10>
<th colspan=2> 내가 좋아하는 동물 </th>
<tr>
<td align=right>고양이</td>
<td>토끼</td>
</tr>
<tr>
<td align=right>햄스터</td>
<td>강아지</td>
</tr>
</table>
응용
다음과 같은 테이블 형태를 만들어보았다.
처음 만든 테이블의 코드는 다음과 같았다.
<table border=1 align=center>
<tr align=center>
<td colspan=3>동물</td>
<td></td>
<td></td>
<td colspan=3>꽃</td>
<td></td>
<td></td>
</tr>
<tr align=center>
<td>호랑이</td>
<td>사자</td>
<td>원숭이</td>
<td>장미</td>
<td>백합</td>
<td>민들레</td>
</tr>
</table>
하지만 출력하면 이렇게 나온다.
colspan으로 셀 3개를 합치려면 합칠 셀 3개를 모두 생성해야 한다고 생각했는데
그게 아니었던 것이다.
하나만 생성하고 colspan만 작성하면 되는 거였다.
<table border=1 align=center>
<tr align=center>
<td colspan=3>동물</td>
<td colspan=3>꽃</td>
</tr>
<tr align=center>
<td>호랑이</td>
<td>사자</td>
<td>원숭이</td>
<td>장미</td>
<td>백합</td>
<td>민들레</td>
</tr>
</table>
rowspan
행 병합.
colspan과 동일하게
th, td 태그 안에서만 사용할 수 있고,
병합할 행의 개수만큼 속성값을 입력한다.
다음과 같은 형태의 테이블을 작성해본다.
| 동물 | 호랑이 |
| 사자 | |
| 원숭이 |
구성을 생각해보아야 하는데,
'동물'과 '호랑이'가 1행에 들어간다.
이때, '동물에 rowspan=3 값을 지정해야 한다.
그리고 행을 바꿔서 '사자'
또 행을 바꿔서 '원숭이'를 작성한다.
<table border=1 align=center>
<tr>
<td rowspan=3>동물</td>
<td>호랑이</td>
</tr>
<tr>
<td>사자</td>
</tr>
<tr>
<td>원숭이</td>
</tr>
</table>
응용
<table border=1 width=400 height=600 align=center>
<tr>
<td rowspan=3>동물</td>
<td>호랑이</td>
</tr>
<tr>
<td>사자</td>
</tr>
<tr>
<td>원숭이</td>
</tr>
<tr>
<td rowspan=3>꽃</td>
<td>장미</td>
</tr>
<tr>
<td>백합</td>
</tr>
<tr>
<td>민들레</td>
</tr>
</table>| 입력 양식 - 로그인 폼의 login.jsp 생성, GET방식과 POST방식 (0) | 2022.08.05 |
|---|---|
| 입력 양식 - 로그인 폼 (0) | 2022.08.04 |
| 기본 태그 - 앵커 태그 a (0) | 2022.08.04 |
| 기본 태그 - 목록 만들기 ol, ul (0) | 2022.08.04 |
| 기본 태그 - 이미지 불러오기와 정렬 (0) | 2022.08.04 |
사용자의 선택에 따라 특정 정보로 이동하는 하이퍼링크를 설정하는 태그.
웹사이트로 하이퍼링크를 설정할 때에는 반드시 http:// 를 입력해야 한다.
http://를 입력하지 않으면 링크가 제대로 걸리지 않는다.
네이버<br>
<a href="www.naver.com">네이버</a><br>
<a href="http://www.naver.com">네이버</a>
하이퍼링크를 적용하면 파란글자에 밑줄이 적용된 스타일로 나타나게 되어 있는데,
url 뒤에 style="text-decoration:none"을 추가해주면 밑줄이 사라진다.
<a href="http://www.naver.com">네이버</a><br>
<a href="www.naver.com" style="text-decoration:none"><font>네이버</font></a>
<a href="first.html">처음 작성한 문서로 이동</a>
<br><br>
이렇게 간략하게 경로를 입력해서 제대로 된 링크가 연결되려면 first.html과
HTML을 입력하는 문서가 같은 폴더에 저장되어 있어야 한다.
같은 폴더에 있기 때문에 처음 생성한 문서가 제대로 나온다.
<a href="http://www.seoul.go.kr">
<img src="img/Penguins.jpg" width=100 height=100>
</a>
| 입력 양식 - 로그인 폼 (0) | 2022.08.04 |
|---|---|
| 기본 태그 - 테이블 table (0) | 2022.08.04 |
| 기본 태그 - 목록 만들기 ol, ul (0) | 2022.08.04 |
| 기본 태그 - 이미지 불러오기와 정렬 (0) | 2022.08.04 |
| html의 기본 구조, 기본 태그 - br, p, hr, h, font (0) | 2022.08.04 |
아무런 속성을 지정하지 않았을 경우, 자동으로 숫자 순서가 매겨진다.
<ol> 과 <ol type="1">은 같은 결과가 출력된다.
가장 좋아하는 꽃은?
<ol>
<li>장미</li>
<li>백합</li>
<li>봉숭아</li>
<li>민들레</li>
</ol>
영문 대소문자
가장 좋아하는 꽃은?
<ol type="a">
<li>장미</li>
<li>백합</li>
<li>봉숭아</li>
<li>민들레</li>
</ol>
로마자
가장 좋아하는 꽃은?
<ol type="I">
<li>장미</li>
<li>백합</li>
<li>봉숭아</li>
<li>민들레</li>
</ol>
아무런 타입을 지정하지 않은 기본값은 type=disc와 같다.
disc, circle, square 3가지만 가능하다.
가장 좋아하는 동물은?
<ul>
<li>고양이</li>
<li>강아지</li>
<li>토끼</li>
<li>햄스터</li>
</ul>
<ul type="square">
<li>고양이</li>
<li>강아지</li>
<li>토끼</li>
<li>햄스터</li>
</ul>
<ul type="circle">
<li>고양이</li>
<li>강아지</li>
<li>토끼</li>
<li>햄스터</li>
</ul>
| 입력 양식 - 로그인 폼 (0) | 2022.08.04 |
|---|---|
| 기본 태그 - 테이블 table (0) | 2022.08.04 |
| 기본 태그 - 앵커 태그 a (0) | 2022.08.04 |
| 기본 태그 - 이미지 불러오기와 정렬 (0) | 2022.08.04 |
| html의 기본 구조, 기본 태그 - br, p, hr, h, font (0) | 2022.08.04 |
<img src="">
따옴표 안에 이미지 파일의 경로를 넣어준다.
<img src="" width=200 height=200>
절대 크기를 지정할 수 있다.
<img src="" width=200 height=200 title="해파리">
이미지 위에 마우스 포인터를 올려두었을 때 사용자가 입력한 설명이 말풍선으로 나타난다.
상대경로로 이미지 불러오기
(1) 같은 폴더 안에 있는 이미지 불러오기 : <img src="Jellyfish.jpg">
(2) 하위 폴더 안에 있는 이미지 불러오기 : <img src="img/Jellyfish.jpg">
(3) 상위 폴더 안에 있는 이미지 불러오기 : <img src="../Jellyfish.jpg">
절대경로로 이미지 불러오기
절대 경로로 배포할 경우 개발 환경과 운영 환경이 달라 여러가지 문제가 발생할 수 있다.
<img src ="C:\Users\User\eclipse-workspace\javaproject\web\WebContent\HTML\work\img">
<!-- 왼쪽정렬 --><br><br><br><br>
<img src="img/Jellyfish.jpg" width=150 height=150 align=left><!-- 가운데정렬 --><br><br><br><br>
<img src="img/Jellyfish.jpg" width=150 height=150 align=center><!-- 오른쪽정렬 --><br><br><br><br>
<img src="img/Jellyfish.jpg" width=150 height=150 align=right>
문자를 정렬할 때 처럼 정렬이 될 줄 알았는데
center 배치가 제대로 안됐다.
align 만으로는 이미지를 의도한대로 배치하기가 힘들다.
이 때, <p> 태그를 사용해 본다.
<!-- 왼쪽정렬 --><br><br><br><br>
<img src="img/Jellyfish.jpg" width=150 height=150 align=left>
<!-- 가운데정렬 --><br><br><br><br>
<p align=center><img src="img/Jellyfish.jpg" width=150 height=150></p>
<!-- 오른쪽정렬 --><br><br><br><br>
<img src="img/Jellyfish.jpg" width=150 height=150 align=right>
또 다른 방법으로 <center></center>로 이미지 소스를 감싼다.
<!-- 왼쪽정렬 --><br><br><br><br>
<img src="img/Jellyfish.jpg" width=150 height=150 align=left>
<!-- 가운데정렬 --><br><br><br><br>
<p align=center><img src="img/Jellyfish.jpg" width=150 height=150></p>
<center><img src="img/Jellyfish.jpg" width=150 height=150></center>
<!-- 오른쪽정렬 --><br><br><br><br>
<img src="img/Jellyfish.jpg" width=150 height=150 align=right>
아무것도 입력하지 않았을때의 기본값은 bottom이다.
<img src="img/Desert.jpg" widgh=150 height=150>사막이미지<br><br>
<img src="img/Desert.jpg" widgh=150 height=150 align=top>사막이미지<br><br>
<img src="img/Desert.jpg" widgh=150 height=150 align=middle>사막이미지<br><br>
<img src="img/Desert.jpg" widgh=150 height=150 align=bottom>사막이미지<br><br>
| 입력 양식 - 로그인 폼 (0) | 2022.08.04 |
|---|---|
| 기본 태그 - 테이블 table (0) | 2022.08.04 |
| 기본 태그 - 앵커 태그 a (0) | 2022.08.04 |
| 기본 태그 - 목록 만들기 ol, ul (0) | 2022.08.04 |
| html의 기본 구조, 기본 태그 - br, p, hr, h, font (0) | 2022.08.04 |