'먼지 낀 책장사이'에 해당되는 글 28

  1. 2018.03.30 2주차 스프링 프레임워크 1
  2. 2018.03.29 [Servlet/jQuery] 설문지 22-23일 (작성중)
  3. 2018.03.29 [Servlet/JavaScript] 설문지 20-21일
  4. 2018.03.27 [Servlet] 1주차 설문지 서블릿
  5. 2017.08.04 4장 조건문과 반복문
  6. 2017.08.04 [CSS] font-style, text-style, box모델, background
  7. 2017.07.28 fieldset, [CSS] 셀렉터 의사클래스
  8. 2017.07.27 멀티미디어, div와 span2, iframe, 입력form
  9. 2017.07.26 자바의 정석 연습문제 3장 연산자
  10. 2017.07.26 anchor태그, 절대/상대경로, 표만들기

26일

Step1 [개발환경 구성]

- maven 프로젝트 구성 방법

- 프로젝트 생성 방법

- 프로젝트 내용 변경방법

- 인코딩 -> utf-8로 서버.xml 설정 Connector를 찾아 URI

- 자바 버전 -> 빌드경로, 컴파일러등.

- facets -> org.eclipse.wst.common.project.facet.core.xml


- pom.xml에서 기본설정

- 웹 설정에 맞는 기본적인 라이브러리 구성


- 폴더 구조 설명.


- 톰켓 연결

- UTF-8 설정

- 루트변경

- index.jsp 화면 확인

- maven build

- 빌드 과정과 폴더 구조 설명

Step3 [로그설정과 인터셉터의 이해]

- logback.xml 파일 구성


- 서버 생성

- 로그 안나옴.


- pom.xml에 로그관련 라이브러리 추가


- 서버 재기동

- 로그 출력 확인

- HelloController.java에 로그 관련 코딩 추가

- 내용 확인.

- controllerContext.xml에 인터셉터 관련 내용 추가



- BaseInterceptor.java, WebInterceptor.java 생성

- preHandle, postHandle 차이 설명


- 브라우저에서 기동 및 로그 확인.

- 설명 내용 확인


27일

Step4 [WebExceoptionResolver]

WebExceoptionResolver

지시사항

코드는 작동 순서에 따라 정렬하는 것을 원칙

불필요한 변수 정의보다 받아온 값을 그대로 반환(return)

Step5 [DB연결]

트랜잭션 AOP

Log4j.jdbc 주석기능



28일

Step6-8

Bad리퀘스트익셉션

AOP Aspects

Base 부모상속관계

Mode파라미터에 따른 Create / Update 수행



29일


30일



[Servlet] 1주차 설문지 서블릿

[Servlet/JavaScript] 설문지 20-21일



22일 목요일

데이터 가공 서블릿에 대한 이해를 기반으로 퍼블리싱 작업을 진행합니다.

이후 설문지와 응답이 입력될 데이터베이스를 계획합니다.


목표 - 퍼블리셔를 통해 전달받은 html과 css를 적용하기, DB 세팅하고 table 계획하기







결과물 예시




1. 디자인된 입력전/후 html페이지와 CSS 자료를 전달받아 가능한 원본 양식을 유지합니다.

페이지를 갱신해도 상관없지만 이번에는 jQuery를 이용하여 Ajax통신을 요청했습니다.

1-2. 입력전 html내용을 jsp로 옮기고 결과부분은 동적요소로 갱신했습니다.


<div class="title"><h1>과제 1 : 서블릿을 활용한 웹페이지 구현</h1></div>

<div class="ex01">
	<form class="form">
		<div><span class="f_bold">1. 설문 문항 갯수(surveyCnt) 설정 :</span> 
			<input type="text" class="tc w50"> (1자리 숫자만 입력) <span id="nSpan"></span><br>
		<button type="button" class="b_style gray w_full mgt5" id="btn_form01" rel="listBox2">설문 폼 생성</button></div>

		<div><span class="f_bold">2. 설문 문항 입력 리스트</span>(특수문자를 제외한 입력, 100자 제한) <span id="qSpan"></span>
			<div class="sv_list_wrap" id="listBox2">
				<!-- 
				<dl class="q_list mgt5">
					<dt><span class="s_style01">질문 1</span></dt>
					<dd><input type="text" class="w_full"></dd>
				</dl>
				 -->
				<button type="button" class="btn_po1 b_style gray w_full" id="btn_form02" rel="listBox3">설문 생성</button>
			</div>
		</div>

		<div><span class="f_bold">3. 설문지 리스트 및 답안 작성 리스트</span> (특수문자를 제외한 입력, 100자 제한) <span id="aSpan"></span>
			<div class="sv_list_wrap" id="listBox3">
				<!-- 
				<dl class="q_list mgt5">
					<dt><span class="s_style01">질문 1</span></dt>
					<dd>우리회사의 출근시간은 언제일까요?</dd>
				</dl>
				<dl class="q_list">
					<dt><span class="s_style01 light">답안</span></dt>
					<dd><input type="text" class="w_full"></dd>
				</dl>
				 -->
				<button type="button" class="btn_po1 b_style green w_full" id="btn_form03" rel="listBox4">답안 작성 완료 및 제출</button>
			</div>
		</div>
		
		<div><span class="f_bold">4. 설문지 평가 리스트</span>
			<div class="sv_list_wrap" id="listBox4">
				<!-- 
					<div class="q_list_box">
						<dl class="q_list mgt5">
							<dt><span class="s_style01">질문 1</span></dt>
							<dd><span>우리회사의 출근시간은 언제일까요?</span></dd>
						</dl>
						<dl class="q_list">
							<dt><span class="s_style01 light">답안</span></dt>
							<dd><span>모릅니다.</span></dd>
						</dl>
						<dl class="q_list">
							<dt><span class="s_style01 green">평가(1)</span></dt>
							<dd><span>설문이 답안보다 <14>글자 많습니다.</span></dd>
						</dl>
						<dl class="q_list">
							<dt><span class="s_style01 green">평가(2)</span></dt>
							<dd><span>당신은 지루하셨군요.</span></dd>
						</dl>
					</div>
				-->
			</div>
		</div>
	</form>
</div>


jQuery를 통해 코드를 줄이고 개발시의 가독성 또한 좋아졌습니다.







2. Ajax요청으로 HttpServletRequest객체에 전달된 파라미터를 읽어와 (getParameterValues)

이전 데이터를 유지하고 다음 스텝을 위해 데이터를 가공합니다. (JSON)

//2.질문입력
if(uri.equals("/kkk3206/ex1_q")) {
	System.out.println("{}"+request.getParameter("question"));
	
	JsonArray sorted = new JsonArray();					//gson 라이브러리 사용
	for (String str : sort(request.getParameterValues("question"))) {	//선택정렬 함수 호출
		sorted.add(str);						//정렬된 질문목록 jsonArray로
	}
	
	System.out.println("jsontArray sorted"+sorted.toString());
	JsonObject jsonObject = new JsonObject();				//전송할 json오브젝트 생성
	jsonObject.add("QuestionSort", sorted);
	out.print(jsonObject);							//디스패처 대신 json 출력
	out.flush();
}

2-2. html페이지는 그대로 유지되므로 처리데이터만을 반환합니다.

HttpServletResponse객체의 PrintWriter out에 Gson라이브러리를 사용해 JSON 형식의 데이터를 반환합니다.







	if(uri.equals("/kkk3206/ex1_q")) {
		System.out.println("{}"+request.getParameter("question"));
		
		JsonArray sorted = new JsonArray();					//gson 라이브러리 사용
		for (String str : sort(request.getParameterValues("question"))) {	//선택정렬 함수 호출
			sorted.add(str);					//정렬된 질문목록 jsonArray로
		}
		
		//********************************DB연동************************************
        try {
            Class.forName("com.mysql.jdbc.Driver");
            conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/testdb?autoReconnect=true&useSSL=false" , "root", "passward");
            stmt = conn.createStatement();
            
            String tb_survey_master = "tb_survey_master";	//마스터테이블명
            String tb_survey_conts = "tb_survey_conts";		//설문테이블명
            
            //마스터테이블 입력
            insertMaster(tb_survey_master, "첫번째설문지");
            for (int i=0;i<request.getParameterValues("question").length;i++) {
            	String survey_que = request.getParameterValues("question")[i];
            	String survey_qno = String.valueOf(i+1);			//1부터 채번
            	String survey_sortno = "0";					//정렬한뒤의 인덱스
            	for(int j=0;j<sorted.size();j++) {
            		if(sorted.get(j).getAsString().equals(survey_que)) {	//정렬된 질문목록과 비교하여 같을때 해당 인덱스 저장
            			survey_sortno = String.valueOf(j+1);
            		}
            	}
            	//설문지테이블 입력
            	insertSurvey(tb_survey_master, tb_survey_conts, survey_qno, survey_sortno, survey_que);
			}
        } catch (SQLException se1) {
            se1.printStackTrace();
        } catch (Exception ex) {
            ex.printStackTrace();
        } finally {
	            try {if (stmt != null)stmt.close();} catch (SQLException se2) {}
	            try {if (conn != null)conn.close();} catch (SQLException se) {se.printStackTrace();}
	        }    
	      //**********************************DB종료***********************************
		
		System.out.println("jsontArray sorted"+sorted.toString());
		JsonObject jsonObject = new JsonObject();		//전송할 json오브젝트 생성
		jsonObject.add("QuestionSort", sorted);
		out.print(jsonObject);					//디스패처 대신 json 출력
		out.flush();
	}

2-3. 데이터베이스가 준비되면 JDBC를 통해 각 테이블에 저장합니다.



[Servlet] 1주차 설문지 서블릿


20일 화요일

1주차에는 별다른 세팅을 하지 않고 dynamic web project로만 진행합니다.

라이브러리는 직접 추가해도 되지만 maven으로 등록했습니다.


목표 - Ajax를 사용하지 않고 Servlet만을 통한 서버 통신원리를 이해







결과물 예시



1.각 문항은 Step단위로 페이지가 갱신되며

이전문항의 입력값<ipnut>은 문자<span>로 유지되어야합니다.

1-2. 자바스크립트에서 정규식을 거쳐 입력값을 제한합니다.

1-3. 입력받은 설문수만큼 두번째 문항에 입력폼을 생성하는 자바스크립트를 구성합니다.


<div class="container">

    
<h1>설문지</h1>
1.설문 문항 수를 입력해주세요.(JS)
<form id="nForm" action="/Survey/Survey" method="post">
	<input id="num" type="text" name="num" value="${param.num}">
	<input type="submit" value="설문 폼 생성">
</form>
<span id="nSpan"></span>

  
<br><br>2.설문내용을 입력해주시기 바랍니다.(Servlet/JSP)
	<c:set var="num" value="${param.num == null ? 0 : param.num}" scope="request" />
<form id="qForm" action="/Survey/Question" method="post">
	<input type="hidden" name="num" value="${param.num}">
	<c:choose>
	        <c:when test="${QuestionList ne null}">
			<c:forEach var="item" items="${QuestionList}" varStatus="status">
			   		<br>&nbsp ${status.count}번 질문 : ${item}
			</c:forEach>
               </c:when>
       <c:otherwise>
		<c:forEach var="q" begin="1" end="${num}" step="1">
				<br>&nbsp ${q}번 질문 : <input type="text" name="question">
		</c:forEach>
		<c:if test="${param.num ne null}">
			<input type="submit" value="설문 생성">
		</c:if>
       </c:otherwise>
	</c:choose>
</form>
<span id="qSpan"></span>


<br><br>3.설문에 대한 답을 입력하세요.(Servlet/JSP)
<form id="aForm" action="/Survey/Answer" method="post">
	<c:choose>
		<c:when test="${AnswerList ne null}">
			<c:forEach var="item" items="${QuestionSort}" varStatus="status">
			   	<br>&nbsp ${status.count}번 질문 : ${item}
			   	<br>&nbsp; &nbsp; &nbsp; &nbsp;답변 : ${AnswerList[status.index]}
			</c:forEach>
       </c:when>
       <c:otherwise>
		<input type="hidden" name="num" value="${param.num}">
		<c:forEach var="item" items="${QuestionSort}" varStatus="status">
		   	<br>&nbsp ${status.count}번 질문 : <label>${item}</label>
			<input id="${status.count}" type="hidden" name="question" value="${QuestionList[status.index]}">
			<br>&nbsp<input type="text" name="answer">
		</c:forEach>
		<c:if test="${QuestionList ne null && AnswerList eq null}">
			<br><input type="submit" value="답안 작성 완료 및 제출">
		</c:if>
       </c:otherwise>
	</c:choose>
</form>
<span id="aSpan"></span>


<br><br>4.평가
	<c:if test="${AnswerList ne null}">
		<c:forEach var="item" items="${AnswerList}" varStatus="status">
		   	<br>&nbsp ${status.count}번 질문 : <label id="q${status.index}">${QuestionSort[status.index]}</label>
		   	<br>&nbsp; &nbsp; &nbsp; &nbsp;답변 : <label id="a${status.index}">${item}</label>
		   	<br>&nbsp; &nbsp; &nbsp; &nbsp;평가1 : 
		   	
		   	<c:choose>
		   		<c:when test="${fn:length(QuestionSort[status.index]) > fn:length(item)}">
			  		설문이 답변보다 <${fn:length(QuestionSort[status.index]) - fn:length(item)}>글자 많습니다 
			   		<br>&nbsp; &nbsp; &nbsp; &nbsp;평가2 : 당신은 지루하셨군요
		   		</c:when>
		   		
		   		<c:when test="${fn:length(QuestionSort[status.index]) < fn:length(item)}">
		   			답안이 설문보다 <${fn:length(item) - fn:length(QuestionSort[status.index])}>글자 많습니다
			   		<br>&nbsp; &nbsp; &nbsp; &nbsp;평가2 : 당신은 현명하십니다
		   		</c:when>
		   			
       			        <c:otherwise>
		   			답안과 설문의 글자수가 일치합니다.
		   			<br>&nbsp; &nbsp; &nbsp; &nbsp;평가2 : 당신은 귀찮거나, 통하셨습니다
       			        </c:otherwise>
		   	</c:choose>
		</c:forEach>
	</c:if>
</div>

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

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

jstl라이브러리의

for문을 사용하여 페이지가 요청될때 전달받은 데이터에 따라 설문 입력폼이 생성되었고

length()로 설문과 응답간의 글자수를 비교하여 평가를 다르게 표현



2.form태그의 sumit 버튼을 누르면 서블릿에서 입력데이터를 처리하도록 url를 매핑해줍니다.



서블릿을 매핑하기 위해서는 


2-2. 프로젝트를 우클릭 한 뒤 Java EE Tools > generate deployment descriptor stub를 클릭하면

WebContent / WEB-INF 에 web.xml이 생성됨 


<servlet>
	<servlet-name>Survey</servlet-name>
	<servlet-class>test.suHwan.SurveyServlet</servlet-class>
</servlet>    <!-- 서블릿을 정의하고 찾아갈 클래스를 등록한다 -->

<servlet-mapping>
	<servlet-name>Survey</servlet-name>
	<url-pattern>/Survey</url-pattern>
</servlet-mapping>
<!-- 서블릿을 요청할 URL을 등록한다. 필요에 따라 여러 주소를 매핑(urlPatterns) -->
<!-- 위 설정을 간소화 하기위해 서블릿 클래스의 선언부에 @WebServlet(urlPatterns={"/ex1","/ex1_q","/ex1_a"})를 사용합니다. -->



이클립스에서 새파일 > Servlet을 선택하면

doGet과 doPost가 정의된 기본적인 서블릿 클래스가 생성됩니다.


String uri에 request.getRequestURI()를 담아 요청된 uri를 분류하여 요청을 수행합니다.





3.HttpServletRequest객체에 전달된 파라미터를 읽어와 (getParameterValues)

이전 데이터를 유지하고 다음 스텝을 위해 데이터를 가공합니다. (setArribute)

private String[] sort(String[] sorted) {	//선택정렬 함수
		
		System.out.println("\nsort기능");		//글자수가 아닌 가나다순으로 정렬됨
		java.util.Arrays.sort(sorted);
		System.out.println(sorted.toString());

		System.out.println("\n선택정렬");	//글자수로 정렬하기 위한 선택정렬
        String temp;//데이터 Swap용 임시 변수
        
        for( int i=0; i < sorted.length-1; i++){
        	System.out.println(i+1+"번째값 "+sorted[i]);
            for (int j=i+1; j<sorted.length; j++){               
            	System.out.println("	비교대상 "+sorted[j]);
                if(sorted[i].length() > sorted[j].length()){
			//오름차순 ; 큰수를 뒤로, data[i] > data[j]

                    //데이터 값 체인지
                    temp = sorted[i];
                    sorted[i] = sorted[j];
                    sorted[j] = temp;
                }
            }
        }
		System.out.println(sorted.toString());
		
		return sorted;
	}
3-2. 두번째 문항에서 입력받은 질문목록은 글자수를 기준으로 오름차순 정렬해줍니다.
Array.Sort를 사용하면 abc/가나다 순 정렬되므로 임의의 정렬 함수를 만듭니다.

3-3. View를 반환하는 방법으로는

HttpServletResponse객체의 PrintWriter out으로 처리데이터만을 반환할 수도 있지만

html페이지를 출력해야 하므로 RequestDispatcher를 사용합니다.

Attribute에 담은 데이터를 유지하기위해 redirect 대신 requestDispatcher.forward



[Servlet/jQuery] 설문지 22-23일 (작성중)



19일

교육계획 OJT

개발환경 구성

 다이나믹 웹 프로젝트 생성 

 서버 확인 (1) 

 JSP 페이지 생성 

 서블릿 생성 (패키지, 클래스)

 서블릿 컨테이너 설정 (web.xml) 

 서비스 확인 (2)


[Servlet/JavaScript] 설문지 20-21일


20일

설문지 서블릿 

 서버와 웹페이지 통신 구현 (HttpRquest)

 자바 Map, 배열 활용

 EL(Expression Language), JSTL(Jsp Standard Tag Library) 활용

 자바스크립트 활용 (정규식, jQuery 활용)

 Byte 개념 이해

 유효성 검증

작업내용

Array Sort기능



21일

작업내용

입력 배열 - 순서유지

반환 배열 - 글자수 오름차순 정렬

질문 정규식 체크



[Servlet/jQuery] 설문지 22-23일


22일

작업내용

퍼블리싱(디자인 적용)

심화 - 오류 입력칸 포커싱



23일

작업내용

DB연동

심화 - 초기화 or 갯수수정기능

질문 - 로거는 다음주에





20일 화요일

1주차에는 별다른 세팅을 하지 않고 dynamic web project로만 진행합니다.

라이브러리는 직접 추가해도 되지만 maven으로 등록했습니다.


목표 - Ajax를 사용하지 않고 Servlet만을 통한 서버 통신원리를 이해


[Servlet/JavaScript] 설문지 20-21일







22일 목요일

데이터 가공 서블릿에 대한 이해를 기반으로 퍼블리싱 작업을 진행합니다.

이후 설문지와 응답이 입력될 데이터베이스를 계획합니다.


목표 - 퍼블리셔를 통해 전달받은 html과 css를 적용하기, DB 세팅하고 table 계획하기

[Servlet/jQuery] 설문지 22-23일


[4-1] 다음의 문장들을 조건식으로 표현하라.

1. int 형 변수 x 가 10 보다 크고 20 보다 작을 때 true인 조건식

10 < x && x < 20

2. char 형 변수 ch 가 공백이나 탭이 아닐 때 true인 조건식

ch != ' ' || ch != "\t"

3. char 형 변수 ch 가 ‘x' 또는 ’X' 일 때 true인 조건식

ch == 'x' || ch == 'X'

4. char 형 변수 ch가 숫자(‘0’~‘9’)일 때 인 조건식 true

'0' <= ch && ch <='9'

5. char 형 변수 ch 가 영문자 (대문자 또는 소문자 일 때) true인 조건식

('a' <= ch && ch <= 'z') || ('A' <= ch && ch <= 'Z')

6. int  형 변수 year 가 400 으로 나눠떨어지거나  또는 4로 나눠떨어지고 100으로 나눠떨어지지

않을 때 true인 조건식

year%400 == 0 || year%4 == 0 || year%100 != 0 

7. boolean  형 변수 powerOn 가 false 일 때 true인 조건식

powerOn == false

8.  문자열 참조변수 str이 “yes”일 때 true인 조건식

str.equals("yes")



[4-2] 1부터 20 까지의 정수 중에서 2 또는 3의 배수가 아닌 수의 총합을 구하시오


class Exercise4_2 {

	public static void main(String[] args) {

		int sum = 0;

		for(int i=1; i <=20; i++) {

			if(i%2!=0 && i%3!=0) //i 2 3 sum i . 가 또는 의 배수가 아닐 때만 에 를 더한다

				sum +=i;

		}

		System.out.println("sum="+sum);

	} // main

}


[4-3] 1+(1+2)+(1+2+3)+(1+2+3+4)+...+(1+2+3+...+10) . 의 결과를 계산하시오


class Exercise4_3 {

	public static void main(String[] args) {

		int sum = 0;

		int total = 0;

		for(int i=1; i <=10; i++) {

			sum +=i;

			total += sum;

		}

		System.out.println("total="+total);

	} // main

}


[4-4] 1+(-2)+3+(-4)+...과 같은 식으로 계속 더해나갔을 때 몇까지 더해야 총합이 100 이상이 되는지 구하시오


class Exercise4_4 {



	public static void main(String[] args) {

		int op = 1;

		int i=0;

		for(int sum=0; sum<100;) {

			++i;

			sum +=i*op;

			op = -op;

			System.out.println("i="+i);

			System.out.println("Sum="+sum);

		}

		System.out.println("최종 i="+i);

		

		int sum = 0;

		i = 0;

		op = 1;

		while (sum<100) {

			++i;

			sum += i*op;

			op = -op;

		}

		System.out.println("최종 i="+i);

	} // main

}


[4-5] 다음의 for문을 while문으로 변경하시오

[연습문제]  /ch4/Exercise4_5.java


class Exercise4_5 {

	public static void main(String[] args) {

		for(int i=0; i<=10; i++) {

			for(int j=0; j<=i; j++)

				System.out.print("*");

			System.out.println();

		}

		

		int i = 0;

		while (i<=10) {

			++i;

			int j = 0;

			System.out.println();

			while (j<i) {

			j++;

			system.out.print("*");

		}

		System.out.println("최종 i="+i);

	} // main

}


[4-6] 두 개의 주사위를 던졌을 때, 눈의 합이 6이 되는 모든 경우의 수를 출력하는 프로그램을 작성하시오.

<pre class="brush: java">

class Exercise4_6 {

public static void main(String[] args) {

/* int ir = (int)(Math.random()*6+1);

int jr = (int)(Math.random()*6+1);*/

for (int i = 0; i < 7; i++) {

for (int j = 0; j < 6; j++) {

if (i+j==6) {

System.out.println(i+"+"+j+"=6");

}

}

}

}

}

</pre>



[4-7] Math.random() 1 6 value 을 이용해서 부터 사이의 임의의 정수를 변수 에 저장하는

코드를 완성하라 에 알맞은 코드를 넣으시오 . (1) .

[연습문제]  /ch4/Exercise4_7.java

<pre class="brush: java">

class Exercise4_7 {

public static void main(String[] args) {

int value = (int)(Math.random()*7);

System.out.println("value:"+value);

}

}

</pre>




[4-8] 방정식 2x+4y=10의 모든 해를 구하시오 단 x와 y는 정수이고 각각의 범위는 0<=x<=10, 0<=y<=10이다

<pre class="brush: java">

class Exercise4_8 {

public static void main(String[] args) {

for (int x = 0; x < 11; x++) {

for (int y = 0; y < 11; y++) {

if (2*x+4*y==10) {

System.out.println("x="+x+", y="+y);

System.out.println("2*"+x+" + 4*"+y+" = 10");

}

}

}

}

}

//[실행결과] 

//x=1, y=2

//x=3, y=1

//x=5, y=0

</pre>



[4-9] 숫자로 이루어진 문자열 str이 있을 때 각 자리의 합을 더한 결과를 출력하는 코드를 완성하라

만일 문자열이 "12345"라면 ‘1+2+3+4+5’의 결과인 15를 출력이 출력되어야 한다 에 알맞은 코드를 넣으시오

[Hint] String 클래스의 charAt(int i)을 사용

[연습문제]  /ch4/Exercise4_9.java


<pre class="brush: java">

class Exercise4_9 {

public static void main(String[] args) {

String str = "12345";

int sum = 0;

for(int i=0; i < str.length(); i++) {

sum += (int)str.charAt(i)-48;

System.out.println((int)str.charAt(i)-48);

System.out.println(sum);

}

System.out.println("sum="+sum);

}

}

//[실행결과] 15

</pre>


[4-10] int 타입의 변수 num이 있을 때 각 자리의 합을 더한 결과를 출력하는 코드를 완성하라 만일 변수 num의 값이

12345라면 1+2+3+4+5’의 결과인 15를 출력하라

[주의]  문자열로 변환하지 말고 숫자로만 처리해야 한다.

[연습문제] /ch4/Exercise4_10.java


<pre class="brush: java">

class Exercise4_10 {

public static void main(String[] args) {

int num = 12345;

int sum = 0;

/*

(1) . 알맞은 코드를 넣어 완성하시오

*/

while (num>0) {

sum += num%10;

System.out.println(sum);

num /= 10;

System.out.println(num);

}

System.out.println("sum="+sum);

}

}

//[실행결과] 15

</pre>


[4-11] 피보나치(Fibonnaci) 수열 (數列)은 앞을 두 수를 더해서 다음 수를 만들어 나가는 수열이다

예를 들어 앞의 두 수가 1과 1이라면 그 다음 수는 2가 되고 그 다음 수는 1과 2를 더해서 3이 되어서 

1,1,2,3,5,8,13,21,...과 같은 식으로 진행된다

1과 1부터 시작하는 피보나치수열의 10번째 수는 무엇인지 계산하는 프로그램을 완성하시오

[연습문제]  /ch4/Exercise4_11.java

<pre class="brush: java">

class Exercise4_11 {

public static void main(String[] args) {

// Fibonnaci 1, 1 . 수열의 시작의 첫 두 숫자를 로 한다

int num1 = 1;

int num2 = 1;

int num3 = 0; // 세번째 값

System.out.print(num1+","+num2);

for (int i = 3 ; i < 11 ; i++ ) {

num3 = num1+num2;

System.out.print(","+num3);

num1 = num2;

num2 = num3;

}

} // end of main

} // end of class

//[실행결과]

//1,1,2,3,5,8,13,21,34,55

</pre>



[4-12] 구구단의 일부분을 다음과 같이 출력하시오.

*/



//[실행결과] 

//2*1=2 3*1=3 4*1=4

//2*2=4 3*2=6 4*2=8

//2*3=6 3*3=9 4*3=12

//5*1=5 6*1=6 7*1=7

//5*2=10 6*2=12 7*2=14

//5*3=15 6*3=18 7*3=21

//8*1=8 9*1=9

//8*2=16 9*2=18

//8*3=24 9*3=27


/*

[4-13] 다음은 주어진 문자열 이 숫자인지를 판별하는 프로그램이다 에 알맞 (value) . (1)

은 코드를 넣어서 프로그램을 완성하시오.

[연습문제]  /ch4/Exercise4_13.java


class Exercise4_13{

	public static void main(String[] args){

		String value = "12o34";

		char ch = ' ';

		boolean isNumber = true;

		// charAt(int i) 반복문과 를 이용해서 문자열의 문자를

		// . 하나씩 읽어서 검사한다

		for(int i=0; i < value.length() ;i++) {

			ch = value.charAt(i);

			System.out.println(ch);

			if(!('0'<=ch && ch<='9')) {

			isNumber = false;

			break;

			}

		}

		if (isNumber) {

			System.out.println(value+" 는 숫자입니다."); 

		} else {

			System.out.println(value+" 는 숫자가 아닙니다."); 

		}

	} // end of main

} // end of class

//[실행결과] 

//12o34 . 는 숫자가 아닙니다


[4-14] 다음은 숫자맞추기 게임을 작성한 것이다 과 사이의 값을 반복적으로 입력 . 1 100

해서 컴퓨터가 생각한 값을 맞추면 게임이 끝난다 사용자가 값을 입력하면 컴퓨터는 자 . ,

신이 생각한 값과 비교해서 결과를 알려준다 사용자가 컴퓨터가 생각한 숫자를 맞추면 .

게임이 끝나고 몇 번 만에 숫자를 맞췄는지 알려준다 에 알맞은 코드를 넣어 프 . (1)~(2)

로그램을 완성하시오.

[연습문제]  /ch4/Exercise4_14.java


class Exercise4_14{

	public static void main(String[] args){

		// 1~100 answer . 사이의 임의의 값을 얻어서 에 저장한다

		int answer = (int)(Math.random()*100+1);

		int input = 0; // 사용자입력을 저장할 공간

		int count = 0; // 시도횟수를 세기위한 변수

		// Scanner 화면으로 부터 사용자입력을 받기 위해서 클래스 사용

		java.util.Scanner s = new java.util.Scanner(System.in);

		do {

			count++;

			System.out.print("1 과 100 사이의 값을 입력하세요 :"); 

			input = s.nextInt(); // input . 입력받은 값을 변수 에 저장한다

			if (inputanswer){

				System.out.println(count+"번째, 입력값이 답보다 큽니다");

			}else {

				System.out.println(count+"번째, 정답입니다");

				break;

			}

		} while(true); // 무한반복문

	} // end of main

} // end of class HighLow

//[실행결과] 

//1 100 :50 과 사이의 값을 입력하세요

//더 큰 수를 입력하세요.

//1 100 :75 과 사이의 값을 입력하세요

//더 큰 수를 입력하세요.

//1 100 :87 과 사이의 값을 입력하세요

//더 작은 수를 입력하세요.

//1 100 :80 과 사이의 값을 입력하세요

//더 작은 수를 입력하세요.

//1 100 :77 과 사이의 값을 입력하세요

//더 작은 수를 입력하세요.

//1 100 :76 과 사이의 값을 입력하세요

//맞췄습니다.

//시도횟수는 번입니다 6 .



[4-15] 다음은 회문수를 구하는 프로그램이다 회문수 란 숫자를 거꾸로 읽 . (palindrome) ,

어도 앞으로 읽는 것과 같은 수를 말한다 예를 들면 이나 같은 수를 말한 . ‘12321’ ‘13531’

다 에 알맞은 코드를 넣어서 프로그램을 완성하시오 . (1) .

[Hint] 나머지 연산자를 이용하시오.

[연습문제]  /ch4/Exercise4_15.java


class Exercise4_15{

	public static void main(String[] args){

		int number = 12321;

		int tmp = number;	// 거꾸로 변환하기 위해 정의한 함수 tmp를 10으로 나눠

		int result =0;		// number 변수 를 거꾸로 변환해서 담을 변수

		while(tmp !=0) {

			result = result*10 + tmp % 10; //거꾸로 변환된 수는 10씩 키우고 뒤에 가져온 수 붙임

			System.out.println("result"+result);

			tmp /= 10;

			System.out.println("tmp"+tmp);

		}

		if(number == result)

			System.out.println( number + " 는 회문수 입니다."); 

		else

			System.out.println( number + " 는 회문수가 아닙니다."); 

	} // main

}

//[실행결과] 

//12321



font-family:가장선호, 2순위, "공백이 있는 폰트이름";

font-style: italic;

font관련 스타일에서
글자의 색color
글자의 크기font-size
글자체font-family
글자의 기울임 설정font-style
글자의 볼드체 여부font-weight



text-decoration: overline; /* 윗줄 */ 

text-align: right; /* 오른쪽정렬 */

text-decoration: line-through; /* 취소선 */

text-align: center; /* 가운데정렬 */

text-decoration: underline; /* 밑줄 */

text-align: left /* 왼쪽정렬 */

text-transform: uppercase; /* 대문자로 변환 */

letter-spacing: 5px; /* 자간 */

text-transform: lowercase; /* 소문자로 변환 */

line-height: 50pt; /* 줄간격 */

text-transform: capitalize; /* 첫글자 대문자화 */

text-indent: 40pt; /* 들여쓰기 */

font-size: 30px;

text-shadow: 15px 15px 5px red;





box모델에 margin값과 padding이 적용되는 순서

margin : 값1 값2 값3 값4; ==>위, 오른쪽, 아래, 왼쪽

margin : 값1 값2 값3; ==>위, 좌우, 아래

margin : 값1 값2; ==>상하, 좌우

margin : 값1; ==>4방향 모두

인접한 객체들의 margin값은 대체로 교집합 형태로 적용된다.

박스모델(블록요소) 자체를 가운데 정렬하려면 margin의 좌우값을 auto로

margin: 0px auto;

margin-left:auto; margin-right:auto;


border: 5px solid blue;

border-radius:25px; /* 둥근 테두리선 */

text-align: center; /* 가로정렬 */

vertical-align: middle; /* 세로정렬 */

display: table-cell; /* 박스모델의 성질을 변경한다. */

box-shadow:10px 15px 5px gray;




배경(Background)

배경이미지의 상대경로는 내부 css나 inline CSS같은 경우는 html문서를 기준으로 기술

외부css의 경우  css파일이 저장된 위치를 기준으로 경로를 지정하면 된다

-배경이미지의 반복 여부 :

background-repeat속성에 repeat(상하좌우반복, 기본값)

norepeat(반복하지않음)

repeat-x, repeat-y(x축 또는 y축 방향으로만 반복)

-background-position

=> top, center, bottom(상하)

=> left, center, right(좌우)

=> 숫자값

-background-attachment

=> scroll (배경과 내용이 같이 스크롤 된다.)

=> fixed (배경은 스크롤 되지않고 내용만 스크롤 된다.)


fieldset ==> 입력요소들을 그룹으로 묶어서 표현할 때 사용

legend ==> fieldset의 제목을 지정할 때 사용

입력요소의 새로운 속성

placeholder ==> 입력 힌트를 희미하게 표시

autofocus ==> 페이지가 로딩되면 자동으로 해당 입력폼을 활성화시킨다


checkbox나 radio객체와 '문자열'과 연결하려면 문자열을

label태그로 감싸고, checkbox나 radio객체에는 id속성을 설정한다.

그리고 label태그에 for속성과 연결하려는 id속성값을 대입한다.



내부 CSS의 기본 형식

셀렉터 { 스타일 속성:값; 스타일 속성2:값2;}

-셀렉터 ==> 문서에서 스타일을 적용할 대상을 선택하는 명령

셀렉터의 종류

1. * : 모든 엘리먼트에 스타일을 적용한다.

* { font-size:15pt; color:green;}

2. 태그명 { 스타일 정의 }

==>지정한 태그명이 해당되는 곳에 스타일을 적용한다.

p { font-size:18pt; color:green;}

div { color:red; font-size:12pt; font-family:궁서체;}

3. 태그명.class속성값 {스타일 정의}

==>지정한 태그명에 해당하는 것들 중 class속성값이 일치하는 곳에 스타일을 적용한다.

p.test { font-size:18pt; color:green; }

4. .class속성값 {스타일 정의}

==> 모든 태그들 중에서 class의 속성값이 일치하는 곳에 스타일을 적용한다.

.test { font-size:18pt; color:green; }

5.태그명#id속성값 {스타일정의}

==>지정한 태그명들 중에서 id속성값이 일치하는 곳에 스타일을 적용한다.

p#myid { font-size:18pt; color:green; text-decoration: underline;}

6.#id속성값{스타일 정의}

==>모든 태그들 중에서 id속성값이 일치하는 곳에 적용한다. 

#identify { color:red; font-size:12pt; font-family:궁서체; }

7.셀렉터1, 셀렉터2, 셀렉터3{스타일정의}

==> 각각의 셀렉터에 해당하는 모든 곳에 스타일을 적용한다.

8.셀렉터1 셀렉터2 {스타일정의}

==>셀렉터1의 자손 중에서 셀렉터2에 해당하는 모든 곳에 스타일을 적용한다.

div span { font-size:18pt; color:green; text-decoration: underline;}

9.셀렉터1>셀렉터 {스타일 정의}

==>셀렉터1의 자식들 중에서 셀렉터2에 해당하는 모든 곳에 스타일을 적용한다.

10.셀렉터1 + 셀렉터2 {스타일정의}

==>셀렉터1의 바로 다음에 오는 형제중 셀렉터2에 해당되는 곳에 스타일을 적용한다.

11.셀렉터1 ~ 셀렉터2{스타일정의}

==>셀렉터1의 뒤에 오는 형제들 중에서 셀렉터2에 해당되는 모든 곳에 스타일을 적용한다.    



-의사클래스 ==> 클래스 정의된 것처럼 간주되어 처리되는 것

형식) 셀렉터:의사클래스명{스타일 정의}

a:link

==>방문한 내역이 없는 링크걸린 글자에 스타일 적용

a:visited

==>방문한 내역이 있는 링크걸린 글자에 스타일 적용

셀렉터:hover

==>셀렉터에 해당하는 곳에 마우스 커서가 놓였을 때에 스타일을 적용한다

셀렉터:active

==>셀렉터에 해당하는 곳에서 클릭이 발생하는 순간에 스타일을 적용한다.

a { border:1px solid gray;}

a:link { font-size:20pt; color:red;}

a:visited { font-size:30pt; color:green;}

a:hover { background-color: cyan}

a:active { background-color: pink}


소리재생 ==> audio태그를 사용한다.

형식) <audio src="경로명/파일명.확장자"></audio>

속성) controls ==> 음악을 재생, 정지, 볼륨 조절 등을 할 수 있는

객체를 나타낸다.

autoplay ==> 자동 재생

loop ==> 반복 재생

muted ==> 무음 처리(볼륨 0)

volume ==> 볼륨값을 조절한다(0~1사이의 값)

preload ==> 오디오 파일을 미리 다운 받아놓는다.

지원파일) mp3, wav, ogg


동영상 재생 ==> video태그를 이용하여 재생한다.

형식) <video src="경로명/파일명.확장자"></video>

속성) controls

autoplay

loop

muted

volume

preload

width ==> 재생 화면의 너비

height ==> 재생 화면의 높이

poster ==> 재생하기 전의 재생 화면에 나타날 그림을 설정한다.

지원파일) mp4, ogv, webm


source태그 ==> audio나 video태그를 구성할 때 재생할 파일들을 설정하는 태그로 source태그가

여러개 있으면 위에서부터 차례로 재생할 수 있는지 여부를 검사하여 재생할 수 있는 파일이

있으면 그 파일을 재생한다.

(호환성을 높이기 위해 사용한다.)

(audio태그나 video태그의 하위태그로 사용한다.)

div와 span

1.블록요소

==> 1) 줄바꿈기능이 있다.

2) 영역의 크기를 지정할 수 있다.

3) 영역의 크기를 지정하지 않는 한 줄을 전부 차지한다.

2.인라인요소

==> 1) 줄바꿈기능이 없다.

2) 영역의 크기는 내용(contents)의 크기와 같다.

(즉, 임의로 크기를 지정할 수 없다.)


iframe태그 ==> 한 문서의 본문 영역에 다른 문서를 넣을 수 있는 태그

형식)

속성) width ==> 프레임 영역의 너비

height ==> 프레임 영역

name ==> 프레임의 이름


a태그의 target속성에 설정할 수 있는 값

1._self : 기본값으로 현재프레임 영역에 결과가 나타난다

2._blank : 새창 또는 새탭에 결과가 나타난다.

3._parent : 부모프레임 영역에 결과가 나타난다.

4._top : 무조건 현재창의 전체영역에 결과가 나타난다.

5.프레임명 : 해당 프레임명에 해당하는 프레임영역이 없으면 _blank기능



form태그 ==> 사용자가 form태그의 하위태그인 입력요소들을

이용하여 작성한 데이터들을 서버로 전송하는 담당하는 태그이다.

형식) <form name="폼이름" action="처리할 문서명" method="전송방식" enctype="인코딩방식">

입력 요소들

</form>

*처리할 문서명 ==> 폼에서 보내온 데이터들을 서버단에서 받아서 처리해 줄 문서를 지정한다.

*전송방식 ==> get 또는 post 방식이 있다.

1.get방식 ==> method속성이 생략되면 기본값이 된다.

==> url주소 뒤에 데이터들을 붙여서 전송하는 방식

(데이터가 노출되고 적은 양의 데이터를 전송할 때 주로 사용된다.)

2.post방식 ==> http프로토콜의 body영역에 데이터를 넣어서 전송하는 방식

(데이터의 양이 많거나 데이터를 감춰서 전송할 때 주로 사용된다.)

*인코딩방식 ==> 보통의 데이터를 전송할 때에는 생략한다.

인코딩방식을 생략하면 기본값으로 application/x-www-form-urlencoded

(데이터를 문자로 전송한다)

==> 파일을 전송할 경우 : 'multipart/form-data'로 설정한다.

=============================================================================

*입력 요소에 사용되는 태그들

input태그, textarea태그, select태그, button태그


/*

[3-1] 다음 연산의 결과를 적으시오.

[연습문제] /ch3/Exercise3_1.java

*/


class Exercise3_1 {

	public static void main(String[] args) {

		int x = 2;

		int y = 5;

		char c = 'A'; // 'A' 65 의 문자코드는

		System.out.println(1 + x << 33);	//덧셈먼저(3) 시프트(int 32bit)는 2의n제곱* 

		System.out.println(y >= 5 || x < 0 && x > 2);//true

		System.out.println(y += 10 - x++);	//y = 5+10-2 = 13

		System.out.println(x+=2);			//x = 3+2

		System.out.println( !('A' <= c && c <='Z') );//!(true&&true) 대문자인지 판별

		System.out.println('C'-c);	//c는 'A'를 담고있고 int로 표현하면 67-65 = 2

		System.out.println('5'-'0');//0에서 5까지의 값 차이

		System.out.println(c+1);	//c에 저장된 'A'(65)의 값을 불러온후 1을 더함

		System.out.println(++c);	//값 증가 후에 명령 실행

		System.out.println(c++);	//명령 실행 후에 값 증가

		System.out.println(c);		//윗줄에서 증가된 값이 보여지게 됨

	}

}

/*

[3-2] 아래의 코드는 사과를 담는데 필요한 바구니 버켓 의 수를 구하는 코드이다 만일 사과의 수가 123개이고

하나의 바구니에는 10개의 사과를 담을 수 있다면 13개의 바구니가 필요할 것이다

[연습문제] /ch3/Exercise3_2.java

*/


class Exercise3_2 {

	public static void main(String[] args) {

		int numOfApples = 123; // 사과의 개수

		int sizeOfBucket = 10; // ( ) 바구니의 크기 바구니에 담을 수 있는 사과의 개수

		int numOfBucket = ( numOfApples/sizeOfBucket+1 ); // 모든 사과를 담는데 필요한 바구니의 수

		System.out.println("필요한 바구니의 수 :"+numOfBucket);

	}

}

//[실행결과] 13


/*

[3-3] 아래는 변수 의 값에 따라 num ‘양수’, ‘음수’, ‘0’을 출력하는 코드이다 삼항연산자로 알맞은 코드

[Hint] 삼항 연산자를 두 번 사용하라.

[연습문제] /ch3/Exercise3_3.java

*/

class Exercise3_3 {

	public static void main(String[] args) {

		int num = 10;

		System.out.println(num < 0 ? "음수" : (num > 0 ? "양수" : 0));

	}//조건 연산자?와 :이용, 연산의 우선순위를 정리하기 위해 괄호 사용 

}

//[실행결과] 양수


/*

[3-4] 아래는 변수 num의 값 중에서 백의 자리 이하를 버리는 코드이다 만일 변수 num의 값이 ‘456’이라면

‘400’이 되고, ‘111’이라면 ‘100’이 된다 에 알맞은 코드를 넣으시오.

[연습문제] /ch3/Exercise3_4.java

*/


class Exercise3_4 {

	public static void main(String[] args) {

		int num = 456;

		System.out.println(num/100*100);

	}

}

//[실행결과] 400


/*

[3-5] 아래는 변수 의 값 중에서 일의 자리를 1로 바꾸는 코드이다 만일 변수 num의 값이 333이라면 331이 되고

777이라면 771이 된다 에 알맞은 코드를 넣으시오

[ ] 연습문제 /ch3/Exercise3_5.java

*/



/*

[3-6] 아래는 변수 num의 값보다 크면서도 가장 가까운 10의 배수에서 변수 num의 값을 뺀 나머지를 구하는 코드이다

예를 들어 24의 크면서도 가장 가까운 10의 배수는 30이다 19의 경우 20이고 81의 경우 90이 된다 30에서 24를 뺀

나머지는 6이기 때문에 변수 num의 값이 24라면 6을 결과로 얻어야 한다 에 알맞은 코드를 넣으시오

[Hint] 나머지 연산자를 사용하라.

[연습문제] /ch3/Exercise3_6.java

*/

class Exercise3_6 {

	public static void main(String[] args) {

		int num = 24;

		System.out.println(10 - num%10);

	}

}

//[실행결과]6



/*

[3-7] 아래는 화씨(Fahrenheit)를 섭씨(Celcius)로 변환하는 코드이다 변환공식이

'C =5/9 ×(F - 32)'라고 할 때 알맞은 코드를 넣으시오 단 변환 결과값은 소수점 셋째자리에서 반올림해야한다

(Math.round()를 사용하지 않고 처리할 것)

[연습문제] /ch3/Exercise3_7.java

*/

class Exercise3_7 {

	public static void main(String[] args) {

		int fahrenheit = 100;

		float celcius = 5/9F *(fahrenheit -32);

		System.out.println("Fahrenheit:"+fahrenheit);

		System.out.println("Celcius:"+((int)(celcius*100+0.5)/100F));

	}

}

//[실행결과]	Fahrenheit:100

//			Celcius:37.78



/*

[3-8] 아래 코드의 문제점을 수정해서 실행결과와 같은 결과를 얻도록 하시오.

[ 연습문제 ]/ch3/Exercise3_8.java

*/

class Exercise3_8 {

	public static void main(String[] args) {
		byte a = 10;
		byte b = 20;
		byte c = (byte) (a + b);	//jvm에서 연산을 위해 자동으로 int 형변환, 다시 byte로
		
		char ch = 'A';
		ch = (char) (ch + 2);		//jvm에서 연산을 위해 자동으로 int 형변환, 다시 char로
		
		float f = 3F / 2;			//적어도 하나는 F
		long l = 3000*3000*3000L;	//적어도 하나는 L
		
		float f2 = 0.1f;
		double d = 0.1;
		
		boolean result = (float)d==f2;		//유효자리수가 큰 double은 오차가 커질 수 있어 float으로
		
		System.out.println("c="+c);
		System.out.println("ch="+ch);
		System.out.println("f="+f);
		System.out.println("l="+l);
		System.out.println("result="+result);
	}

}

//[실행결과]

//c=30

//ch=C

//f=1.5

//l=27000000000

//result=true



/*

[3-9] 다음은 문자형 변수 ch가 영문자 (대문자 또는 소문자)이거나 숫자일 때만 변수  b의 값이 true가 되도록

[연습문제] /ch3/Exercise3_9.java

*/


class Exercise3_9 {

	public static void main(String[] args) {

		char ch = 'z';		//char은 ''로 표시, 논리연산자 ||이용

		boolean b = ('A' <= ch && ch <= 'Z' || 'a' <= ch && ch <= 'z' ||

				'0' <= ch && ch <= '9');

		System.out.println(b);

	}

}

//[실행결과]	true


/*

[3-10] 다음은 대문자를 소문자로 변경하는 코드인데 문자 ch에 저장된 문자가 대문자인 경우에만 소문자로 변경한다

문자코드는 소문자가 대문자보다 32만큼 더 크다 예를 들어 'A‘의 코드는 65이고 ’a'의 코드는 97이다

[연습문제] /ch3/Exercise3_10.java

*/

class Exercise3_10 {

	public static void main(String[] args) {

		char ch = 'A';	//대문자인지 판별한 뒤에 32만큼 합한다, 계산은 int로 이루어지기 때문에 변환

		char lowerCase = ( 'A' <= ch && ch <= 'Z' ) ? (char)(ch+32) : ch;

		System.out.println("ch:"+ch);

		System.out.println("ch to lowerCase:"+lowerCase);

	}

}

//[실행결과]

//	ch:A

//	ch to lowerCase:a







'먼지 낀 책장사이 > Java' 카테고리의 다른 글

4장 조건문과 반복문  (0) 2017.08.04
자바의 정석 연습문제 2장 변수  (0) 2017.07.25

anchor태그를 이용한 페이지 탐색

책갈피 기능 ==> 같은 문서 내에서 문서의 특정한 위치로

  빠르게 이동하는 기능

  (a태그를 이용하여 책갈피 기능을 구현할 수 있다.)

  <a href="0726bookmark.html#top">처음 위치로</a>



경로 : 어떤 특정한 파일이 있는 위치를 나타내는 표식

현재 작업중인 폴더 : .

상위폴더 (부모폴더) : ..

하위폴더 (자식폴더) : 폴더명

최상위   (루트폴더) : /

경로를 나타내는 방법

1. 절대경로 : 루트를 기준으로 찾아가는 경로

/로 시작한다.

2. 상대경로 : 현재폴더를 기준으로 찾아가는 경로

./로 시작하는데 ./은 생략가능

예) FF폴더에 있는 'tf.jpg'파일을 나타내는 경로는?

절대경로 /BB/FF/tf.jpg

상대경로 ./../FF/tf.jpg

예) DD폴더에 있는 'td.png'파일을 나타내는 경로는?

절대경로 /AA/DD/td.png

상대경로 ./../../AA/DD/td.png


셀<td><t>

테이블은 기본적으로 선이 보이지 않음, border속성 1을 추가해야 나타난다.

style 속성 table에 width와 height를 설정하거나

tr에 height, td에 width를 설정할 수 있다.

th태그의 특징 안의 글자가 진하고 가운데 정렬이 된다.

각 컬럼(열)의 제목을 나타낼 때 주로 사용한다.

표의 제목의 위치 지정하기

caption-side 표의 위쪽 또는 아래쪽(bottom)으로 설정

text-align 가로 방향의 정렬을 설정한다.

left, center, right

<tr>,<th>,<td>태그에서 데이터를 정렬하는 스타일 명령

1.text-align : 데이터를 가로방향으로 정렬한다.

left, center, right

2.vertical-align: 데이터들을 세로방향으로 정렬한다.

top, middle, bottom

테이블에서 border-spacing은 cell과 cell사이의 간격을 말한다.

border-collapse은 선을 합친다.

collapse : 합치기

separate : 분리하기