[TIL 2024. 01. 10]

오늘 한 일

-SQL 강의 3주차 완.

-Chat GPT 웹개발_CSS 레이아웃까지.

 

-SQL 예제풀이

-TIL 작성

 

오늘 배운 것

[SQL 강의]

조건에 따라 다른 포맷 필요한 경우

(1) if구문

: if(조건, 조건을 충족할 때, 조건을 충족하지 못할 때)

(2) case구문: case when ~ then. ~~else~~ end

단, if는 주로 한 가지 조건을 지정할 때 사용 <-> case는 여러가지 조건을 지정할 때 사용함.

(cf. if와 case문은 substr, replace, concat등과 결합하여 활용되는 경우도 많음)

 

-데이터 타입 오류_대처법

: cast구문

ex. cast(해당 컬럼 as decimal/char)

-> 눈으로 보는 것과 별개로 DB에 숫자, 문자로 저장인지가 중요함.

즉, 데이터 타입이 다른 것끼리 연산하게 하는 경우_빈출 오류

**DBeaver의 컬럼명 옆에 숫자/문자 여부를 확인하는 게 좋음!

 

**3주차 실습 예제는 DBeaver에서 다시 풀어보기

**case구문에서 else 활용에 유의

 

 

[Chat GPT_웹개발 강의]

-html은 뼈대

 html+CSS하면 꾸미기 가능

 html+CSS+JS이면 동적 움직임 등이 가능해짐

 

-html의 구조= head+body

: head는 중요속성(_눈에 보이지는 않지만)

 body는 눈에 보이는 부분과 관련

 

-주석: ctrl+/

: 코드를 임시보관 or 참고하기 위한 설명

 

-개발자 도구

: 문제 해결, 성능 개선, 코드구조 및 레이아웃 파악 등

 

 

-CSS의 기초

1. 선택한다(=선택자)

2. 선택한 친구에게 어떤 값을 줄지 결정한다

 

-선택자(=명찰)의 종류는 2가지.

(1) id_보통 한 가지를 선택_#

(2) class_보통 여러가지를 선택_.

-html의 부모-자식 관계(=상속)

즉, html의 부모 자식 간에는 CSS 속성을 서로 공유한다.

단, 모든 CSS 속성이 상속되는 아님. 상속되는 것(ex. color)도 있고, 아닌 것도 있음.

 

-flex: 레이아웃 배치

-flex는 무조건 부모 태그에 작성해줘야 함

 

-html은 기본적으로 박스 형태로, 레고처럼 쌓인다.

1. block은 1줄을 다 차지->그래서 위에서 아래로 쌓임(=세로배치)_모든 영역을 차지, 줄바꿈o

2. inline은 글자마다->그래서 (왼->오)로 쌓임(=가로배치)_글자만큼만 영역차지, 줄바꿈x

 

 

(과정)

기본적으로 html은 위에서 아래로(=세로배치) 쌓인다 -> flex쓰면 가로로 배치됨(=flex의 기본은 가로배치 row임. 단, 개발자 도구 참고해서 배치 변경가능함) -> 가로배치이므로 이제 정렬가능(justify content)

 

**justify content=주축

**align item=교차축

 

(결론) 어떤 요소를 정중앙에 배치하고 싶다

: justify content: center;하고 align item: center;하면 됨!

 

display: flex;

justify content: center;

align item: center; 

이렇게가 자주 쓰이는 삼대장!

 

주의할 점

-가장 먼저 들어온 동물의 입소일 조회 <> 가장 먼저 들어온 동물 이름 조회

-COUNT(1)=COUNT(*)는 NULL을 포함. COUNT(AGE)는 NULL값을 빼고

 

나이 정보 없는 회원 수 구하기

SELECT COUNT(AGE) "USERS"

FROM USER_INFO

WHERE AGE IS NULL

 

SELECT COUNT(1)-COUNT(AGE)

FROM USER_INFO

 

둘 다 동일한 결과. 어느 게 더 좋은지?

(**IS와 NULL)

-----------------------------------------------------------------------------------------------

[단축키 정리]_in vs code

-alt+b: 파일을 기존 브라우저에서 열기

-ctrl+b: 옆의 도구창 열기 닫기

-ctrl+/: 주석 설정과 해제

-!+tab: 기본구조 완성

-코드 일부 입력+tab: 코드 자동완성

-shift+alt+f: 코드 자동정렬

-shift+alt+화살표: 1줄 통째로 아래로 복사 붙여넣기

-alt+화살표: 1줄 통째로 아래로 이동

 

(**in 윈도우

-윈도우키+화살표: 화면 접기

-윈도우키+.: 문자표