끝까지 풀지 못하고 해석을 봐야했다. (https://seungyong20.tistory.com/39)

• 원리를 완벽히 파악하지 못했다. (격자 칸들만 제외할 수 있다는 걸 깨닫지 못함)
• 원리를 파악했다고 하더라도, 구현에 대한 노하우가 부족했음
• 무작정 플레 난이도에 도전해봤는데, 아직까진 역시 내 수준이 부족함을 깨닫게 해준 문제이다

최종 풀이

# 가능하다면 모든 칸을 다 먹어야 한다
# R = 홀수 or C = 홀수일 경우 모든 칸 먹기 가능
# R = 홀수라면 ㄹ 형태, C = 홀수라면 뒤집힌 ㄹ 형태

# R, C가 모두 짝수라면 한 칸을 버려야 한다
# 문제: 1) 어느 칸을 버려야 하는가? 2) 화살표 구현

import sys

R, C = map(int, input().split())
land = [[0 for i in range(C)] for j in range(R)]

for i in range(R):
    land[i] = list(map(int, sys.stdin.readline().split()))

if R%2 == 1: # ㄹ 출력
    print(('R'*(C-1) + 'D' + 'L'*(C-1) + 'D') * (R//2) + 'R'*(C-1))

elif C%2 == 1: # 뒤집힌 ㄹ 출력
    print(('D'*(R-1) + 'R' + 'U'*(R-1) + 'R') * (C//2) + 'D'*(R-1))

elif R%2 == 0 and C%2 == 0: # 여러 칸 중 하나 제외
    lowest = 1000
    location = [-1, -1] # 제외할 칸의 좌표

    for i in range(R): # 제외할 칸(기쁨이 가장 낮은 칸) 고르기
        if i % 2 == 0: # 짝수행 중에서
            for j in range(1, C, 2): # 홀수열들이 후보
                if lowest > land[i][j]:
                    lowest = land[i][j]
                    location = [i, j]
        else:  # 홀수행 중에서
            for j in range(0, C, 2): # 짝수열들이 후보
                if lowest > land[i][j]:
                    lowest = land[i][j]
                    location = [i, j]

    res = ('D'*(R-1) + 'R' + 'U'*(R-1) + 'R')*(location[1]//2) # 제외할 칸에 닿기 전 line까지 위아래로 훑기

    # 제외 칸 피해가기 구현 (x,y 좌표가 0에서 시작함을 헷갈리지 말자)
    ## x좌표가 제외칸, 제외칸-1 에 있는 두 줄은 ㄹ을 그리며 통과한다
    ## 그 외 구간은 up&down으로 통과한다. 

    x = 2*(location[1]//2) # 현재 위치의 x좌표
    y = 0 # 현재 위치의 y좌표 - 무조건 맨 위에서 시작 
    xColumn = 2*(location[1]//2) + 1

    while x != xColumn or y != R-1:
        if x < xColumn and [y, xColumn] != location:
            x += 1
            res += 'R'
        elif x == xColumn and [y, xColumn-1] != location:
            x -= 1
            res += 'L'
        if y != R-1:
            y += 1
            res += 'D'

    res += ('R' + 'U'*(R-1) + 'R' + 'D'*(R-1)) * ((C - location[1] - 1)//2)

    print(res)

1. 전체 land의 크기가 R=홀수 또는 C=홀수를 만족하면 무조건 모든 칸을 먹을 수 있다.
   • 그대로 구현 해주면 됨 (ㄹ 형태 또는 up&down)
2. 문제는 R, C 가 모두 짝수인 경우이다.
   • 이때는 반드시 한 칸은 포기해야 한다.
   • 이때, 빨간 원에 해당하는 칸만 제외할 수 있다.
     • 하얀 칸 두개 제외하는게 나은 경우도 있지 않나?
       • 하얀 칸을 고르면 여러 칸을 제외하게 된다. 그리고 필연적으로 빨간 원도 그 안에 포함되게 되므로, 굳이 그럴 필요 없이 빨간 원만 하나 제외하는 것이 깔끔하다. (물론 그게 최댓값이다)
3. 우선 어떤 칸을 제외할지를 정해야 한다.
   • 위 빨간 원들끼리만 비교해주면 된다
     • 기쁨의 크기가 가장 낮은 칸의 위치를 location = [x, y] 로 저장해준다
4. 제외칸을 피해가는 경로를 구현한다

A. 제외칸 직전까지는 up&down으로 접근한다

res = ('D'*(R-1) + 'R' + 'U'*(R-1) + 'R')*(location[1]//2)

• 이를 거치고 나면, 탑승자는 제외칸의 location 좌표에 따라 아래 초록칸 중 하나에 위치하게 된다.
  • 제외칸은 x축 기준으로 1) 탑승자와 같은 line에 있거나, 2) 한 칸 오른쪽에 있게 된다

B.ㄹ 자 모양으로 제외칸을 피해간다

• 제외칸의 x좌표를 기준선으로 두고, 좌우로 왔다갔다 하면서 통과하면 된다
• 맨 아래까지 그렇게 통과한다

x = 2*(location[1]//2) # 현재 위치의 x좌표
y = 0 # 현재 위치의 y좌표 - 무조건 맨 위에서 시작 
xColumn = 2*(location[1]//2) + 1 # 제외할 칸의 x좌표. 기준선이 된다.

while x != xColumn or y != R-1: # x좌표는 기준선을 넘지 않아야 하며, y좌표는 바닥을 뚫고 나갈 수 없다. 
    if x < xColumn and [y, xColumn] != location:
        x += 1
        res += 'R'
    elif x == xColumn and [y, xColumn-1] != location:
        x -= 1
        res += 'L'
    if y != R-1:
        y += 1
        res += 'D'

res += ('R' + 'U'*(R-1) + 'R' + 'D'*(R-1)) * ((C - location[1] - 1)//2)

*C. 제외칸을 통과한 나머지는 다시 up&down으로 도착지까지 간다. *

이 코드가 작동하는 과정을 그림으로 표현하면 다음과 같다.

변수 s는 문자(char)에 대한 포인터이다. 어떤 문자? "APPLE" 의 첫글자인 "A"이다. 즉, s는 A가 저장되어 있는 주소를 가리키는 포인터이다.

#include <stdio.h>

int main (void){
    char *s = "APPLE";
    printf("포인터 s: %p\n", s); 
    // 포인터 s가 가리키는 주소 = 첫글자 'A'의 주소
    printf("s의 주소: %p\n", &s); 
    // 포인터 s의 주소

    printf("%c: %p\n", s[0], &s[0]); 
    // 첫글자 'A'의 주소 = 포인터 s가 가리키는 주소
    printf("%c: %p\n", s[1], &s[1]); 
    // 'P'의 주소
    printf("%c: %p\n", s[2], &s[2]); 
    // 'P'의 주소
    printf("%c: %p\n", s[3], &s[3]); 
    // 'L'의 주소
    printf("%c: %p\n", s[4], &s[4]); 
    // 'E'의 주소
    printf("%i: %p\n", s[5], &s[5]); 
    // '\0'의 주소
}

결과:

• 포인터 s를 호출하면 s[0]('A')의 주소를 가리키고 있음을 알 수 있다.
• 헷갈리지 말아야 할 것은, 포인터 s가 가리키는 주소가 &s[0] 와 같을 뿐이라는 것이다.
  • 포인터 s 자체가 저장되어있는 주소는 0x7ffd751a3120 로 따로 있다.

이를 통해, 우리가 "APPLE"이라는 문자열이 저장되어 있는 string s를 호출하면 컴퓨터는 다음과 순서로 작업을 수행한다고 이해했다.

1) s의 주소로 간다. (0x7ffd751a3120) 2) s가 'A'가 있는 주소를 가리키고 있다. 그 주소로 간다. (0x42b2aa) 3) 그 주소에 저장되어 있는 char 값, 즉 'A'를 출력한다. 4) 그 다음 값 'P' 을 읽는다. (바로 옆 주소인 0x42b2ab) 5) 쭉쭉 읽는다. 6) \0을 마주치면, 끝이라는 표시이므로 읽는 것을 멈춘다. 7) 결과적으로 "APPLE"이 출력되었다.

우리는 s를 포인터로 지정하였다. s 자체는 s[0]의 주소를 가리키는 화살표에 불과하다. 당연히 그것이 포인터의 정의니깐......

이해를 더 명확히 하기 위해 다시 한 번 실습!

#include <stdio.h>

int main (void){
    char *s = "APPLE";
    printf("s가 가리키는 주소: %p\n", s);
    printf("그 주소에 있는 값: %c\n", *s);

    printf("s가 속한 주소: %p\n", &s);
    printf("그 주소로 가면 나오는 값: %s\n", *&s);
    // s 자체는 화살표와 같음. 
    // s가 있는 곳으로 가면 문자열을 읽는 주소로 가라는 화살표만 있는 거나 마찬가지
    // 결국 화살표 따라가면 있는 s[0]부터 문자들을 읽게 됨. 

    printf("s[0] 값: %c\n",s[0]);
    printf("s[0] 주소: %p\n",&s[0]);
    printf("s[0] 주소에 있는 값: %c\n",*&s[0]);
}

변수의 메모리상 주소를 호출할 때는 & (형식지정자는 %p (pointer)) 특정 주소에 저장돼있는 값을 호출할 때는 * 를 사용한다.

• &: 주소가 어디야?
• *: 그 주소로 가줘

코드

#include <stdio.h>

int main (void){
    int n = 5;
    printf("%p\n", &n); // 메모리 속 n이 저장된 주소 출력
}

결과

메모리 주소는 16진수로 표현됨을 확인할 수 있다. 그럼 해당 주소를 다시 불러와보면 어떻게 될까?

코드2

#include <stdio.h>

int main (void){
    int n = 5;
    printf("%p\n", &n); // 메모리 속 n이 저장된 주소 출력
    printf("%i\n", *0x7ffe8dd23d8c); // 해당 주소에 저장된 값 출력
}

결과

컴파일 과정에서 에러가 떠버린다. (indirection requires pointer operand)

포인터가 잘못되었다는 식으로 나오는데, 왜일까?

그럼 주소를 &n으로 지정하여 n이 저장된 곳으로 고정해보자.

코드3

#include <stdio.h>

int main (void){
    int n = 5;
    printf("%p\n", &n); // 메모리 속 n이 저장된 주소 출력
    printf("%i\n", *&n); // 해당 주소에 저장된 값 출력
}

결과

다행히 잘 나온다. 엇? 근데 위에서 나왔던 주소와 다른 곳에 저장되어 있다.

실제로 여러번 연속으로 실행했더니 매번 주소가 바뀜을 확인할 수 있다.

그래서 저 주소 자체를 복붙한 다음 컴파일하니까 에러가 뜬 것이다.

-> 메모리 주소가 계속 바뀌는 것은 보안상 이유라고 한다.

16진수에서는 당연히 한 자리에 15까지 셀 수 있다.

0 1 2 3 4 5 6 7 8 9 까지는 10진수와 같고, 11부터 15까지는 A B C D E F 로 표기한다.

즉, 015는 0F가 되고, 15~31은 10 ~ 1F된다.

16진수를 쓰는 이유

ASCII 코드에 의해 “A, B, C”는 10진수로 65, 66, 67에 해당

컴퓨터는 10진수를 이해할 수 없으므로 2진수로 표현해보면  "01000001 01000010 01000011＂이 된다.

• 이진법은 너무 길다는 문제가 있다.
• 이를 16진수로 표현하면 2진수로 표현했을 때 보다 훨씬 간단해진다.
• 또한 컴퓨터가 정보를 표현하는 단위는 1byte (=8bit) 이를 4bit | 4bit로 나눌 수 있기 때문에 매우 유용하다.

1byte로 표현할 수 있는 최대 값인 255를 16진수로 표현하면 FF 단 두글자로 표현 가능하다.

때문에 RGB를 표현할 때 (255 255 255 = FF FF FF) 혹은 메모리 주소를 표현할 때 등 컴퓨터공학에서 자주 쓰이는 표기법이다.

10진수 vs 2진수 vs 16진수

(...)

string, 즉 문자열은 문자로 이루어진 배열이다. names라는 배열을 만든 후에 "EMMA" 라는 값을 한 인덱스 안에 넣어주면, 해당 문자열의 길이는 4자리가 될 것이다.

그러나 실제로 차지하는 메모리는 4바이트가 아닌 5바이트인데, 그 이유는 데이터간의 구분을 위해 문자열의 마지막을 알리는 Null 종단 문자가 포함되기 때문이다.

다음과 같이, 존재하지도 않을 거 같은 문자열의 5번째 자리를 int로 출력하면 0이 출력된다. (C언어 기반)

string names[4];

names[0] = "EMMA";
names[1] = "RODRIGO";
names[2] = "BRIAN";
names[3] = "DAVID";

printf("%s\n", names[0]);
printf("%c%c%c%c%i\n", names[0][0], names[0][1], names[0][2], names[0][3], names[0][4]);

결과:

names가 실제 메모리 상에 저장된 예시를 이해하기 쉬운 그림으로 표현하면 다음과 같다.

여기까지 듣고 내 노트북 메모리 속은 어떻게 생겼을지(?)가 궁금해져서 다음과 같은 코드를 짜서 확인해봤다.

대략적인 코드

int main(void)
{
    string name[2];
    name[0] = "EMMA";
    name[1] = "JAMES";
    printf("name[0] 위치 출력: ");
    for (int i = 0; i < 4; i++)
    {
        if (name[0][i] == '\0'){
            printf(" ");
        } else{
            printf("%c",name[0][i]);
        }
    }
    printf("\n\n");
        printf("name[1] 위치 출력: ");
    for (int i = 0; i < 4; i++)
    {
        if (name[1][i] == '\0'){
            printf(" ");
        } else{
            printf("%c",name[1][i]);
        }
    }
    printf("\n");
}

• name[0][i]에는 E -> M -> M -> A -> ... 이 저장되어 있을 거고
• name[1][i]에는 J -> A -> M -> E -> S ... 가 저장되어 있을 거다.
• 조건문을 달아서 null(\0)이 있을 경우 띄어쓰기를 통해 구분되도록 했다.

1. 4자리까지 찍어본 결과(위 코드):

2. 30자리까지 찍어본 결과:

3. 500자리까지 찍어본 결과(name[0][i]만 출력):

내 메모리 속에서, name[0]과 name[1]에 해당하는 위치에는 저런 순서로 character들이 저장되어 있는 거다!

재밌다

많은 프로그래밍 개념들이 추상적이라 처음에 좀 와닿지 않는데, 답변을 통해 약간이나마 감을 잡을 수 있었던 것 같다.

추후에 유명한 책을 읽거나 실습을 반복하며 감을 더 구체화해야겠다.

문답 내용

Q> What does clean code mean in the back-end(Java)?

Java 백엔드에서 클린코드는 무엇을 의미하는 거야?

GPT> Clean code in Java backend refers to code that is well-organized, readable, and easy to understand and maintain. Clean code follows established conventions and best practices, and is written in a way that maximizes clarity and minimizes ambiguity. Clean code in Java backend is important because it makes it easier to modify, test, and debug code, and it reduces the likelihood of introducing bugs or other errors.

클린코드는 잘 정돈되고, 가독성이 뛰어나며, 이해가 쉽고 유지 보수가 용이한 코드를 말한다. 클린 코드는 합의된 규칙과 모범 사례들에 의해 체계가 쌓인 개념이다. 이는 명확성을 최대화하고, 모호성을 최소화하는 것을 추구한다.

클린코드는 수정, 테스트, 디버그를 쉽게 만들어주며, 버그 또는 기타 에러의 발생 가능성을 줄이기 때문에 중요도가 높다고 볼 수 있다.

Q> Methodologically, how do I create a clean code?

그럼 방법론적으로, 클린코드는 어떻게 짜는 거지?

GPT> Creating clean code is a process that requires a combination of good design, disciplined coding practices, and an emphasis on readability and maintainability. Here are some general methodological steps that can help you create clean code:

클린코드를 만든다는 것은 1) 좋은 디자인, 2) disciplined coding practices, 3) 가독성 및 유지 관리에 중점을 요하는 과정이다. 다음은 클린코드를 만드는 데 도움이 되는 몇 가지 (일반적인) 방법론적 단계이다.

1. Start with a clear design: Before you start coding, spend time creating a clear, well-defined design that addresses the requirements of the project. This design should be modular, with a clear separation of concerns and a focus on maintainability.

1. 명확한 디자인으로 시작하라: 코딩을 시작하기 전에 프로젝트의 요구 사항을 해결하는 명확하고 잘 정의된 디자인을 만드는 데 시간을 할애하라. 해당 설계는 -문제를 명확하게 분리하고, 유지관리에 중점을 둔- 모듈식이어야 한다.

2. Use meaningful names: Use meaningful and descriptive names for your classes, methods, and variables. Avoid single-letter variable names or abbreviations that might be confusing to other developers.

2. 이름을 잘 지어라: 클래스, 메서드 및 변수에 의미 있고 설명이 포함된 이름을 사용하라. 다른 개발자에게 혼동을 줄 수 있는 단일 문자 변수 이름이나 약어를 피하라.

3. Keep methods small: Break your code into small, focused methods that do one thing and do it well. Avoid long, complex methods that are difficult to understand or modify.

3. 메소드를 간소화하라 (메소드 = 특기병): 메소드를 작은 규모이면서 한 가지 일을 잘 수행하도록 집중적 역할을 하도록 소분하자. 메소드 내용이 너무 길거나, 너무 복잡하면 이해하기도 어렵고 수정도 힘들기 때문에 가능한 지양하자. (각각의 메소드를 중대가 아닌 특기병으로 만들라는 뜻)

4. Write readable code: Write code that is easy to read and understand. Use whitespace and indentation to make your code visually appealing, and add comments to explain complex or important parts of your code.

4. 가독성 있는 코드 작성 (공백, tab, 주석 활용): 읽고 이해하기 쉬운 코드를 작성하라. 공백과 들여쓰기를 사용하여 코드를 시각적으로 매력적으로 만들고 주석을 추가하여 코드의 복잡하거나 중요한 부분을 설명하라.

5. Keep it DRY: Don't Repeat Yourself (DRY) is a principle that advocates for avoiding repetition in your code. This means reusing code wherever possible, and avoiding copy-and-pasting similar pieces of code.

5. DRY(Don't Repeat Yourself) 원칙: DRY(Don't Repeat Yourself)는 코드의 중복을 피하자는 원칙이다. 같은 코드를 계속 복붙하기보다는 메소드, 상속 등을 잘 활용하자.

6. Test your code: Writing automated tests is an essential part of creating clean code. This helps ensure that your code is correct, maintainable, and reliable.

6. 코드를 테스트하라: 자동화된 테스트를 작성하는 것은 클린코드를 만드는 데 필수적이다. 이렇게 하면 보다 정확하고 유지 관리 가능하며 신뢰할 수 있는 코드가 된다. (이 답변은 명확히 와닿지 않아 추가 질문을 했다. 하단 참고!)

7. Refactor often: Refactoring means improving the design of your code without changing its behavior. Refactoring helps keep your code clean and maintainable over time, and should be done often.

7. 리팩터링을 자주 하라: 리팩터링은 코드의 동작을 변경하지 않고 코드 디자인을 개선하는 것을 의미한다. 리팩터링은 시간이 지나도 코드를 깨끗하고 유지 관리할 수 있도록 유지하는 데 도움이 되므로 자주 수행해야 한다.

By following these methodological steps, you can create clean, well-organized code that is easy to read, maintain, and modify over time.

이러한 방법론적 단계를 따르면 쉽게 읽고 유지 관리하고 수정할 수 있는 깨끗하고 잘 구성된 코드를 만들어나갈 수 있다.

클린코드를 위한 단계 정리

chatGPT가 말한 클린코드를 짜기 위한 단계의 핵심만 요약하면 다음과 같다!

1. 명확한 디자인으로 시작하라
2. 이름을 잘 지어라
3. 메소드를 간소화하라 (메소드 = 특기병)
4. 가독성 있는 코드 작성 (공백, Tab, 주석 활용)
5. DRY(Don't Repeat Yourself) 원칙
6. 코드를 테스트하라
7. 리팩터링을 자주 하라

추가 질문 (Test your code)

코드를 Test한다는 것이 정확히 어떻게 이뤄지는지, 클린코드랑 어떤 관계가 있는지 명확히 정리되지 않아 더 물어보았다.

*Q. Give me more explanation about '6. Test your code'. I can't understand it clearly. *

GPT> Testing your code is an essential part of creating clean code. The purpose of testing is to ensure that your code is correct, reliable, and maintainable. By testing your code, you can catch bugs and other issues early in the development process, before they become more difficult and expensive to fix.

코드를 테스트하는 것은 깨끗한 코드를 만드는 데 필수적인 부분이다. 테스트의 목적은 코드가 정확하고 신뢰할 수 있으며 유지 관리가 가능한지 확인하는 것이다. 코드를 테스트하면 일이 더 진행되기 전에(수정하기가 더 어려워지고 비용이 많이 들기 전에) 버그 및 기타 문제를 발견할 수 있다.

There are several types of tests that you can use to test your code:

코드 테스트의 몇 가지 유형: 1) Unit tests, 2) Integration tests, 3) End-to-end tests. (아마 작은 단위부터 단계적으로 테스트하는 것인듯)

1. Unit tests: Unit tests are automated tests that check individual units or components of your code in isolation. They typically test one method or function at a time and are designed to ensure that each unit works correctly.

1. 유닛(단위) 테스트: 유닛 테스트는 격리된 환경 하에서 코드의 개별 유닛 또는 components를 검사하는 자동화된 테스트이다. 일반적으로 한 번에 하나의 메소드 또는 함수를 테스트하고, 각 유닛이 올바르게 작동하는지 확인하도록 설계된다.

2. Integration tests: Integration tests check how different parts of your code work together. They test how different components of your system interact and ensure that everything works together as intended.

2. Integration(통합) 테스트: Integration 테스트는 코드의 서로 다른 부분이 함께 작동할 때 어떻게 돌아가는지 체크하는 것을 말한다. 시스템의 다양한 구성 요소가 상호 작용하는 방식을 테스트하고 모든 것이 의도한 대로 함께 작동하는지 확인한다.

3. End-to-end tests: End-to-end tests are tests that simulate real-world scenarios, testing your system from end to end. These tests help ensure that your entire system works as intended.

3. End-to-end 테스트: End-to-end 테스트는 시스템을 처음부터 끝까지 테스트하는 실제 시나리오를 시뮬레이팅하는 테스트이다. 이러한 테스트는 전체 시스템이 의도한 대로 작동하는지 확인하는 데 도움이 된다.

When writing tests, it's important to follow good testing practices to ensure that your tests are effective and maintainable:

테스트를 작성할 때는, 테스트가 효과적이고 유지 관리 가능하도록 좋은 테스트 방법을 따르는 것이 중요하다.

1. Write tests before you write code: Writing tests before you write code can help ensure that your code is testable and can help you catch bugs early.

1. 코드를 작성하기 전에 테스트부터 작성하라: 코드를 작성하기 전에 테스트를 작성하면 코드를 테스트할 수 있는지 확인하고 버그를 조기에 발견하는 데 도움이 될 수 있다.

2. Test all edge cases: Make sure your tests cover all possible scenarios, including edge cases, to ensure that your code is robust and handles all situations correctly.

2. 모든 엣지 케이스를 테스트하라: 엣지 케이스를 포함하여 가능한 모든 시나리오를 테스트하도록 해라.

3. Keep tests independent: Make sure each test is independent of all others and can be run in isolation. This ensures that a failure in one test doesn't cause other tests to fail.

3. 테스트를 독립적으로 유지하라: 각 테스트가 다른 모든 테스트와 독립적이고 독립적으로 실행될 수 있도록 하라. 이렇게 하면 한 테스트의 실패가 다른 테스트의 실패로 이어지지 않는다.

4. Automate tests: Automate your tests so that they can be run easily and quickly as part of your development process.

4. 테스트 자동화: 테스트를 자동화하여 개발 프로세스의 일부로 쉽고 빠르게 실행할 수 있다.

By testing your code regularly and using good testing practices, you can create clean code that is reliable, maintainable, and bug-free.

코드를 정기적으로 테스트하고, 좋은 테스트 방법을 사용한다면 안정적이고 유지 관리가 가능하며 버그가 없는 깨끗한 코드를 만들 수 있다.

💡 언더스코어 표기법: Java에선 언더바(_)를 넣어도 똑같은 숫자로 인식한다. (jdk7부터 지원) 표현하고자 하는 수가 클 경우 더욱 알아보기 편하게 만들고 실수를 방지할 수 있다.

예시:

//언더스코어(Underscore) 표기법
System.out.println(10000000); // 10,000,000
System.out.println(10_000_000); // 10,000,000
System.out.println(10_000_000 + 10000000); // 20,000,000 

세번째 예시를 보면, 양쪽의 수를 똑같은 대상으로 인식함을 알 수 있다.

public class HelloWorldApp {
    public static void main(String[] args) {
    }
}

클래스 name은 무조건 해당 파일과 같아야 한다.

java는 파일의 이름과 똑같은 class를 찾고, 그 안에 main이라고 하는 약속된 이름의 method를 찾는다. 그리고 그 중괄호{} 안에 있는 코드를 실행하도록 약속되어있다.

public static void main(String[] args) 는 main method 라고 부른다.

• 프린트 하기

public class HelloWorldApp {
    public static void main(String[] args) {
        System.out.println("Hello World!");
    }
}

저장을 누르면,HelloWorldApp.class 라는 파일이 생성된다.

Run As로 실행시켜보자 (단축키: fn + cmd + F11)

Hello World!

• System.out.println("") 단축키: sysout 입력 + ctrl + 스페이스

JavaScript는 웹페이지가 사용자와의 상호작용을 가능케 하는, 정해진 정보만 제공하던 정적 웹페이지를 동적으로 만드는 프로그래밍 언어입니다. 자바스크립트의 주 목표는 웹 개발자가 양식 유효성 검사, 애니메이션 및 팝업 창과 같은 동적 및 대화형 요소를 웹 페이지에 추가할 수 있는 방법을 제공하는 것이었습니다.

넷스케이프(Netscape Communications Corporation)에서 일하던 브랜든 아이크가 1995년에 10일만에 설계한 Mocha라는 언어가 그 시발점입니다. 이후 LiveScript라는 이름을 거쳐 현재의 JavaScript라는 이름으로 정착했습니다.

(Java와 이름이 비슷해서 혼동하기 쉬운데, 실제로는 당시 인기가 많았던 Java의 인기에 편승하기 위해 비슷하게 지은 것이라고 합니다. 탄생 기원에 직접적인 관련은 없습니다.)

현재는 세계에서 가장 널리 사용되는 프로그래밍 언어 중 하나이며 모든 주요 웹 브라우저에서 지원됩니다. React 등의 프레임워크 발전과 함께 주로 프론트엔드에서 쓰이고 있으며, Node.js의 부상 덕분에 서버 측 프로그래밍에도 활발히 활용되고 있습니다.

자바스크립트의 발전 과정에 대해서는 시니어개발자가 말하는, 프론트엔드의 역사와 미래라는 글에 큰 맥락이 잘 설명되어 있는 것 같습니다.

<style> 태그

기본적으로 자바스크립트는 HTML 위에서 동작하는 언어입니다. HTML 상에서 style 태그로 안쪽 영역을 CSS 라고 인식시키듯이, script 태그를 통해 안쪽 영역을 자바스크립트로 인식시킵니다.

*동적 언어와 정적 언어

프로그램(program)이란, 그 기본적인 정의가 순서에 따라 정해진 명령을 순차적으로 수행하는 것을 의미합니다. 특정 화면을 묘사하는 HTML은 순서가 필요없습니다. 그래서 HTML과 같은 언어를 정적언어라고 하고, 프로그래밍 언어라고는 하지 않습니다. 반면 순서에 따라 다이내믹한 동작이 가능한 자바스크립트와 같은 언어를 동적언어라고 합니다.

자바스크립트가 등장하기 전에는 웹 페이지가 정적이고 기능이 제한적이었습니다. 자바스크립트의 도입으로 웹 개발자는 사이트에 완전히 새로운 수준의 상호 작용을 추가할 수 있었으며 사용자는 페이지를 다시 로드할 필요 없이 실시간으로 웹 페이지와 상호 작용할 수 있었습니다.

지금은 웹 개발을 배우고 있는데, 웹이 뭔지도 정확히 모른다니.. 말도 안되는 일입니다. 그래서 지금이라도 인터넷/ 웹/ 웹 브라우저가 무엇인지 공부하고, 제가 이해한 바를 정리해두고 가려고 합니다.

인터넷 (Internet)

인터넷은 통신 체계입니다. 여러 대의 컴퓨터가 IP 주소를 부여받고, 이 주소로 서로 연결하는 통신망을 구축하였고, 이 자체를 인터넷이라고 부릅니다. 아래 나무위키(킹무위키)에서는 이렇게 정의하고 있습니다.

인터넷(Internet)은 인터넷 프로토콜 스위트(TCP/IP)를 기반으로 하여 전 세계적으로 연결되어있는 컴퓨터 네트워크 통신망을 일컫는 말이다. 그야말로 인류의 역사상 전례 없는 거대한 정보의 바다인 셈이다.

인터넷은 웹이 등장하기 훨씬 이전에 등장했고, 웹은 인터넷이라는 통신 기반 위에 만들어진 수많은 서비스 중 하나입니다.

인터넷의 첫 등장은 미 국방부의 군사용이었습니다. 냉전이 한창이던 1960년대, 중요한 군사 정보들을 한 곳에 모아둔 다음 이를 철벽 요새로 만들어 지키려고 했으나 핵 미사일의 공격으로부터는 피해를 막을 수 없다는 문제가 제기됩니다. 이에 주요 정보들을 4곳의 지점에 분산해놓고, 이들을 서로 연결하자는 아이디어가 나오게 됩니다.

이것이 ARPANET이라고 불리는 최초의 인터넷입니다. 흔히 전화위복(轉禍爲福)이라고 하나요? 현대 문명에서 빼놓을 수 없는 주요 기술인 인터넷이 핵무기와 냉전의 산물로 등장했다니 아이러니합니다. 좋지 않은 일이 계기가 되어 좋은 일이 생기고, 방심하면 좋은 일도 금방 뒤집히는 게 세상의 이치인 듯 합니다.

어쨌든.. ARPANET은 NCP 패킷 송출 방법을 사용했으나, 1983년을 기점으로 TCP/IP 패킷 송출 방법으로 전환되었다고 합니다. TCP/IP 기반은 현재까지도 이용되고 있는 방식입니다.

공간의 제약으로부터 벗어나, 멀리 떨어진 기관과 정보를 주고받을 수 있다는 것은 굉장히 유용했습니다. 민간/연구 영역에서도 이를 활용하고자 하는 수요가 증가하였고, 미 국방부는 ARPANET을 민간에 공개하고 본인들은 MILNET을 별도로 만들어 사용하게 됩니다.

1986년에는 NSFNET이라고 하는 TCP/IP 기반의 통신망이 새롭게 등장합니다. 미국 국립과학재단(NSF)에서 구축한 것입니다. 이것이 ARPANET을 대신하여 인터넷의 근간망(backbone network) 역할을 담당하게 되었다고 합니다.

이렇게 점차 기반을 쌓아가던 인프라는 1990년대 초에 이르러 인터넷이라는 이름으로 활용되기 시작하였으며, 컴퓨터의 보급과 맞물리며 현재에는 수억 대의 컴퓨터가 연결된 거대한 네트워크가 되었습니다.

웹 (WEB)

인터넷이라는, 공간의 제약을 뛰어넘어 정보를 주고받을 수 있는 네트워크가 탄생했으니, 당연히 이를 활용할 수 있는 다양한 서비스가 등장할 것입니다. e-mail, 파일 전송, 채팅 등..

그러한 인터넷을 활용한 시스템 중 하나로, 1989년 팀 버너스리는 '문서를 인터넷 상에 올려놓고 서로 공유해볼 수 없을까'하는 고민을 하게 됩니다. 팀 버너스 리는 유럽의 핵 연구 기구 CERN(그 유명한 거대 입자가속기를 운영하는 그곳입니다.)에서 연구원으로 잠시 있었는데요. 인사 재배치 등으로 연구원들이 들락날락하는 일이 잦다보니, 기존에 수행하던 실험 결과 등의 각종 문서들이 유실되는 문제가 있다는 걸 발견합니다.

이를 해결하기 위해, 팀 버너스리는 인터넷에 문서를 올려놓고 - 네트워크를 통해 접근 가능하며 - 문서와 문서 간에 연결하는 링크 기능(HyperText)까지 추가한 HyperText 문서 시스템을 구축하게 됩니다. 이것이 바로 WEB 입니다.

웹의 발전은 몇 가지 핵심기술을 기반으로 하고 있습니다. 가장 대표적인 것은 다음 두 가지 기술입니다:

• 1) HTML (Hypertext Markup Language) - 웹 페이지의 구조와 내용을 생성하는 데 사용됩니다.
• 2) HTTP (Hypertext Transfer Protocol) - 웹 사이트 간에 데이터를 전송하는 데 사용됩니다.

1990년도에 WWW라는 최초의 웹 페이지가 탄생한 이후로 웹은 인류 역사상 가장 중요하고 영향력 있는 기술 중 하나가 되었습니다. 기존에 존재하던 수많은 인터넷 기반 서비스들(i.e. PC통신, e-mail 등)이 Web 위로 얹혀지게 되면서, 점차 웹은 다양한 기능과 서비스들을 포괄하는 거대한 인프라로 발전하게 됩니다.

웹은 아날로그로 이루어지던 사람과 사람 간의 연결을 디지털로 넘어갈 수 있게 한 1등 공신이며, 그 결과로 사람들의 의사소통 방식, 정보 접근 방식, 대다수 산업들의 비즈니스 방식을 송두리째 바꾸고 있다고 해도 과언이 아닙니다.

웹 브라우저 (Web Browser)

웹에 다양한 정보들을 올리고, 공유하고, 수정할 수 있게 되었습니다. 그럼 이 모든 과정을 일반 사람들이 더 편하게 이용할 수 있도록 하는 응용프로그램도 등장하겠죠? 웹 서버에 접속해서 웹 페이지, 이미지, 동영상, 음악 등 다양한 데이터를 다운받아 보여주는 소프트웨어가 바로 웹 브라우저입니다.

웹 브라우저의 대표적인 예시는 우리가 사용하는 크롬(Chrome), 사파리(Safari), 인터넷 익스플로러(Internet Explorer), 오페라(Opera), 파이어폭스(Firefox) 등 입니다. 국내에서 만들어진 것은 대표적으로 네이버의 웨일(Whale)이 있습니다.

• Web Browser Ranking:

span 태그

특정 부분을 지정해서 디자인 속성만을 주고 싶은데, 실제 그 기능은 필요도 없는데 h1 이나 a 등 기능 태그를 쓴다면 많은 혼란이 생길 것입니다.

이럴 때 쓰는 무색무취와 같은 태그가 span이라는 HTML 태그입니다. span은 그 자체로는 어떠한 기능도 포함하지 않고, 주로 style 선언과 함께 쓰입니다. inline-level element라는 특징을 지닙니다.

(코드 예시)
<p>My mother has <span style="color:blue">blue</span> eyes.</p>

(코드 결과)

My mother has blue eyes.

div 태그

span과 같은 목적이나 block-level element입니다. 따라서 division으로 지정된 구역은 그 앞 뒤와 한 칸씩 떨어져 구분됩니다.

span 보다 더 큰 덩어리로 묶어서 스타일을 선언할 때 쓰는 태그입니다. 웹페이지의 섹션을 나눠서 스타일을 적용할 때는 div, 어떠한 문단에서 특정 내용을 강조하고 싶을 때는 span을 쓰는 식입니다.

(코드 예시)
<html>
<head>
<style>
.myDiv {
  border: 5px outset red;
  background-color: lightblue;
  text-align: center;
}
</style>
</head>
<body>

<div class="myDiv">
  <h2>This is a heading in a div element</h2>
  <p>This is some text in a div element.</p>
</div>

</body>
</html>

(코드 결과)

반응형 웹

화면 크기에 따라 웹페이지의 각 요소들이 반응해서, 현재 화면 크기에 최적화된 모양으로 표시되는 웹을 말합니다. 최근 수년간 디바이스 종류와 디스플레이 환경이 많고 복잡해짐에 따라 뷰포트(Viewport)가 다각화 되었고, 뷰포트 변화에 맞게 컨텐츠를 유연하게 보여주는 기술이 중요해졌습니다. 이에 따라 반응형 웹 디자인의 중요성은 날이 갈수록 부각되고 있습니다.

미디어쿼리 (Media Query)

W3C school (https://www.w3schools.com/css/css3_mediaqueries.asp) 에 따르면 @media는 다양한 미디어 타입에서 다른 스타일을 적용할 수 있도록 하는, 반응형 웹 디자인의 기반이 되는 CSS 문법입니다. CSS2에서 처음 도입되었습니다.

(The @media rule, introduced in CSS2, made it possible to define different style rules for different media types.)

다양한 뷰포트에 적응하기 위해 CSS2에서 미디어타입이 등장했고, 이것이 반응형 웹 디자인에 조금 더 유용하도록 업그레이드 된 것이 CSS3에서의 미디어쿼리입니다.

@media는 다음 브라우저에서 지원됩니다.

미디어쿼리 구현을 위한 기본적인 구성은 다음과 같습니다.

(예시)
@media (max-width: 550px) {
  body{
      background-color: whitesmoke;
    }
}

미디어 쿼리의 기본 구성은 조건과 스타일로 이루어져 있습니다. max-width: 550px 는 조건을 550px 이하일 때로 단 것과 같습니다. 즉, 550px 이하일 때 아래 스타일을 적용합니다.

(예시)
@media screen and (max-width: 550px) {
    body {
        background-color: whitesmoke;
    }
}

미디어타입이 screen인지, tv나 프린트인지를 지정하고, 조건을 지정하고, 그 밑에 미디어특성을 적기도 합니다.

미디어 타입 (Media types)

주로 쓰이는 미디어 타입은 all, print, screen입니다.

• all: 모든 미디어 타입 디바이스를 위해 쓰입니다.
• print: 인쇄 미리보기 모드에서 화면에 표시되는 페이지 자료 및 문서용입니다. (Intended for paged material and for documents viewed on screen in print preview mode. Please consult the section on paged media for information about formatting issues that are specific to paged media.) (출처: W3C)
• screen: 컴퓨터, 태블릿, 스마트폰 등의 스크린 화면을 위해 쓰입니다.

미디어 특성 (Media Features)

출처: https://nossodia.tistory.com/69

미디어 특성: width, height, device-width, device-height, orientation, aspect-ratio, device-aspect-ratio, color, color-index, monochrome, resolution, scan, grid 등

이 중에서도 width와 orientation이 자주 쓰인다고 합니다.

• width: 뷰포트의 너비, 즉 브라우저 창의 너비를 말합니다.(스크린의 크기 x)
• orientation: 미디어가 세로모드인지 가로모드인지를 구분합니다. 미디어 쿼리에서는 이 구분을 width와 height 특성의 값을 비교해서 세로모드와 가로모드를 구분합니다. 세로모드 조건: height >= width 가로모드 조건: height < width 세로모드에서는 portrait, 가로모드에서는 landscape 키워드와 매칭이 됩니다.

CSS 파일의 존재 이유

만일 각각의 HTML 파일에 각각 스타일 코드가 포함되어야 한다면, 동시에 여러 웹페이지에 동일한 서식이 적용될 경우 불필요한 코드가 중복되는 일이 발생합니다. 또한 일괄적으로 적용되는 수정사항이 있을 경우 모든 HTML 파일을 일일이 수정해야하는 비효율이 생깁니다.

이를 해결하기 위해 존재하는 것이 CSS 파일입니다. 중복되는 style 서식을 한 파일에 모아두고, 필요할 경우 HTML에 이를 그대로 불러오고, 수정이 필요한 경우 해당 CSS 파일만 수정해주면 이를 갖다 쓰는 모든 HTML 파일에 일괄적으로 적용됩니다.

이는 다음과 같은 장점들을 지닙니다.

• 중복의 제거: 수정사항이 있을 경우, 공통적으로 적용되는 CSS파일만 수정해주면 끝!
• 리뷰 편리성: 웹페이지마다 적용된 style들이 같은지 아닌지 한눈에 알아보기 쉬워집니다. 만일 각각의 웹페이지에 코드의 형태로 펼쳐져 있다면, 다르게 적용된 서식이 있는지 혹은 오타가 있는지를 하나하나 눈으로 비교해야 합니다.
• 코드 효율성: 절대적인 코드의 양이 줄면서 네트워크 트래픽을 덜 잡아먹게 됩니다. 비즈니스 측면에서 이점입니다.

CSS 파일 불러오기 (link 태그)

이를 활용하는 방식은 간단합니다. 애초에 CSS 파일이라면 해당 내용이 CSS 언어라는 걸 굳이 또 알려줄 필요가 없으므로 <style>태그는 필요하지 않습니다. 그 안에 있는 선택자 + 선언 블록들만 포함해서 css 파일을 구성해줍니다.

(예시)
a {
    color:black;
    text-decoration: none; 
}
#grid{
    display: grid;
    grid-template-columns: 150px 1fr;
}

예를 들어, 이러한 내용을 여러번 재사용하고 싶다면 그대로 styles.css 라는 css 파일로 저장합니다. 다음으로 해당 서식을 적용하고 싶은 HTML 파일에 다음 코드를 추가하면 styles.css 안의 내용이 해당 페이지에 불러와집니다.

<link rel="stylesheet" href="styles.css">

유지보수에도 용이하고, 작업도 훨씬 편리해집니다.

CSS의 등장 배경

1990년도 HTML의 탄생과 함께 웹이 널리 퍼지자, 웹페이지를 조금 더 예쁘게 꾸미고자 하는 수요가 발생했습니다. 처음으로 시도되었던 것은 HTML에 페이지를 꾸밀 수 있는 태그들을 추가하는 것이었습니다.

지금은 사용하지 않는 font 태그가 그 예시로, 웹의 스타일을 바꿀 수 있는 원초적인 HTML 태그 중 하나입니다.

<font color="red"> </font>

현재도 HTML에 해당 코드를 입력하면, 가운데 있는 텍스트의 색이 바뀌는 것을 확인할 수 있습니다.

그러나 '해당 부분이 제목이다, 혹은 해당 부분은 링크이다'와 같이 기능과 역할에 대한 정보를 제공하는 다른 태그와 달리, 이러한 디자인 태그는 디자인만을 나타낼 뿐, 기능 동작에 필수적인 정보들을 제공하지는 않았습니다.

이로 인해 웹페이지는 기능에 대한 정보와 디자인에 대한 정보가 섞이는 상황이 되었고, 하이퍼텍스트라는 정보를 제공하는 문서로서의 기존 가치가 희석되었습니다. 유지보수에도 어려움이 생겼죠.

이에 따라 디자인과 관련된 정보를 따로 분리해야 할 필요성이 대두되었고, 그 도구로써 1996년에 CSS라는 스타일 언어가 탄생하였습니다.

CSS 코드의 기본 구성

• style 태그

style 태그는 웹브라우저로 하여금 해당 부분에 있는 코드를 CSS라고 인식하게 하는 태그입니다. HTML 문서 상에 <style> </style> 이라고 되어있다면, 이 안에 있는 코드는 CSS의 영역이 됩니다.

그 안에는 특정 선택자의 디자인 속성을 선언하는 코드들이 들어가게 됩니다.

(예시)
<style>
    h1{
       color:red;
       }`
</style>

와 같은 코드가 있다면, 문서상 모든 h1 태그에 빨간색 폰트가 적용됩니다. 예시에서 볼 수 있듯, style 하에 있는 선언문은 다음과 같은 구조를 지닙니다. (그림: 타 사이트 출처)

크게는 선택자+선언 블록의 형태입니다. 그리고 선언 블록은 다시 속성+속성값+선언 구분자(;), 즉 선언의 집합입니다.

h1은 선택자로 스타일을 선언할 대상입니다. {}로 둘러 싸인 {color:red;}는 선언 블록입니다. 그리고 선언 블록은 color:red;라는 선언으로 구성되어있고, 선언은 다시 color라는 속성과 red라는 속성값으로 이뤄져 있습니다.

만약 한 가지 태그에 여러 속성을 적용한다면, 이런 식으로 코드가 구성될 것입니다.

(예시)
<style>
  h1 {
      font-size: 45px;
      color: #4CAF50;
      text-shadow: 2px 2px #000000;
      letter-spacing: 5px;
      text-align: center;
      margin:0;
      padding-top: 10px;
      border-bottom: 2px solid #4CAF50;
  }
</style>

id > class > 태그

위 예시에서는 h1이라는 태그에 스타일을 적용했지만, 선택자(selector)를 특정 id 혹은 class로 지정할 수도 있습니다. (id 지정: #xx, class 지정: .xx)

만일 동일한 대상에 여러 선언이 겹쳤을 경우, 1. id 2. class 3. 태그의 순서로 우선순위가 주어집니다. 예를 들어 하나의 대상이 A라는 id에 속해있고 h1이라는 태그에 속해있는데, id="A"에는 폰트 색상을 red, <h1> 태그에는 폰트 색상을 green으로 지정하라는 선언이 있다고 해봅시다. 그렇다면 위에서 말한 우선순위에 의해 id에 적용된 red가 적용될 것입니다.

이렇게 우선순위를 둔 기준은 포괄성입니다. 그림을 그릴 때 밑배경을 먼저 칠하고 그 위에 디테일을 덧입히는 것이 수월한 것과 유사합니다. 문서 전반적으로 영향을 미치는 태그를 깔아두고, 중간 층위는 class -> 세부 디테일은 id로 잡는 것입니다. 만일 같은 우선순위가 중복된다면 가장 마지막에 등장하는 선택자가 적용됩니다.

직접 특정 코드를 지정해서 스타일 속성을 적용할 수도 있습니다. a href="xxx.html" style="color:red"> xxx 링크 </a>라는 코드가 있다면, a HTML 태그에 style 속성이 직접 적용됩니다. 여기서는 이미 특정 대상을 지정한 상황이기 때문에, 선택자를 따로 사용할 필요가 없습니다.

<(Tag)> 내용 </(Tag)> 

기본 태그에 태그 속성을 덧붙여서 원하는 기능을 추가할 수 있다.

적절한 태그 사용의 중요성

1. 코드 가독성 (for 사람, 기계)
   태그는 단순히 기능 수행의 역할만 할 뿐 아니라, 그 코드를 읽는 주체로 하여금 해당 부분이 어떠한 목적으로 짜여진 코드인지를 알려주는 역할도 수행한다.
   쉬운 예로, 제목에 해당하는 부분에 title,heading 태그를 써야 내 코드를 읽는 동료나, 단말기 혹은 검색엔진 알고리즘 등 기계가 해당 부분이 제목임을 쉽게 인식할 수 있다.
   
   

2. 관리성 (업무효율)
   넘버링 형식의 리스트를 웹사이트에 추가한다고 했을 때, 1. @@ 2. @@ 3. @@ 이런 식으로 직접 타이핑해줄 수도 있지만, 내용 수정이 필요한 경우 넘버링을 다시 타이핑해야 한다는 불편함이 있다.
   ol, li 등 리스트 태그를 활용했다면 자동으로 넘버링을 해주기 때문에 더욱 빠른 수정이 가능했을 것이다.

주요 태그 ⭐️

• <!doctype html>: HTML 문서임을 알리는 관용적 코드

• 기본 뼈대가 되는 필수 태그들: HTML > head, body

  • title: 웹페이지의 타이틀. head 태그 안에 들어가게 된다.

    <title> 제목 </title>

• meta: HTML 코드는 UTF-8로 저장된다. 해당 코드를 웹브라우저가 열 때도 UTF-8로 열어야 오류가 없는데, head 아래에 다음을 선입력해서 이를 명령한다.

  <meta charset="utf-8">

  • heading: 제목 태그. h1 ~ h6 까지만 설정 가능하다.

    <h1> 제목 </h1>

    앞서 말했듯 태그에는 속성을 추가할 수 있는데, 만약 제목에 색을 입히고 싶다면 다음과 같은 코드가 가능하다.

    <h1 style=color:"brown"> 제목 </h1>

• a: anchor - 링크 태그. (정보의 바다에 닻을 내린다는 비유적 네이밍)
  a href : Hypertext의 'h' + Reference의 'ref'. 특정 내용에 링크를 삽입할 수 있다.

  <a href="주소"> 웹사이트에 표시할 내용 </a>

  웹 상의 페이지, 혹은 여러개의 HTML 페이지를 연결하여 다층적 웹사이트를 구성할 수 있다. 또한 그 뒤에 태그를 덧붙여 기능을 추가할 수 있다.

  • 새 창으로 링크 열기: target="_blank"
  • 링크에 커서 올리면 툴팁으로 정보 표시: title="@@@"

    <a href="주소" target="_blank" title="@@@">

• img: 이미지 삽입 태그. src라는 속성을 통해 어떤 이미지를 가져올지 설정해야 한다.

  <img src="이미지 주소">

  이미지 크기를 조정하고 싶은 경우 width 속성을 통해 조절 가능하다.

  <Img src="이미지 주소" width="80%">

• strong: 볼드체

  <strong> 내용 </strong>

• u: 밑줄

  <u> 내용 </u>

• 리스트 태그 ul: Unordered list. 해당 파트는 리스트임을 표시하는 태그. li의 부모 태그. ol: Ordered list. ul의 넘버링 버전. li: 리스트. ul, ol의 자식 태그

<ul> 
      <li> contents1 </li>
       <li> contents2 </li>
</ul>

• p: paragraph. 문단을 형성하는 태그. 내용 앞 뒤로 일정 간격 벌어지게 된다.

  <p> 내용 </p>

• br: break. 줄 바꿈 태그 (닫을 필요 없음)