일하면서 기록하기

관점 지향 프로그래밍은 어떤 로직을 기준으로 핵심적인 관점, 부가적인 관점으로 나누어서 바라보고, 그 관점을 기준으로 각각 모듈화하여 프로그래밍하는 기법을 말한다.

AOP는 문제를 해결하기 위한 핵심 관심사항과 전체에 적용되는 공통 관심 사항을 기준으로 프로그래밍함으로써 공통 모듈을 여러 코드에 쉽게 적용할 수 있도록 도와준다.

AOP를 구현하는 다양한 방법이 존재하지만, 기본적인 개념은 공통 관심 사항을 구현한 코드를 핵심 로직을 구현한 코드 안에 삽입하는 것이다.

하나의 단위로 수행되길 바라는 작업의 묶음(=업무 수행단위, 논리적인 수행단위)
데이터베이스에서는 상태를 변화시키기 위해 수행하는 작업의 단위
일반적인 컴퓨터 과학에서는 쪼개질 수 없는 업무처리의 단위를 의미

트랜잭션 처리는 ACID를 유지하는 것

트랜잭션의 성질

Autoimaticity : 원자성
- 트랜잭션의 원자성(atomicity)은 트랜잭션을 구성하는 연산들이 모두 정상적으로 실행되거나 하나도 실행되지 않아야 한다는 all-or-nothing 방식을 의미한다.
 = 한 트랜잭션 내에서 실행한 작업은 하나로 간주한다. 즉 모두 성공 혹은 모두 실패
terms.naver.com/entry.naver?docId=3431260&cid=58430&categoryId=58430

Consistency : 일관성
- 트랜잭션의 일관성(consistency)은 트랜잭션이 성공적으로 수행된 후에도 데이터베이스가 일관성 있는 상태를 유지해야 함을 의미한다. 
 =  트랜잭션은 데이터 인터그리티 만족 등 일관성있는 데이터베이스 상태를 유지
terms.naver.com/entry.naver?docId=3431261&cid=58430&categoryId=58430

Isolation : 고립성
- 트랜잭션의 격리성(isolation)은 고립성이라고도 하는데, 현재 수행 중인 트랜잭션이 완료될 때까지 트랜잭션이 생성한 중간 연산 결과에 다른 트랜잭션들이 접근할 수 없음을 의미한다. 
 = 동시에 실행되는 트랜잭션들이 서로 영향을 미치지 않게 격리
terms.naver.com/entry.naver?docId=3431262&cid=58430&categoryId=58430

Durability : 지속성
- 트랜잭션의 지속성(durability)은 영속성이라고도 하는데 트랜잭션이 성공적으로 완료된 후 데이터베이스에 반영한 수행 결과는 어떠한 경우에도 손실되지 않고 영구적이어야 함을 의미한다. 
 = 트랜잭션이 성공적으로 실행되면 결과는 항상 저장된다.
terms.naver.com/entry.naver?docId=3431263&cid=58430&categoryId=58430

COMMIT
하나의 트랜잭션 작업이 성공적으로 끝났고, 로그가 정상적으로 남았다라는 것을 알려주는 것

ROLLBACK
트랜잭션 작업 중 비정상적으로 종료되거나, 원자성이 깨진 경우 그 전 상태로 돌아가는 작업

개발에서의 트랜잭션

DB접근이 발생하는 여러 단위 작업들을 의미있는 그룹으로 묶어서 일괄 커밋 또는 일괄 롤백하는 매커니즘을 뜻한다.

- 어노테이션 방식으로 @Transactional을 선언하여 사용한다. = 선언적 트랜잭션
- JDBC, MyBatis 등을 사용할 때는 DataSourceTransactionManager를 관리자로 등록한다.
  이 클래스는 dataSource 프로퍼티를 통해 전달받은 Connection으로 커밋, 롤백을 수행하면서 관리한다.

Spring에서 Transaction 설정하기

스프링에서는 트랜잭션 처리를 지원하는데, 그 중 annotation 방식으로 ( @Transactional ) 을 선언하여 사용하는 방법을 선언적 트랜잭션이라고 한다

클래스 전체나 메소드 단위로 @Transactional 을 적용하면 (AOP) , 트랜잭션 기능이 적용된 프록시 객체가 생성된다.

CheckedException 이나 예외가 없을 때는 Commit 하고,
UncheckedException 이 발생하면 Rollback 한다.

주의사항

@Transactional은 우선순위를 가지고 있다
클래스 method에 선언된 트랜잭션의 우선순위가 가장 높고, 인터페이스에 서언된 트랜잭션 우선순위가 가장 낮다.

클래스 메소드 > 클래스 > 인터페이스 메소드 > 인터페이스

• 인터페이스 기반 프록시에서만 유효한 트랜잭션이 설정된다
• 자바 어노테이션은 인터페이스로부터 상속되지 않기 때문에, 클래스 기반 프록시나 Aspect J기반에서 트랜잭션을 인식할 수 없다.
• 스프링 트랜잭션의 기본모드인 proxy 모드에서는 오직 외부로부터 method 호출이 발생한 경우에만 method가 인터셉트 되어 트랜잭션 관리가 적용된다.
  (오브젝트 내의 한 method가 동일 오브젝트 내의 다른 method를 호출할 경우에는 호출 당한 method가 @Transctional이 붙어 있다고 해도, 적용되지 않는다. 위빙되어 있는 method를 부르는게 아니니깐.)

(위빙, Weaving : Advice를 핵심 로직 코드에 적용하는 것을 말한다. )

참조

sarc.io/index.php/java/1965-transaction

velog.io/@ligok113/JAVA-Transactional-%ED%8A%B8%EB%9E%9C%EC%9E%AD%EC%85%98

예외처리
사용자의 실수든 환경의 오류든 코드가 제대로 실행되지 않는 경우가 있는데
예외처리를 하지 않으면 프로그램은 끝까지 실행되지 않고 중간에 멈춰버리게 된다.
그 에러 하나 때문에 프로그램이 멈추는 걸 방지하기 위해 예외처리를 한다.
예외처리를 하게 되면 프로그램이 돌다가 에러가나서 예외처리한 부분을  만나게 되면 개발자가 정해놓은 방법으로 넘어가서 프로그램이 멈추지 않게 된다.

예외가 일어날 것 같은 곳에 try, catch를 걸어준다.
try는 실행되어야 할 코드를 작성하고
catch에는 에러가 났을때 처리해야할 작업을 작성한다. 

근데 catch부분에 예외에 대한 상황을 적어야 한다. 계산이 잘못된예외인지, 배열에서 벗어난 값을 찾는 예외인지

catch에 예외의 종류를 적고 보통 e를 적는다

사진처럼 e가 있는데 이걸 이용해서 오류 메세지를 확인할 수 있다
e.getMessage(), e.printStackTrace() 이런 명령어를 통해 오류의 메세지를 출력할 수 있다.
근데 이런 에러메세지는 위 사진처럼 바로 보이게 하면 보안? 관련에 문제가 생길 수 있기 때문에 로깅시스템 같은걸 이용해서 따로 에러를 모아둬야 한다.

(자세하게) e.printStackTrace() > e.getMessage() > e.toString() (간단하게)
순으로 에러에 대한 내용이 자세하게 나온다.

try / catch 는 마지막에 finally를 선택적으로 넣을 수 있다. (넣어도 되고 안넣어도 되고)
finally부분은 오류가 발생했든 안했든 반드시 실행되는 부분이다.

	오류가 없을때  try부분과 finally부분이 실행
	오류가 있을때 try, catch, finally 부분이 실행

try/cathch와 throw의 차이

오류가 날것 같은곳에 개발자가 직접 try/catch를 잡아줘서 예외처리를 잡아줘야 하는데

오류를 처리하지않고 디바이드 메서드를 호출한 쪽에게 오류를 처리하라고 떠넘길 수 있는데 그 키워드가 throws다.

2번에 try/cathch를 사용해서 오류를 잡을 수 있지만
throws를 이용해서 2번에서 오류를 처리하지 않고 2번을 부르는 1번에 오류처리를 떠넘길 수 있다.
그리고 오류처리는 ,를 통해 여러개를 지정할 수 있다.

근데 1번 메소드에서 try/catch를 사용해야 한다.

에러는 어쩔 수 없는거
exception은 내가 잘하면 처리할 수 있는 것
exception은 Checked Exception과 UnChecked Exception으로 나눌 수 있다.

throw는 예외를 발생시키는것

throws는 예외를 던지는 것

throws는 메소드 선언부 끝에 작성한다.

method1에서 method2를 부른다.
그리고 method2에 throws를 작성했다.
저 코드상 method2에는 에러가 나야하는데 try/catch가 없는데도 빨간줄이 없다.
이유는 method2의 선언부에 throws를 작성했기 때문에 ClassNotFoundException이 발생한다면 method2를 부른 부분에서 처리하라는 의미가 된다.
그래서 method2를 부른 method1에서 예외를 처리해야한다. 그리고 그곳에 try/cathch가 있다. 

throw는 메소드 내에서 상위 블럭으로 예외를 던지는 것
throws는 현재 메소드에서 상위 메소드로 예외를 던진다.

throw는 억지로 에러를 발생시킬때도 사용되지만 현재메소드의 에러를 처리한 후에 상위 메소드에 에러정보를 줌으로써 상위 메소드에서도 에러기 발생한것을 감지할 수 있다.

throw를 쓰는 이유? (내생각)

강제로 에러를 일으키는 throw를 왜 쓸까? 하는 생각을 하던중 아래 링크를 찾았다.

일정 로직에서 벗어나면 throw를 거쳐서 강제로 에러를 내게 할 수 있다.
개발자가 일정 규칙에 따라 코드를 만드는데 사용자가 다르게 사용하거나 수작을 부릴것 같다하면
조건문을 통해 일정 조건을 벗어나면 강제로 throw를 만나게해서
에러를 일으킬 수 있다.

https://okky.kr/article/703405

예외 처리시 Exception 말고 세세하게 하고싶은데 어떤 에러가 날지 모르겠으면 강제로 에러를 일으켜서 로그를 보고
나오는 에러를 써도 되겠지?

참고: www.nextree.co.kr/p3239/

https://limkydev.tistory.com/198

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

https://catsbi.oopy.io/92cfa202-b357-4d47-8de2-b9b3968dfb2e

https://wikidocs.net/229

직접 예외처리

https://ktko.tistory.com/entry/JAVA-%EC%9E%90%EB%B0%94%EC%9D%98-%EC%98%88%EC%99%B8%EC%B2%98%EB%A6%ACException-handling

동기 비동기를 보기전에 쓰레드를 봐야 한다.

pc사야중에 4코어 8쓰레드, 8코어 16쓰레드라는게 있는데 
쓰레드는 일을 하는 녀석인데 8쓰레드는 일하는 녀석이 8개
16쓰레드는 일하는 녀석이 16개

1코어 1쓰레드

2코어 2쓰레드

4코어 4쓰레드

4코어 8쓰레드

쉽게 이렇게 생각하면된다

양손이 1쓰레드

일을 할때 하나의 스레드에서 하면 한작업이 끝날때까지 다른 작업을 하지 못하기 때문에 속도가 느려진다.

스레드가 많아지면 한번에 2가지 4가지 일을 할 수 있기 때문에 속도가 빨라진다.

 동기 VS 비동기 

비동기

작업을 다른 스레드로 보내는게 비동기 (여러개의 스레드가 돌아가서 작업을 처리한다)
동시에 일을 할 수 있다.
- 작업을 다른 스레드에서 하도록 시킨 후.
  그 작업이 끝나길 '안기다리고' 다음일을 진행한다.
  (안 기다려도 다음 작업을 생성할 수 있다.)

동기

작업을 다른 스레드로 보내지 않고 하나의 스레드에서 작업을 하는거 (하나의 스레드에서 차례대로 작업을 하는것)
동시에 일을 하지 않는다.
- 작업을 다른 스레드에서 하도록 시킨 후,
  그 작업이 끝나길 '기다렸다가' 다음일을 진행한다.
  (기다렸다가 다음 작업을 생성할 수 있다.)

비동기 라는 개념이 일반적으로 필요한 이유는 서버와의 통신 때문

직렬 (Serial) VS 동시 (Concurrent)?

직렬(Serial) 처리
(보통 메인에서) 분산처리 시킨 작업을 '다른 한개의 쓰레드에서' 처리
순서가 중요한 작업을 처리할 때 사용

동시(Cocurrent) 처리
(보통 메인에서) 분산처리 시킨 작업을 '다른 여러개의 쓰레드에서' 처리
각자 독립적이지만 유사한 여러개의 작업을 처리할 때 사용

분산처리 하려는거면 무조건 동시( Concurrent)처리'가 무조건 좋아 보이는데 왜 직렬 (Serial)처리가 필요할까?

작업에 순서가 필요한 경우가 있기 때문이다. 무조건 1번이 끝나고 2번이 실행되야 하는 경우

동시처리의 예

당근마켓 어플에서 목록을 봤을때 물건의 이미지를 하나씩 다 서버에서 가져올때 그 하나 하나가 동시처리

비동기(Async)와 동시(Concurrent)의 차이

비동기는작업을 보내는 스레드에 관련된말

동시는 메인 스레드에서 다른 스레드로 작업을 보낼때 한개냐 여러개냐의 개념

한글패치

blog.naver.com/sanman-enricher/221979182904

마크다운 작성

사진에 동그라미친 부분이 일반 텍스트로 되어있을텐데 클릭하고 markdown검색해서 설정

그리고 미리보기는 ctrl+k 누른다음 v

마크다운 언어 사용하기

아래 사이트에 들어가면 문법에 대한 설명이 나와있다.

guides.github.com/features/mastering-markdown/

seonhyungjo.github.io/Spring-EXCEL/

mchch.tistory.com/m/83

1. pom.xml에 추가

<dependency>
	   <groupId>org.bgee.log4jdbc-log4j2</groupId>
	   <artifactId>log4jdbc-log4j2-jdbc4</artifactId>
	   <version>1.16</version>
</dependency>

2. src/main/resources안에 log4j.xml파일 수정

3. web.xml에 추가

로그레벨

FATAL > ERROR > WARN > INFO > DEBUG > TRACE

로그설정을 INFO로 하게 되면 DEBUG로 한 로그는 INFO보다 레벨이 낮아서 출력되지 않는다.

victorydntmd.tistory.com/173

hayunstudy.tistory.com/54

baessi.tistory.com/66

https://cluster-taek.tistory.com/entry/log4j%EC%9D%98-%EA%B0%9C%EB%85%90%EA%B3%BC-%EC%82%AC%EC%9A%A9%EB%B2%95

inline요소 안에는 block요소를 넣을 수 없다

float 뒤에 clear 주는 방법

1. float 속성을 주면 다음꺼 블록까지 영향이 가기 때문에 다음 블록에는 clear: both;속성을 줘야 한다.

 마땅히 줄 곳이 없으면 <br>하나 주고 br에 style을 줘도 된다

www.youtube.com/watch?v=641i0NjaqBs&t=193s

2. 가상선택자
a1:after{contnent:""; display:block; clear:both;}
클래스명이 a1인 곳에 가상선택자인 after를 준다.
이게 :after앞에 있는 a1클래스의 블록 마지막에 content를 넣는건데 content는 span이라고 보면 된다
가로 높이가 0인걸 자동으로 넣는거고 display:block;때문에 속성이 블록으로 되고
clear:both; 까지 해줘서 float 같은거 때문에 초기화 할때 사용

다중클래스

a태그로 생기는 밑줄 없애는 방법은 a태그에다 text-decoration:none을 주면 밑줄이 사라진다.

들여쓰기 text-indent: Xpx; 는 첫줄에만 적용된다

text-align 에는 left, right, center, justify가 있는데
justify는 양쪽으로 꽉차게 만든다.

vertical-align  세로맞춤

 <table>
        <tr>
            <td style="border: 1px solid red; height:100px; vertical-align:bottom;">
                text
            </td>
        </tr>
    </table>

vertical-align 에 top, middle, bottom 을 주면 위 중간 아래에 글자를 위치시킬 수 있다
근데 table은 기본적으로 vertical-align:middle 이다.

span이라는 요소는 inline이라는 형태를 가지고 있기 때문에 가로세로가 없다
그래서 블록으로 만들고 싶으면 display: block; 을 주면 블록이 된다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        span{
            display: block;
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
 <span>inline요소 </span>
</body>
</html>

여기서 display요소를 빼면 weight, height를 100px줘도 안먹힌다.

display: inline

블록 속성을 인라인으로 강제로 바꾸는거

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        span{
            display: block;
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
        div{
            display:inline;
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
 <div>block요소</div>
</body>
</html>

그냥 block속성은 기본 가로사이즈가 100%인데 
inline-block를 하면 안에 내용에 맞는 가로사이즈가 된다

overflow
overflow를 사용할려면 height의 수치가 꼭 있어야 한다.

자료가 너무 길어서 넘칠때 사용하는거

overflow: visible; 기본속성
overflow: hidden; 박스안에 글이 박스를 넘어가면 넘어가는 부분은 그냥 안보이게 하는거
overflow: auto; 박스안에 초과되는 글이 있으면 스크롤이 자동으로 생긴다.

tabindex 탭을 눌렀을때 포커스이동이 가능하게 만드는것

tabindex="0" 1이상을 하면 무조건 거기로 가게하는건데 0을 주면 그냥 갈수있게만 만든다.

선택자

1번 자손선택자

원하는 선택자와 한칸을 띄우고 그다음 원하는 선택자를 누르면 그걸 선택이 가능
classsk id를 안쓰고 div안에 span은 무조건 이 속성을 한다~ 할때 사용하면 좋음

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        div div{
            color:red;
        }
    </style>
</head>
<body>
    <div>
        div안에 있는거
        <div>div안의 div태그</div>
    </div>
</body>
</html>

2번 선택자 안의 클래스를 지정

div 태그 안에 따로 있는 태그의 클래스 명을 지정하는게 아니라
div태그에 공통으로 글자색을 검은색으로 했는데
div태그중 하나에 class 이름을 주고 그거 하나만 빨간색을 하고싶다! 할대 사용하면 됨
div자식태그가 p인지 div인지는 중요하지 않고 클래스명만 찾아서 적용한다

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        div.div{
            color:red;
        }
    </style>
</head>
<body>
    <div class="div">div태그안에 클래스명이 div인거</div>
    <div>그냥 div태그인거</div>
</body>
</html>

3번 2번이랑 다르게 div안의 자식태그에 사용하는거
2번은 처음쓰는 선택자다음 안띄고 붙여쓰는데 이건 한칸띄운다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 
    <style>
        div .div{
            color:red;
        }
    </style>
</head>
<body>
    <div>
        div안에 있는거
        <p class="div">div안의 p태그인데 클래스명이 있는거</p>
    </div>
</body>
</html>

4번 2번이랑 비슷한건데 이건 div태그인데 id명이 있는거
이것도 2번처럼 붙여서 사용한다

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 
    <style>
        div#div{
            color:red;
        }
    </style>
</head>
<body>
    <div>
        div안에 있는거
        <div id="div">div태그안의 div인데 id명이 있는거</div>
    </div>
</body>
</html>

5번 div태그 하위에 있는 요소들 중에 id 값을 가진걸 지정한다
하위요소가 div든 p태그든 중요하지 않고 id값인걸 찾아서 속성을 적용한다

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 
    <style>
        div #div{
            color:red;
        }
    </style>
</head>
<body>
    <div>
        div안에 있는거
        <p id="div">div태그안의 div인데 id명이 있는거</p>
    </div>
</body>
</html>

6번 ,는 and랑 똑같다
div, p, body, a {} 이렇게하면 저 태그들을 다 지정하는거

7번 div태그에 클래스명을 div라 지었고 
그안에 p태그가 있는데 그 p태그의 id명이 div

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 
    <style>
        div.div p#div{
            color:red;
        }
    </style>
</head>
<body>
   <div class="div">
       div태그, 클래스명이 div
       <p id="div">div태그 안의 p태그, id명이 div</p>
   </div>
</body>
</html>

8번 형제선택자

선택한요소 다음에 있는 요소를 선택하는거
뭐 클릭했을때 정보가 나오게 할때 그 나오는 정보에 요소를 넣을때 사용하면 좋을듯

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 
    <style>
        div+div{
            color: red;
        }
    </style>
</head>
<body>
   <div>1</div>
   <div>2</div>
</body>
</html>

9번 자식선택자

앞에있는 선택자의 바로 밑에 있는 선택자만 요소를 적용할 수 있다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 
    <style>
        /*
        div.a > span{
            color:red;
        }
        */
        div > span{
            color: green;
        }
    </style>
</head>
<body>
    <div class="a">
        <span>1</span>
        <div>
            2
            <span>3</span>
        </div>
    </div>
</body>
</html>

<style> div.a > span { color : red; } </style>

<style> div > span { color: green; } </style>

10번 속성선택자

input처럼 속성이 여러개 일때 대괄호 안에 속성을 지정하면 그 속성만 스타일이 적용

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 
    <style>
        input[type="text"] {
            border: 1px solid red;
        }
        input[type="radio"] {
            margin: 30px;
        }
        input[type="password"] {
            border: 1px solid blueviolet;
        }
        input[type="checkbox"] {
            margin: 30px;
        }
    </style>
</head>
<body>
   <input type="text"> <br>
   <input type="radio"> <br>
   <input type="password"> <br>
   <input type="checkbox"> 
</body>
</html>

input의 type아니더라고 title, name, id 이런 속성도 이런방법으로 스타일을 적용할 수 있다. 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 
    <style>
        input[name] {
            border: 1px solid red;
        }
        input[id] {
            border: 1px solid blue;
        }
        input[title] {
            border: 1px solid green;
        }
        input[value] {
            border: 1px solid orange;
        }
    </style>
</head>
<body>
   <input type="text" name=""> <br>
   <input type="text" id=""> <br>
   <input type="password" title=""> <br>
   <input type="password" value=""> 
</body>
</html>

11번~13번 가상선택자

11번 마우스를 올리면 스타일이 적용

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 
    <style>
       a:hover{
           color: red;
       }
    </style>
</head>
<body>
    <a href="#">test</a>
</body>
</html>

12번 마우스를 눌렀을때

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 
    <style>
       div:active{
           color: red;
       }
    </style>
</head>
<body>
    <div>test</div>
</body>
</html>

13번 포커스가 맞춰지면 반응하는 거
마우스로 누르거나 탭키로 포커스를 주면 반응한다

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 
    <style>
      a:focus{
          font-size: 20px;
      }
    </style>
</head>
<body>
    <a href=#>test1</a> <br>
    <a href=#>test2</a><br>
    <a href=#>test3</a>
</body>
</html>

응용

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 
    <style>
      div {
          display: inline-block;
          margin: 5px;
          width: 100px;
          height: 100px;
          text-align: center;
          line-height: 100px;
      }
      div:hover{
          font-size: 30px;
      }
      .a{
        border: 1px solid red;
      }
      .b{
        border: 1px solid green;;
      }
      .c{
        border: 1px solid firebrick;
      }
    </style>
</head>
<body>
   <div class="a">test1</div>
   <div class="b">test2</div>
   <div class="c">test3</div>
</body>
</html>

14번 자식선택자
div div:first-child { } = div태그 안에 첫번째 div를 뜻한다

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 
    <style>
      div div:first-child{
          color: red;
      }
    </style>
</head>
<body>
   <div>
       <div>1</div>
       <div>2</div>
       <div>3</div>
       <div>4</div>
   </div>
</body>
</html>