TIL #220519 #DB #WEB

한 주가 정말 빠르게 가는것 같습니다.

시간이 빠르게 가는건 제가 열심히 살았다는 이유일까요? 😅

하하하하

원래는 10시쯤 애매하게 일어나서 새벽 3~4시쯤 자는 사람이었는데

반강제(?)로 7시반 기상을 몇 달 하니 이 생활도 익숙해진 것 같습니다.

각설하고 오늘도 TIL 진행하겠습니다!!!

 

오늘은 오전 DB 오후 WEB으로 진행되었습니다.

 

오전 DB

 

오라클 접속하기
(또 까먹어 버렸습니다ㅜㅜ 반복 반복!)🙂

1. 리스너 켜기 lsnrctl start
2. Oracle DB시작하기
   sqlplus /nolog
   connect sys/oracle as sysdba
3. 데이터베이스 시작
   startup
   실습데이터가 저장된 HR계정으로 접속 ID : hr, PW : hr
   connect hr/hr

리스너란?

네트워크를 이용하여 클라이언트에서 오라클 서버로 연결하기 위한 오라클 네트워크 관리자 입니다. 
네트워크를 통한 연결은 모두 리스너가 담당하며 오라클 서버에서 리스너를 시작시켜줘야 클라이언트들이 접속을 할 수 있습니다.

 

변환함수 :

날짜, 숫자, 문자 등의 데이터타입들을 서로 변환 할 수 있게 해주는 함수, 변환할 수 있는 값을 가진 경우에만 변환할 수 있다.

1. TO_CHAR(Date → Char)

TO_CHAR(date, ‘format_model’)

SQL> SELECT employee_id, hire_date, TO_CHAR(hire_date, 'MM/YY') month_hired
	2  FROM employees
	3  WHERE last_name = 'Higgins';

last = name “” 을 을 사용하면 invalid error가 뜸 리터럴 문자와 형식문자에서는 ‘’(작은따옴표)를 사용해야합니다.

형식문자 :

• 온전한 영단어의 형식 문자, 각 형식문자의 요소들은 영문자로 변환하여 출력합니다
• 약어 형태의 형식문자
• 요소의 첫글자 반복 형식문자

시간 관련 형식문자 :

• 시간(HOUR) →HH 분(Minute) → MI 초(Second) → SS

SQL> SELECT TO_CHAR(sysdate, 'HH:MI:SS AM') now
	2  FROM dual; 
// NOW
//--------------
//10:18:08 AM

‘ ’안에 AM 또는 PM을 넣게되면 시간의 AM, PM으로 출력하게 해줍니다. HH뒤에 12, 24를 넣어줄 경우에는 시간을 12시간(default 값) 24시간제로 출력해줍니다.

• 리터럴문자와의 결합

SQL> SELECT TO_CHAR(sysdate, 'DD "of" MONTH') TODAY
															//형식문자 내부에서 리터럴문자가 사용됨
	2  FROM dual;
// TODAY
//----------------------
// 19 of MAY

리터럴문자와 형식문자는 ‘ ’(작은 따옴표)를 사용하는데 형식문자 안에서 리터럴문자가 사용될 경우 “”(큰 따옴표)로 사용해서 서로를 구분시켜주어야합니다.

날짜 데이터를 문자열로 변환 시 출력 문장에 고정적인 수식 문자열을 포함하여 출력하려면 “ ” 기호로 묶어서 사용해야 합니다. (’ ‘ 기호는 형식문자에서 사용하므로 리터럴 문자는 사용할 수 없습니다.)

SELECT sysdate, TO_CHAR(sysdate, 'ddspth') DDSPTH, TO_CHAR(sysdate, 'ddsp') DDSP,
TO_CHAR(sysdate, 'ddth') DDTH
FROM dual;
// SYSDATE   DDSPTH      DDSP       DDTH
//---------  ----------- ---------- -----
//19-MAY-22  nineteenth  nineteen   19th

숫자를 출력하는 기본 형태는 기수의 방식이다.

sp : 숫자 형식 문자를 영문자의 형태로 변환합니다. (Spelling)

th : 숫자 형식문자를 기수 → 서수 의 형태로 변환합니다.

두 접미어는 개별, 조합하여서 사용할 수있습니다.

숫자 접두어 fm

기본 숫자의 출력 형식은 자리수에 맞춰 모자란 자리 값은 0으로 채워서 출력해줍니다. (시간 앞에서는 작동하지 않습니다!)

자리를 채우는 용도의 0을 제거하고 출력을 할 경우에 접두어 fm을 숫자 형식문자 앞에 추가 해줍니다.

SELECT last_name, TO_CHAR(hire_date, 'fmDD Month YYYY') AS hiredate
FROM employees;
// LAST_NAME             HIREDATE
//---------------------- --------------------
// KING                  17 June 2003
// Hunold                3  Janunary 2006.....

형식문자의 대소문자 영향

• 숫자의 형태 : 형식문자의 대소문자는 의미가 없다!
• 영문자의 형태 :
  형식문자의 대소문자에 따라 출력하는 문자열의 대소문자에 맞춰서 출력됩니다. (접미어 sp를 통한 숫자 →영문자 변환 결과도 동일하게 적용받습니다.)

1. TO_CHAR(Number → Char) TO_CHAR(숫자데이터, ‘형식문자’)

형식문자 ‘9’ : 입력받은 숫자값을 문자열로 변환하는 형식문자입니다. 숫자 값의 길이에 맞춰서 작성합니다.

형식문자의 길이가 숫자의 길이보다 짧을 경우 정상적으로 출력되지 않고 형식문자의 길이가 숫자의 길이보다 길 경우에는 공백이 더해져서 결과가 출력됩니다.

 

형식문자 ‘0’ :

형식문자 ‘0’은 변환할 숫자값의 길이와 형식 문자의 길이가 같은 경우에는 형식문자 ‘9’와 동일하게 작동합니다.

형식문자가 변환할 숫자의 값의 길이보다 긴 경우에 그 길이 만큼 문자 ‘0’으로 자리값을 채워서 출력해줍니다.

 

부동달러기호 ‘$’/부동통화기호 ‘L’ :

문자열로 변환할 숫자값의 길이에 맞춰 ‘$’/’미리 설정된 국가의 통화기호’기호가 붙어서 출력하게 됩니다.

 

소수점 ‘.’ :

소수점 위치를 지정하는 형식문자, 형식문자 ‘9’는 숫자를 정수로 인식하고 문자열로 변환하기 때문에 소수점아래의 값까지 출력해야할 경우에는 소수점 ‘.’ 을 넣고 변환해줍니다.

 

쉼표 ‘,’ : 천단위 표시자입니다.

 

내용이 꽤 있었지만 어려운 내용은 크게 없었던 것 같습니다. 구문연습 열심히 해봅시다!

---

 

오후 WEB

 

• 순서 없는 list <ul> </ul>, ul tag안에서 <li></li>를 이용하여 list를 만들 수 있습니다.

CSS문법 :

선택자 {속성 : 속성값;}

선택자의 요소의 선택을 통해서 스타일을 적용 할수 있게 합니다.

선택자(Sectior)의 종류

• Tag 선택자
• Id 선택자 속성의 id값을 요소로 사용합니다
• Class 선택자

CSS 적용방식 3가지

• External 방식 : 확장자가 .css로되는 스타일파일 안에 스타일 소스를 정의하고 외부 스타일 시트를 연결하여서 적용합니다.
• Internal 방식 : html문서의 head안에 스타일 소스를 적용 시킵니다.
• inline 방식 : tag 뒤에 스타일소스를 적용합니다.

참고 : 여기서 공부하셔도 될정도로 잘 되어있습니다!

https://www.w3schools.com/css/css_selectors.asp

CSS Selectors

 

Css파일 연결 방법 :

<link href="연결 해야할 css 파일 이름" rel="stlyesheet">

속성=”값” 을 사용할 때에는 반드시 공백을 지우고 사용하셔야 합니다.

이전 시간에도 같은 문제가 있었는데 공백값이 같이 적용되어서 에러가 발생할 수도 있습니다.

 

CSS연습하기

<p class="fs01">font-size: 20px; </p>
<!--.fs01 {font-size: 20px;} -->

<p class="fs02">font-size: 2em; </p>
<!--.fs02 {font-size: 2em;} -->

<p class="fw04">font</p>
<!--
.fw04 {
	font-size: 20px;
		font-weight: bold;
		color: e91;
} 여러개를 적용해보기-->

 

웹페이지에서 글자체의 기본크기 : 16px

em : 기준이 되는 글자의 크기의 x배

상위의 tag에서 글자의 크기가 정해진경우 그 정해진 크기가 기준이 됩니다.

 

rem : 기본크기 16px가 기준이되어 그 크기의 x배

 

Font로 시작하는 글자 속성

선택자 {font-size: 값;} : 글자 크기에 대한 스타일 속성

선택자 {font-weight: 값;}: 글자 굵기에 대한 스타일 속성

선택자 {font-style:값;} : 글자의 스타일을 값으로 변경합니다

선택자 :hover {속성: 값;} : 선택자위에 마우스를 올릴 때에 스타일이 적용됩니다.

 

CSS 글꼴(서체)

• Serif : 글꼴의 각 문자의 가장자리에 획이 있습니다. 우아한 서체
• Sans-serif : (=non serif), 깔끔한서체, 모던과 미니멀릭한 서체입니다.
• Monospace : 고정폭 : 모든 문자가 동일한 고정 너비를 갖는 서체 입니다.
• Cursive : 필기체: 사람의 손글씨의 서체입니다.
• Fantasy : 장식적이고 화려한 서체입니다.

사용방법 :

/*HTML 페이지에 class="ff01" 이 선언 되어있다고 가정*/
.ff01 {font-family: "Georgia", "Garmond", serif;}
	/* "적용될 값",  "Alternative",... 서체의 타입 */

Alternative는 여러개가 와도 됩니다!

 

폰트 참고 : (playground)👀

https://fonts.google.com/?subset=korean 

Google Fonts

 

수업시간을 위한 간단한 CSS style

/* 수업시간을 위한 CSS style*/
h1 {
	background-color:#aef;
	padding: 0.3em; /* 안쪽 여백 */
	color: navy;
	border-left:12px solid;
}

section {
	border: 3px solid #39d;
	margin: 3em 1em; /* 바깥 여백 */
	padding: 1em;     /* 안쪽 여백 */
}

section>h2 { /* >  section안의 h2를 의미함 */
	border-bottom: 3px solid;
	color: #39d;
}

 

Text로 시작하는 글자 속성

• text-align : 영역내의 글자 수평 정렬
• text-decoration : 글자의 줄들
• text-indent : 들여쓰기
• text-transform :대소문자 지정
• text-shadow : 그림자 지정
• text-overflow : 영역밖의 글자 처리

태그내 클래스 선언은 두개 이상 할수 있습니다.
 따라서 스타일마다 중복되는 값들이 있다면 클래스로 응용이가능합니다

 

참고 : 문장을 만들어줍니다. (Text 글자 속성 연습할 때 유용합니다.)

https://www.lipsum.com/

Lorem Ipsum - All the facts - Lipsum generator

코드 내에서 긴 문장을 자동 정렬 해주는 커맨드 Ctrl + I