SQL (sorting), 인터넷 기본 이론 (IP, Netm, Gateway, DNS 서버), HTML & CSS (기본 기초, 접근성, 웹표준, form tag)
스마트 하이브리드 웹/앱 개발 훈련
9/18
SQL
sorting (정렬) in SQL
-
굉장히 중요함.
-
does not actually change the database.
오름차순 정렬 vs. 내림차순 정렬
(Increasing order) (Decreasing order) -
내림차순 정렬이 더 많이 쓰임. 성적이나 연봉 같은 data들은 default가 내림차순임.
> SELECT [DISTINCT | ALL] 컬럼, 컬럼 ... FROM 테이블 ORDER BY 컬럼 [ASC | DESC], ...
-
우리가 일상적으로 쓰는 차트는 2차원 배열이고, 행마다 분리해서 값을 속출할수 있다. 그치만 database에선, one row (ie entry) is a singular entity. In database, each value in the same row are not independent from each other.
> SELECT eno 사번, ename 이름, sal*12+NVL(comm,0) 연봉 FROM emp ORDER BY 연봉 DESC;
-
If there are only a few columns, like less than 10, then you should just write out the name of the column that you want to order by. You should only replace the column name with its correponding number if there are like 100 columns.
(Side note: 회사에서 코딩할땐 주석 (comment)과 format 이 굉장히 중요함.)
-
ORDER BY 는 정렬할때만 좋은게 아니라 그냥 같은 값을 가지고 있는 entry 들을 같이 그룹할때 쓰기 좋음!
ex: ORDER BY 부서번호, 급여 DESC;
--> 같은 부서번호 안에서 descending 급여 순서로 정렬해줌.
*여기서 뒤에있는 급여 DESC는 앞에서 이미 정렬된게 깨지지 않는 범위 안에서만 정렬함!
Resizing SQL Display:
- SET LINE ___ (default는 800. 테이블이 얼마나 넓은지를 지정.)
- SET PAGES ___ (header가 얼마나 자주 프린트 되어야 하는지를 지정.)
- COL 컬럼명 FORMAT A__ (컬럼 너비를 지정함.)
- 여기서 이름 정도는 한 A10 정도면 될거임. 근데 만약 러시안 이름 같이 진짜 길면 A60 정도는 되야함.
IP Address
- _____ . _____ . _____ . _____
0-255 0-255 0-255 0-255 - 0부터 255는 컴퓨터로 표현하려면 8자리 칸이 필요하기 때문에 (컴퓨터는 0과 1밖에 못쓰니까) IP Address는 32 비트 임.
보통 인터넷에 필요한건 3가지임:
1. IP
2. Netm (Netmask)
3. Gateway (공유기/라우터)
ex:
IP - 192 . 168 . 10 . 3
Netm - 255. 255. 255 . 0
Gateway - 192. 168. 10 . 1
--> 여기서 넷마스크는 IP의 어디까지가 동네 (네트워크) 주소고 어디부터가 컴퓨터 주소인지 알려줌. 이 넷마스크에 따르면 192.168.10까지는 동네주손데 3은 컴퓨터 주소라는 뜻임. 여기서 게이트웨이는 보통 1로 끝나고, 이건 외부한테 통신할때 필요함.
- 여기서 4번째로 필요한게 있는데, 그건 DNS 서버임. DNS 서버는 어떤 컴퓨터가 www.naver.com 같은 도메인을 브라우저 주소창에 입력했을때 그 도메인을 알맞은 IP 주소로 바꾸어서 다시 컴퓨터 브라우저로 보내줌.
통신 타입:
1. Unicast - 컴퓨터가 1:1로 패킷을 보내는거.
2. Broadcast - 나랑 네트워크가 같은얘들한테 다 보냄. 그리고 받고
싶은 얘들만 받으면 됨.
그렇게 각 컴퓨터 마다 IP 주소가 있긴 한데, 여기서 각 컴퓨터한테 있는 IP주소는 real IP 주소가 아님. Real IP 주소는 공유기 (router)가 가지고있는 IP만이 real IP 주소임. 공유기는 만약 public IP가 1.2.3.4 였으면 private IP로 192.168.10.1을 해서 이 공유기의 네트워크 안에 있는 컴퓨터들은 모두 외부에서 접촉이 안됨. So it keeps those computers safe.
일단 알아둬야 하는건 사실상 실제 통신은 전부 IP 주소로 한다는 것임. IP 주소는 미국에 IANA가 관리함. 그러면 KT나 SK 같은 Internet Service Provider (ISP) 들이 IANA 한테 IP 주소를 신청해야함. 여기서 KT, SK같은 경우는 미리 IP를 받아놈. 여기서 중요한건 IP는 돈주고 사고 팔수 없음. Unique한 IP는 떨어진지 10년이 넘었음 (255^4 개 밖에 없으니까). 그래서 이제 IP는 그냥 빌리는 거임.
HTML and CSS
- Html, CSS, Script (JavaScript & jQuery)
- 접근성
- ex: 시각장애인들은 Screen reader라는걸 자주 쓰는데, 그걸 언제나 염두에 두어야됨.
- ex2: also keep in mind the people who cannot use a mouse due to a hand disability.
- ex3: 지적장애인들도 염두에 두고.
- Html - Hypertext Markup Language
- HTML은 하이퍼링크를 통해 연결되는 문서를 작성하는 언어이다.
- Css - cascading style sheet
2020 현재 웹표준: HTML5 + CSS3.0
- W3C - World Wide Web
- Cross Browsing (상호호환성) - 어떤 브라우저에서도 동등한 페이지를 만들어야함.
태그:
- 블록 태그 - div, ul, ol, li, dl, dt, dd, h1-h6, form, p
- 블록 사이즈와 margin padding 같은걸 조절할수 있다.
- 인라인 태그 - span, a*, img, strong, input, select
- 블록 사이즈와 margin padding 을 잘 인지하지 못한다.
*a 만 안에 블록 태그를 넣을수 있음.
블록을 한줄에 두개이상 넣고 싶으면:
- float - left | right | none
--> for float, you have to give a value to the "clear" property to tell the float to stop from this point on. - position - absolute | relative | fixed | static : value
--> absolute: 브라우저 왼쪽 모서리부터 how many px
--> relative: 지금 위치에서 부터 얼마만큼
--> fixed: 꼼짝 안하고 고정됨.
--> static: 얘는 반응형할때 쓰임.
HTML 파일 시작할때 꼭 필요한것들:
<!DOCTYPE html>
<html lang="ko"> <!-- or "en" 꼭 써야함 so that users can get the option to translate the website to their languages. -->
<head>
<meta charset = "utf-8">
<title>문서의 제목</title> <!-- 시각장애인에게 이건 너무 중요함. 스크린 리더가 이걸 제일 먼저 읽어줌. 그래서 always write the title correctly & specifically! -->
</head>
<body>
</body>
</html>코드 에디터: Visual Studio
- 밑에 보라색 --> 작업 폴더가 지정되어있지 않을때. 지정하면 파란색으로 변함
- 저장시 파일 이름: 공백 넣지 않음. 영어로 씀. 숫자로 시작하면 안됨. 공백이 꼭 필요하면 _ 아님 - 씀.
- Go Live 버튼 --> 누르면 automatically updates every time you change your code.
- Extension 프로그램: word wrap(저절로 줄바꿈 가능함), image preview extension, path intellisense.
- short cut: Alt+Shift+아래 방향키 아님 위 방향키: 복붙
- if you select a whole block of words and click ", it becomes a string right away.
접근성:
- always write the alt property for img, since if your img src is wrong, then alt gets displayed.
- in CSS, always start with @charset "utf-8";
CSS는 외부 스타일 시트 방식이 제일 많이 쓰임. 보통 html과 다른 폴더에 따로 저장되어있음. (css 주석은 /* ~ */임)
Font-family - 꼭 글꼴을 여러개 줘야함. 왜냐면 사용자에겐 어떤 폰트가 없을수 있으니까. 한국어나 영어 w/ space 인 폰트명이면 꼭 "" 둘러싸 주기.
id - can reuse if it's in a different html file (aka different page).
border: _size_(px) _style_ _color_
--> style: solid | dotted | dash
in <link>, need a value for the rel property. Just like href property in a tag. Link is used for linking stylesheets or scripts in html.
margin: (top) (right) (bottom) (left) --> in a clockwise order
--> if they're all the same, just put 1 value. or you can do margin: 20px 20px; --> top/bottom first, then left/right.
form tag
-
people say GET transfers data through the url (Ex: <a href="./b.php?a=$a">b.php</a> --> in b.php: <? $a = $_GET["a"]; ?> ) because sometimes some variables have to be passed through the url. Then you use GET because you don't have a choice.
-
But just always use POST when you're not sure. POST can transfer over bigger datas and is safer generally.
-
form tag input types:
- password - same as text except the content is hidden
- radio - can only choose one. and they come out as little circles. gotta put the same name attribute for all of them.
- checkbox - can choose more than one.
- file - gotta add enctype="multipart/form-data" to the form tag.
-
textarea, select tag
- textarea - use nl2br() function if you want to make the ENTER count as a new line.
- select - to do dropdown things, usually used for things like 생년월일.
