728x90

 

<c:url>로 var변수를 만들고, value에 해당 url을 넣고

이 var 변수를 다른 button type="button"에서 onclick으로 불러내기

기존 버튼 온클릭에서 url 직접 입력에서 다른 코드로 한번 더 해봄

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<link rel="stylesheet" type="text/css" href="${ pageContext.servletContext.contextPath }/resources/css/member-style.css"> 

<style>
	#myInfoTable td{text-align:center;}
</style>

</head>
<body>

	<c:import url="..common/menubar.jsp"/>
	
	<h1 align="center">'${ loginUser.name }'님의 정보 보기</h1>
	
	<div class="centerText">
		<table id="myInfoTable">
			<tr>
				<th>아이디</th>
				<td>${loginUser.id }</td>
			</tr>
			<tr>
				<th>이름</th>
				<td>${loginUser.name }</td>
			</tr>
			<tr>
				<th>닉네임</th>
				<td>${loginUser.nickName }</td>
			</tr>
			<tr>
				<th>성별</th>
				<c:if test="${loginUser.gender eq 'M' }">
					<td> 남성 </td>
				</c:if>
				<c:if test="${loginUser.gender eq  'F'}">
					<td> 여성 </td>
				</c:if>
			</tr>
			<tr>
				<th>나이</th>
				<td>${loginUser.age }</td>
			</tr>
			<tr>
				<th>이메일</th>
				<td>${ loginUser.email }</td>
			</tr>
			<tr>
				<th>전화번호</th>
				<td>${loginUser.phone }</td>
			</tr>
			<tr>
				<th>주소</th>
				<td>
					<c:forTokens var="ft" items="${loginUser.address }" delims="/" varStatus="vs">
						<c:if test="${vs.index eq 0 && ft >= '0' && ft <= '99999' }">
							(${ft })
						</c:if>
						<c:if test="${vs.index eq 0 && !(ft >= '0' && ft <= '99999')}">
							${ft }
						</c:if>
						<c:if test="${vs.index eq 1 }">
							${ft }
						</c:if>
						<c:if test="${vs.index eq 2 }">
							${ft }
						</c:if>
					</c:forTokens>
					
				</td>
			</tr>
			
			<tr>
				<td colspan="2"	align="center">
					<c:url var="mpwdUpdateView" value="mpwdUpdateView.me"/>
					<button type="button" onclick="${mpwdUpdateView}">비밀번호 수정</button>
					<button type="button" onclick="location.href='mupdateView.me'">정보수정</button>
					<c:url var="mdelete" value="mdelete.me"/>
					<button type="button" onclick="location.href='${ mdelete }'">회원탈퇴</button>
					<button type="button" onclick="home.do">시작페이지로</button>
				</td>
			</tr>
		</table>
	</div>




</body>
</html>
728x90
반응형
728x90

 

내정보 수정페이지

 

<c:forTokens> 구분자

 

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<title>prac</title>

<link rel="stylesheet" type="text/css" 
href="${ pageContext.servletContext.contextPath }/resources/css/member-style.css">


</head>
<body>

	<c:import url="../common/menubar.jsp"/>
	
	<h1 align="center">${ loginUser.name }님의 정보 수정</h1>
	
	<div class="centerText">
		<form action="mupdate.me" method="post">
			<table>
				<tr>
					<th>아이디</th>
					<td>${loginUser.id }
					<input type="hidden" name="id" value="${loginUser.id }">
					</td>
				</tr>
				<tr>
					<th>이름</th>
					<td>
						<input type="text" name="name" value="${ loginUser.name }"></td> <!-- input text박스 안에 value값이 들어가있는 상태가 됨 -->
					</td>
				</tr>
				<tr>
					<th>닉네임</th>
					<td><input type="text" name="nickName" value="${loginUser.nickName }"></td>
				</tr>
				<tr>
					<th>성별</th>
					<c:if test="${loginUser.gender == 'M' }">
						<td>
							<input type="radio" name="gender" value="M" checked readonly>남
							<input type="radio" name="gender" value="F" readonly>여
						</td>
					</c:if>
					<c:if test="${loginUser.gender == 'F' }">
						<td>
							<input type="radio" name="gender" value="M" readonly>남
							<input type="radio" name="gender" value="F" checked readonly>여
						</td>
					</c:if>
				</tr>
				<tr>
					<th>나이</th>
					<td><input type="number" min="20" max="100" name="age" value="${ loginUser.age }"></td>
					<!-- input 타입넘버도 value로 안에 값을 넣어서 보여줄 수 있음 -->	
				</tr>
				<tr>
					<th>이메일</th>
					<td><input type="email" name="email" value="${loginUser.email }"></td>
				</tr>
				<tr>
					<th>전화번호</th>
					<td><input type="tel" name="phone" value="${loginUser.phone }"></td>
				</tr>
				
				
				<c:forTokens var="addr" items="${loginUser.address }" delims="/" varStatus="vs">
					<c:if test="${ status.index eq 0 && addr >= '0' && addr <= '99999' }">
						<c:set var="post" value="${ addr }"/>
					</c:if>
					<c:if test="${ status.index eq 0 && !(addr >= '0' && addr <= '99999') }">
						<c:set var="address1" value="${ addr }"/>
					</c:if>
					<c:if test="${ status.index eq 1 }">
						<c:set var="address1" value="${ addr }"/>
					</c:if>
					<c:if test="${ status.index eq 2 }">
						<c:set var="address2" value="${ addr }"/>
					</c:if>
				</c:forTokens>
				
				
				<tr>
					<th>우편번호</th>
					<td>
						<input type="text" name="post" class="postcodify_postcode5" value="${ post }" size="6">
						<button type="button" id="postcodify_search_button">검색</button>
					</td>	
				</tr>
				<tr>
					<th>도로명 주소</th>
					<td><input type="text" name="address1" class="postcodify_address" value="${ address1 }" size="30"></td>
				</tr>
				<tr>
					<th>상세주소</th>
					<td><input type="text" name="address2" class="postcodify_extra_info" value="${ address2 }" size="30"></td>
				</tr>
				
				
				<!-- jQuery와 Postcodify를 로딩한다. -->
				<script src="//d1p7wdleee1q2z.cloudfront.net/post/search.min.js"></script>
				<script>
					// 검색 단추를 누르면 팝업 레이어가 열리도록 설정한다.
					$(function(){
						$("#postcodify_search_button").postcodifyPopUp();
					});	
				</script>
					
				<tr>
					<td colspan="2" align="center">
						<input type="submit" value="수정하기"> <!-- value값이 버튼이 되서 나옴 -->
						<c:url var="mdelete" value="mdelete.me">
							<c:param name="id" value="${ loginUser.id }"/>
						</c:url>	
						<button type="button" onclick="location.href='${mdelete}'">탈퇴하기</button>
						<button type="button" onclick="location.href='home.do'">시작 페이지로</button>
					</td>
				</tr>
			</table>		
		</form>
	</div>


</body>
</html>
728x90
반응형
728x90

 

<목표>

따라치되 최대한 안보고 코딩하기

코딩 익숙해지기

구조 분석

세부코드 안보고 쓸 수 있게 되기

 

반복이 살 길이다!!!!!!!

 

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<script src="${ contextPath }/resources/js/jquery-3.6.0.min.js"></script> 

<style>
	.nav{margin-left:auto; margin-right:auto; text-align:center;}
	.menu{
		display:inline-block; background:#e4fc41; text-align:center;
		line-height:50px; width:150px; height:50px; border-radius:20px;
		margin-left:5%; margin-right:5%;
	}
	.menu:hover{background:#b0c903; font-weight:bolder; cursor:pointer;}
	a:link{color:black; text-decoration:none;}
	a:visited{color:black; text-decoration:none;}
</style>

</head>
<body>

	<c:set var="contextPath" value="${ pageContext.servletContext.contextPath }" scope="application"/>
	
	<h1 align="center">first page & Spring</h1>
	<br>
	
	
	<div class="loginArea" align="right">
		<c:if test="${ empty sessionScope.loginUser }">	<!-- user가 로그인 안했으면 로그인하게 id,pw 보여주는 창 보여줌-->
			<form action="login.me" method="post">
				<table id="loginTable" style="text-align:center;">
					<tr>
						<td>아이디</td>
						<td><input type="text" name="id"></td>
						<td rowspan="2">
							<button id="loginBtn">로그인</button>
						</td>
					</tr>
					<tr>
						<td>비밀번호</td>
						<td><input type="password" name="pwd"></td>
					</tr>
					<tr>
						<td colspan="3">
							<button type="button" onclick="location.href='enrollView.me'">회원가입</button>
							<button type="button">아이디/비밀번호 찾기</button>"
						</td>					
					</tr>
				</table>
			</form>
		</c:if>
	
		<c:if test="${ empty sessionScope.loginUser }"> <!-- user가 로그인했으면 정보 변경, 로그아웃 등 보여줌 -->
			<h3 align="right"> <!-- h3태그 안에 c core와 button태그를 넣은게 신기 -->
				<c:out value="${ loginUser.name }님 환영합니다."/>
				<br>
				<c:url var="myinfo" value="myinfo.me"/>
				<c:url var="logout" value="logout.me"/>
				<button onclick="location.href='${myinfo}'">정보보기</button>
				<button onclick="location.href='${logout}'"	>로그아웃</button>
							<!-- c:url에서 var변수로 지정한 것을 버튼클릭하면 이동하게만듬 -->
			</h3>		
		</c:if>
	</div>
	

<!-- 위처럼 c:url을 통해서 지정할 수도 있지만 지금까지 해왔던 것처럼 바로 href에 url을 넣어도 상관없음 -->
	<div class="menubar">
		<div class="nav">
			<div class="menu"><a href="home.do">Home</a></div>
			<div class="menu"><a href="blist.bo">게시판</a></div>		
		</div>
	</div>


</body>
</html>

 

 

728x90
반응형
728x90

 

비밀번호 수정 폼

클론 코딩 & 구조 파악

손코딩으로 하나씩 익히기

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
	
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> prac</title>

<link rel="stylesheet" type="text/css" href="${pageContext.servletContext.contextPath }/resources/css/member-style.css"> 

</head>
<body>

	<c:import url="../common/menubar.jsp"/>

	<h1 align="center">비밀번호 수정</h1>
	
	<div class="centerText">
		<form action="mPwdUpdate" method="post">
			<table>
				<tr>
					<th>현재 비밀번호</th>
					<td><input type="password" name="pwd"></td>
				</tr>
				<tr>
					<th>새 비밀번호</th>
					<td><input type="password" name="newPwd1"></td>
				</tr>
				<tr>
					<th>새 비밀번호 확인</th>
					<td><input type="password" name="newPwd2"></td>
				</tr>
				<tr>
					<td colspan="2" align="center">
						<input type="submit" value="수정하기">
						<button type="button" onclick="location.href='home.do'">시작화면으로</button>
					</td>
				</tr>
				
			</table>
		</form>	
	</div>

</body>
</html>
728x90
반응형
728x90

 

관리자 페이지에서 공지사항 작성할 수 있게 쓰기 페이지 제작

인풋태그로 짧은 글 받고

텍스트 애어리어로 내용 부분 받아서 컨트롤러로 전달

쓰기 폼하나 새로 만들고 이를 작성완료하면 db쪽과 왔다갔다 하도록 구성

 

HTML

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>


<link rel="stylesheet" type="text/css" href="${ pageContext.servletContext.contextPath }/resources/css/admin/adminNoticeWriteView.css">



</head>
<body>

	<c:import url="adminMenubar.jsp" />



    <div class="title">
        <h2>공지사항</h2>   
    </div>    
    
	<form id="form" name="form" method="post">
	    <table class="tableWhole">
	            <thead>
	                <tr>
	                    <th>제목</th>
	                        <td style="width: 1050px;">
	                        	<input type="text" placeholder="제목을 입력하세요">
	                        </td>
	                </tr>
	                <tr>
	                    <th>작성자</th>
	                    <td>${board.adminId}</td>
	                </tr>
	                <tr>
	                    <th>작성일</th>
	                    <td>${board.boardCreateDate}</td>
	                    <th>조회수</th>
	                    <td style="width:100px" align="center">
	                    	${board.boardCount}
	                    </td>
	                </tr>
	            </thead>
	    </table>
    

	    <div class="content">
	        <textarea class="textarea_field" placeholder="   내용을 입력해주세요."></textarea>
	    </div>
			<input type="hidden" id="boardId" name="boardId" value="${board.boardId }" > <!-- qnaNo를 컨트롤러로 보내서 어느 게시물이 수정되는지 알려 줘야함  -->
	    <div class="listButton">
	    	<c:url var="blist" value="adminNoticeList.ad">
				<c:param name="page" value="${ page }"/>
			</c:url>
	        <button type="submit" onclick="javascript:form.action='adminNoticeWriteForm.ad'">작성 완료</button> 
	        <button type="submit" onclick="javascript:form.action='adminNoticeList.ad'">목 록</button> 
	    </div>
	 </form> 
    




<!-- ############ PAGE END 끝~ -->

<!-- / -->

<!-- theme switcher -->

<!-- ############ LAYOUT END-->

<!-- build:js scripts/app.html.js -->
<!-- jQuery -->
<script src="${ pageContext.servletContext.contextPath }/resources/libs/jquery/jquery/dist/jquery.js"></script>
<!-- Bootstrap -->
<script src="${ pageContext.servletContext.contextPath }/resources/libs/jquery/tether/dist/js/tether.min.js"></script>
<script src="${ pageContext.servletContext.contextPath }/resources/libs/jquery/bootstrap/dist/js/bootstrap.js"></script>
<!-- core -->
<script src="${ pageContext.servletContext.contextPath }/resources/libs/jquery/underscore/underscore-min.js"></script>
<script src="${ pageContext.servletContext.contextPath }/resources/libs/jquery/jQuery-Storage-API/jquery.storageapi.min.js"></script>
<script src="${ pageContext.servletContext.contextPath }/resources/libs/jquery/PACE/pace.min.js"></script>

<script src="${ pageContext.servletContext.contextPath }/resources/scripts/config.lazyload.js"></script>

<script src="${ pageContext.servletContext.contextPath }/resources/scripts/palette.js"></script>
<script src="${ pageContext.servletContext.contextPath }/resources/scripts/ui-load.js"></script>
<script src="${ pageContext.servletContext.contextPath }/resources/scripts/ui-jp.js"></script>
<script src="${ pageContext.servletContext.contextPath }/resources/scripts/ui-include.js"></script>
<script src="${ pageContext.servletContext.contextPath }/resources/scripts/ui-device.js"></script>
<script src="${ pageContext.servletContext.contextPath }/resources/scripts/ui-form.js"></script>
<script src="${ pageContext.servletContext.contextPath }/resources/scripts/ui-nav.js"></script>
<script src="${ pageContext.servletContext.contextPath }/resources/scripts/ui-screenfull.js"></script>
<script src="${ pageContext.servletContext.contextPath }/resources/scripts/ui-scroll-to.js"></script>
<script src="${ pageContext.servletContext.contextPath }/resources/scripts/ui-toggle-class.js"></script>

<script src="${ pageContext.servletContext.contextPath }/resources/scripts/app.js"></script>

<!-- ajax -->
<%-- 	<script src="${ pageContext.servletContext.contextPath }/resources/libs/jquery/jquery-pjax/jquery.pjax.js"></script> --%>
<script src="${ pageContext.servletContext.contextPath }/resources/scripts/ajax.js"></script>
<!-- endbuild -->
    


</body>
</html>

 

CSS




th{
    width: 130px;
    background-color: #f7f5f8;
    font-weight: 600;
    line-height: 200%;
}

input{
	border:none;
}

.title{
    width: 890px;
    text-align: center;
    margin: 0 auto;
}
.title > p{
    color:rgb(149, 146, 146);
    margin-bottom: 3%;
}
thead{
    border-bottom: rgb(149, 146, 146);
}

.tableWhole{
    width:100%;
    max-width: 890px;
    border-top : 2px solid black;  
    border-bottom: 1px solid lightgray;
    line-height: 180%;
    margin: 0 auto;
}
.tableWhole > thead > tr > td{
	padding-left:10px;	
	padding-top:5px;
	padding-bottom:5px;
	
}
thead > tr{
    border-bottom : 1px solid rgb(149, 146, 146);  
}
.tableTop td{
    width:450px;
}

    
.content{
    width:890px;
    margin: 0 auto;
    word-break: break-all;
}
.content > p{
    padding: 2%;
    padding-bottom: 5%;
    border-bottom: 1px solid  lightgray;
}

.listButton{
    width:890px;
    text-align: right;
    margin:2% auto;
    padding-right: 3%;
    
}
.listButton > button:hover{
    background-color:#f7b7b5;
    color:#fff;
    border:1px solid #FE8F8F;
    
}
.listButton > button{
    width:100px;
    height:35px;
    background-color: #FE8F8F;
    border: 1px solid #FF5C58;
    color:#fff;
}

/**************************/

.content{
    text-align: center;
}
.content textarea{
    width:890px;
    min-height: 150px;
    padding:1% 0;
    margin: 0 auto;
    resize: none;
    border:none;
    border-bottom: 1px solid lightgray;
}

 

 

728x90
반응형
728x90

 

상당히 복잡한...

복붙해도 써도 되겠지만 안에 메커니즘을 이해하기 위해

손코딩 반복해보자

 

<h2>1.서버 쪽 컨트롤러로 값 보내기</h2>
    <button id="test1">테스트</button>
    <script>
        $('#test1').on('click',function(){
            $.ajax({

                url: 'test1.do',
                data:{name:'강건강', age:20},
                type: 'post',
                success: function(data){
                    console.log(data);
                    if(data = 'ok'){
                        alert('전송 성공');
                    }else{
                        alert('전송 실패');
                    }
                },
                error: function(data){
                    console.log(data);

                }
            });
        });
    </script>

 

728x90
반응형
728x90

 

마이바티스 최대 특징 중 하나 : 쿼리를 태그화 시킨 것

코드가 많이 줄고 편하다

 

DOCTYPE 설정

<!DOCTYPE mapper .... >

앞으로 DOCTYPE 다음 어떤 타입인지 나오므로 잘 확인하자

나머지는 코드 복붙해서 쓰면된다

<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

 

1. 최상위 태그 <mapper>

namespace속성

마이바티스 설정파일(config.xml)에 등록한 매퍼파일의 값을 넣는 속성(element)

자바에서 어느 매퍼를 쓸지 알 수 있게 해주는 역할

<mapper namespace="memberMapper">
</mapper>

 

2. 쿼리문 태그 : <select>,<insert>,<update>,<delete>

이후로 나오는 태그들은 sql에서 썼던 CRUD의 명령어들이 태그화 된 것이므로 그대로 쓰면 되고,

속성(element)만 추가하면 된다

<mapper namespace="memberMapper">
	<select id="loginMember" parameterType="member.model.vo.Member" > 
     	쿼리문 내용
        ex)
            SELECT * 
            FROM MEMBER 
            WHERE USER_ID = #{userId} AND USER_PWD = #{userPwd} 
    </select>
</mapper>

1)id : 쿼리문의 고유 아이디(유일한 구분자)
   - mapper태그 안에 쿼리가 엄청 여러개이기 때문에 각각을 구분할 pk역할을 하는 id속성이 필요
 2)parameterType : 클래스의 풀네임 또는 (설정되었다면)별칭
 3)resultType : 반환받을 데이터의 데이터타입 지정
  - 쿼리 실행 후 나온 결과(ex:ResulSet) 옮겨 담을 객체를 정해주는 것

 

3.<resultMap>

vo클래스 필드명(담을 객체의 필드명)과 sql컬럼명 매핑시켜주는 태그

resultMap태그 속성값

1) type : 클래스 풀네임or별칭
2) id : pk역할. 이 resultMap이 어느 resultMap맵인지 식별용

<resultMap type="Member" id="memberResultSet">

 

resultMap 하위 태그

1)id태그 : pk역할(기본키) 하는 얘가 들어감.
- column : DB의 컬럼명
- property : 매핑 시킬 자바 vo의 필드명
2)result태그 : 일반 컬럼이 들어감

<!-- PK(기본키) -->
<id column="USER_ID" property="userId"/>
<!-- 일반 컬럼 -->
<result column="USER_PWD" property="userPwd"/>

 

<resultMap> 전체코드

<resultMap type="Member" id="memberResultSet">

		<!-- PK(기본키) -->
		<id column="USER_ID" property="userId"/>
		<!-- 일반 컬럼 -->
		<result column="USER_PWD" property="userPwd"/>
		<result column="USER_NAME" property="userName"/>
		<result column="NICKNAME" property="nickName"/>
		<result column="EMAIL" property="email"/>
		<result column="BIRTHDAY" property="birthDay"/>
		<result column="GENDER" property="gender"/>
		<result column="PHONE" property="phone"/>
		<result column="ADDRESS" property="address"/>
		<result column="ENROLL_DATE" property="enrollDate"/>
		<result column="UPDATE_DATE" property="updateDate"/>
		<result column="M_STATUS" property="mStatus"/>
	</resultMap>

 

 

 

728x90
반응형
728x90

회원가입, 조회, 내 정보 보기, 수정, 탈퇴

 

db랑 다르게 쿼리문 맞쳤다는 세미콜론 안들어감

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">


<mapper namespace="memberMapper">
	<!-- 회원가입 : insert태그 -->
	<insert id="insertMember" parameterType="Member"> <!-- parameterType : 쿼리에 전달될 데이터의 타입 지정 -->
		insert into member
		values (#{userId}, #{userPwd}, #{userName}, #{nickName}, #{email}, #{birthDay}, #{gender}, #{phone}, #{address}, sysdate, sysdate, default)
	</insert>

	<!-- 내정보보기 수정 -->
	<update id="updateMember" parameterType="Member">
			update member
			set user_name = #{userName}, nickName = #{nickname}, email = #{email}, birthDay = #{birthDay},
				gender = #{gender}, phone = #{phone}, address = #{address}
			where user_id = #{userId}
	</update>
	
	
	<!-- 비번 수정 -->
	<update id="updatePwd" parameterType="java.util.HashMap"> <!-- parameterType="hashMap"도 가능. 마바 내장별칭 때문 -->
		update member
		set user_pwd = #{newPwd} 
		where user_id = #{id} and user_pwd = #{oldPwd}
	</update>
	
	
	<!-- 회원탈퇴 -->
	<update id="deleteMember" parameterType="string"> <!--string : 마이바티스 내장 별칭 string==String  -->
		update member
		set status = 'N' 
		where user_id = #{userId}
	</update>


</mapper>

 

728x90
반응형
728x90

영어 소문자 : type="a"

영어 대문자 : type="A"

로마 소문자 : type="i"

로마 대문자 : type="I"

시작값 바꾸기 : type="a" start="2"

번호 역순 : reversed type="A"

 

<h4>타입 바꾸기 : type</h4>
	<!-- 순서화 하는 기호를 바꾸는거라 그런지 <ul>은 검은 불릿기호만 나옴 -->
	<h5>영문 소문자</h5>
	<ol type="a">	
		<!-- 영문소문자 쓰고 싶으면 소문자 'a'를 삽입 ex) type="a" -->
		<li>HTML5</li>
		<li>css3</li>
		<li>js</li>
		<li>jquery</li>
	</ol>
	
	
	<h5>영문 대문자</h5>		
	<ol type="A">
		<li>HTML5</li>
		<li>css3</li>
		<li>js</li>
		<li>jquery</li>
	</ol>		
			
	<h5>로마 소문자</h5>		
	<ol type="i">
		<li>HTML5</li>
		<li>css3</li>
		<li>js</li>
		<li>jquery</li>
	</ol>			


	<h5>로마 대문자</h5>		
	<ol type="I">
		<li>HTML5</li>
		<li>css3</li>
		<li>js</li>
		<li>jquery</li>
	</ol>					
					
	<h4>시작 값 바꾸기 : start="5"</h4>
	<ol start="5">
		<li>HTML5</li>
		<li>css3</li>
		<li>js</li>
		<li>jquery</li>
	</ol>				
					
					
					
	<h4>타입 및 시작 값 변경 :  : type="i" start="3" </h4> <!--  iii, iV,V,Vi -->
	<ol type="i" start="3"> <!-- start는 정수만 가능 -->
		<li>HTML5</li>
		<li>css3</li>
		<li>js</li>
		<li>jquery</li>
	</ol>				
	<!-- 속성과 속성은 띄어쓰기 구분됨  -->				
					
	
	<h4>역순으로 항목 번호 표시</h4> <!--  iii, iV,V,Vi -->
	<ol reversed type="A" start="2">
		<li>HTML5</li>
		<li>css3</li>
		<li>js</li>
		<li>jquery</li>
	</ol>

 

 

 

728x90
반응형

+ Recent posts