장점

활용 사례

애플릿 <-> 액티브엑스(Active X)

서블릿

JSP의 특징

.html - 정적 페이지 .jsp - 동적 페이지

선언부 (`<%! ... %>`)

• JSP 페이지 내에서 메서드나 변수를 선언할 때 사용됩니다.
• JSP 페이지가 실행될 때 한 번만 처리되며, 클래스 수준에서 선언됩니다.

스크립틀릿 (`<% ... %>`)

• JSP 페이지 내에서 자바 코드를 실행할 수 있는 블록입니다.
• 이 코드는 JSP 페이지가 클라이언트에게 응답하기 전에 실행됩니다.

표현식 (`<%= ... %>`)

• 자바 표현식의 결과를 직접 출력할 때 사용됩니다.
• 이 표현식의 결과는 자동으로 HTML에 삽입되어 브라우저로 전달됩니다.

지시어(Directive) JSP를 자바(서블릿)으로 변환 시에 필요한 정보를 JSP 엔진에게 알려줌 스크립트 언어, 인코딩 방식 등을 설정 <%@ 지시어 종류 속성1="값1" ,,, %>

page 지시어 문서의 종류, 타입, 에러 메시지, MINE 타입 등을 설정

language, contentType, pageEncoding 속성

buffer, autoFlush

• JSP 에서는 응답 결과를 바로 리턴하지 않고, 버퍼에 저장 후 일정량이 되면 출력
• 요청마다 매번 리턴하는 것보다 효율적
• 버퍼를 사용함으로써 포워드(forward), 에러 페이지를 처리할 수 있음

include 지시어

• <%@ include file=”포함할 파일 경로” %>
• 웹 사이트에서 반복되는 영역, 페이지를 여러 페이지에서 함께 사용할 때 사용함
• JSP 에서 다른 JSP 페이지를 삽입할 때 사용
• include된 파일의 내용도 include한 파일의 내용으로 인식

개인 블로그를 제작한 이후 다른 언어들의 내용은 그 블로그에 포스팅 하고 있다. 이전에 정리했던 내용들과 포스팅 한 내용들도 좀 더 깔끔하게 정리해야 하는데... 후우

다음 달 까지는 끝낼 수 있길..

객체란?

• 객체란 물리적으로 존재하거나 추상적으로 생각할 수 있는 것 중 자신의 속성을 가지고 있으면서 식별 가능한 것을 의미.
• 자바는 객체 지향 프로그래밍으로 객체 사이에 일어나는 일을 프로그램으로 구현한 것.
• 객체 지향 프로그래밍에서는 모든 데이터를 객체(object)로 취급하며, 이러한 객체가 바로 프로그래밍의 중심이 됨

클래스란?

• 자바에서 클래스(class)란 객체를 정의하는 틀 또는 설계도와 같은 의미로 사용
• 객체의 상태를 나타내는 필드(field)와 객체의 행동을 나타내는 메소드(method)로 구성
• • 필드(field) : 클래스에 포함된 변수(variable)를 의미
• • 메소드(method) : 어떠한 특정 작업을 수행하기 위한 명령문의 집합
• • 인스턴스(instance) : 클래스로부터 객체를 선언하는 과정을 클래스의 인스턴스화라고 하고 선언된 해당 클래스 타입의 객체를 인스턴스(instance)라고 함

객체지향의 4가지 특성과 5가지 원칙

객체지향의 4가지 특성

1. 추상화 : 객체의 공통적인 속성과 기능을 추출하여 정의하는것을 의미
   • 단일 책임 원칙은 클래스(객체)는 단 하나의 책임만 가져야 한다는 원칙
2. 상속 : 기존의 클래스를 재활용하여 새로운 클래스를 작성하는 자바의 문법 요소
   • 단일 책임 원칙은 클래스(객체)는 단 하나의 책임만 가져야 한다는 원칙
3. 다형성 : 어떤 객체의 속성이나 기능이 상황에 따라 여러 가지 형태를 가질 수 있는 성질을 의미
   • 단일 책임 원칙은 클래스(객체)는 단 하나의 책임만 가져야 한다는 원칙
4. 캡슐화 : 서로 연관있는 속성과 기능들을 하나의 캡슐로 만들어 데이터를 외부로부터 보호하는 것
   • 단일 책임 원칙은 클래스(객체)는 단 하나의 책임만 가져야 한다는 원칙

객체지향의 5가지 원칙 (S O L I D)

1. SRP (Single Responsibility Principle) 단일 책임 원칙
   • 단일 책임 원칙은 클래스(객체)는 단 하나의 책임만 가져야 한다는 원칙
2. OCP (Open-Closed Principle) 개방-폐쇄 원칙
   • 추상화 사용을 통한 관계 구축을 권장을 의미
3. LSP (Liskov Substitution Principle) 리스코프 치환 원칙
   • 단일 책임 원칙은 클래스(객체)는 단 하나의 책임만 가져야 한다는 원칙
4. ISP (Interface Segregation Principle) 인터페이스 분리 원칙
   • 단일 책임 원칙은 클래스(객체)는 단 하나의 책임만 가져야 한다는 원칙
5. DIP (Dependency Inversion Principle) 의존 역전 원칙
   • 단일 책임 원칙은 클래스(객체)는 단 하나의 책임만 가져야 한다는 원칙

SOLID는 Java 과정을 좀 더 배우고 다시 공부해 보라는 강사님 말씀에 일단 기본적인 개념들만 적어보았다. 사실 지금은 무슨 소리인지 잘 이해가 가질 않는다..

클래스 작성방법

package 패키지이름

접근 제어자 class 클래스이름 {
    property;
    method;
}

ex)

package test;

public class TestClass {
    int a;
    int b;
    String c;
    String d;
}

패키지란?

클래스 파일의 묶음. 패키지를 만들면 프로젝트 하위에 디렉터리가 생성됨. 계층 구조를 가질 수 있다.

위 코드에 패키지를 선언했으니 코드는 스킵.

메서드란?

어떠한 특정 작업을 수행하기 위한 명령문의 집합

자바는 함수보다는 메서드를 표준으로 부른다.

package test;

public class TestClass {
    int a;
    int b;
    String c;
    String d;
}

public void showTest () {
    System.out.println("TestClass" + a + b + c + d);
} // 요게 메서드

메서드 정의하는 방법

(접근제어자)   void/리턴할 자료의 형태   함수명(매개변수) {
    return 자료형의 값
}

ex)

int testFunction (int num1, int num2) {
    return num1 + num2;
}

항상 쓰던 함수와 같다. 확실히 어떤 언어든 하나라도 해본다면 다음 언어를 공부할 때 많은 도움이 되는 것 같다.

반환값이 없는 메서드

void testFunctionV (String strr) {
    System.out.println(strr);
    return;
}

void : 비어있다는 의미 함수 안 로직만 실행됨.

메서드 사용법

package test;

public class test {

    public static void main(String[] args) {
        int num1 = 1;
        int num2 = 2;

        int sum = add(num1, num2);
        System.out.println(num1 + "+" + num2 + " = " + sum);
    }

    public static int add(int n1, int n2) {
        return n1 + n2;
    }
}

결과 1 + 2 = 3

클래스와 인스턴스

main() 함수

main함수는 자바 가상main함수는 자바 가상 머신(Java Virtual Machine : JVM)이 프로그램을 시작하기 위해 호출하는 함수

main()함수에서 클래스를 사용하는 방법

1. 클래스 내부에 main() 함수를 만드는 것
2. 외부에 테스트용 클래스를 만들어 사용하는 것

1. 클래스 내부에 main() 함수를 만드는 것

package test;

public class TestClass {
    int a;
    int b;
    String c;
    String d;

    public String getC() {
        return c;
    }

// 내부에 main 함수 생성
    public static void main(String[] args) {
        TestClass testGen = new TestClass();
        testGen.c = "ccc";

        System.out.println(testGen.c);
        System.out.println(testGen.getC());
    }
}

2. 외부에 테스트용 클래스를 만들어 사용하는 것

// 클래스 생성
package test;

public class TestClass {
    int a;
    int b;
    String c;
    String d;

    public String getC() {
        return c;
    }
}


// 외부 클래스에 main 함수 생성
package test;

public class TestClassTest {
    public static void main(String[] args) {
        TestClass testGen = new TestClass();
        testGen.c = "ccc";

        System.out.println(testGen.c);
        System.out.println(testGen.getC());
    }
}

• 패키지가 다르다면 import 문을 사용해서 원하는 클래스를 불러와야 함.

인스턴스와 참조 변수

객체란 의사나 행위가 미치는 대상이고 이를 코드로 구현한 것이 클래스다. 그리고 클래스가 메모리 공간에 생성된 상태를 인스턴스라고 함. 또한, 생성된 클래스의 인스턴스를 객체라고도 한다.

• 객체 : 객체 지향 프로그램의 대상, 생성된 인스턴스
• 클래스 : 객체를 프로그래밍하기 위해 코드로 만든 상태
• 인스턴스 : 클래스가 메모리에 생성된 상태
• 멤버 변수 : 클래스의 속성, 특성
• 메서드 : 멤버 변수를 이용하여 클래스의 기능을 구현
• 참조 변수 : 메모리에 생성된 인스턴스를 가리키는 변수
• 참조 값 : 생성된 인스턴스의 메모리 주소 값

배열이란?

여러 값들을 모은 자료형

배열은 왜 써야 할까?

• 배열은 동일한 자료형의 변수를 한꺼번에 순차적으로 관리할 수 있다.

배열 선언과 초기화

// 1차원 배열

// 크기 할당과 초기화 없이 배열만 선언
int[] arr; // 이걸 많이 사용함.
// or
int arr[];


// 선언과 동시에 배열 크기 할당
int[] arr = new int[3];

String[] arr = new String[3];

// 기존 배열의 참조 변수에 초기화 할당하기
int[] arr;

arr = new int[5]; //5의 크기를 가지고 초기값 0으로 채워진 배열 생성

// 선언과 동시에 배열의 크기 지정 및 값 초기화
int[] arr = {1, 2, 3};
// or
int[] arr = new int[]  {1, 2, 3};

참고로 기본타입(Primitive type)의 배열인 경우 초기값을 가지고 있는 반면에(int = 0) 참조타입(Reference type)의 배열을 선언했을 경우 배열내 엘리먼트의 초기값이 null이다.

// 2차원 배열

// 크기 할당과 초기화 없이 배열만 선언
int[][] arr; // 이걸 많이 사용함.
// or
int arr[][];


// 선언과 동시에 배열 크기 할당
int[][] arr = new int[3][4]; // 3x4 크기의 배열 선언 (모든 값은 0으로 초기화)

// 각 행의 길이가 다른 배열도 선언 가능
int[][] arr = new int[3][]; // 열의 크기는 아직 할당하지 않음
arr[0] = new int[2]; // 첫 번째 행은 크기 2
arr[1] = new int[3]; // 두 번째 행은 크기 3
arr[2] = new int[4]; // 세 번째 행은 크기 4

// 선언과 동시에 배열의 크기 지정 및 값 초기화
int[][] arr = {
    {1, 2, 3},
    {4, 5, 6},
    {7, 8, 9}
};
// or
int[][] arr = new int[][] {
    {1, 2, 3},
    {4, 5, 6},
    {7, 8, 9}
};

문자 배열

package test;

public class Test1StringArrayTest {
    public static void main(String[] args) {
        char[] alphabets = new char[26];
        char ch = 'A';

        for(int i = 0; i < alphabets.length; i++, ch++) {
            alphabets[i] = ch; // 아스키 값으로 각 요소에 저장
        }

        for(int j = 0; j < alphabets.length; j++) {
            System.out.println(alphabets[j]);
        }
    }
}

출력 결과 : A ~ Z 출력

객체 배열

동일한 기본 자료형 변수 여러 개를 배열로 사용할 수 있듯이 참조 자료형 변수도 여러 개를 배열로 사용할 수 있다.

package test;

public class Test2ObjectArrayTest1 {
    private String bookName;
    private String author;

    public Test2ObjectArrayTest1() {} // 기본 생성자

    public Test2ObjectArrayTest1(String bookName, String author) {
        this.bookName = bookName; // 책 이름을 매개변수로 받는 생성자
        this.author = author; // 저자 이름을 매개변수로 받는 생성자
    }

    public String getBookName() {
        return bookName; // getter
    }

    public void setBookName(String bookName) {
        this.bookName = bookName;
    }

    public String getAuthor() {
        return author; // getter
    }

    public void setAuthor(String author) {
        this.author = author;
    }

    public void showBookInfo() {
        System.out.println(bookName + "," + author);
    } // 책 정보를 출력해 주는 메서드
}

package test;

public class Test2ObjectArrayTest2 {

    public static void main(String[] args) {
        Test2ObjectArrayTest1[] library = new Test2ObjectArrayTest1[5];

        for(int i = 0; i < library.length; i++) {
            System.out.println(library[i]);
        }
    }

}

결과 값 : null null null null null

인스턴스 주소 값을 담을 공간 5개가 생성되었다. null은 공간은 생성되었지만 비어있다는 의미

각 배열 요소에 인스턴스를 생성해 넣어보기

package test;

public class Test2ObjectArrayTest3 {

    public static void main(String[] args) {
        Test2ObjectArrayTest1[] library = new Test2ObjectArrayTest1[5];
        for(int i = 0; i < library.length; i++) {
            library[i] = new Test2ObjectArrayTest1("책 제목" + (i + 1), "책 저자" + (i + 1));
        }

        for(int i = 0; i < library.length; i++) {
            library[i].showBookInfo();
        }

        for(int i = 0; i < library.length; i++) {
            System.out.println(library[i]);
        }
    }

} // 클래스 명 짧게 할걸...

배열의 각 요소에 인스턴스를 직접 저장하고 인스턴스 주소값도 출력해보았다.

출력 값

책 제목1,책 저자1 책 제목2,책 저자2 책 제목3,책 저자3 책 제목4,책 저자4 책 제목5,책 저자5 test.Test2ObjectArrayTest1@38082d64 test.Test2ObjectArrayTest1@dfd3711 test.Test2ObjectArrayTest1@42d3bd8b test.Test2ObjectArrayTest1@26ba2a48 test.Test2ObjectArrayTest1@5f2050f6

배열 복사는 주말에 이어서 작성

조건문

주어진 조건에 따라 다른 문장을 선택할 수 있도록 프로그래밍하는 것

if, if-else

if (조건1) { 내부 로직; <= 조건1이 참일 경우 실행 } else if (조건2) { 내부 로직; <= 조건2가 참일 경우 실행 } else { 내부 로직; <= 조건 1, 2에 해당하지 않으면 실행 }

switch-case

swutch(x) { case 1 : x = 'a'; break; case 2 : x = 'b'; break; case 3 : x = 'c'; break; default : x = 'x'; <= 아무 조건에 해당하지 않는다면 }

반복문

for

for(int i = 0; i < 10; i++) { 반복 로직; }

• i가 0부터 9까지 증가
• 총 10번 반복 로직을 실행함.

while

int cnt = 1;

while(cnt <= 10) { 반복 로직; cnt++; }

• cnt가 10과 같거나 클 때까지 반복 로직을 실행함.
• 조건에 해당되지 않으면 while문에 들어가지 않음.
• 조건에서 탈출하지 못하면 무한반복

이런 반복문도 있다!

do-while

do { 반복 로직; } while(조건);

• while은 조건에 들어가지 않으면 실행되지 않지만 do while은 한번은 실행함.

continue

반복문이나 조건문에서 continue를 만나면 이후 문장을 무시하고 처음으로 돌아가서 반복을 진행한다

break

반복문이나 조건문에서 break를 만나면 더 이상 로직을 진행하지 않고 탈출하게 됨.

자료형의 종류와 크기

• 기본 자료형 이외에는 모두 참조 자료형

정수 자료형

• byte
• short
• int
• long

1. byte

• 1byte = 8bit
• 바이트 단위의 정보를 저장하거나 통신할 때 주로 사용
• 표현할 수 있는 수의 범위 : -2⁷ ~ 2⁷-1 <= ( -128 ~ 127 )

2. short

• 2byte
• 표현할 수 있는 수의 범위 : -2¹⁵ ~ 2¹⁵-1 <= ( -32768 ~ 32767 )

3. int

• 4byte
• 표현할 수 있는 수의 범위 : -2³¹ ~ 2³¹-1 <= ( -2147483648 ~ 2147483647 )
• 가장 많이 사용하는 자료형
• 컴퓨터에서 정수로 연산을 할 때 4바이트 단위로 처리하는 것이 가장 효율적임.

4. long

• 8byte
• 표현할 수 있는 수의 범위 : -2⁶³ ~ 2⁶³-1 <= ( -18,446,744,073,709,551,616 ~ 18,446,744,073,709,551,615 )
• 주의할 점
• 자바는 모든 정수값을 int형으로 처리함.
• 만약 long을 써도 int의 크기에서 벗어날 경우 에러가 남.
• 컴파일러에게 long으로 처리하라고 알려주어야 하기 때문에 long으로 선언하여도 숫자 뒤에 식별자인 L이나 l을 사용
• 대부분 가독성을 위해 대문자를 사용
• ex) long num = 123456789000l <-- 구분 안감. / long num = 123456789000L <-- 바로 구분이 됨.

다른 타입끼리 연산 시 자동으로 높은 쪽 캐스팅이 됨.

실수 자료형

• float
• double

1. float

• 4byte
• 자바에서 실수는 double형을 기본으로 사용
• long의 식별자와 같이 오류방지를 위해 F 또는 f를 붙여야 함.
• 똑같이 대부분 대문자 사용 ex) float num = 3.14F

2. double

• 8byte
• 자바에서 실수는 double형을 기본으로 사용
• float에 비해 더 정밀하게 실수를 표현할 수 있음.

부동 소수점 방식

• 실수 값 0.1은 1.0 X 10^-1로 표현할 수 있음.
• 가수 부분(1.0)과 지수 부분(-1)을 나누어서 실수를 나타내는 방식

문자 자료형

• 2Byte
• 문자는 아스키 코드 값으로 '인코딩' 된 후 컴퓨터에 저장됨.
• 숫자도 저장 가능하지만 음수를 넣으면 오류가 생김.

논리 자료형

• 1Byte
• 어떤 논리에 대한 참, 거짓

상수와 리터럴, 형 변환

상수 : 항상 변하지 않는 값

상수를 사용하기 위해선 final 예약어를 사용해야 함. ex) final double PI = 3.14;

상수 이름은 대문자를 주로 사용.

리터럴 : 프로그램에서 사용하는 모든 숫자, 문자, 논리값을 일컫는 말

형 변환 : 다른 자료형을 하나의 자료형으로 통일한 후 연산을 하는 과정

묵시적 형 변환의 관계

Byte -> short, char -> int -> long -> float -> double

화살표 방향으로 자동 형 변환이 됨.

1. 바이트 크기가 작은 자료형에서 큰 자료형으로 대입하는 경우
2. 덜 정밀한 자료형에서 더 정밀한 자료형으로 대입하는 경우
3. 연산 중에 자동으로 변환되는 경우

명시적 형 변환

묵시적 형 변환과 반대의 경우로 생각할 수 있음.

1. 바이트 크기가 큰 자료형에서 작은 자료형으로 대입하는 경우
2. 더 정밀한 자료형에서 덜 정밀한 자료형으로 대입하는 경우
3. 연산 중 형 변환

연산자

기본 연산자

연산자는 항의 개수에 따라 단항 연산자, 이항 연산자, 삼항 연산자로 나눌 수 있다.

1. 대입 연산자
2. 부호 연산자
3. 산술 연산자
4. 증,감 연산자
5. 관계 연산자
6. 논리 연산자
7. 복합 대입 연산자
8. 조건 연산자

1. 대입 연산자

• 우선순위가 가장 낮은 연산자
• 오른쪽 변수 값이나 식의 연산 결과 값을 왼쪽 변수에 대입
• ex) int a = 1;

2. 부호 연산자

• +, -
• 더하기, 빼기에 스는 이항 연산자면서 부호를 나타내는 단항 연산자로도 사용 가능
• ex) int num = -3

3. 산술 연산자

• 사칙연산
• +, -, *, /, %
• + : 덧셈
• - : 뺄셈
• * : 곱
• / : 나누어 몫
• % : 나누어 나머지

4. 증,감 연산자

• 연산자 앞이나 뒤에 사용하여 값을 1 증가, 1 감소
• ++, --
• ++ : 1 증가
• -- : 1 감소
• 위치에 따라 연산 결과 차이가 있음.

5. 관계 연산자

• 두 개의 항의 관계 여부 검사
• 오른쪽이 큰 기준으로
• > : 왼쪽 항이 크면 참, 아니면 거짓
• < : 오른쪽 항이 크면 참, 아니면 거짓
• >= : 왼쪽 항이 오른쪽 항보다 크거나 같으면 참, 아니면 거짓
• <= : 오른쪽 항이 왼쪽 항보다 크거나 같으면 참, 아니면 거짓
• == : 두 개의 항이 같으면 참, 아니면 거짓
• != : 두 개의 항이 다르면 참, 아니면 거짓

6. 논리 연산자

• 명제
• &&(논리 곱) : 모두 참인 경우에만 참
• ||(논리 합) : 둘 중 하나가 참인 경우 참
• !(부정) : 참은 거짓으로, 거짓은 참으로

7. 복합 대입 연산자

• 대입 연산자와 다른 연산자를 조합해 하나의 연산자처럼 사용하는 연산자
• 우선순위가 가장 낮음.
• += : 두 항의 값을 더해서 왼쪽 항에 대입
• -= : 왼쪽 항에서 오른쪽 항을 빼고 값을 왼쪽 항에 대입
• *= : 두 항의 값을 곱해서 왼쪽 항에 대입
• /= : 왼쪽 항을 오른쪽 항으로 나누어 몫을 왼쪽 항에 대입
• %= : 왼쪽 항을 오른쪽 항으로 나누어 나머지를 왼쪽 항에 대입
• <<= : 비트를 왼쪽으로 이동 후 값을 왼쪽항에 대입
• >>= : 비트를 오른쪽으로 이동하고 값을 왼쪽 항에 대입
• >>>= : 비트를 오른쪽으로 이동하고 값을 왼쪽 항에 대입
• &= : 두 항의 & 비트 연산 후 값을 왼쪽 항에 대입
• |= : 두 항의 | 비트 연산 후 값을 왼쪽 항에 대입
• ^= : 두 항의 ^ 비트 연산 후 값을 왼쪽 항에 대입

8. 조건 연산자

• 삼항 연산자
• 조건 ? 결과1 : 결과2;
• ex) int num = (10 > 7) ? '참' : '거짓' <-- 결과 '참'

비트 연산자

• 비트 단위로 연산이 이루어지는 연산자
• 프로그램에서 특정 값을 만들거나 연산할 때 사용

• 비트 논리 연산자
• &, |, ^, ~
• & 연산자
• 두 개의 비트 값이 모두 1인 경우에만 연산의 결과 값이 1이 됨.
• ex)
• int num1 = 5; <- 2진수로 00000101
• int num2 = 10; <- 2진수로 00001010
• int result = num1 & num2;
• num1 : 00000101, num2 : 00001010 이기 때문에 결과 값은 0이 된다.
• | 연산자
• 비트 값이 하나라도 1이면 연산 결과 값이 1이 됨.
• ex)
• int num1 = 5; <- 2진수로 00000101
• int num2 = 10; <- 2진수로 00001010
• int result = num1 | num2;
• 연산 결과 00001111 <- 10진수 변환 시 15기 때문에 결과값이 15가 됨.
• ^ 연산자
• 같은 값이면 0, 다른 값이면 1
• ex)
• int num1 = 5; <- 2진수로 00000101
• int num2 = 7; <- 2진수로 00000111
• int result = num1 ^ num2;
• num1 : 0101, num2 : 0111 이기 때문에 0010이 된다. 결과값 : 2
• ~ 연산자
• 0은 1로, 1은 0으로 바꿈.
• ex)
• int num1 = 5; <- 2진수로 00000101
• int result = ~num1;
• ~num1 : 11111010으로 -6이 됨.
• 11111010 : 반전시긴 후 + 1 <- 00000101 + 1 = 00000110 <= 6이므로 -6

보수

주어진 수를 다른 수로 바꾸는 연산을 의미함. 이진수에서 주로 사용된다.

• 2의 보수
• 음수를 표현하기 위한 방법
1. 양수의 이진수 표현 : 절대값이 양수인 이진수를 구함.
2. 비트 반전 : 모든 비트를 반전시킴. 0은 1로 1은 0으로
3. 1 더하기 : 반전된 이진수에 1을 더함.
4. ex) -6을 2의 보수로 표현하기
1. 양수 6을 8비트 이진수로 표현하면 00000110
2. 비트를 반전시키면 11111001
3. 1을 더하면 11111010이 됨.

• 비트 이동 연산자
• <<, >>, >>>
• 시프트 연산자라고도 부름.
• << 연산자
  • 왼쪽으로 비트를 이동하는 연산자
  • ex)
    • int num = 5; <- 00000101
    • num << 2; <- 00010100
    • 결과값 : 20
    • 왼쪽으로 n비트 이동한다는 것은 기존 값에 2ⁿ만큼 곱한다는 뜻
    • 5 * 2² = 20
• >> 연산자
  • 오른쪽으로 비트를 이동하는 연산자
  • ex)
    • int num = 10; <- 00001010
    • num >> 2; <- 00000010
    • 결과값 : 2
    • 오른쪽으로 n비트 이동한다는 것은 기존 값에 2ⁿ만큼 나눈다는 뜻 (왜 소수점이 버려지나 했더니 int로 선언했음..)
    • 10 / 2² = 2 <- int
• >>> 연산자
  • >>이랑 동일하게 오른쪽으로 비트를 이동하는 연산자
  • 왼쪽에 채워지는 비트값이 부호 비트와 상관없이 무조건 0이 되는 차이
  • ex)
    • int num = 10; <- 00001010
    • num >>> 2; <- 00000010
    • 결과값 : 2
    • 사실 뭐가 다른지 잘 모르겠다.

>>, >>> 연습

자료형의 크기(값의 범위) 순서 byte < short/char < int < long < float < double

연산자 우선순위

1. 일차식 : () [] .         연산방향 →
2. 단항 : ! ++ -- + -         연산방향 ←
3. 산술 : % /         연산방향 →
4. 산술 : + -         연산방향 →
5. 비트 이동 : << >>         연산방향 →
6. 관계 : < > <= >=         연산방향 →
7. 관계 : == !=         연산방향 →
8. 비트 곱 : &         연산방향 →
9. 비트 차 : ^         연산방향 →
10. 비트 합 : |         연산방향 →
11. 논리 곱 : &&         연산방향 →
12. 논리 합 : ||         연산방향 →
13. 조건 : ?:         연산방향 →
14. 대입 : = += -= *= %= /=         연산방향 ←

참조 & 출저 Java 자료형

자바의 버전은 Java SE 11.0.24 (LTS)를 사용. 여기서 다운 editer는 Eclipse를 사용

windows admin의 이름이 한글이면 예상치 못한 오류 발생 가능성 ↑

Java Initial Settings

에디터나 자바 등 여러 프로그램 다운로드 폴더에 설치 X (경로에 한글 있을 시에 오류 생길 가능성 ↑)

내 PC 우클릭 -> 속성 -> 고급 시스템 속성 -> 고급 -> 환경 변수 -> 시스템 변수 -> 새로 만들기 ↓

디렉터리 찾아보기로 자바를 다운받은 드라이브에 접근해서 JDK폴더 찾고 경로에 넣어주기.

CLASSPATH도 설정. 경로는 JDK 폴더 안에 있는 lib 폴더로

환경 변수 -> 시스템 변수 -> Path에서

기존에 설치해서 생긴 oracle/java 경로를 삭제 후 위 사진처럼 새로 생성.

Eclipes Initial settings

상단의 window -> Preferences

Autosave 체크 (거의 필수) HTML, CSS, JSP, XML 등 UTF-8로 되어있는지 확인하기

• 웹 브라우저나 사용자가 행하는 동작
• 웹 문서 (DOM) 영역 안에서 발생하는 동작으로 한정
• 마우스, 키보드, 웹 문서 로딩 시, 폼 내용 작성,,,,

이벤트의 종류

• 마우스 이벤트
  • onclick : HTML, 요소, 영역을 클릭할 때 발생
  • ondbclick : 두 번 클릭할 때 발생
  • onmouseover :
  • onmouseout :
  • onmousemove :
  • onmousedown :
  • onmouseup :
  • onwheel :
• 키보드 이벤트
  • onkeypress : 키를 누를 때
  • onkeydown : 키를 누르는 동안
  • onkeyup : 눌렀던 키가 올라올 때(손을 땔 때)
  • 대부분 keyup/down 많이 씀
• 포커스 이벤트
  • onfocus : 요소에 포커스(커서, 포인터)가 되면
  • onblur : 요소가 포커스를 잃으면
• 폼 이벤트
  • onsubmit : 폼 전송 될 때
  • reset : 폼 요소 값 초기화
• 문서 관련 이벤트
  • onload : 문서 로딩이 끝나면 발생
  • resize : 문서 화면의 크기가 바뀌면 발생
  • scrool : 화면이 스크롤되면 발생
  • about : 문서가 완전히 로딩되기 전에 화면이 멈추면 발생
  • error : 문서가 정확히 로딩되지 않고 에러가 발생할 경우
  • unload : 문서에서 벗어날 때 발생

브라우저 객체 모델의 종류

• window : 웹 브라우저가 열릴 때마다 생성되는 최상위 객체
  • innerWidth : 웹 브라우저 화면 너비(px)
  • innerHeight : 웹 브라우저 화면 높이(px)
  • outerWidth : 웹 브라우저 창의 너비(px)
  • outerHeight : 웹 브라우저 창의 높이(px)
  • screenTop/screenY : 웹 브라우저 위쪽 면과 모니터의 간격
  • screenLeft/screenX : 웹 브라우저 왼쪽 면과 모니터의 간격
  • pageXOffset/scroolX : 웹 브라우저의 수평 스크롤 위치
  • pageYOffset : 웹 브라우저의 수직 스크롤 위치

  • 주요 메서드

  • alert() : 알림창 표시
  • confirm() : 확인창 표시
  • prompt() : 입력창 표시
  • open() : 새로운 웹 브라우저 창 열기
  • close() : 웹 브라우저 닫기
  • setTimeout() : 일정 시간(ms) 뒤에 콜백 함수를 한 번만 실행
  • setInterval() : 일정 시간(mns)마다 콜백 함수를 반복 실행
  • clearInterval() : setInterval() 메서드를 반복 실행되는 함수를 중지
  • scrollTo() : 웹 브라우저의 스크롤을 특정 위치로 이동
  • scrollBy() : 웹 브라우저의 스크롤을 현재 위치에서 상대 위치로 이동
• document : 웹 브라우저에 표시되는 HTML 문서 정보가 포함된 객체 -> <html></html>
• location : 웹 브라우저에 현재 표시된 페이지에 대한 URL 정보가 포함된 객체
• history : 웹 브라우저에 저장된 방문 기록이 포함된 객체
• navigator : 웹 브라우저(메뉴) 정보가 포함된 객체
• screen : 웹 브라우저의 화면 정보가 포함된 객체

<h1>문서 객체 모델 (DOM : Document Object Model)</h1>
<ul>
  <li>
    DOM 트리
    <ul>
      <li>
        웹 문서에 있는 요소들 간의 부모, 자식 관계를 계층 구조로 표시한 것
      </li>
      <li>자바스크립트가 이해할 수 있도록 객체화한 모델 구조</li>
      <li>나무 형태로 표현되기 때문에 DOM 트리 라고 함</li>
      <li>노드(node) : DOM 트리에서 가지가 갈라져 나간 항목</li>
      <li>루트 노드 (root node) : DOM 트리의 시작 부분</li>
      <li>모든 HTML 태그는 요소(element) 노드</li>
      <li>
        웹 문서의 텍스트 내용은 요소 노드의 자식 노드인 텍스트(text)노드
      </li>
      <li>태그의 속성 : 요소 노드의 자식 노드인 속성(attribute)노드</li>
      <li>주석 : 주석(comment) 노드</li>
      <li>
        attribute vs property
        <ul>
          <li>
            <a
              href="https://inpa.tistory.com/entry/%F0%9F%8C%90-attribute-property-%EC%B0%A8%EC%9D%B4"
              >여기를 참고 (출저 : Inpa Dev)</a
            >
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li>
    노드의 타입
    <ul>
      <li>
        문서 노드(Node.DOCUMENT_NODE) : 최상위 DOCUMENT 객체의 노드 타입
      </li>
      <li>
        요소 노드(Node.ELEMENT_NODE) : 요소의 노드 타입 -> h1, p 태그
        등등...
      </li>
      <li>
        속성 노드(Node.ATTRIBUTE_NODE) : 속성의 노드 타입 -> href. src...
      </li>
      <li>텍스트 노드(Node.TEXT_NODE) : 텍스트에 해당하는 노드 타입</li>
      <li>주석 노드(Node.COMMENT_NODE) : 주석에 해당하는 노드 타입</li>
    </ul>
  </li>
  <li>
    DOM 요소에 접근 방법
    <ul>
      <li>
        getElementById("id이름") 메서드
        <ul>
          <li>형식 : 요소명.getElementById("id명")</li>
        </ul>
      </li>
      <li>
        getElementByClass() 메서드
        <ul>
          <li>형식 : 요소명.getElementByClass("class명")</li>
        </ul>
      </li>
      <li>
        getElementByName() 메서드
        <ul>
          <li>형식 : 요소명.getElementByName("태그명")</li>
        </ul>
      </li>
      <li>
        querySelector() 메서드
        <ul>
          <li>형식 : 요소명.querySelector("선택자")</li>
        </ul>
      </li>
      <li>
        querySelectorAll() 메서드
        <ul>
          <li>형식 : 요소명.querySelectorAll("선택자 또는 태그")</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

잊지 말아야 할 내용

• 자바스크립트 이벤트 생명주기 (Life Cycle)
• 호이스팅
• 컴파일 방식(자바스크립트는 인터프리터 방식으로 위에서 순차적으로 내려옴)

조건문

if ( 조건문 ) {
실행문1;
실행문2;
실행문3;
} else if ( 조건문 2 ) {
실행문1-1;
실행문2-1;
실행문3-1;
} else {
실행문4;
실행문5;
}

반복문

• for 문

  for ( 초기값; 조건; 증가식 ) { 실행문; 조건문; 반복문; 함수; ...}

• 초기값 : for 문에서 사용하는 반복 조건값을 초기화
• 조건 : 조건이 true 동안에 for 문이 반복
• 증가식 : for문이 반복되는 동안 초기값 증가

• white문

• white (조건) {
  실행구문; for문; while문; 함수; 선언; break; continue; ..... }
  

• do ~ while문

• do{ 실행구문; break; continue; } while(조건);

함수(function)

• 어떤 목적을 가지고 작성한 코드를 모아놓은 블록문
• 각 명령의 시작과 끝을 명확히 구분할 수 있음
• 함수를 정의한다 :
  • 블록문을 구성한다.
  • function 키워드
  • 식별자
  • 소괄호
• 코드의 재활용이 가능
• function 함수명(매개변수) {
  실행구문;
  함수;
  로직;
  변수;
  [return 값;]
  }
• 함수 표현식
  • 익명 함수
    • 변수에 바로 할당
    • let 변수명 = fucntiion (매개변수){ }
    • 변수명(매개변수,,,,,)
    • 변수명(10, 20)
    • function sum(매개변수1, 매개변수2) {}, sum(10, 20)
  • 네이밍 함수
    • 변수에 할당하는 함수에 식별자가 있을 때
    • const 변수명 = function 이름() {}
  • 즉시 실행 함수
    • (function(){실행구문;}(인수));
    • (function(매개변수,,,,){실행구문;,,,}(인수));
    • 페이지가 로딩될 때 즉시 실행
    • jQuery
  • 화살표 함수
    • ES6에 정의
    • 오로지 익명함수에만 정의
    • () => {}
    • const sum = () => {로직};
      sum();
    • //onclick="(e) => {e.target.value}"//

자바스크립트의 자료형

숫자형(number)

- 숫자 형태의 데이터를 처리

- 정수 : -3, -2, 0, 1, 10

- 실수 : -0.25, 0, 3.0

- 실수의 소수점 이하 자릿수에 대하여 정밀도를 보장하지 않는다.

문자열(string)

- 문자가 한 개 이상 이어져 있는 것을 문자열

- 'a', "a", 'aaaaa', "aaaaa" 다 똑같이 인식함.

논리형(boolean)

- 참(true) 또는 거짓(false) 값을 표현

- 조건을 확인해서 맞으면 true, 틀리면 false

undefined 유형

- 자료형이 정의되지 않았을 때의 데이터 상태

- 변수 선안만 하고 값이 할당되지 않은 상태

null 유형

- 데이터의 값이 유효하지 않은 상태

- 변수에 할당된 값이 유효하지 않다는 의미

배열(array)

- 하나의 변수에 여러 값을 저장할 수 있는 유형

- 자료형의 유형이 같은 값을 할당

객체

- 배열도 객체의 일종

- 함수와 속성을 함께 포함

- 배열, 함수, 객체 리터럴 등으로 파생되는 상위 자료형

- 객체 리터럴 : 중괄호({})를 사용, 키(key), 값(value) 한 쌍으로 이루어진 데이터

연산자의 종류

+, -, *, / 수학과 동일

% : 퍼센트 연산자, 모듈러 연산자 - 나머지를 구하는 연산자

++ : 피연산자를 1 증가

-- : 피연산자를 1 감소

xx : 제곱승 ==> axxa, a^a ( 별이 안되서 xx로 대체 )

논리 연산자

- OR 연산자 || : 피연산자 중 하나만 true여도 true

- AND 연산자 && : 피연산자가 모두 true일 경우에만 true

- NOT 연산자 ! : 피연산자의 반댓값을 사용

역시 공부 안한 티가 난다. JS 메서드 들도 거의 기억 안나고 로직도 다 까먹었다. 오늘은 금요일. 토요일에 작은 프로젝트 끝내고 일요일에 js 강의를 다시 들어야겠다.

구글 스타일 가이드 참조

미디어 쿼리 구문

- @media 속성을 사용

- 적용할 미디어 대상 지정

- 적용할 css를 지정

- style태그 사이에 정의

- 형식 : @media [not|only] 미디어타입 [and 조건] * [and 조건] { /* css 코드 */ }

- 속성값

• not : 다음에 지정하는 미디어타입을 제외
• only : 미디어 쿼리를 지원하지 않는 웹 브라우저에서는 무시
• and : 여러 개를 연결하여 추가 가능

  미디어 유형

• all : 지원하는 모든 미디어
• print : 인쇄 장치에서 사용할 css 정의
• screen : 컴퓨터 스크린과 같은 모니터 스크린, 스마트폰 포함
• tv : TV
• aural : 음성 신호 장치(TTS 같은 장비들)
• braille : 점자 표시 장치
• handheld : 패드같은 이동성 장치
• projection : 프로젝트 같은 장비
• tty : 디스플레이 기능이 성능이 낮은 장비들
• embossed : 점자 프린터

  웹 문서 기준 가로/세로

  - 실제 웹 문서 내용이 표현되는 영역의 가로/세로

  - width, height

  - min-width, min-height --> 브라우저 사이즈에 대해 컨텐츠가 노출 영역의 변동 최저 값

  - max-width, max-height --> 디바이스 구분 용도

  - @media screen and (min-width:1440px) { /* css 코드 */ }

  - 너비가 최소 1440px인 화면에서 플레이 되는 스타일

  단말기 기준

  - 단말기 해상도와 실제 브라우저의 너비가 다름

  - device-width, device-height

  - min-device-width, min-device-height

  - max-device-width, max-device-height

  - @media screen and (min-device-width:380px) and (min-device-height:812px) { /* css 코드 */ }

  화면 회전 기준

  - orientation : portrait - 단말기 세로모드

  - orientation : landscape - 단말기 가로모드

그리드 레이아웃

- 반응형 웹 디자인에서 웹 문서의 요소를 배치하는 기준

- 웹 사이트의 화면을 여러 개의 컬럼으로 나눠서 배치

- 화면을 규칙적으로 배치하고, 레이아웃 일관적으로 관리 편리

- 시각적으로 안정된 디자인

- 업데이트가 편함

- 요소 자유롭게 배치하는 것이 가능

- 구성하는 방법

- - 플렉스 박스 레이아웃

• 수평방향, 수직방향 중 하나를 축으로 정하고 박스를 배치
• 여유 공간이 생길 경우, 너비나 높이를 적절하게 늘리거나 줄일 수 있음
• 주축 : 플렉스 박스의 진행 방향
• 교차축 : 주축과 수직방향
• 플렉스 컨테이너 : display 속성 값으로 flex, inline-flex 사용
• 플렉스 아이템 : 플렉스 컨테이너의 자식관계를 이루는 요소

  - - 플렉스 박스의 기본 속성

• display 속성
• • flex : 컨테이너 안의 플렉스 항목을 블록 레벨 요소로 배치
• • inline-flex : 플렉스 항목을 인라인 레벨 요소로 배치
• • 형식 : display:flex / inline-flex
• flex-direction 속성
• • 플렉스 박스 레이아웃의 주축 방향 지정
• • 형식 : flex-direction:속성값
• • row : 주축 방향을 왼쪽->오른쪽
• • row-reverse : 주축 방향을 오른쪽->왼쪽
• • column : 주축 방향을 위->아래
• • column-reverse : 주축 방향을 아래->위
• flex-wrap 속성
• • 플렉스 아이템의 자동 줄바꿈 여부 처리
• • 형식 : flex-wrap:속성값
• • nowrap : 아이템이 플렉스 컨테이너의 영역을 벗어나도 무시
• • wrap : 아이템이 컨테이너 영역을 벗어나면 줄바꿈
• • wrap-reverse : 아이템이 컨테이너 영역을 벗어나면 wrap의 역방향으로 줄바꿈
• flex-flow 속성
• • flex-direction과 flex-wrap 속성을 한번 사용할 수 있는 단축 속성
• • 형식 : flex-flow:direction wrap
• • 기본값 : flex-flow:row no-wrap
• justify-content 속성
• • 플렉스 아이템을 모두 주축 방향으로 정렬
• • 형식 : justify-content:속성값
• • flex-start : 주축 방향의 시작점 기준으로 정렬
• • flex-end : 주축 방향의 끝점을 기준으로 정렬
• • center : 주축 방향의 중앙을 기준으로 정렬
• • space-between : 플렉스 아이템 사이의 간격이 일정하도록 정렬
• • space-around : 플렉스 아이템의 둘레가 일정하도록 정렬
• • space-evenly : 아이템의 사이, 양끝 간격이 일정하도록 정렬
• align-items, align-self 속성
• • 플렉스 아이템을 모두 교차축 방향으로 정렬
• • 교차축에서 특정 항목만 지정할 경우 align-self
• • 형식 : align-items:속성값
• • flex-start : 교차축 방향의 시작점을 기준으로 정렬
• • flex-end : 교차축 방향의 끝을 기준으로 정렬
• • center : 교차축 방향의 중앙을 기준으로 정렬
• • baseline : 플렉스 아이템의 baseline을 기준으로 정렬
• • stretch : 교차축 방향으로 플렉스 아이템의 너비, 높이가 늘어남
• align-content 속성
• • 플렉스 아이템이 두 줄 이상일 때 교차축 방향으로 정렬
• • 형식 : align-content:속성값
• • flex-start : 교차축 시작점에 맞춰 배치
• • flex-end : 교차축 끝점에 맞춰 배치
• • center : 교차축 기준 중앙에 맞춰 배치
• • space-between : 첫 항목, 끝 항목은 교차축의 시작과 끝에 맞추고, 사이간격은 같은 간격으로 배치
• • space-around : 교차축에 모든 항목을 같은 간격으로 배치
• • stretch : 교차축 방향으로 플렉스 아이템의 너비, 높이가 늘어남

CSS 그리드 레이아웃

- 최근 등장한 css 표준

- 수평이나 수직이나 어디로든 배치 가능

- 레고블럭 끼우듯이 처리

- 양쪽 축 방향을 모두 사용할 수 있음(2차원 레이아웃)

- 행(row), 컬럼(column)으로 화면 구성

- 행, 열 사이의 여백 조절 --> table과 유사

- 그리드 셀(grid cell) : 행과 열이 만나서 이루어지는 공간

- 그리드 갭(grid gap) : 그리드 셀과 셀 사이의 간격

- 그리드 아이템(grid item) : 그리드 셀 안의 컨텐츠

- 그리드 라인(grid line) : 그리드 행과 열을 그리는 선

- 그리드 넘버(grid number) : 그리드 라인에 붙는 번호

- 그리드 컨테이너(grid container) : 그리드 아이템을 묶는(감싸는) 부모 요소

그리드 레이아웃 속성

display 속성

• grid : 컨테이너 안의 항목을 블록 레벨 요소로 배치
• inline-grid : 컨테이너 안의 항목을 인라인 레벨 요소로 배치

  grid-template-columns, grid-template-rows 속성

• grid-template-columns : 그리드 컨테이너 안의 컬럼 개수, 너비값
• grid-template-rows : 그리드 컨테이너 안의 줄 갯수, 너비값
• 형식 : grid-template-columns:1열값 2열값 .....
• 형식 : grid-template-rows:1행값 2행값 .....
• 컬럼에 지정하는 값 -> 상대크기로 지정 가능 --> 테이블 colspan과 같은 개념
• 형식 : grid-template-columns: 2fr 1fr 2fr

  row-gap, column-gap 속성

• 그리드 셀과 셀 사이의 간격
• 형식 : row-gap:크기
• 형식 : column-gap:크기

  align-items 속성

• 그리드 아이템 전체를 셀의 세로 방향으로 정렬
• stretch : 그리드 아이템이 그리드 셀을 가득 채우도록 크기를 늘림
• start : 그리드 아이템을 그리드 셀의 세로 방향 중간에 배치
• end : 그리드 아이템을 그리드 셀의 맨 아래에 배치

  align-self 속성

• 각각의 그리드 아이템을 셀의 세로 방향으로 각각 지정

  justify-items 속성

• 그리드 아이템 전체를 셀의 가로 방향으로 정렬
• stretch : 그리드 아이템이 그리드 셀을 가득 채우도록 크기를 늘림
• start : 그리드 아이템을 그리드 셀의 왼쪽 끝에 배치
• center : 그리드 아이템을 그리드 셀의 가로 방향 중간에 배치
• end : 그리드 아이템을 그리드 셀의 오른쪽 끝에 배치

  justify-self 속성

• 각각의 그리드 아이템을 셀의 가로 방향으로 정렬

  place-item 속성

• align-items, justify-items 속성을 한 번에 지정
• 형식 : place-items: align-items속성 justify-items속성

  place-self 속성

• align-self, justify-self 속성을 한 번에 지정
• 형식 : place-self: align-self속성 justify-selfthrtjd

  grid-template-areas 속성

• 그리드 레이아웃에 행과 열을 이름으로 지정

  grid-area 속성

• 그리드 아이템에 이름을 지정

  grid-column-start, grid-column-end

• 그리드 레이아웃에서 열의 시작, 끝번호 지정
• 형식 : grid-column-start:속성값
• 형식 : grid-column-end:속성값

  grid-row-start, grid-row-end 속성

• 그리드 레이아웃에서 행의 시작, 끝번호 지정
• 형식 : grid-row-start:속성값
• 형식 : grid-row-end:속성값

  grid-column

• grid-column-start, grid-column-end 의 단축 속성
• 형식1 : grid-column:start end
• 형식2 : grid-column:start/span(열의 개수)

  grid-row

• grid-row-start, grid-row-end 의 단축 속성
• 형식1 : grid-row:start end
• 형식2 : grid-row:start/span(행의 개수)

오늘은 mediaQuery, flex layout, grid layout에 대해서 공부를 진행했다. grid에 대해선 알고 있었지만 항상 flex로 layout을 잡는 걸 고집해왔었는데 grid로 layout을 나누는 게 코드 상으로는 훨씬 깔끔한 느낌을 받았다. 손에 익을 정도로 열심히 공부해야할 것 같다.

변형(transform) : 특정 요소의 크기나 형태, 스타일 등이 바뀌는 것

2차원/3차원 변형

- 수평/수직으로 웹 요소를 변형

- 크기/각도만 지정

- 2차원 좌표 사용

확대/축소

• scale(x,y) - 요소를 x, y 만큼 확대/축소
• scaleX(n) - 요소를 n만큼 x축으로 확대/축소
• scaleY(n) - 요소를 n만큼 y축으로 확대/축소
• scale3d(x,y,z) - 요소를 x, y, z축으로 각각 x, y, z 만큼 확대

  기울이기

• skew(xdeg, ydeg) : 요소를 x축, y축으로 xdeg, ydeg만큼 기울임
• skewX(xdeg) : 요소를 x축으로 xdeg만큼 기울임
• skewY(ydeg) : 요소를 y축으로 ydeg만큼 기울임

  회전

• rotate(deg) : 요소를 deg만큼 회전

  translate 함수

• 지정한 방향으로 이동할 거리 지정 후 이동
• transform:translate(tx,ty) - x축 방향으로 tx만큼, y축 방향으로 ty만큼 이동, ty 값을 주지 않으면 0으로 간주
• • translate3d(tx, ty, tz)
• • translateX(tx) : x축 방향
• • translateY(ty) : y축 방향
• • translateZ(tz) : z축 방향

Animation 관련 Css

애니메이션 속성

웹 요소에 애니메이션 속성을 추가

애니메이션을 시작해서 끝나는 동안 원하는 곳에 스타일을 바꾸어 애니메이션 정의 가능

키프레임(keyframe) : 애니메이션 중간에 스타일이 바뀌는 지점

애니메이션 속성

@keyframe : 애니메이션이 바뀌는 지점을 정의

• 형식 : @keyframe 이름(키프레임명) { 0% { /* CSS 코드 / } n% { / CSS 코드 / } 100% { / CSS 코드 */ } }
• 이름으로 애니메이션을 구분
• 시작점 0%, 끝점 100%로 놓고 지정
• 시작, 끝만 사용 시 from, to 키워드 사용 가능
• 필수값

  animation-name 속성

• 애니메이션을 지정할 키프레임명 지정
• 애니메이션을 구분하는 역할
• @keyframe에서 지정한 이름을 사용
• 형식 : animation-name: 이름 | none
• 필수값

  animation-duration 속성값

• 애니메이션의 지속시간 지정
• 설정 값은 초(s), 밀리초(ms)
• 필수값

  animation-delay 속성값

• 애니메이션의 지연 시간 설정
• 형식 : animation-delay:지연시간

  animation-direction 속성

• 애니메이션의 진행 방향을 지정
• 형식 : animation-direction:속성값
• normal : 애니메이션의 진행 방향을 키 프레임에 정의된 시간 순서대로 진행 (to->from)
• reverse : 애니메이션의 진행 방향을 키 프레임에 역순으로 진행 (from->to)
• alternate : 1회 이상 실행시에는 홀수번째는 normal, 짝수번째는 reverse 진행
• alternate-reverse : 홀수번째는 reverse, 짝수번째는 normal

  animation-iteration-count 속성

• 애니메이션의 반복 횟수 지정
• 형식 : animation-iteration-count:횟수
• 숫자 : 반복횟수 지정
• infinite : 무한 반복

  animation-timing-function 속성

• 애니메이션의 속도 지정

  animation-play-state 속성

• 애니메이션의 진행/정지 상태 정의
• 형식 : animation-play-state:속성값
• paused: 일시 정지
• running : 실행

  animation 속성

• 모든 애니메이션 속성 지정
• 형식 : animation:name duration timing-function delay iteration-count direction fill-mode play-state
• 지정하지 않은 속성은 기본값 사용
• animation-duration 값은 필수값

머리아프다. 이걸 다 외워야 하다니.

애니메이션은 차근히 외운다 해도 트랜지션 속성은 다 외워야 편하게 작업할 수 있을 것 같다.

기본 선택자

전체 선택자

• 형식 : * { /* CSS 코드 */ }

  타입(태그) 선택자

• 태그명으로 선택자 지정
• • 형식 : 태그명 { /* CSS 코드 */ }

    아이디 선택자

• id 속성값(아이디명)으로 선택자 지정
• • 형식 : #id명 { /* CSS 코드 */ }

    클래스 선택자

• class 속성(클래스명)으로 선택자 지정
• • 형식 : .class명 { /* CSS 코드 */ }

    기본 속성 선택자

• HTML 태그에서 사용할 수 있는 속성과 값으로 선택자를 지정
• • 형식 : [속성] { /* CSS 코드 */ }

조합(연결) 선택자

• 선택자와 선택자를 연결해 적용하여 대상을 제한
• combination selector(조합 선택자)

  그룹 선택자

• 여러 선택자를 콤마(,)를 사용하여 그룹으로 묶어서 지정
• 형식 : 선택자1, 선택자2,,,,,, 선택자n { /* CSS 코드 */ }

  자식 선택자(child selector)

• 자식 요소에 스타일을 적용
• 선택자 범위를 자식 관계로 제한 두 요소 사이에 >(부등호)를 이용하여 부모와 자식을 구분
• 형식 : 부모 선택자 > 자식 선택자 { /* CSS 코드 */ }

  하위 선택자(descendant selector)

• 선택자 범위를 자식 및 자손 관계로 제한
• 부모 요소에 포함된 모든 하위 요소에 스타일 적용
• 형식 : 상위 선택자 하위 선택자
• 형식 : 선택자1 선택자2 선택자3,,,,{ /* CSS 코드 */ }

  인접 형제 선택자(adjacent selector)

• 특정 태그와 가장 인접한 형제 관계 태그를 선택자로 지정
• 같은 부모를 가진 형제 요소 중에서 첫 번째 동생 요소에만 적용
• 요소1과 요소2는 같은 레벨이면서 요소1 이후 첫 번째 요소2에 적용
• 구분자 : +
• 형식 : 이전 선택자 + 대상 선택자 { /* CSS 코드 */ }

  일반 형제 선택자(sibling selector)

• 특정 태그와 형제 관계에 오는 모든 태그를 선택자로 지정
• 형제 요소들에 스타일 적용
• 인접 형제 선택자와 다르게 모든 형제 요소에 적용
• 구분자 : ~
• 형식 : 이전 선택자 ~ 대상 선택자 { /* CSS 코드 */ }

[속성] 선택자

• 해당 속성이 있는 요소에 적용
• 형식 : 태그[속성] { /* CSS 코드 */ }

  [속성=값] 선택자

• 지정한 속성값이 있는 요소에 적용
• 형식 : 태그[속성=값] { /* CSS 코드 */ }

  [속성~=값] 선택자

• 지정한 속성값(단어별)이 포함된 요소에 적용
• 형식 : 태그[속성~=값] { /* CSS 코드 */ }

  [속성|=값] 선택자

• 지정한 속성값(하이픈 포함, 단어별)이 포함된 요소에 적용
• 형식 : 태그[속성|=값] { /* CSS 코드 */ }

  [속성^=값] 선택자

• 특정 값으로 시작하는 속성을 가진 요소에 적용
• 형식 : 태그[속성^=값] { /* CSS 코드 */ }

  [속성$=값] 선택자

• 속성값이 특정 값으로 끝나면 선택
• 형식 : 태그[속성$=값] { /* CSS 코드 */ }

  [속성*=값] 선택자

• 속성값에 해당 문자열이 포함되면 적용
• 형식 : 태그[속성=값] { / CSS 코드 */ }

가상 클래스, 가상 요소

• 실제로 존재하지 않는 요소
• 존재한다고 가정하고 선택하는 방법 요소의 상태를 이용하여 선택자를 지정
• 가상 클래스 앞에 : 기호를 붙여서 사용
• 사용자의 동작에 반응하는 가상 클래스 선택자
• 링크 가상 클래스 선택자
• • :link - 링크를 한 번도 방문한 적이 없는 상태
• • :visited - 링크를 한 번 이상 방문한 적이 있는 상태
• 동적 가상 클래스 선택자
• • :hover - 마우스를 올린 상태
• • :active - 마우스로 클릭한 상태
• 입력 요소 가상 클래스 선택자
• • :focus - 입력 요소에 커서가 이동하여 활성화된 상태
• • :checked - 체크박스(레디오버튼) 요소에 체크한 상태
• • :enabled - 상호 작용 요소가 활성화된 상태
• • :disabled - 상호 작용 요소가 비활성화된 상태 - 요소가 서버로 전송되지 않는다.
• • :not - 특정 요소를 제외하고 스타일 적용

구조 가상 클래스

:only-child -> 부모 안에 자식 요소가 하나뿐일 때 자식 요소 선택 A:only-type-of -> 부모 안에 A 요소가 하나뿐일 때 선택 :first-child -> 부모 안에 있는 모든 요소 중에서 첫 번째 자식 요소를 선택 :last-child -> 부모 안에 있는 모든 요소 중에서 마지막 자식 요소를 선택 A:first-of-type -> 부모 안에 있는 A 요소 중에서 첫 번째 요소를 선택 A:last-of-type -> 부모 안에 있는 A 요소 중에서 마지막 요소를 선택 :nth-child(n) -> 부모 안에 있는 모든 요소 중에서 n 번째 자식 요소를 선택 :nth-of-type(n) -> 부모 안에 있는 모든 요소 중에서 끝에서 n 번째 자식 요소를 선택 A:nth-of-type(n) -> 부모 안에 있는 A 요소 중에서 n 번째 요소를 선택 A:nth-last-of-type(n) -> 부모 안에 있는 A 요소 중에서 끝에서 n 번째 요소를 선택

가상 요소

• 실제로 존재하지 않는 요소
• 존재한다고 가정하고 선택하는 방법
• 화면 꾸미기용, 웹 문서에는 포함되지 않음
• 가상요소 선택자 앞에 :: 를 붙임
• 형식 : 기준 선택자 :: 가상요소 선택자 { /* CSS 코드 */ }
• ::before - 기준 선택자의 요소의 앞 선택
• ::after - 기준 선택자의 요소의 뒤가 선택
• ::first-line - 특정 요소의 첫 번째 줄에 스타일 적용
• ::first-letter - 특정 요소의 첫 번째 글자에 스타일 적용

이번 부분은 계속 복습하고 복습해서 외워야 할 것 같다. 너무 많이 썼던 것들인데도 불구하고 항상 구글링만 해서 머릿속에 남질 않았다.

웹 문서에서 사용할 글꼴 지정 body 태그를 비롯해 p 태그나, hn 태그처럼 텍스트를 사용하는 요소에 사용 지정한 글꼴이 없을 경우, 두 번째, 세 번째 지정할 글꼴 순서로 적용, 없을 경우 시스템 기본 폰트가 적용됨 둘 이상의 글꼴 이름을 지정할 경우 쉼표 ( , )로 구분 body 태그 스타일에서 한 번 정의하면 문서 전체에 적용 문서 안에서 모든 자식 요소에 같은 속성이 적용

font-size 속성 font-size: {<절대크기> | <상대크기> | <크기> | <백분율>} 절대크기 : 브라우저에서 지정한 글자 크기 상대크기 : 부모 요소 기준 크기 : 브라우저 상관없이 글자 크기 지정 백분율 : 부모 요소의 글자 크기 기준 백분율(%)로 지정

키워드를 사용한 글자 크기 지정 xx-Small < x-Small < Small < Medium < Large < x-Large < xx-Large 단위를 사용해 글자 크기 지정

font-style 속성

font-style : normal | italic | oblique normal : 기본값으로 일반적인 형태로 표시 italic : 이탤릭체로 표시

font-weight 속성

font-weight : normal | bold | bolder | lighter | 100 | ~~ | 900

글자 굵기를 조절하는 속성 normal : 기본값 bold : 굵게 bolder : 원래보다 더 굵게 lighter : 원래보다 가늘게 100 ~ 900 : 가늘게 ~ 가장 굵게

색상 이름 표기법 잘 알려진 색상 이름을 표시, 기본 색상 16가지

웹 안전 색상 모든 브라우저에서 표현할 수 있는 색상 기본 색상 포함 216가지

RGB표기법

rgb/rgba 표기 color:rgb(255,255,255) 형태 빨강, 초록, 파랑 순서 color:rgba(255,255,255,투명도), 투명도 : 01사용, 0: 투명, 1: 불투명 0255 로 표현

16진수 표기법 #ffffff 처럼 #숫자, 영문 6자리로 표현 앞에서부터 2자리 단위, 빨, 초, 파 0은 검정, f는 투명 두자리가 동일할 경우 축약 가능 ex) #ffffff --> #fff

색상표기법

color:red - 색상명을 직접 지정

RGB 표기법 rgb(17, 255, 0) 으로 표기

16진수 표기법 color:#ff00ff 로 표기

text-align 속성 text-align: start | end | left | right | center | justify | match-parent style="text-align: left" : 왼쪽 정렬 style="text-align: right" : 오른쪽 정렬 style="text-align: center" : 중앙 정렬 style="text-align: justify" : 양쪽 정렬

line-height속성

문단의 줄 간격 지정 숫자 : 현재 font-size 값에 숫자 곱한 값 백분율 : 부모 요소 기준 크기 : 입력한 크기

HTML 라인하이트 속성 text-decoration

텍스트에 밑줄/윗줄/취소 none : 표시안함 underline : 밑줄 overline : 윗줄 line-through : 취소선 style="text-decoration: none" : 적용안됨 style="text-decoration: overline" : 윗줄 style="text-decoration: line-through" : 가격 변경 : 30000원 style="text-decoration: underline" : 아랫줄

text shadow text-shadow : none | <가로거리> <세로거리> <번짐정도> <색상> 가로거리 : 텍스트로부터 그림자의 가로거리, 필수 속성 세로거리 : 텍스트로부터 그림자의 세로거리, 필수 속성 번짐 정보 : 그림자가 번져 보이는 정도, 기본값 0 색상 : 그림자의 색상 지정, 여러가지 지정 가능

style="color: red; text-shadow: 5px 5px black" style="text-shadow: 7px 7px 3px blueviolet" : CSS 텍스트 스타일 style="color: aqua; text-shadow: 10px -10px 20px" CSS 텍스트 스타일

letter-spacing letter-spacing:nromal | <크기> 글자 간격

word-spacing word-spacing : normal | <크기> 단어간 간격

HTML style="letter-spacing: 0.2em">HTML style="letter-spacing: 0.5em">HTML HTML HTML style="word-spacing: 0.2em">HTML HTML style="word-spacing: 0.5em">HTML HTML

• span 태그는 인라인 블럭이기 때문에 width를 바꿀 수 없다.
• id가 같을 경우 뒤에 선언한 내용대로 덮어 씌워진다.

static : 문서의 흐름에 맞춰 배치 (default) relative : 위칫값을 지정할 수 있다는 점을 제외하면 static과 같음 absolute : relative값을 사용한 상위 요소를 기준으로 위치를 지정해 배치 fixed : 브라우저 창을 기준으로 지정해 배치

position 속성 중에서 absolute 값을 사용할 때 주의할 점 요소에 position:absolute

나머지는 Github에

css도 오랜만에 하니 어렵다.

내 깃허브

도움받은 사이트 내부링크 관련

1. css를 배우면서 깨닫게 된 사실

블로그나 포털사이트 같은 여러 웹 사이트들을 보면 ul, li, ol등의 태그로 메뉴를 나눠 놓는 모습을 보았다. 지금까지 무식하게 div, span 태그만 사용해서 구간을 나눴던 지난날이 떠올라서 부끄러워졌다. 한창 공부할 때 여러 웹 사이트들에서 개발자도구로 어떻게 설계가 되었는지 찾아볼 걸 그랬다. 특히 html에서 form 쪽 수업에서도 서버 통신에 이런 태그도 존재했는데 왜 나는 잊고 있었을까? 에 대해서 생각해보게 되었다.

2. 나는 React의 노예였다.

결국 React도 JS 라이브러리 중 하나일 뿐이었는데 너무 맹신해서 사용했던 것 같다. css도 대충 스타일컴포넌트로 외부 내부 가리지 않고 막 사용했었고 가장 기본인 HTML식 방법들을 등한시하고 무조건 어렵게 만들곤 했었다. 결국 웹의 기반이자 뼈대는 HTML인데.. 내가 왜 그렇게 React를 못 썼는지 이제야 이해가 됐다. 중학 수학도 못 푸는 아이가 미적분을 할 수 있을까? 못 했으니 매번 인터넷에 검색하는 방식으로 문제를 해결했었지... 오늘 강사님께서 하셨던 말씀이 가장 기억에 남는다. 검색하고, GPT한테 물어보고 하는 방법으론 실력이 늘 수 없다고.. 결국 개발자는 문제해결을 잘 해야 하는데 내가 너무 바보 같이 공부하고 있었다는 생각이 든다.

자습한 내용

block-inline content, box-model

block, inline, boxModel 모두 css에서 가장 기본이면서 가장 중요한 내용이기에 다시 한번 개념을 잡기 위해 정규과정이 끝난 후 자습을 진행했다. 초창기에 공부할 때 정말 쉬워보였는데 막상 머릿속으로 깊이 이해하기까지 꽤나 시간이 걸렸던 이 개념. 이 참에 확실히 이해하기 위해 여러 방법으로 공부를 했다.

사실 한번 이해하고 나면 어렵지 않다. 하지만 웹 구조의 기본이기 때문에 꼭 이해하고 넘어가야 한다고 생각한다.

block 요소는 가로로 100%를 사용한다. 줄 노트를 생각하면 편하다. 내가 만약 단어장을 만든다고 가정할 때 블록 요소는 단어 : 뜻 하나만 쓰고 넘어가고 인라인 요소는 계속 써나간다고 생각하면 좋다.

ex) hello world : 안녕 세계야 (block) head : 머리 body : 몸 (inline)

이 개념이 마냥 쉬워보이지만 내 입장에서는 가면 갈 수록 어려웠던 것 같다. 가면 갈 수록 좀 더 예쁘게 꾸미고 싶다는 욕심이 생기는데 이 부분을 제대로 짚지 못하고 가면 생각보다 각 요소들을 배치하는데 많은 시간을 소요하고 있는 나를 만나게 된다.

box model도 개념만큼은 절대 어렵지 않다.

margin : 요소와 요소간의 여백 말 그대로 요소와 요소간의 여백. 지금 나와 내 눈앞의 모니터 사이의 거리가 마진.

border : 요소의 테두리 이것도 말 그대로 테두리다. 어렵지 않다.

padding : 요소와 컨텐츠 간의 여백 처음에 이게 제일 머리 아팠다. 테두리가 이미 나왔는데 무슨 여백? 했었는데 이것도 별거 없다. 그냥 div에 아무 말이나 치고 style로 border: 1px solid black을 줘보면 내가 친 아무말과 테두리의 거리가 padding이다.

content : 위에서 말한 아무말

이해를 도와줄 그림. 근데 이해에 도움이 될까..?

참고 링크텍스트

링크텍스트