'분류 전체보기' 카테고리의 글 목록 (7 Page)

HTML 요소(Element)

- 여는 태그와 닫는 태그와 그 사이의 내용을 모두 통틀어 HTML요소(Element)라고 부른다
        - 모든 태그에 여는 태그와 닫는 태그가 반드시 존재하는 것은 아니다
   - br, hr처럼 닫는 태그를 생략 가능한 태그들도 있다

< (less than) : <를 출력할 때 사용하는 엔티티
> (greater than) : >를 출력할 때 사용하는 엔티티

<html>
    <head>
        <title>head 부분</title>
    </head>
    <body>
        <p>
            <태그>
        </p>
    </body>
</html>

속성(Attribute)

- 모든 요소는 속성(attribute)을 가질 수 있다
        - 속성은 해당 요소의 여는 태그에 정의해야 한다
        - 속성은 해당 요소에 대한 추가적인 정보를 묘사한다
        - 대부분의 속성은 속성 이름과 속성 값이 짝을 이룬다

하나의 요소에 여러개의 속성이 들어갈 수 있다

<p name="p5" id="p5" class="para"> 여러개의 속성 </p>

<p style="border: 두께 px 색; 가로: px; 높이: px></p> : 박스 만들기

<html>
    <head>
        <title>head 부분</title>
    </head>
    <body>
        <p>
            <p style="border: solid 3px purple; width: 100px; height: 100px;"></p>
        </p>
    </body>
</html>

<p title="넣을 내용"> : 마우스 커서를 갖다대면 내용이 나온다

<html>
    <head>
        <title>head 부분</title>
    </head>
    <body>
        <p>
            <p title="마우스를 올리고 있으면 나오는 내용">마우스를 올려보세요</p>
        </p>
    </body>
</html>

어떤 속성들은 속성의 값이 없는 경우도 있다 (e.g checkbox의 checked, disabled 속성)

<html>
    <head>
        <title>head 부분</title>
    </head>
    <body>
        <p>
            <input type="checkbox" name="menu" id="meat" checked>제육정식A
            <input type="checkbox" name="menu" id="fish" disabled>고등어구이정식A
        </p>
    </body>
</html>

다른 페이지로 이동 할 수 있는 링크 걸기

1. <a></a> 태그 사용하기

1-1 다른 페이지로 이동 할 수 있는 링크 걸기

a태그의 href 속성에 원하는 페이지의 경로를 적어서 사용

<html>
    <head>
        <title>head 부분</title>
    </head>
    <body>
        <a href="http://www.naver.com">링크</a>
    </body>
</html>

링크를 클릭하게되면 입력해놓은 주소로 이동된다

예를 들어

- https://comic.naver.com/webtoon/list?titleId=823933 가 있을 때
- 해당 위치에서 ./naver.com은 https://comic.naver.com/webtoon/naver.com으로 간다
   (가장 마지막 위치에 있는 /에서 해당 경로를 찾는다)
- 해당 위치에서 /naver.com은 https://comic.naver.com/naver.com으로 간다
   (가장 처음 위치에 있는 /에서 해당 경로를 찾는다)
- 해당 위치에서 //naver.com은 http://naver.com으로 간다
   (프로토콜(https:) 다음에 있는 //에서 해당 경로를 찾는다)

1-2 같은 경로의 다른 페이지로 링크 걸기

<a href="./01_HTML이란.html">01</a>
<a href="./02_제목과 문단.html">02</a>
<a href="./03_요소.html">03</a>
<a href="./04_속성.html">04</a>

2.자바 스크립트 사용하기

- 자바스크립트로는 꼭 a태그가 아니더라도 링크를 걸 수 있다

a 태그로 이동

<p 
style="width: 100px; height: 100px; border: solid 3px green;"
onclick="location.href='https://google.com';"
></p>

자바스크립트로 이동

<p 
style="width: 100px; height: 100px; border: solid 3px orange;"
onclick="orangeBoxClickHandler();"
/>

// 자바스크립트로 구글로 이동하는 함수 정의
<script>
function orangeBoxClickHandler() {
    location.href = "https://google.com";
}
</script>

'HTML, CSS' 카테고리의 다른 글

HTML - List (리스트) (0)	2024.07.18
HTML - table (표) (0)	2024.07.17
HTML - img (이미지) (0)	2024.07.16
HTML(1) (0)	2024.07.15
DataStream (0)	2024.07.03

HTML : HyperText Markup Language

웹 페이지와 웹 애플리케이션의 구조를 만들기 위해 사용되는 표준 마크업 언어

HTML은 다양한 요소와 태그를 사용하여 문서의 콘텐츠와 레이아웃을 정의

- HTML에서는 Enter, 여러개의 스페이스도 하나의 공백으로 쳐서 공백을 표시할때는   , 줄바꿈시 <br>

  ※ Entity : &로 시작해서 ;으로 끝나는 형식의 특수문자들, HTML에서 이스케이프 역할을 한다 ex>  

- 웹 브라우저의 종류로는 Chrome, Safari, Whale, Edge, Internet Explorer, FireFox 등이 있다

- 웹 브라우저가 HTML의 내용을 보고 화면에 그리는 작업을 렌더링(rendering)이라고 합니다

 : 주석처리


<html></html> : 현재 보고 있는 웹 페이지의 범위를 정의하는 태그

<html>
생략
</html>

<head></head> : 현재 웹 페이지의 여러가지 설정들을 정의하는 태그

<title></title> : 웹 페이지의 제목을 작성하는 부분

<html>
    <head>
        <title>head 부분</title>
    </head>
    <body>
    </body>
</html>

<h(1~6)> : Heading 태그

<html>
    <head>
        <title>head 부분</title>
    </head>
    <body>
        <h1>Heading 태그 1</h1>
        <h2>Heading 태그 2</h2>
        <h3>Heading 태그 3</h3>
        <h4>Heading 태그 4</h4>
        <h5>Heading 태그 5</h5>
        <h6>Heading 태그 6</h6>
    </body>
</html>

<p></p> : p(paragraph)태그는 문단을 작성할때 사용하는 태그

<html>
    <head>
        <title>head 부분</title>
    </head>
    <body>
        <p>문단 작성</p>
        <p>문단 작성</p>
        <p>문단 작성</p>
        <p>문단 작성</p>
    </body>
</html>

Emmet : 반복되는 HTML을 편리하게 생성 할 수 있는 플러그인

x*(num) : *을 사용해 반복해서 태그 만들기

x$*(num) : $를 사용해 숫자가 증가하면서 태그 만들기

x#head$*(num) : #을 사용해 id를 설정하면서 만들기

x.bold*(num) : .을 사용해 class를 설정하면서 만들기

(x+y)*3 : +를 사용해 다른 태그를 같은 선상에서 만들기

x>y*5 : >를 사용해 태그 내부에 자식 태그로 만들기

<pre></pre> : 내용이 형태를 유지하는 태그

<html>
    <head>
        <title>head 부분</title>
    </head>
    <body>
        <pre>
             /)/)
            (  ..)
            (   >$
        </pre>
    </body>
</html>

대부분의 HTML 태그들은 의미만 지니고 있는 경우가 많다 (HTML은 웹 페이지의 뼈대 역할)

<code></code> : 일반 텍스트와 차별되게 출력되며 가독성이 높아진다

<code>
    class Main {
        public static void main(String[] args) {
            System.out.println("Hello, world!");
        }
    }
</code>

code태그로 출력

p태그로 출력
문단 내부에서 글자를 꾸며주는 태그들

b : 글자를 굵게
strong : 중요한 내용
i : 이텔릭체 (나중에 아이콘이라는 의미로 변질됨)
mark : 형광펜으로 표시
del : 취소선
ins : 밑줄로 강조
sub : sub text ( 작은 글씨 아래로 )
sup : super text ( 작은 글시 위로 )

<html>
    <head>
        <title>head 부분</title>
    </head>
    <body>
        <p>
            <b>글자를 굵게</b> <br>
            <strong>중요한 내용</strong> <br>
            <i>이텔릭체 (나중에 아이콘이라는 의미로 변질됨)</i> <br>
            <mark>형광펜으로 표시</mark> <br>
            <del>취소선</del> <br>
            <ins>밑줄로 강조</ins> <br>
            <sub>sub text (작은 글씨 아래로)</sub>
            비교용 글자
            <sup>super text (작은 글씨 위로)</sup>
        </p>
    </body>
</html>

'HTML, CSS' 카테고리의 다른 글

HTML - List (리스트) (0)	2024.07.18
HTML - table (표) (0)	2024.07.17
HTML - img (이미지) (0)	2024.07.16
HTML(2) (0)	2024.07.16
DataStream (0)	2024.07.03

메인은 사실 메인 쓰레드라고 부른다

public static void main(String[] args) {

쓰레드 인스턴스 생성

MyThread t0 = new MyThread(10);
MyThread t1 = new MyThread(3);
MyThread t2 = new MyThread(8);
MyThread t3 = new MyThread(100);
MyThread t4 = new MyThread(100);

메인 쓰레드는 다른 쓰레드의 시작 버튼만 눌러주고 코드를 계속 진행한다

t0.start();
t1.start();
t2.start();
t3.start();

Thread.sleep(ms초) : 현재 쓰레드를 (ms)초 멈춘다

class AssistThread extends Thread {
	
	int parent;
	
	public AssistThread(int parent) {
		this.parent = parent;
		this.setDaemon(true);
	}
	
	@Override
	public void run() {
		while (true) {
			System.out.printf("%d번 쓰레드의 보조 쓰레드(데몬)입니다...\n", parent);
			
			try {
				Thread.sleep(1000);
			} catch (InterruptedException e) {
				e.printStackTrace();
			}
		}
	}
}

Thread 클래스를 상속받으면 main과 동시에 동작할 수 있는 쓰레드가 된다

class MyThread extends Thread {
	
	static int totalNumber = 0;
	
	int num;
	int target;
	
	public MyThread(int target) {
		num = totalNumber++;
		this.target = Math.abs(target);
	}
	
	@Override
	public void run() {
		new AssistThread(num).start();;
		
		// 이 쓰레드의 main같은 곳
		// 메인 쓰레드 또는 다른 쓰레드에서 이 쓰레드를 실행하면 이곳의 코드를 실행한다
		int i = 0;
		while (i++ < target) {
			System.out.printf("Thread%d: %d\n", num, i);
			
			try {
				Thread.sleep(1000);
			} catch (InterruptedException e) {
				e.printStackTrace();
			}
		}
	}
}

'JAVA' 카테고리의 다른 글

Network (0)	2024.07.08
PrintStream (0)	2024.07.05
Buffered (0)	2024.07.04
AutoClose (0)	2024.07.01
File (0)	2024.06.29

Scanner sc = new Scanner(System.in);

소켓은 인스턴스 생성시 접속할 IP주소와 포트번호가 필요하다
소켓 생성시 서버가 올바르다면 접속이 완료된다

try(
        Socket s = new Socket("192.168.0.1", 9090);
) {
    try (
            PrintStream out = new PrintStream(s.getOutputStream());
            BufferedInputStream in = new BufferedInputStream(s.getInputStream());
    ) {
        System.out.println(new String(in.readAllBytes()));
        while (true) {
        out.println("> ");
        out.println(sc.nextLine());
        }
    }
} catch (UnknownHostException e) {
    e.printStackTrace();
} catch (IOException e) {
    e.printStackTrace();
}

'JAVA' 카테고리의 다른 글

Thread (0)	2024.07.08
PrintStream (0)	2024.07.05
Buffered (0)	2024.07.04
AutoClose (0)	2024.07.01
File (0)	2024.06.29

- 문자를 훨씬 편리하게 출력할 수 있는 메서드들이 추가된 클래스
- println(), printf(), print() 등의 메서드를 사용할 수 있다
- Buffered -> 성능 증가
- Print -> 편리함 증가

특징

편리한 출력: println(), printf(), print() 등으로 데이터를 편리하게 출력
버퍼링 지원: Buffered 기능을 통해 성능이 증가
편리성 증가: 데이터를 다양한 형식으로 출력할 수 있어 편리
자동 플러시: println(), printf(), print() 메서드 사용 시 자동으로 플러시가 발생하여 출력

활용 메서드

printf(String format, Object... args): 지정한 형식으로 문자열을 출력
println(String x): 문자열을 출력한 후 개행을 추가
print(String x): 문자열을 출력하지만 개행은 추가

 // 파일 객체 생성
File f = new File("myfiles/print.txt");

try (
    // FileOutputStream을 사용해 파일에 출력
    FileOutputStream fout = new FileOutputStream(f, true);
    // PrintStream을 통해 데이터를 출력
    PrintStream out = new PrintStream(fout);
) {
    // 포맷을 사용한 출력
    out.printf("%s: %d\n", "Age", 25);
    // 문자열 출력 및 개행
    out.println("Hello, world!~!");
    // 한글 출력 및 개행
    out.println("한글~!!");
} catch (IOException e) {
    e.printStackTrace();
}

'JAVA' 카테고리의 다른 글

Thread (0)	2024.07.08
Network (0)	2024.07.08
Buffered (0)	2024.07.04
AutoClose (0)	2024.07.01
File (0)	2024.06.29

- 데이터를 하나씩 전송하는 것이 아니라 모아서 한번에 전송하는 기능을 제공하는 클래스
- 앞에 Buffered가 붙은 클래스를 사용하면 알아서 버퍼 방식이 적용된다
- BufferedReader/Writer : 버퍼 기능 + char 단위 입출력
- BufferedInputStream/OutputStream : 버퍼 기능 + byte 단위 입출력
- InputStreamReader : byte단위의 스트림을 char단위로 업그레이드 해주는 클래스

Long start, end;

한 글자씩 출력해주는 버퍼 생성

File testFile = new File("myfiles/test.txt");
		
long start, end;

비교를 하기 위한 시간초 세기

start = System.currentTimeMillis();

try (
        FileReader in = new FileReader(testFile);
) {
    int ch;
    while ((ch = in.read()) != -1) {
        System.out.print((char)ch);
    }
} catch (IOException e) {
    e.printStackTrace();
}

end - start 로 걸린 시간 측정

end = System.currentTimeMillis();
long time1 = end - start;

System.out.println("걸린시간1: " + time1 + "ms");

똑같이 시간을 재는 Long 타입 time2 선언

long time2 = end - start;

start = System.currentTimeMillis();
try (
        FileReader fin = new FileReader(testFile);
        BufferedReader in = new BufferedReader(fin);
) {

Buffered 스트림에는 한 줄씩 읽는 기능이 추가되어 있다
읽을것이 있으면 읽을 내용을 반환, 없으면 null을 반환

String line;
    while ((line = in.readLine()) != null) {
        System.out.println(line);
    }
} catch (IOException e) {
    e.printStackTrace();
}
end = System.currentTimeMillis();

System.out.println("걸린시간2: " + time2 + "ms");

Scanner 대신 Buffered 클래스를 사용하여 콘솔로부터 입력받기
(Scanner는 들어오는 문자에 대한 정규표현식 검사를 하기 때문에 속도가 훨씬 느리다)

try (
    InputStreamReader in = new InputStreamReader(System.in);
    BufferedReader sc = new BufferedReader(in);
) {
    while (true) {
        if (sc.readLine().equals("exit")) {
            break;
        }
    }
} catch (IOException e) {
    e.printStackTrace();
}

System.out.println("걸린시간3: " + time3 + "ms");

'JAVA' 카테고리의 다른 글

Network (0)	2024.07.08
PrintStream (0)	2024.07.05
AutoClose (0)	2024.07.01
File (0)	2024.06.29
JavaIO (0)	2024.06.15

# DataOutputStream, DataInputStream

- 자바의 데이터 타입(int, float, double ...)을 전송할 수 있는 스트림
- 자바의 변수 형식으로 전송하기 때문에 데이터를 전달받는 쪽에서도
자바를 해석할 수 있어야 한다

DataOutputStream의 메소드 (write 계열)
- writeInt(int v) : 정수형 int 값을 기록합니다.
- writeDouble(double v) : 실수형 double 값을 기록합니다.
- writeFloat(float v) : 실수형 float 값을 기록합니다.
- writeByte(byte v) : byte 값을 기록합니다.
- writeShort(short v) : short 값을 기록합니다.
- writeUTF(String s) : UTF-8 문자열을 기록합니다.
DataInputStream의 메소드 (read 계열)
- readInt() : 기록된 int 값을 읽습니다.
- readDouble() : 기록된 double 값을 읽습니다.
- readFloat() : 기록된 float 값을 읽습니다.
- readByte() : 기록된 byte 값을 읽습니다.
- readShort() : 기록된 short 값을 읽습니다.
- readUTF() : 기록된 UTF-8 문자열을 읽습니다.

public static void main(String[] args) {
    try (
            FileOutputStream fout = new FileOutputStream("myfiles/data.abc");
            DataOutputStream dout = new DataOutputStream(fout);
    ) {
        dout.writeInt(100000);
        dout.writeDouble(1213.123);
        dout.writeFloat(123.123F);
        dout.writeByte(123);
        dout.writeShort(2000);
        dout.writeUTF("문자열");
    } catch (Exception e) {
        e.printStackTrace();
    }

    try(
        FileInputStream fin = new FileInputStream("myfiles/data.abc");
        DataInputStream din = new DataInputStream(fin);

    ) {
        System.out.println("처음썼던 int 값: " + din.readInt());
        System.out.println("두번째로 쓴 double 값: " + din.readDouble());
        System.out.println("세번째로 쓴 float 값: " + din.readFloat());
        System.out.println("네번째로 쓴 byte 값: " + din.readByte());
        System.out.println("다섯번째로 쓴 short 값: " + din.readShort());
        System.out.println("마지막 문자열: " + din.readUTF());
    } catch (FileNotFoundException e) {
        e.printStackTrace();
    } catch (IOException e) {
        e.printStackTrace();
    }
}

'HTML, CSS' 카테고리의 다른 글

HTML - List (리스트) (0)	2024.07.18
HTML - table (표) (0)	2024.07.17
HTML - img (이미지) (0)	2024.07.16
HTML(2) (0)	2024.07.16
HTML(1) (0)	2024.07.15

닫을 수 있는(Closeable 인터페이스가 구현된) 클래스는
try문을 사용할 때 AutoClose 문법을 사용할 수 있다

try문에 ()을 열고 사용한 변수는 try문이 끝나면서 자동으로 닫히게 된다

try (
    FileReader in = new FileReader("myimages/memo/test.txt");
    FileWriter out = new FileWriter("myimages/memo/test.txt", true);
) {

FileWriter의 append값을 true로 주면 추가 모드가 되어서
파일에 내용을 계속 누적시키게 된다

			out.write("안녕하세요~\n");
		} catch (IOException e) {
			e.printStackTrace();
		}
		
	}
}

'JAVA' 카테고리의 다른 글

PrintStream (0)	2024.07.05
Buffered (0)	2024.07.04
File (0)	2024.06.29
JavaIO (0)	2024.06.15
Exception (0)	2024.06.12

오혜준의 개발 블로그