1. 개발자라면 무조건 파일확장명과 숨김파일 표시로 설정하기!
2. 오라클 복구(기존에 백업했던 계정으로 복구하기)
1) 계정 만들기(백업했던 계정과 동일한 이름과 정보를 가진 계정이 있어야 복원 가능)
: 계정만들기는 system 계정으로만 가능, cmd 창에서 system 계정으로 로그인 > scott0316 계정 만들기
2) 관리자 권한으로 명령 프롬프트 실행(복원시키기 위해)
3) 백업되어 있는 위치와 파일명 확인
4) 확인한 경로와 파일명을 바탕으로 imp userid=유저명/비밀번호 file='백업파일경로\백업파일명' 명령어 입력
> 아래의 그림과 같이 화면이 뜨면 복원 완..!!
5) 아까 계정만들었던 명령 프롬프트에 제대로 복원되었는지 모든 테이블 리스트 확인하기
: select tname from tab; 존재하는 모든 테이블들을 확인하는 명령어
3. 포트 번호, 데이터베이스명 확인하기
** 데이터베이스명 확인 : select name from v$database
** 포트번호 확인 : SELECT dbms_xdb.gethttpport() FROM dual;
4. 컴퓨터 이름과 HOST 이름이 다르면 listener이 동작하지 않음(listener.ora에서 HOST 값 변경 필요)
1) 시스템에서 컴퓨터 이름 확인 > listener.ora 파일의 HOST 이름과 시스템에서 확인되는 컴퓨터 이름과 일치시키기
2) 아까는 Listener 서비스가 실행이 되지 않았지만 이름을 일치시키는 순간 실행됨
5. Visual Studio Code(VSC) 설치
: 구글에 visual studio code 검색 > https://code.visualstudio.com 클릭
> Download 클릭
> User Installer 64비트로 다운(본인의 운영체제에 맞는 것으로 다운로드 받으면 됨)
[추가] Stable은 안정화된 버전, Insiders는 업데이트가 빠르지만 불안정할 수 있는 버전
[추가] User Installer는 현재 로그온된 사용자 계정에만 설치,
System Installer는 Windows 전체 사용자 계정에서 사용할 수 있도록 설치(관리자 권한 필요)
> 다운 받은 실행파일 실행
> PATH에 추가(다시 시작한 후 사용 가능) 체크 부분만 신경써서 설치하기...!!
> VSC 설치 완료하기...!!
6. 기본화면 구성
: Activity Bar, side Bar, Status Bar, Editor Groups, Panel, mini map
7. 기본 세팅, 확장프로그램 설치
1) 마우스 줌 활성화(Ctrl + 마우스 휠 움직임 : 에디터 창이 확대와 축소)
: 톱니바퀴 설정 클릭 > Settings 클릭 > mouse wheel 검색
> Zoom the font of the editor when usring mouse wheel and holding Ctrl
2) 테마 설정
: 톱니바퀴 설정 클릭 > Settings 클릭 > Theme 검색 > Color Theme에서 원하는 태마 선택하여 수정
3) AutoSave 활성화(자동 저장)
4) 확장프로그램 설치 - beautify(코드의 들여쓰기를 이쁘게 정리)
: Extensions 클릭 > beautify 검색 > Install 클릭
[Ctrl + Alt + L 단축키 설정] 톱니바퀴 설정 클릭 > Keyboard Shortcuts 클릭
> beautify 검색 > Beautify file 앞에 있는 플러스 클릭
> 한번에 단축키 할 키들 클릭 후 엔터
> 정상적으로 단축키가 설정되면 아래의 그림처럼 확인됨
5) Exploer 폴더 열기
: Exploer 클릭 > Open Folder 클릭 > 작업할 WorkSpace 선택 후 폴더 선택 클릭 > 작업할 WorkSpace 열림..!!
6) 확장프로그램 설치 - LiveServer
[기본 브라우저 크롬으로 변경] 톱니바퀴 설정 클릭 > Extension Settings 클릭
> Live Server Settings : Custom Browser에서 chrome 선택
** 상태바에 Go Live > 정상적으로 작동
** 상태바에 금지 마크에 Port : 5500 > 작동하지 않음
[HTML에서 바로 브라우저 띄우기] 우클릭 > Open with Live Server 클릭(단축키 : Alt + L + O)
> 상태바에 Go Live로 되어 있는지 확인하기..!!
7) 설치된 확장 프로그램 확인(단축키 : Ctrl + Shift + X)
: View > Extensions 클릭
8. 단축키
1) 단축키를 pdf 파일로 다운 받거나 인쇄
: Help > Keyboard Shortcuts Reference 클릭
2) 꼭 외워야 하는 단축키
** Ctrl + B : 사이드바 열고 닫는 토글키
** Ctrl+ Shift + P : Command Palette, 메뉴를 기억 못할때 키워드로 찾아가기
3) 단축키 검색하기
: 톱니바퀴 설정 클릭 > Keyboard Shortcuts 클릭
9. 이클립스는 VSC에서 수정한 내용을 확인하려면 새로고침을 해야 확인되나
VSC는 이클립스에서 수정해도 실시간으로 확인할 수 있다.
10. Emmet : HTML, CSS 자동완성 약어
1) Emmet 약어 작성 후 tab or Ctrl + Space
2) html5 기본 문서 작성 : ! 작성 후 tab or Ctrl + Space / html:5 작성 후 tab or Ctrl + Space
3) child(자식) 요소 생성 : > 작성 후 tab or Ctrl + Space
4) sibling(형제) 요소 생성 : + 작성 후 tab or Ctrl + Space
5) Climb-up(한 단계) 올리기 : ^ 작성 후 tab or Ctrl + Space
6) Multiplication 반복하기 : *반복할 횟수 작성 후 tab or Ctrl + Space
7) Grouping : (그룹핑할 내용 소괄호 안에 기재)
8) id : #
9) class : .(마침표)
10) 일반 attribute : [property와 value 쌍으로 대괄호 안에 기재, 여러 개 기재 가능]
11) Item numbering : $
12) changing numbering base and direction(오름차순 or 내림차순 변경 / 시작 숫자 변경) : @
11. 반응형 웹이란? 화면 사이즈에 맞게 변경될 수 있게 만든 홈페이지
12. Css13_RWD1_boxsizing.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RWD box-sizing</title>
<style>
.container {
width: 200px;
height: 150px;
background-color: yellow;
}
.box1{
background-color: cyan;
width: 100px;
height: 50px;
float: left;
border: 1px solid black;
}
.box2{
background-color: khaki;
width: 100px;
height: 50px;
float: left;
border: 1px solid black;
}
.menu1 {
width: 25%;
height: 50px;
border: 1px solid red;
float: left;
}
.menu2 {
width: 75%;
height: 50px;
border: 1px solid red;
float: left;
}
/* width 안에 border 포함시키기 */
* {
box-sizing: border-box;
}
</style>
</head>
<!--
Responsive Web Design : 반응형 웹
-->
<body>
<div class="container">
<div class="box1">100px</div>
<div class="box2">100px</div>
</div>
<hr>
<div class="container">
<div class="menu1">25%</div>
<div class="menu2">75%</div>
</div>
</body>
</html>
13. Css13_RWD2_viewport.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RWD viewport</title>
<style>
* {
box-sizing: border-box;
}
.header {
border: 1px solid red;
padding: 15px;
}
.menu {
width: 25%;
border: 1px solid ridge;
float: left;
}
main {
width: 75%
border 1px solid red;;
float: left;
}
</style>
</head>
<!--
아래 두가지를 '모바일 이나 태블릿' 에서 확인해보자
1. viewport meta태그가 적용안된 페이지
https://www.w3schools.com/css/example_withoutviewport.htm
2. viewport meta태그가 적용된 페이지
https://www.w3schools.com/css/example_withviewport.htm
위 두 페이지의 효과를 보려면 꼭! 모바일에서 보기를 추천 (크롬의 device 에서도 체험하기 어렵다)
1.의 경우 필히 '확대' 및 '좌우 스크롤' 을 발생해야 할것이다.
사용자게게 있어 수직스크롤에 익숙하지만,
수평스크롤은 매우 불편한 경험이다.
페이지 내용을 보기 위해 '확대' 를 해야 하는 것도 사용자를 불편하게 하는 요소다
위 두페이지의 <body>는 동일하다
단 2. 에선 viewport meta 태그와
img 의 경우 max-width:100%, height:auto 설정됨.
-->
<!--
viewport : '웹페이지'에서 사용자게에 '보여지는 영역',
기기마다 다르다 (pc, 모바일, 태블릿)
'큰 웹페이지' 를 '작은 기기'에서 보려하면..viewport 가 작아서 불편하다.
확대및 좌우 스크롤 발생 유발... 웹페이지 로딩후에 이러면 곤란...
해결방법!
HTML5 에선 다음과 같이 <meta> 태그 에서 설정.
어떠한 사이즈의 기기에서도 일단. 웹페이지가 로딩될때
viewport에 딱 맞게 zoom level 이 조정되도록 한다.
★ 이는 Responsive Web Design 구현의 필수요소 입니다
-->
<body>
<div class="header">
<h1>일본여행</h1>
</div>
<div class="menu">
<ul>
<li>항공편</li>
<li>도시</li>
<li>섬</li>
<li>음식</li>
</ul>
</div>
<div class="main">
<h1>도시</h1>
<p>도쿄 とうきょう tokyo 東京
요코하마 よこはま yokohama 横浜
나고야 なごや nagoya 名古屋
오사카 おおさか osaka 大阪</p>
</div>
</body>
</html>
14. Css13_RWD3_gridview.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>RWD Grid View</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box; /* RWD 필수! */
}
.header{
border: 1px solid red;
padding: 15px;
}
.clear{
clear: both;
}
/* class 값에 "col-" 를 가진 요소*/
[class *= "col-"] {
float: left;
padding: 15px;
border: 1px solid red;
}
.col-1 {width: 8.33%;} /* 1칸 짜리 폭 */
.col-2 {width: 16.66%;} /* 2칸 짜리 폭 */
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;} /* 12칸 짜리 폭*/
</style>
</head>
<!--
반응형 웹 (Responsive Web)
- 모든종류의 기기 (PC, 태블릿, 모바일..) 마다 최적화된 레이아웃 제공
- HTML & CSS 만으로 구현됨.
- JavsScript 아님.
반응형 웹 제작시 단계
1. viewport 설정
2. grid 설정
3. box-sizing 설정
-->
<body>
<!-- TODO : class 지정하기 -->
<div class="header">
<h1>일본여행</h1>
</div>
<div class="col-3">
<ul>
<li>항공편</li>
<li>도시</li>
<li>섬</li>
<li>음식</li>
</ul>
</div>
<div class="col-9">
<h1>도시</h1>
<p>도쿄 とうきょう tokyo 東京
요코하마 よこはま yokohama 横浜
나고야 なごや nagoya 名古屋
오사카 おおさか osaka 大阪</p>
</div>
<div class="clear"></div>
<div class="col-3">
교토 きょうと kyoto 京都
</div>
<div class="col-2">
고베 こうべ kobe 神戸
</div>
<div class="col-4">
삿포로 さっぽろ sapporo 札幌
</div>
<div class="col-3">
센다이 せんだい sendai 仙台
</div>
<div class="clear"></div>
<div class="col-5">
교토 きょうと kyoto 京都
</div>
<div class="col-2">
고베 こうべ kobe 神戸
</div>
<div class="clear"></div>
<div class="col-4">
삿포로 さっぽろ sapporo 札幌
</div>
</body>
</html>
15. Css13_RWD4_mediaquery1.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>media query</title>
<style>
body {
/* 기본 값 설정*/
background-color: lightgreen;
font-size : 20px;
}
div.pop {
background-color: yellow;
padding: 20px;
}
/* @media 에서
max-width: ~ : ~ 보다 작은 경우
min-width: ~ : ~ 보다 큰 경우
*/
@media screen and (max-width: 600px) { /* 600px 보다 작아지게 되면 적용 */
body {background-color: lightblue;}
p {color: red;}
}
@media screen and (min-width: 600px) { /* 600px 보다 커지면 적용 */
body {font-size: 30px;}
p {color: blue;}
div.pop {display: none;} /* 600 px 이상이면 사라졌다, 600 px 이하이면 나타났다*/
}
/* landscape vs portrait
종횡비에 따른 적용 가능
*/
@media screen and (orientation: landscape) {
h2::after {
content: " : landscape";
}
}
@media screen and (orientation: portrait) {
h2::after {
content: " : portrait";
}
}
</style>
</head>
<!--
참조 :
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
@media Rule : 다양한 media query 규칙, 특징 들
https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
-->
<body>
<h2>media query</h2>
<p>브라우저의 크기(폭)을 늘렸다 줄였다 해보세요. 600px 이하일때와 이상일때 배경색과 글꼴크기의 변화를 주목하시고 @media query 에서 min-width 와 max-width 의 값의 의미를 잘 이해합시다</p>
<div class="pop">Example DIV.</div>
</body>
</html>
16. Css13_RWD4_mediaquery2.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>RWD - Media Query</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="CSS/RWD4_common.css" rel="stylesheet" type="text/css">
<!-- 다음 2가지 경우 비교 -->
<!-- PC 기준
PC > Tablet > Mobile 순서로,
대체로 pc가 성능이 좋기 때문에 모바일에 부담이 덜 가도록 만드는 것이 좋다 -->
<!--
<link href="CSS/RWD4_pc_first.css" rel="stylesheet" type="text/css">
-->
<!-- 모바일 기준
Mobile > Tablet > PC 순서로,
모바일 기준으로 만들면 모바일 기기에서 디스플레이 속도향상이 되기 때문에
언제나 모바일 기준으로 만들자..!! -->
<link href="CSS/RWD4_mobile_first.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- header -->
<div class="header">
<h1>일본여행</h1>
</div>
<div class="clear"></div>
<!-- menu -->
<div class="menu col-3 col-m-3">
<ul>
<li>항공편</li>
<li>도시</li>
<li>섬</li>
<li>음식</li>
</ul>
</div>
<!-- article -->
<div class="col-6 col-m-9">
<h1>도시</h1>
<p>도쿄 とうきょう tokyo 東京
요코하마 よこはま yokohama 横浜
나고야 なごや nagoya 名古屋
오사카 おおさか osaka 大阪</p>
</div>
<!-- aside -->
<div class="col-3 col-m-12">
<div class="aside">
<h3>언제?</h3>
<h3>어디서?</h3>
<h3>어떻게?</h3>
</div>
</div>
<div class="clear"></div>
<!-- footer -->
<div class="footer">
<p>감사합니다</p>
</div>
</body>
</html>
** RWD4_common.css
@charset "UTF-8";
* {
box-sizing: border-box; /* RWD 필수 */
}
.header{
background-color : #9933cc;
padding: 15px;
color: white;
}
.footer{
background-color: #0099cc;
color: white;
text-align: center;
font-size: 12px;
padding: 15px;
}
.clear{
clear: both;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color: #33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12),
0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
background-color: #0099cc;
}
.aside {
background-color: #33b5e5;
padding: 15px;
color: #ffffff;
text-align: center;
font-size: 14px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12),
0 1px 2px rgba(0,0,0,0.24);
}
** RWD4_pc_first.css
/*
~ 600 : mobile
600 ~ 768 : tablet
768 ~ : pc
*/
/* 1. 기본 스타일 : PC first */
[class*="col-"]{
float: left;
padding: 15px;
}
.col-1 {width: 8.33%; } /* 1칸 짜리 폭 */
.col-2 {width: 16.66%; } /* 2칸 짜리 폭 */
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
/* 2. 768px 이하 일 때 적용 */
@media screen and (max-width: 768px) {
/* Tablet*/
.col-m-1 {width: 8.33%; } /* 1칸 짜리 폭 */
.col-m-2 {width: 16.66%; } /* 2칸 짜리 폭 */
.col-m-3 {width: 25%;}
.col-m-4 {width: 33.33%;}
.col-m-5 {width: 41.66%;}
.col-m-6 {width: 50%;}
.col-m-7 {width: 58.33%;}
.col-m-8 {width: 66.66%;}
.col-m-9 {width: 75%;}
.col-m-10 {width: 83.33%;}
.col-m-11 {width: 91.66%;}
.col-m-12 {width: 100%;}
}
/* 3. 600px 이하 일 때 적용 */
@media screen and (max-width: 600px) {
/* mobile */
[class*="col-"] {
width: 100%;
}
}
** RWD4_mobile_first.css
/*
~ 600 : mobile
600 ~ 768 : tablet
768 ~ : pc
*/
/*
Responsive Web 개발을 할때는
항상 Mobile 을 기준점으로 개발하자.
(그러면, 모바일 기기에서 디스플레이 속도향상도 된다)
가령
768px 보다 작은 기기에서는 ~~한 스타일 적용..
보다는
768px 보다 큰 기기에서 ~~한 스타일 적용
*/
/* 1. 기본스타일 mobile first */
[class*="col-"]{
float: left;
padding: 15px;
width: 100%;
}
/* 2. 600px 이상 : tablet */
@media screen and (min-width: 700px) {
/* Tablet*/
.col-m-1 {width: 8.33%; } /* 1칸 짜리 폭 */
.col-m-2 {width: 16.66%; } /* 2칸 짜리 폭 */
.col-m-3 {width: 25%;}
.col-m-4 {width: 33.33%;}
.col-m-5 {width: 41.66%;}
.col-m-6 {width: 50%;}
.col-m-7 {width: 58.33%;}
.col-m-8 {width: 66.66%;}
.col-m-9 {width: 75%;}
.col-m-10 {width: 83.33%;}
.col-m-11 {width: 91.66%;}
.col-m-12 {width: 100%;}
}
/* 3. 768px 이상 : PC */
@media screen and (min-width: 768px) {
.col-1 {width: 8.33%; } /* 1칸 짜리 폭 */
.col-2 {width: 16.66%; } /* 2칸 짜리 폭 */
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}'웹_프론트_백엔드 > JAVA프레임윅기반_풀스택' 카테고리의 다른 글
| 2020.05.08 (0) | 2020.05.08 |
|---|---|
| 2020.05.07 (0) | 2020.05.07 |
| [2020.04.21] 구글 스토어 앱 출시 완료! (0) | 2020.05.02 |
| 2020.04.29 (0) | 2020.04.29 |
| 2020.04.28 (0) | 2020.04.28 |