코드일기장

[JSP] forward, include 액션 태그

codeStudy123 — Thu, 4 Aug 2022 16:17:14 +0900

forward 액션 태그

forward 액션 태그는 현재 JSP 페이지에서 다른 페이지로 이동하는 태그이다. 현재 JSP 페이지에서 forward 액션 태그를 만나면 그전까지 출력 버퍼에 저장되어 있던 내용을 모두 삭제한다. 그리고 설정된 forward 액션 태그의 page 속성 값의 설정 페이지로 프로그램의 제어가 이동된다.

<jsp:forward page="파일명"/>  <<---- XML 형식
<jsp:forward page="파일명"></jsp:forward>  <<---- HTML 형식

액션 태그의 형식이다. 액션 태그는 반드시 끝나는 태그가 존재해야 한다.

page 속성 값은 현재 JSP 페이지에서 이동할 페이지의 외부 파일명이다. 외부 파일이 현재 JSP 파일과 같은 디랙터리에 존재하면 파일명만 설정하고 다른 디렉터리에 존재하면 URL(또는 상대 경로)을 설정해야 한다.

다음은 forward 예제 코드이다.

[first.jsp]

<%@ page contentType="text/html"; charset="utf-8"%>
<html>
<head>
<title>JSP forward 연습</title>
</head>

<body>
	<h3>현재 페이지는 first.jsp입니다.</h3>
    <jsp:forward page="second.jsp"/>
    <p>
    	=====first.jsp 페이지=====
    </p>
</body>

</html>

[second.jsp]

<%@ page contentType="text/html"; charset="utf-8"%>
<html>
<head>
	<title>second.jsp 파일입니다.</title>
</head>
<body>
	<h3>이 파일은 second.jsp 입니다.</h3>
    Today is : <%=new java.util.Date()%>
</body>
</html>

first.jsp 파일 실행 결과

웹 브라우저 실행 결과를 보면 브라우저가 요청한 first.jsp 파일 내용은 존재하지 않는다. seond.jsp 파일 내용만 존재한다. 하지만 웹 브라우저의 주소 경로는 first.jsp이다. first.jsp가 forward 액션 태그를 만나 first.jsp의 출력 버퍼 내용을 모두 삭제하여 내용이 존재하지 않는 것이다.

forward 액션 태그의 주의점은 다음과 같다.

웹 서버는 forward 액션 태그를 수행할 때 출력 버퍼를 지우므로 현재 페이지에서 forward 액션 태그가 선언된 지점 이전 HTML 코드는 손실된다.

include 액션 태그

include 액션 태그는 include 디렉티브 태그와 기능이 매우 비슷하다. 사용법도 비슷하다. 현재 JSP 페이지에서 특정 영역에 외부 파일의 내용을 포함시키는 것은 디렉티브나 액션이나 동일하게 적용된다.

<jsp:include page="파일명"  flush="false"/>

page 속성 값으로 외부 파일을 설정한다. 같이 디렉터리의 외부 파일이면 파일명만, 그렇지 않다면 전체 경로를 적어준다.

flush 속성 값은 디폴트가 false이다. true로 속성 값을 지정하면 외부 파일로 제어가 이동할 때 현재 JSP 페이지가 지금까지 출력 버퍼에 저장된 내용을 웹 브라우저에 출력하고 출력 버퍼를 비운다.

일반적으로 flush 속성 값은 false로 지정하는 것이 좋다. true로 지정하면 출력 버퍼를 웹 브라우저에 전송하는데 이때 헤더 정보도 같이 전송된다. 웹 브라우저에 전송되고 나면 헤더 정보를 추가해도 결과에 반영되지 않는다.

include 액션 태그와 디렉티브 태그는 외부 파일을 포함시킨다는 점이 비슷하지만 포함된 외부 파일이 실행된 후 현재 JSP 페이지로 제어를 반환한다는 것이 가장 큰 차이점이다. 또한 JSP 컨테이너가 include 액션 태그를 만나면 include 액션 태그에 설정된 외부 파일의 실행 내용이 현재 JSP 페이지의 출력 버퍼에 추가 저장되어 출력된다.

<표 1.> include 액션 태그와 include 디렉티브 태그의 차이

구분	include 액션 태그	include 디렉티브 태그
처리 시간	요청 시 자원을 포함한다.	번역 시 자원을 포함한다.
기능	별도의 파일로 요청 처리 흐름을 이동한다.	현재 페이지에 삽입한다.
데이터 전달 방법	request 기본 내장 객체나 param 액션 태그를 이용하여 파라미터를 전달.	페이지 내의 변수를 선언한 후 변수에 값을 저장한다.
용도	화면 레이아웃의 일부분 모듈화할 때 주로 사용	다수의 JSP 웹 페이지에서 공통으로 사용되는 코드를 포함하는 경우 사용
기타	동적 페이지에 사용	정적 페이지에 사용

다음은 include 액션 태그 예제 코드이다.

[firstinclude.jsp]

<%@ page contentType="text/html"; charset="utf-8"%>
<html>
<head>
	<title>Action Tag</title>
</head>
<body>
	<h3>현재 페이지는 firstinclude.jsp 파일입니다.</h3>
    <jsp:include page="secondinclude.jsp/>
    <p>Java Server Page</p>
</body>
</html>

[secondinclude.jsp]

<%@ page contentType="text/html"; charset="utf-8"%>
<html>
<head>
	<title>Action Tag</title>
</head>
<body>
	<h3>현재 페이지는 secondinclude.jsp 파일 입니다.</h3>
   	 Today is : <%= new java.util.Date()%>
</body>
</html>

firstinclude.jsp 파일 실행 결과

[JSP] include 디렉티브 태그의 기능과 사용법

codeStudy123 — Thu, 21 Jul 2022 15:46:34 +0900

include 디렉티브 태그는 현재 JSP 페이지의 특정 영역에 외부 파일의 내용을 포함하는 태그이다. 여기서 외부 파일은 HTML, JSP, 텍스트 파일 등이다.

include 디렉티브 태그는 JSP 페이지 어디서든 선언할 수 있다.

<%@ include file="파일명.파일형식" %>

디렉티브에 대해 다시 설명하면 디렉티브 태그는 JSP 페이지가 서블릿 프로그램에서 서블릿 클래스로 변환될 때 JSP 페이지와 관련된 정보를 JSP 컨테이너에게 지시하는 메시지이다. 디렉티브 태그는 세 종류이며 모두 <%@ 내용들 %>의 형식이다.

디렉티브 태그	형식	설명
page	<%@ page . . . %>	JSP 페이지에 대한 정보를 설정한다.
include	<%@ include . . . %>	JSP 페이지의 특정영역에 다른 문서를 포함한다.
teglib	<%@ teglib . . . %>	JSP 페이지에서 사용할 태그 라이브러리를 설정한다.

<%@ include file="파일명.파일형식" %>

file 속성 값은 현재 JSP 페이지에 포함할 내용을 가진 외부 파일명이다. 만약 현재 JSP 파일의 위치와 file 속성 값은 파일이 같은 디렉터리에 존재하면 파일명만 적으면 된다. 그렇지 않으면 전체 URL (또는 상대 경로)를 설정해야 한다.

<%@ include file="loop.jsp" %>
<%@ include file="../JSPFiles/user_inputnumber.jsp" %>

두 번째 줄 코드는 상대경로(내 파일이 있는 위치를 기준)를 지정해 user_inputnumber.jsp 파일을 찾은 것이다.

include 디렉티브 태그를 왜 사용할까?

만약 100개의 JSP 페이지에서 꼭 사용하는 바닥글 형식이 있다고 치면, 100개의 JSP페이지를 공통된 코드를 하나하나 복사 붙이기를 하기 번거롭고, 시간낭비이다. 또 공통된 바닥글 형식의 파일이 에러가 생겨 수정해야 하는 경우가 생기면 100개의 JSP 페이지에 복사 붙여 넣기 한 부분을 다 수정해야 한다. 위와 같은 문제를 해결하기 위해 include를 사용하는 것이다. include를 사용하면 단 한 번만 수정, 1줄의 코드로 100개의 JSP페이지에 모두 적용시킬 수 있다.

이처럼 include 디렉티브 태그를 사용해 코드의 재사용성 향상할 수 있다. 또 웹 페이지를 모듈화 할 수 있어 유지 보수 측면에서 매우 유용하다.

[그림 1.] include 디렉티브 태그 실행 과정

[jspPage.jsp]

<%@ 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>
</head>

<body>
	<p>jspPage.jsp입니다.</p>
	<%@ include file="includeTest.jsp"%>
	<hr>
	<p>---현재 페이지---</p>
</body>

</html>

[includeTest.jsp]

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" 
	trimDirectiveWhitespaces="true" info="jsp inclued test" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<strong>이 부분은 includeTest.jsp페이지의 내용입니다.</strong>

</body>
</html>

jspPage 실행 결과

이런 식으로 사용하면 된다. 사용하는 방법은 매우 쉽다.

웹 페이지 모듈화 예시)

[jspPage.jsp]

<%@ 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>
</head>
<body>
	<header>
		<%@ include file="jspHeader.jsp" %>
	</header>
	<article>
		<%@ include file="article.jsp" %>
		<h2>안녕하세요!</h2>
	</article>
</body>
</html>

[jspHeader.jsp]

<%@ 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>
<style>
	*{
		margin: 0;
		padding:0;
	}
	header{
		background-color: #354259;
		display:flex;
		justify-content: center;
		align-items: center;
		height:150px;
		width:100%;
		color:white;
	}
	ul{
		color:white;
		width:100%;
		display:flex;
		justify-content: space-evenly;
		
	}
</style>
</head>
<body>

	<header>	
			<ul>
				<li>문서</li>
				<li>홈</li>
				<li>로그인</li>
			</ul>
	</header>

</body>
</html>

[article.jsp]

<%@ 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>
<style>
	body{
		height: 500px;
		width: 100%;
		background-color: #C2DED1;
	}
</style>
</head>

<body>



</body>
</html>

이처럼 웹 문서를 모듈화 시켜 header는 header에서만 관리 본문은 본문에서만 관리 등 유지보수 측면과 코드의 가독성이 증가한다.

커버사진

<a href="https://www.flaticon.com/kr/free-icons/" title="자바 아이콘">자바 아이콘 제작자: Freepik - Flaticon</a>

https://www.flaticon.com/kr/free-icon/jsp-open-file-format-with-java-logo_28968

[백준] 20949번: 효정과 새 모니터_Java

codeStudy123 — Tue, 19 Jul 2022 22:38:25 +0900

제목: 효정과 새 모니터

실버5

입력

첫 번째 줄에 모니터의 개수 N이 주어진다.

이후 N개의 줄 중 i(1 ≤ i ≤ N)번째 줄에는 i번 모니터의 가로 픽셀 수 Wi와 세로 픽셀 수 Hi가 주어진다.

모든 입력은 정수이며 공백으로 구분되어 주어진다.

출력

N개의 줄에 걸쳐 모니터의 번호를 PPI가 높은 순으로 한 줄에 하나씩 출력한다.

PPI가 동일한 경우 번호가 더 작은 모니터를 먼저 출력한다.

제한

1 ≤ N ≤ 1,000
1 ≤ Wi, Hi ≤ 30,000

예제 입력 1 복사

2
10 10
20 20

예제 출력 1 복사

2
1

문제는 어렵지 않다. 입력받은 모니터 가로와 세로 값들을 PPI 공식에 대입해 계산결과로 값을 받게 된다. PPI 공식으로부터 가장 큰 모니터의 번호부터 출력하면 된다. 번호는 모니터의 생성 순서와 같다. (1번으로 입력한 모니터는 1번, 2번으로 입력한 모니터는 2번 . . . ) 시간복잡도가 O(n^2) 까지는 풀 수 있을 것 같아 쉬운 문제이다.

내가 작성한 코드

import java.io.*;
import java.util.StringTokenizer;
import java.util.ArrayList;
import java.util.Collections;

public class Main {

	public static void main(String[] args) throws IOException {
		BufferedReader br = new BufferedReader(new InputStreamReader(System.in));
		final int N = Integer.parseInt(br.readLine());

		ArrayList<Float> list = new ArrayList<>();

		for (int i = 0; i < N; i++) {
			StringTokenizer st = new StringTokenizer(br.readLine());
			int width = Integer.parseInt(st.nextToken());
			int height = Integer.parseInt(st.nextToken());
			float ppi =(float)Math.sqrt(width * width + height * height) / 24;
			list.add(ppi);
		}

		ArrayList<Float> copyList = new ArrayList<>(list);
		Collections.sort(list);
		StringBuilder sb = new StringBuilder();

		for (int i = list.size() - 1; i >= 0; i--) {
			float key = list.get(i);
			int index = copyList.indexOf(key);
			copyList.set(index, null);
			sb.append(index + 1 + "\n");
		}
		System.out.println(sb);
	}
}

알고리즘 분류

정렬

https://www.acmicpc.net/problem/20949

20949번: 효정과 새 모니터

효정은 새해를 맞이하여 새 모니터를 구매하고자 한다. 효정은 돈이 많기 때문에 77인치 모니터를 구매할 것이다. 모니터를 구경하던 효정은 놀라 자빠질 수밖에 없었다. 모니터가 너무 많아 고

www.acmicpc.net

[Java] Iterator

codeStudy123 — Wed, 13 Jul 2022 16:12:29 +0900

Iterator는 컬렉션에 저장된 요소를 접근하는 데 사용되는 인터페이스이다. Iterator의 구버전은 Enumeration이고 Iterator의 기능을 확장시킨 것은 ListIterator이다.

Iterator는 Collection interface의 요소를 접근하기 위한 인터페이스라는 건 우리가 알고 있는 사실이다. 따라서 Iterator를 구현하는 iterator() 메서드는 Collection의 자식인 List와 Set에서도 사용할 수 있다.

Iterator의 메서드는 4가지가 있다.

public interface Iterator<E> {
	
    boolean hasNext();
    
    E next();
    
    default void remove(){
    	throw new UnsupportedOperationException("remove");
    }
    
    default void forEachRemaining(Consumer<? super E> action) {
        Objects.requireNonNull(action);
        while (hasNext())
            action.accept(next());
    }

}

여기서는 hasNext()와 next()를 다루어 보겠다.

Iterator를 사용하는 방법은 일단, Iterator 객체를 가지고 와야한다. Collection 인터페이스에 있는 iterator() 메서드를 이용해 Iterator 인터페이스를 구현할 수 있다. Collection의 자식인 List와 Set에도 iterator() 메서드는 존재한다.

Iterator<E> iterator();

Collection<Integer> list = new ArrayList<Integer>();
		
Iterator i = list.iterator();  //Iterator 인터페이스가 구현 됨.

Iterator는 Collection 인터페이스에 정의된 메서드이므로 ArrayList 대신 List인터페이스를 구현한 다른 컬렉션 클래스에 대해서도 위 코드는 동일하게 작동되고 수정할 필요가 없어진다.

이처럼 코드의 재사용성을 높이는 것이 Iterator의 장점이며 코드의 일관성을 유지, 재사용성 극대화로 객체지향 프로그래밍의 대표적인 예시와 장점이라고 볼 수 있다.

import java.util.*;

public class IteratorEx {

	public static void main(String[] args) {
		
		Collection<Integer> list = new ArrayList<Integer>();
		list.add(3);
		list.add(2);
		list.add(1);
		
		
		Iterator<Integer> i = list.iterator();  //Iterator 인터페이스가 구현 됨.
	
		while(i.hasNext()) {   //hasNext()로 모든 요소를 순회한다.					
			System.out.print(i.next()+"  ");  //next() 메서드로 값을 가지고 온다.
		}
	}

}

메서드	기능
boolean hasNext()	해당 이터레이션(iteration)이 다음 요소를 가지고 있으면 true를 반환하고, 더 이상 다음 요소를 가지고 있지 않으면 false를 반환함.
E next()	이터레이션(iteration)의 다음 요소를 반환함.

요소가 몇개가 있는지 확실하지 않을 수 있으므로 반복문(while)을 이용해 hasNext() 메서드를 사용하여 모든 요소를 순회하게 한다. hasNext()메서드 return값이 true이면 next() 메서드로 요소를 가지고 온다.

Iterator 인터페이스는 일회성이다. hasNext()로 모든 요소를 순회하고 false를 반환하면 다시 재사용할 수 없다.

Iterator<Integer> it = list.iterator();

while(it.hasNext()) {
	System.out.print(it.next()+" ");
}
        
while(it.hasNext()) {
	System.out.print(it.next()+" ");
}

이런식으로 사용된 Iterator 인터페이스를 또다시 사용하면 false를 반환하므로 2번째 반복문은 작동하지 않는다. 참조 변수 it가 가리키는 객체는 첫 번째 while 문으로부터 hasNext()는 false로 되었기 때문이다. 하나의 객체에서 while문 2개를 사용하는 것이 아닌 새로운 객체를 또 만들어서 각자 다른 반복문을 사용해야 한다.

Iterator<Integer> it = list.iterator();
while(it.hasNext()) {
	System.out.print(it.next()+" ");
}
    
System.out.println();
    
Iterator<Integer> it2 = list.iterator();
while(it2.hasNext()) {
	System.out.print(it2.next()+" ");
}

List<Integer> list = new ArrayList<Integer>();
list.add(3);
list.add(2);
list.add(1);
		
for(int i=0; i<list.size();i++) {
	System.out.print(list.get(i)+" ");
}

Iterator를 사용하지 않고 list의 요소들을 전부 접근할 수 있다. 하지만 개발자가 성능의 문제로 ArrayList가 아닌 HashSet으로 자료구조를 바꿨다고 가정해보자.

Set<Integer> list = new HashSet<Integer>();
list.add(3);
list.add(2);
list.add(1);
		
for(int i=0; i<list.size();i++) {
	System.out.print(list.get(i)+" ");
}

Set인터페이스에도 존재하는 add메서드로 추가는 가능하지만 반복문 부분에서 에러가 발생한다. get()메서드는 Set에 존재하지 않는다. 즉, 반복문 부분은 쓸모없어진 코드가 된 것이다.

Collection을 바꾸면 바꿀 Collection에는 존재하지 않는 메서드들이 있을 것이다. 존재하지 않는 메서드를 사용하면 당연히 에러가 발생하며, 일일히 코드들을 다시 봐야 하는 상황이 발생한다.

이 문제를 해결하기 위해 Iterator를 사용하는 것이다. Iterator는 Collection 자식들 모두 호환이 가능한 인터페이스이므로 Collection을 바꾸더라도 요소를 접근하는 코드는 바뀔 필요가 없어진다.

Map인터페이스를 구현한 컬렉션 클래스는 iterator()를 직접 호출할 수 없다. interator()를 사용할 수 있는 Set인터페이스 형태로 얻어 온 후 iterator()를 사용할 수 있다. (keySet(), entrySet() 사용해서 Set 형태로 변환)

Map map = new HashMap();
		
Iterator it = map.entrySet().iterator();

Iterator의 구버전 Enumeration의 사용법은 Iterator와 차이점이 별루 없다.

hasMoreElements()로 요소 순회 (검색)

nextElement()로 요소 값 가지고 오기

List<Integer> list = new LinkedList<Integer>();
list.add(3);
list.add(2);
list.add(1);
		
Enumeration<Integer> en = Collections.enumeration(list);
while(en.hasMoreElements()) {
	System.out.print(en.nextElement()+" ");
}

http://www.tcpschool.com/java/java_collectionFramework_iterator

코딩교육 티씨피스쿨

4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등

tcpschool.com

[HTML] 기본2

codeStudy123 — Tue, 5 Jul 2022 22:35:06 +0900

<img>태그, 이미지 삽입

<img> 태그를 이용해 HTML 문서에 이미지를 삽입할 수 있다. <img> src 속성으로 지정할 수 있는 이미지의 종류는 다음과 같다.

BMP, GIF, JPG(JPEG), animated-GIF

<img> 태그

<img		src="이미지 파일의 URL.파일형식"
		alt="문자열(이미지가 출력되지 않을 때 출력되는 문자열"
		width="이미지의 폭"
		height="이미지의 높이">

src: 이미지의 URL. (필수 속성)
alt: 이미지가 없거나 손상되는 등 이미지 출력되지 않는 상황에서 출력되는 문자열. (필수 속성)
width: 이미지가 출력되는 너비로, 생략되면 원본 이미지 폭.
height: 이미지가 출력되는 높이로, 생략되면 원본 이미지 높이.

<img> 활용 예시

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h2>이미지 삽입</h2>
    <hr>
    <b>자바 이미지 입니다.</b><br>
    <img src="javaimg.png" alt="자바 이미지가 없습니다." width="200" height="200"><br>
    <b>파이썬 이미지 입니다.</b><br>
    <img src="pythonimg.png" alt="파이썬 이미지가 없습니다." width="200" height="200">
</body>
</html>

<ol>, <ul>, <dl> 리스트 만들기

순서가 있는 리스트(ordered list) <ol></ol>
순서가 없는 리스트(unordered list) <ul></ul>
정의 리스트(definition list) <dl></dl>

<ol> 태그의 type 속성 기본값은 "1"이다. 미지정시 "1"로 실행

<ol type="1"or"A"or"a"or"I"or"i" 
    start="value"
>
<li></li>
<li><!--종료태그 생략 가능 </li>-->
</ol>

<ul>
    <li>item</li>
    <li>item</li>
</ul>

<li type=""1"or"A"or"a"or"I"or"i">item</li>
<!--li태그의 type 속성은 <ol>태그에 대해서만 유효-->

<li>태그는 종료 태그 생략 가능.

리스트 태그 활용

<ul>
    <h2>프로그래밍 언어의 역사</h2>
    <hr>
    <ol type="1">
        <li>제 1세대(기계어)</li>
        <li>제 2세대(어셈블리어)</li>
        <li>제 3세대(C언어)
        <li>제 4세대(DB관련 언어)
        <li>제 5세대(Java)</li>
    </ol>
</ul>

<h3>중첩 리스트 예제</h3>
<hr>
<ul>
    <li>다양한 라면들
    <ul>
        <li>신라면</li>
        <li>진라면</li>
        <li>너구리</li>
    </ul>

    <li>라면 끓이는 방법은 동일해요!
    <ol type="A">
        <li>물 끓이기</li>
        <li>라면과 스프 넣기</li>
        <li>4~5분 끓이기</li>
        <li>맛있게 먹을 준비하기</li>
    </ol>
    <li type="I">리스트의 예제</li>
</ul>

정의 리스트 예제

<dl>

</dl>

<dt>, <dd>는 종료 태그 생략 가능.

<dl>
    <h3>정의 리스트 예제</h3>
    <hr>
    <dt><strong>Internet</strong></dt>
    <dd>
        1990년대 초 인터넷이라는 이름으로 활용되기 시작, 전 세계 수 억 개의 컴퓨터가 연결된
        네트워크가 되었다. 즉, 컴퓨터들을 연결하는 길
    </dd>
    <dt><strong>Web</strong></dt>
    <dd>
        팀 버너스리 경이 만든 인터넷 서비스 중 하나 문서를 서버 컴퓨터에 올려놓고 인터넷을 통해
        클라이언트 컴퓨터에서 읽거나 쉽게 주고바을 수 있도록 만든 서비스이다. 
        즉, 웹은 인터넷을 이용해 만들어진 인터넷 서비스이다.
    </dd>
</dl>

<table>표 만들기

HTML5에서 테이블 태그들을 이용해 표를 작성할 수 있다. 워드나 아래한글 문서 작업에서의 표와 동일하다.

표 전체는 <table> 각 종 내용들 </table>로 감싸며, 표제목, 헤드, 바디, 바닥을 모두 <table> 태그 안에 포함시킨다.

전반적인 <table> 태그의 사용방법은 이러하다.

<table>
    <caption>표제목</caption>
    <thead>
        <!--<tr>태그는 행, <td>태그는 열-->
        <tr>
            <td></td>
        </tr>
    </thead>
    <tbody></tbody>
    <tfoot></tfoot>
</table>

<caption> 태그로 표의 제목을 나타낼 수 있다. <thead>, <tbody>, <tfoot> 태그들은 검색 엔진의 표의 의미(시맨틱)를 파악하기 위한 태그이다. 태그 이름대로 head 표의 맨 위, foot은 표의 맨 마지막을 맡는다.

<tr> 태그로 행 단위를 표현한다. <tr> 1 행 안에 n개의 열은 <td> 태그로 열을 표현한다.

<th> 태그는 헤딩(정보)을 가진 셀이다.

<table>
    <caption>표제목</caption>
    <thead>
        <th>이름</th><th>학번</th>        
    </thead>
    <tbody><tr><td>기태</td><td>2021****</td></tr></tbody>
</table>

이대로 출력하면 아래 사진처럼 출력된다.

이렇게 보면 사용자가 표를 보고 분석하는 것이 어렵다. 표답게 구분선을 그어주기 위해서는

<table border="1">
</table>

<table> 태그에 border 속성을 사용하면 된다. 속성 값은 "1"로 1px의 선의 굵기를 의미한다.

훨씬 보기 쉽다.

테이블 태그 예제

<table border="1">
    <caption>1학기 성적</caption>
    <thead>
        <tr><th>이름</th><th>시험점수</th><th>학점</th></tr>
    </thead>
    <tbody>
        <tr><td>원혁</td><td>100</td><td>4.5(A+)</td>
        <tr><td>재빈</td><td>80</td><td>3.5(B+)</td></tr>
        <tr><td>쓴이</td><td>50</td><td>2.5(C+)</td>
    </tbody>
    <tfoot>
        <tr>
            <td>xx교수</td>
            <td colspan="2">확인</td>
        </tr>
    </tfoot>
</table>

출력결과

<td> 태그 속성 중 colspan, rowspan이 있다.

<table border="1">
    <caption>셀 병합</caption>
    <tr>
        <td rowspan="2">1행과2행 합침</td><td colspan="2">2열괴 3열 합침</td>
    </tr>
    <tr>
        <td>rowspan</td><td>colspan</td>
    </tr>
<table>

<a> 하이퍼링크

대부분의 웹 사이트는 여러 개의 HTML 페이지를 가지고 페이지들이 상호 연결하는 방식으로 전체를 구성하는데 서로 다른 HTML 페이지들끼리 연결하기 위해 하이퍼링크(hyperlink)를 텍스트나 이미지에 주소를 달아서 연결하는데 하이퍼링크는 서로 다른 HTML 페이지뿐만 아니라 다른 웹 페이지로 이동하는 것이 가능하다. 이것을 항해 혹은 내비게이션(navigation)이라고 부른다. 하이퍼링크는 링크라고 줄여서 부른다.

하이퍼링크(링크)는 <a> 태그의 href 속성으로 만들 수 있다.

<a  href="URL | URL#앵커이름 | #앵커이름"
    trarget="윈도우이름"
    download="">
링크를 달 텍스트 혹은 이미지
</a>

href: 이동할 HTML 페이지, URL 혹은 HTML 페이지 내 앵커 이름
target: 링크에 연결된 HTML 페이지가 출력될 윈도우 이름 지정
download: 링크가 클릭되면 href에 지정된 파일이 다운로드됨

href 속성은 하이퍼링크로 이동할 HTML 페이지의 URL을 속성 값으로 입력해주면 된다.

<a href="index.html">index.html로 이동하는 하이퍼링크</a>

누르면 index.html 파일이 열린다. target이 지정되지 않아 기본값인 _self로 현재 윈도우창 즉, 현재 웹 브라우저 창에 기존 html대신 하이퍼링크에 눌린 index.html을 출력한다.

<a href="#">현재 페이지</a>

href 속성 값으로 "#"을 넣으면 현재 페이지가 출력된다. 정확히 말하면 현재 페이지에서 URL 끝에 #을 단 HTML 페이지가 출력된다.

<a href="https://www.naver.com/">
    <img src="javaimg.png" alt="네이버로 가는 이미지">
</a>

이 코드는 naver 웹 사이트로 가능 하이퍼링크이다. <a></a>사이에 img태그를 넣었다. 이미지를 누를 시 https://www.naver.com/"으로 로 이동한다.

id 속성을 이용해 앵커를 만들수 있다. 문서의 특정 위치를 앵커(anchor)라고 부른다. 앵커를 만드는 방법은 간단하다.

HTML5에서 제공하는 태그의 id 속성에 앵커 이름을 지정하면, 어떤 태그든 그 위치에 앵커가 만들어진다.

<!--앵커의 위치로 갈 하이퍼링크-->
<a href="#anchor1">&lt;p&gt;로 가는 a 태그</a><br>
<a href="#anchor2">&lt;hr&gt;로 가는 a 태그</a><br>

<!--앵커 2개-->
<p id="anchor1"></p>
<hr id="anchor2">

<a href="#anchor1">&lt;p&gt;로 가는 a 태그</a><br>
<a href="#anchor2">&lt;hr&gt;로 가는 a 태그</a><br>

<p id="anchor1">
    하는 대고, 커다란 바이며, 쓸쓸하랴? 위하여, 어디 돋고, 못할 속잎나고, 품고 자신과 예수는 풀이 철환하였는가? 얼마나 새 발휘하기 위하여 광야에서<br>
    소금이라 구하지 아름다우냐? 청춘의 군영과 수 이상은 품으며, 청춘이 모래뿐일 불러 설산에서 것이다. 장식하는 이상의 얼마나 것이다. 그들의 <br>
    얼음과 더운지라 얼마나 가진 관현악이며, 속에 전인 뛰노는 아름다우냐? 전인 남는 우리 보이는 두손을 그들에게 교향악이다. 별과 얼마나 천자만홍이 이상은 것이다.<br>
    심장은 크고 산야에 간에 과실이 전인 쓸쓸하랴? 열매를 자신과 주는 이것이다.<br>

꽃 못하다 없는 청춘의 구하지 청춘 끓는다. 가는 심장의 열매를 이것이다. 풍부하게 같으며, 만물은 커다란 그들의 풀이 끓는 쓸쓸하랴? 일월과 우리는<br>
 못할 그리하였는가? 광야에서 이것이야말로 있는 얼음이 커다란 그리하였는가? 지혜는 실현에 이상 거친 인류의 부패뿐이다. 고행을 찾아다녀<br>
 도, 기쁘며, 온갖 이성은 과실이 밥을 가진 피다. 그들은 사는가 뛰노는 끓는 착목한는 만천하의 이상의 따뜻한 구하지 봄바람이다. 눈이 우리 무엇을 것이다.<br>
</p>
<br><br><br>
<hr id="anchor2">

첫 번째 a태그를 누르면 <p>태그의 앵커 위치로 이동해진다. 이처럼 본문이 긴 HTML 문서에서 앵커는 긴 본문에서 목차와 같은 역할을 해 사용자가 앵커를 통해 스크롤 하지 않고 바로 원하는 내용을 확인시켜 줄 수 있다.

[Java] 자바의 LinkedList

codeStudy123 — Mon, 4 Jul 2022 21:11:01 +0900

배열은 데이터를 묶어 놓은 것으로 구조가 간단하고 데이터가 연속적으로 존재한다. 사용하기도 쉽고 데이터를 읽어 올 때는 걸리는 시간이 가장 빠르다는 장점도 가지고 있다.

배열은 장점만 가지고 있는 것은 아니다. 단점으로는

1. 크기를 변경할 수 없다.

크기를 변경할 수 없으므로 만약 배열 저장공간이 부족할 시 더 큰 배열을 생성하고 공간이 부족한 배열의 값들을 복사하고 참조를 변경해야 한다. 이런 과정으로 프로그램 동작 시간이 오래 걸린다. 충분히 큰 크기의 배열을 미리 생성시켜도 메모리가 낭비된다.

2. 비순차적인 데이터의 추가 또는 삭제에 시간이 많이 걸린다. (추가&삭제에 단점이 많음)

차례대로 데이터를 추가하고 배열의 마지막 위치에 있는 데이터들은 삭제하기 쉽고 빠르지만, 배열의 중간에 데이터를 추가한다면, 빈자리를 만들기 위해 다른 데이터들을 복사해서 이동해야 하는 번거로움이 있다.

한마디로 Array의 장점은 사용하기 쉽고, 데이터를 읽을 때 빠르다는 장점이 있고 단점으로는 비순차적인 데이터 추가 및 삭제에서는 시간이 오래 걸리는 점, 배열의 size(크기)를 변경할 수 없다는 점이 있다.

LinkedList란?

Collection 프레임워크의 일부이며 java.util 패키지에 있는 클래스이다.

Array와 달리 LinkedList는 불연속적으로 데이터들이 존재한다. 그 데이터들은 서로 연결한 형태로 구성되어 있다.

각각의 노드로 연결했다고 표현한다.

[그림 1] Node 구성도

위 [그림 1]처럼 Node는 각 요소들은 자신의 다음 요소와 연결하여 다음 요소에 대한 참조(주소값)와 데이터로 구성되어 있다. LinkedList는 불연속적으로 존재하는 데이터를 서로 연결(link) 한 형태로 구성되어 있다.

노드(node)란, 데이터가 저장되는 객체를 뜻한다. 보통 첫 번째 node를 head라고 부른다.

 private static class Node<E> {
        E item;
        Node<E> next;
        Node<E> prev;

        Node(Node<E> prev, E element, Node<E> next) {
            this.item = element;
            this.next = next;
            this.prev = prev;
        }
 }

위 코드는 LikedList$Node.class 파일에서 복사해서 붙여 넣은 것이다. 코드에서 Node 클래스는 멤버 변수가 item과 next, prev 단 세 가지가 있다.

노드는 데이터를 적제한 변수와 다음 요소를 연결하기 위한 참조변수(주소값이 들어갈) 하나, 자신을 연결한 이전 요소의 주소값 이렇게 3가지로 구성된다. (이 코드는 Doubly-linked list입니다.)

Doubly-linked list와 Singly-linked list의 차이는 Doubly는 이전 노드와 다음 노드를 참조하지만 Singly는 다음 노드만 참조하도록 구성되어 있다.

LinkedList 추가와 삭제

LinkedList는 데이터의 추가와 삭제가 간단하다. 삭제하고자 하는 요소의 이전 요소가 삭제하고자 하는 요소의 다음 요소를 참조하도록 변경하면 된다. 하나의 참조만 변경하면 되는 것이다. 이러한 이유로 LinkedList는 비순차적인 추가와 삭제에서도 Array와 다르게 더 빠른 것이다. Array는 복사하는 과정 때문에 늦었다면 LinkedList는 복사하는 과정이 필요 없다. (물론 순차적 추가 삭제는 Array가 더 성능이 좋다.)

이것으로 배열(Array)의 장점은

검색이 LinkedList보다 빠르다.
순차적 추가 삭제는 LinkedList보다 빠르다.

다음으로 링크드 리스트(LinkedList)의 장점은

비순차적 추가 삭제는 Array보다 더 좋은 성능을 가지고 있다.
추가 삭제하기도 구조적으로 편하다.

Linked List에서 데이터 삭제는 간단하다. 삭제하고자 하는 요소의 이전 요소를 삭제하고자 하는 요소의 다음 요소를 참조하도록 바꿔주기만 하면 된다. 단 하나의 참조만 변경하면 삭제는 쉽게 할 수 있다.

Linked List의 추가 역시 새로운 요소를 생성한 후 추가할 위치의 이전 요소의 참조를 새롭게 추가될 요소로 참조하도록 변경하고 새로운 요소는 그다음 요소를 참조하면 된다.

LinkedList와 ArrayList 구조적 차이

밑에 그림은 위에 arr은 Array 밑에는 LinkedList이다. ArrayList는 그림과 같이 요소들이 연속적으로 존재한다. 메모리에서도 요소들이 연속적으로 존재하기 때문에 간단한 계산만으로 요소의 주소 값을 쉽게 얻을 수 있다.

배열의 경우 데이터 주소를 계산하기 위해서

인덱스가 n인 데이터 주소 = 배열의 주소+(n*데이터 타입의 크기)

예를 들어 int 배열은 데이터의 타입 크기가 4byte이다.

배열의 주소가 0*100이라면 index 0인 요소의 데이터 주소는

0*100+(0*4) = 0*100 --> [0]의 데이터 주소

배열의 주소가 0*100이라면 index 2인 요소의 데이터 주소는

0*100+(2*4)= 0*108 --> [2]의 데이터 주소

LinkedList나 ArrayList 둘 다 List 인터페이스를 이용해 만들어진 것이라 List의 다양한 메서드들을 사용할 수 있다.

1.LinkedList 선언

import java.util.Arrays;
import java.util.LinkedList;

LinkedList list1 = new LinkedList(); // 타입 미설정 기본값 Object
LinkedList<Object> list2 = new LinkedList<Object>(); // Object 타입
LinkedList<Integer> list3 = new LinkedList<Integer>(); // Integer 타입
LinkedList<Integer> list4 = new LinkedList<>(); // 타입 선언 생략
LinkedList<Integer> list5 = new LinkedList<>(Arrays.asList(1, 2, 3)); // 초기값 선언
LinkedList<Object> list6 = new LinkedList<>(list2);  //다른 LinkedList값으로 초기화

다양한 형태의 타입으로 세팅할 수 있다. class, String, Double 등

list5처럼 선언과 동시에 초기값을 선언할 수 있다. Arrays.asList(value1, value2, ....)

list6처럼 다른 Collection값으로 초기화할 수 있다.

Stack st = new Stack();
st.push("안녕?");
LinkedList list = new LinkedList(st);
System.out.println(list);

예를 들어 Stack 역시 Collection의 자손으로 LinkedList를 선언할 때 Stack으로 구성된 데이터를 받을 수 있다.

2-1.LinkedList 추가

public class LinkedExample {

	public static void main(String[] args) {
		LinkedList<Integer> list = new LinkedList<>();
		list.add(0); //list에 0추가
		System.out.println("list: "+list);
		
		list.add(150); //list에 150추가
		System.out.println("list: "+list);
		
		list.add(1,300); //list index 1에 300추가
		System.out.println("list: "+list); 
	}
}

LinkedList는 List인터페이스를 구현한 것으로 List의 int size(), boolean isEmpty(), boolean add() 등 값을 추가하고 삭제하는 다양한 메서드들을 사용할 수 있다.

위 코드처럼

add(E e): 메서드 값을 추가하면 마지막 index의 다음 공간을 생성해 추가한다. e는 Object이므로 데이터의 종류 상관없이 모두 추가할 수 있다.

add(int index, E element): 는 매개변수로 받은 index 값의 위치에 데이터를 추가한다.

index: index at which the specified element is to be inserted (명시된 index값에 element를 넣는다.)

element: element to be inserted (삽입될 요소)

LinkedList<Integer> list = new LinkedList<>();
list.add(50);
list.addFirst(25);  //리스트 가장 앞에 데이터 추가
list.addLast(75);  //리스트 가장 뒤에 데이터 추가
System.out.println(list);

addFirst()와 addLast() 메서드는 리스트의 가장 앞이나 뒤에 데이터를 추가해주는 메서드이다.

2-2.LinkedList 삭제

import java.util.LinkedList;

public class LinkedExample {

	public static void main(String[] args) {
		LinkedList<String> sList = new LinkedList<String>();
		sList.add("apple");
		out(sList);
		sList.add("pineapple");
		out(sList);
		
		LinkedList<String> sList2 = new LinkedList<>(sList); //sList값으로 초기화
		System.out.println("==리스트 삭제==");
		for(int i=sList.size()-1; i>=0;i--) {
			sList.remove(i);  //remove() 리스트 값 하나씩 삭제
			out(sList);
		}
		
		System.out.println("sList2: "+sList2);
		System.out.println("==리스트 값 한번에 삭제==");
		sList2.clear();  //clear() 리스트 값 한번에 삭제
		System.out.println("sList2: "+sList2);
	}
	// 리스트 호출 사용자 메서드
	static void out(LinkedList list) {
		System.out.println("sList: "+list);
	}
}

출력결과

링크드 리스트의 데이터 삭제 메서드는 remove()와 clear() 등 이 존재한다.

remove() 는 리스트의 맨 마지막 데이터를 삭제한다.

clear() 는 리스트의 데이터들을 전부 삭제한다. (데이터만 삭제되고 List는 완전히 삭제되지 않는다. 계속 JVM 메모리 Heap 부분에 존재하고 있다.)

remove()메서드에 대해 자세히 알아보면

(Type1) remove(int index): index의 위치한 데이터를 삭제한다.
(Type2) remove(): 생략 시 index0에 위치한 데이터를 삭제한다.(맨 앞 데이터 삭제)
Time complexity: O(n)
(Type3) remove(Object o): 아무 데이터 타입이나 삭제한다. String, float 등 모든 데이터
Time complexity: O(n)

LinkedList<String> sList = new LinkedList<String>();
sList.add("아기");
sList.add("돼지");
sList.add("^^");
System.out.println("sList:"+sList);
sList.removeLast();
System.out.println("sList:"+sList);
sList.removeFirst();
System.out.println("sList:"+sList);

removeLast(), removeFirst() 역시 리스트의 맨 처음이나 마지막 부분의 데이터를 삭제하는 메서드이다.

3. LinkedList 크기

LinkedList<String> sList = new LinkedList<String>(Arrays.asList("A","B","C","D"));
System.out.println("sList:"+sList);
System.out.println(sList.size());  //Integer 데이터 타입으로 4 return

4. LinkedList 값 가져오기

import java.util.Arrays;
import java.util.LinkedList;

public class LinkedExample {

	public static void main(String[] args) {
		LinkedList<Integer> sList = new LinkedList<>(Arrays.asList(1,2,3,4));
		int first_listValue = sList.get(0);
		System.out.println(first_listValue);
		System.out.println(sList.getLast());
        
		System.out.println("=====");
        
		for(int i:sList) {  
        	//반복문을 통해 List 값 차례대로 가져오기
			System.out.println(sList.get(i-1));  
		}
		
	}
	
}

출력결과

public E get(int index) 메서드는 index에 해당하는 데이터 값을 return 해준다.

ArrayList에서 사용하는 get()과 LinkedList에서 사용하는 get()은 속도 차이가 난다. LinkedList가 훨씬 느리다.

5. LinkedList 값 검색

LinkedList<Integer> sList = new LinkedList<>(Arrays.asList(1,2,3,4));
System.out.println(sList.contains(3));  //값 3 검색 있으면 true
System.out.println(sList.contains(30)); //없으면 false
		
System.out.println(sList.indexOf(2));  //값 2에 해당하는 index값 출력
System.out.println(sList.lastIndexOf(1));  //뒤에서부터 검색
System.out.println(sList.indexOf("System"));  //없으면 -1을 출력

출력결과

public int indexOf (Object o)

public int contains (Object o)

public int lastIndexOf (Object o)

참고한 좋은 글들

https://www.nextree.co.kr/p6506/

자료구조: Linked List 대 ArrayList

2014년 모두들 어떤 목적과 계획을 갖고 살고 계신지요? 저는 올 한해 “Go to the Base”를 목표로 여러 계획을 세웠는데요. 그 중 하나가 과거 5년 동안 저를 되 돌아 보고 부족했던 기본 지식을 탄

www.nextree.co.kr

https://coding-factory.tistory.com/552

[Java] 자바 LinkedList 사용법 & 예제 총정리

LinkedList란? 연결 리스트(LinkedList)는 각 노드가 데이터와 포인터를 가지고 한 줄로 연결되어 있는 방식의 자료구조입니다. 데이터를 담고 있는 노드들이 연결되어 있고, 노드의 포인터가 이전 노

coding-factory.tistory.com

[백준] 4949번: 균현잡힌 세상_Java

codeStudy123 — Thu, 30 Jun 2022 21:43:05 +0900

제목: 균형잡힌 세상

실버4

문제

세계는 균형이 잘 잡혀있어야 한다. 양과 음, 빛과 어둠 그리고 왼쪽 괄호와 오른쪽 괄호처럼 말이다.

정민이의 임무는 어떤 문자열이 주어졌을 때, 괄호들의 균형이 잘 맞춰져 있는지 판단하는 프로그램을 짜는 것이다.

문자열에 포함되는 괄호는 소괄호("()") 와 대괄호("[]")로 2종류이고, 문자열이 균형을 이루는 조건은 아래와 같다.

모든 왼쪽 소괄호("(")는 오른쪽 소괄호(")")와만 짝을 이뤄야 한다.
모든 왼쪽 대괄호("[")는 오른쪽 대괄호("]")와만 짝을 이뤄야 한다.
모든 오른쪽 괄호들은 자신과 짝을 이룰 수 있는 왼쪽 괄호가 존재한다.
모든 괄호들의 짝은 1:1 매칭만 가능하다. 즉, 괄호 하나가 둘 이상의 괄호와 짝지어지지 않는다.
짝을 이루는 두 괄호가 있을 때, 그 사이에 있는 문자열도 균형이 잡혀야 한다.

정민이를 도와 문자열이 주어졌을 때 균형잡힌 문자열인지 아닌지를 판단해보자.

입력

하나 또는 여러줄에 걸쳐서 문자열이 주어진다. 각 문자열은 영문 알파벳, 공백, 소괄호("( )") 대괄호("[ ]")등으로 이루어져 있으며, 길이는 100글자보다 작거나 같다. 각 줄은 마침표(".")로 끝난다.

입력의 종료조건으로 맨 마지막에 점 하나(".")가 들어온다.

출력

각 줄마다 해당 문자열이 균형을 이루고 있으면 "yes"를, 아니면 "no"를 출력한다.

예제 입력 1 복사

So when I die (the [first] I will see in (heaven) is a score list).
[ first in ] ( first out ).
Half Moon tonight (At least it is better than no Moon at all].
A rope may form )( a trail in a maze.
Help( I[m being held prisoner in a fortune cookie factory)].
([ (([( [ ] ) ( ) (( ))] )) ]).
 .
.

예제 출력 1 복사

yes
yes
no
no
no
yes
yes

코드

case1:

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;
import java.util.*;

public class Main {
	public static void main(String[] args) throws IOException {
		BufferedReader br = new BufferedReader(new InputStreamReader(System.in));
		while (true) {
			String str = br.readLine();
			if(str.equals(".")) break;
			System.out.println(StackMethod(str));
		}
	}
	
	static String StackMethod(String instr) {
		String[] strArr = instr.split("");
		Stack<Character> st = new Stack<>();
		for(int i=0; i<strArr.length;i++) {
			char c = strArr[i].charAt(0);  
			if(c=='('||c=='[') {
				st.push(c);
			}
			else if(c==')') {
				if(st.empty()||!(st.peek()=='(')) {
					return "no";
				}else if(st.peek()=='(') {
					st.pop();
				}
			}
			if(c==']') {
				if(st.empty()||!(st.peek()=='[')) {
					return "no";
				}else if(st.peek()=='[') {
					st.pop();
				}
			}
		}
		
		if(st.empty()) {
			return "yes";
		}else {
			return "no";
		}
	}
}

case2:

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;
import java.util.*;

public class Main {
	public static void main(String[] args) throws IOException {
		BufferedReader br = new BufferedReader(new InputStreamReader(System.in));
		while (true) {
			String str = br.readLine();
			if (str.equals(".")) {
				break;
			}
			StringBuilder sb = new StringBuilder();
			Stack<Character> st = new Stack<Character>();
			for (int i = 0; i < str.length(); i++) {
				try {
					char c = str.charAt(i);
					if (c == ' ')
						continue;

					if (c == '(' || c == '[') {
						st.push(c);
					} else if (c == ')') {
						if (st.empty() || !(st.peek() == '(')) {
							st.push(')');
							break;
						} else {
							st.pop();
						}
					}else if(c==']') {
						if (st.empty() || !(st.peek() == '[')) {
							st.push(']');
							break;
						} else {
							st.pop();
						}
					}
				} catch (EmptyStackException stackEx) {
					sb.append("no").append("\n");
				}
			}

			if (st.isEmpty()) {
				sb.append("yes").append("\n");
			} else {
				sb.append("no").append("\n");
			}
			System.out.print(sb);
		}

	}
}

알고리즘 분류

https://www.acmicpc.net/problem/4949

4949번: 균형잡힌 세상

하나 또는 여러줄에 걸쳐서 문자열이 주어진다. 각 문자열은 영문 알파벳, 공백, 소괄호("( )") 대괄호("[ ]")등으로 이루어져 있으며, 길이는 100글자보다 작거나 같다. 각 줄은 마침표(".")로 끝난다

www.acmicpc.net

[HTML] 기본1

codeStudy123 — Wed, 29 Jun 2022 21:40:30 +0900

HTML(HyperText Markup Language)은 웹 문서를 작성하는 태그 언어이다.

웹 브라우저는 한 번에 하나의 HTML 페이지를 화면에 출력한다.

HTML 언어의 역사는 따로 찾아보면 재밌는 글들이 많을 것이다.

HTML5에서 HTML 페이지는 <!DOCTYPE> 선언과 주석문, 그리고 헤드 부분과 바디 부분으로 구성된다.

<!DOCTYPE html>
<html>
<head>
<title>HTML</title>
</head>
<body>
    <!--주석문 화면에 출력x-->
</body>
</html>

위 코드의 태그 중 <html>, <head>, <body>, <title> 태그는 HTML5의 필수 태그들이다. HTML 문서를 만들 때 반드시 있어야 한다.

<!DOCTYPE html>

<!DOCTYPE html>은 브라우저에게 이 문서는 html5 임을 알리는 지시어이다. 반드시 첫 줄에 있어야 한다. 소문자로 doctype으로 사용해도 된다.

HTML 문서 내에 다는 주석문으로 주석문은 웹 브라우저에 의해 출력되지 않는다. 주석문은 어느 부분에서 언제든지 사용 가능하며 주석문에 용도는 가독성과 코드의 메모 역할이다.

<head></head>

<head></head>로 둘러싼 부분으로 <title> 태그가 있는 것을 위 코드에서 볼 수 있다. head태그는 문서의 제목, 본문을 설명하는 메타 태그들 JS 코드 CSS 스타일 시트 등을 포함하며 문서의 본문은 포함되지 않는다. 한마디로 화면에 출력되지 않는 데이터들을 처리하는 부분이다.

<body></body>

문서의 본문이라고 볼 수 있는 바디(body) 태그는 JS코드도 포함할 수 있다. 바디는 화면에 보이는 데이터를 처리하며 head와 body 사이에는 아무것도 들어갈 수 없다.

HTML 태그 문법

HTML에는 수많은 태그들이 있다. 이 태그들은 HTML5만의 문법을 이용해 태그들을 사용할 수 있다. HTML5 문법은 매우 간단하다.

태드들은 태그 이름과 여러 속성들(attribute)로 구성되어 있다.

<meta name="author" content="kim">

HTML 태그들은 시작 태그와 종료 태그로 구성된 태그들이 있고 위에 meta 태그처럼 종료 태그가 없는 것이 있다.

<!--종료태그가 있는 태그 예시-->
<a href="#" target="_blank">링크</a>

<!--종료태그가 없는 태그 예시-->
<img src="" width="100" height="100" alt="이미지">

종료 태그가 있는 태그들은 종료 태그가 생략되면 오류로 처리되어 화면에 정상적으로 출력되지 않는다. 종료 태그를 꼭 달아야 한다.

태그의 속성은 대소문자를 구분하지 않는다.

<img src="" Width="100" Height="100" alt="이미지">

하지만 통일성을 위해 한 가지만 사용하는 것이 좋다. 대소문자를 섞으면서 속성을 작성하는 것은 옳지 않다.

속성 값 역시 ""로 안 묶어도 된다. ''안에 속성 값을 적어도 되고 아예 ("", '')를 사용하지 않아도 된다. 하지만 많은 HTML 웹 문서들은 ""안에 속성 값을 적는 게 룰이 되었다.

이제부터 기본적인 태그들의 사용법에 대해 정리해보겠다.

<title> 타이틀 태그

HTML5의 필수 태그인 <title>은 <head> 태그 안에 존재해야 한다.

<!DOCTYPE html>
<html>
<head>
<title>HTML</title>
</head>
<body>
</body>
</html>

출력결과

브라우저 상단에 웹 페이지 타이틀이 HTML인 것을 확인할 수 있다.

문단의 제목 <h1>~<h6>

일반적인 문서들은 가독성을 위해 문서를 구조화한다. 장, 절, 문단, 소제목, 제목 등 HTML5 역시 문서와 매우 비슷하다. 대제목 소제목을 달아주는 태그들이 존재한다. <h1>은 제목 태그 중 제일 큰 태그 <h6>는 제일 작은 제목 태그이다.

<!DOCTYPE html>
<html>
<head>
<title>HTML</title>
</head>
<body>
    <h1>H1</h1>
    <h2>H2</h2>
    <h3>H3</h3>
    <h4>H4</h4>
    <h5>H5</h5>
    <h6>H6</h6>
</body>
</html>

결과

<title>의 또 다른 기능 툴팁

<title> 태그는 설명문(툴팁)의 기능도 있다.

<h1 title="h1태그의 툴팁입니다.">H1</h1>

<p>, <hr>, <br> (단락, 수평선, 줄 넘기) 태그

paragraph으로 나눌 수 있는 <p> 태그는 문단을 표현하기 위한 태그이다. </p> 종료 태그 다음에는 자동으로 빈 줄이 생긴다.

<!DOCTYPE html>
<html>
<head>
<title>HTML</title>
</head>
<body>
    <p>
        HTML 문서에서 문단을 표현하기 위한 태그는 
        무엇이 있을까? 같이 알아가보자.
    </p>
    <p>
        문단이 나누어 진 것 같다. 종료 태그 기준으로 자동으로 빈 줄도 생겼다.
        신기하다.
    </p>
</body>
</html>

문단 내에서 내용 전환이 필요할 때 수평선을 삽입해서 시각적 효과로 문단을 구분할 수 있다. 수평선을 그어주는 태그는 <hr>이다. 종료 태그는 없다.

<!DOCTYPE html><html lang="ko"><head><title>수평선</title></head>
<body>
    수평선
    <hr>
    그어볼까?
    <hr>
</body>
</html>

실행결과

HTML 코드는 <Enter> 키를 여러 개 입력해도 웹 상에서 다음 줄로 넘어가지 않는다. 새로운 줄로 넘어가 출력시키고 싶으면 <br> 태그를 사용하면 된다.

<!DOCTYPE html><html lang="ko"><head><title>줄바꿈</title></head>
<body>
    아무리 줄바꿈를 해도


    웹 상에서는 엔터키가 안먹히네 ㅜ
    근데 <br>
    &lt;br&gt;로는 넘어가진다.
    <br><br><br>
    3줄 넘기
</body>
</html>

문자, 기호, 심볼입력

HTML 문서에서 문자들은 유니코드 UTF-8 코드체계로 작성되는 것이 표준이다.

UTF-8은 현재 가장 다양한 종류의 문자, 기호, 심볼을 표현할 수 있는 코드 체계이다. 하지만, '<', '>'와 같은 HTML 예악 어나 다양한 수학기호나 특수기호는 키보드로 입력하기 힘들다. 키보드로 입력하기 위해 엔터티와 코드 표현을 사용하면 된다.

&엔터티; &#코드값;

방법은 위와 같이 두 가지이다.

<!DOCTYPE html><html lang="ko"><head><title>줄바꿈</title></head>
<body>
y = &sum;x
<br>
&#60;body&#62; 와 &lt;head&gt; 태그 ㅎ
</body>
</html>

앤터티와 코드표현에 대한 정보는 외울 필요는 절대 없다. 필요할 때마다 인터넷에 찾아보는 것이 좋다.

https://aneok.tistory.com/86

HTML 자주 사용 특수문자 코드표 (Entity code)

Entity code 자주 사용하는 html 앤티티 코드를 정리하였습니다. 간혹 정말 필요한데 검색할려니 마땅히 무엇을 적어야 할지 몰라 당황했던적이 있습니다. 생각해보면 특수문자 또는 html code라고만

aneok.tistory.com

이 사이트가 정리가 잘 되어있다.

그대로 출력하는 태그 <pre>

브라우저는 개발자가 HTML 문서의 모양을 포맷하기 위해 삽입한 여러 개의 빈칸이나 탭 줄바꿈을 모두 하나의 빈칸으로만 처리한다. 개발자가 의도한 모양대로 출력하기 위해서는 <pre> 태그를 사용하면 된다.

<!DOCTYPE html><html lang="ko"><head><title>줄바꿈</title></head>
<body>
&lt;pre&gt; 사용 전: 개발자가 의도한대로
                    출력이 왜 안돼~
<pre>
    개발자가 의도한대로
    출력이 돼~
      이것도 가    능
</pre>
</body>
</html>

블록태그와 인라인 태그

HTML 태그들은 블록 태그(block) 인라인(inline) 태그 두 가지로 나뉜다.

블록 태그는 항상 새 라인에서 시작하고 브라우저의 왼쪽 끝에서 오른쪽 끝까지 블록 공간을 차지한다.

반대로 인라인 태그는 블록 콘텐트의 일부를 표현하는 데 이용된다.

많이 사용하는 블록 태그 중 <div> 태그가 있다. <div>는 특별한 기능과 의미가 없다 그냥 의미 없는 블로 태그이다.

인라인에서 의미없는 태그는 <span>이다. 보통 이런 의미 없는 태그로 CSS 스타일을 적용하거나 JS로 다루거나 구조화할 때 많이 사용된다.

예)

<!DOCTYPE html><html lang="ko"><head><title>줄바꿈</title></head>
<body>
<h3>&lt;div&gt;와 &lt;span&gt;</h3>
<hr>
<div style="background-color: beige; padding: 20px;">
    <span style="color: red;">1980년</span>, 유럽 입자 물리 연구소(CERN)의 계약자였었던 물리학자 <span style="color:skyblue;">팀 버너스리</span>가 
    HTML의 원형인 인콰이어를 제안하였다.
</div>
</body>
</html>

커버사진

<a href="https://www.flaticon.com/kr/free-icons/html-5" title="html 5 아이콘">Html 5 아이콘 제작자: Freepik - Flaticon</a>

https://www.flaticon.com/kr/free-icon/html-5_919827

[백준] 9733번: 꿀벌_Java

codeStudy123 — Fri, 24 Jun 2022 14:29:45 +0900

제목: 꿀벌

실버5

문제

꿀벌이 하는 일은 다음과 같이 분류할 수 있다.

휴식(Re), 순찰(Pt), 방청소(Cc), 꽃가루 먹기(Ea), 새끼 돌보기(Tb), 벌집 짓기와 관리(Cm), 외부 활동(Ex)

한 꿀벌이 1시간 동안 한 일이 주어졌을 때, 각각을 몇 번 했고, 비율이 어떻게 되는지 구하는 프로그램을 작성하시오.

입력

입력은 꿀벌이 한 일이 공백과 줄바꿈으로 구분되어서 주어진다. 최대 24개의 일을 한다.

출력

각각의 일을 한 횟수와 비율을 공백으로 구분하여 출력한다. 출력은 {Re,Pt,Cc,Ea,Tb,Cm,Ex} 순서대로 하며, 비율은 소수점 둘째 자리까지 출력한다. 주어진 목록에 없는 일은 출력하지 않는다.

입력의 마지막 줄에는 "Total <total> 1.00"을 출력하며, <total>은 꿀벌이 한 일의 개수이다.

예제 입력 1 복사

Cc Pt Pt Re Tb Re Cm Cm Re Pt Pt Re Ea Ea Pt Pt
Pt Re Re Cb Cb Pt Pt Cb

예제 출력 1 복사

Re 6 0.25
Pt 9 0.38
Cc 1 0.04
Ea 2 0.08
Tb 1 0.04
Cm 2 0.08
Ex 0 0.00
Total 24 1.00

어설픈 내 코드

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;
public class Main {
	public static void main(String[] args)throws IOException {
		BufferedReader br = new BufferedReader(new InputStreamReader(System.in));
		int[] out = new int[7];
		String[] strArr = {"Re","Pt","Cc","Ea","Tb","Cm","Ex"};
		int count=0;
		String stringinput ="";
		while(stringinput!=null) {
			stringinput=br.readLine();
			if(count>24||stringinput==null||stringinput.equals("")){
				break;
			}
			String[] str = stringinput.split(" ");
			count+=str.length;
			
			for (int i = 0; i < str.length; i++) {
				if (str[i].equals("Re")) {
					out[0]++;
				} else if (str[i].equals("Pt")) {
					out[1]++;
				} else if (str[i].equals("Cc")) {
					out[2]++;
				} else if (str[i].equals("Ea")) {
					out[3]++;
				} else if (str[i].equals("Tb")) {
					out[4]++;
				} else if (str[i].equals("Cm")) {
					out[5]++;
				} else if (str[i].equals("Ex")) {
					out[6]++;
				}
			}
		
		}
		
		float totalF=0f;
		for(int i=0; i<7;i++) {
			float f = 0f; 
			if(out[i]!=0) {
				f = (float)((float)out[i]/count);
				totalF+=f;
			}
			System.out.printf("%s %d %.2f\n",strArr[i],out[i],f);
		}
		System.out.printf("Total %d 1.00",count);
	}
}

https://www.acmicpc.net/problem/9733

9733번: 꿀벌

각각의 일을 한 횟수와 비율을 공백으로 구분하여 출력한다. 출력은 {Re,Pt,Cc,Ea,Tb,Cm,Ex} 순서대로 하며, 비율은 소수점 둘째 자리까지 출력한다. 주어진 목록에 없는 일은 출력하지 않는다. 입력의

www.acmicpc.net

[백준] 4948번: 베르트랑 공준_Java

codeStudy123 — Wed, 11 May 2022 22:01:55 +0900

제목: 베르트랑 공준

실버2

문제

베르트랑 공준은 임의의 자연수 n에 대하여, n보다 크고, 2n보다 작거나 같은 소수는 적어도 하나 존재한다는 내용을 담고 있다.

이 명제는 조제프 베르트랑이 1845년에 추측했고, 파프누티 체비쇼프가 1850년에 증명했다.

예를 들어, 10보다 크고, 20보다 작거나 같은 소수는 4개가 있다. (11, 13, 17, 19) 또, 14보다 크고, 28보다 작거나 같은 소수는 3개가 있다. (17,19, 23)

자연수 n이 주어졌을 때, n보다 크고, 2n보다 작거나 같은 소수의 개수를 구하는 프로그램을 작성하시오.

입력

입력은 여러 개의 테스트 케이스로 이루어져 있다. 각 케이스는 n을 포함하는 한 줄로 이루어져 있다.

입력의 마지막에는 0이 주어진다.

출력

각 테스트 케이스에 대해서, n보다 크고, 2n보다 작거나 같은 소수의 개수를 출력한다.

예제 입력 1

예제 출력 1

1 10 13 100 1000 10000 100000 0

코드

import java.io.*;

class Main {
	public static void main(String[] args) throws IOException {
		BufferedReader br = new BufferedReader(new InputStreamReader(System.in));

		while (true) {
			int N = Integer.parseInt(br.readLine());
			if (N == 0)
				break;
			System.out.println(primeNumberMethod(N));
		}
	}

	static int primeNumberMethod(int N) {
		boolean[] b = new boolean[N * 2 + 1];
		b[0] = false;
		b[1] = false;
		for (int i = 2; i <=Math.sqrt(2 * N + 1); i++) {
			for (int j = i * i; j < 2 * N + 1; j += i) {
				b[j] = true;
			}
		}
		int count = 0;
		for (int i = N + 1; i < b.length; i++) {
			if (!b[i])
				count++;
		}
		return count;
	}
}

알고리즘 분류

https://www.acmicpc.net/problem/4948

4948번: 베르트랑 공준

베르트랑 공준은 임의의 자연수 n에 대하여, n보다 크고, 2n보다 작거나 같은 소수는 적어도 하나 존재한다는 내용을 담고 있다. 이 명제는 조제프 베르트랑이 1845년에 추측했고, 파프누티 체비쇼