개발길에서 살아남기

조인

-- JOIN
SELECT <속성들>
FROM 테이블1, 테이블2
WHERE <조인조건> AND <검색조건>

SELECT <속성들>
FROM 테이블1 INNER JOIN 테이블2 ON <조인조건>
WHERE <검색조건>

-- 두개이상의 조인
SELECT <속성들>
FROM 테이블1, 테이블2, 테이블3
WHERE <조인조건> AND <조인조건> 
-- 여기서 테이블 하나는 적어도 두개의 조인조건을 들고 있어야 한다

-- 조인 조건 예시
WHERE 테이블이름1.데이터이름 = 테이블이름2.데이터이름
-- 여기서 데이터 이름은 동일해야한다

외부 조인 

-- 외부조인
-- 데이터를 비교해서 일치하는것만 출력
SELECT <속성들>
-- LEFT 왼쪽(테이블1)이 기준이 되어서 오른쪽(테이블2)과 비교해서
-- 일치하는 오른쪽의 데이터만 출력
-- RIGHT 반대 개념
-- FULL... 전체 출력
FROM 테이블1 {LEFT |RIGHT |FULL [OUTER]} JOIN
         테이블2 ON <조인조건>
WHERE <검색조건>

한 테이블 안에 동일한 값(ex.ID)을 기준으로 묶어서 출력

GROUP BY <속성>

SELECT id, COUNT(*), sum(number) -- 출력할 부분
FROM 테이블이름 
GROUP BY id -- 묶는 기준

HAVING <검색조건>

-- 순서는 GROUP BY 아래
HAVING COUNT(*) >= 2; -- 두개이상 조건

 WHERE 절에 조건으로 사용가능한 연산자

비교 =, <>, <,>,<=,>= 

범위 BETEWEEN a AND b

집합 IN, NOT IN

패턴 LIKE 

IS NULL, IS NOT NULL

복합 조건 AND, OR, NOT

정렬 ORDER BY 행이름 (DESC | ASC) 내림차순, 오름차순

검색 조건

-- 행이름에 가나를 검색
WHERE 행이름 LIKE '가나'

-- 행이름에 가나를 포함하고 있는 정보 검색
WHERE 행이름 LIKE '%가나%'

-- 행이름에 두번째부터 가나를 포함하고 있는 정보 검색
WHERE 행이름 LIKE '%_가나%'

-- 
SELECT 	SUM(행이름) AS 임의행이름 -- 총합
        AVG(행이름) AS 임의행이름 -- 평균
        COUNT(행이름) AS 임의행이름	-- 총갯수
        MAX(행이름) AS 임의행이름 -- 최댓값
        MIN(행이름) AS 임의행이름 -- 최솟값

FROM 테이블이름
WHERE ID=1;

SELECT 행이름  -- 2개 이상일경우 , 로 구분 / 전체는 *

FROM 테이블 이름 

-- 선택적으로 사용 

[WHERE 검색조건 

GROP BY 행이름

HAVING 검색조건

ORDER BY 행이름(ASC | DESC)]

시스템으로 접속해서 

-- 계정 생성
create user 계정이름 identified by 비밀번호 default tablspace users temporary 
tablespace temp profile default;

-- 계정 권한 부여
grant connect, resource to 계정이름;
grant create view, craate synonym to 계정이름;

alter user 계정이름 account unlock;

border : 두께, 색상, 스타일

border-radius :

border-radius - 전체 둥글기

// 따로주려면 가로 크기와 세로 크기를 지정해줘야함

border-top-left - 상단 왼쪽

*

*

border-bottom-right - 하단 오른쪽

box-shdow :  그림자 값, 수평거리, 수직거리, 흐림정도, 색상 

.box{box-shadow: 5px 5px 15px 5px gray}

margin :

주변의 바깥 여백

padding :

안쪽 여백

background-clip :

border-box - 박스 모델의 가장 외곽

padding-box - 박스 모델의 테두리를 뺀 범위

content-box - 박스 모델의 내용 부분

background-repeat :

repeat - 화면 끝까지 이미지를 가로, 세로 반복 배치

repeat-x - 화면 끝까지 이미지를 가로로 반복

repeat-y - 화면 끝까지 이미지를 세로로 반복

no-repeat - 이미지를 한 번만

background-size :

auto - 원래 배경 이미지만큼

contain - 요소 안에 맞춤

cover - 요소를 덮도록 맞춤

크기 값, 백분율 - 가로와 세로를 지정

background-origin :

border-box - 가장 외곽의 테두리 

padding-box - 테두리를 뺀 안쪽 테두리

content-box - 내용의 부분이 기준

font-family - 폰트를 정의

h1{font-family:"맑은 고딕", 돋움, 굴림}

h1 태그에 맑은 고딕을 사용하지만 없다면 돋움, 그것도 없다면 굴림을 사용하겠다

웹폰트를 가져오는 예시

/* 나눔고딕 */
@import url(//fonts.googleapis.com/earlyaccess/nanumgothic.css);

.nanumgothic * {
 font-family: 'Nanum Gothic', sans-serif;
}

/* 사용 */
<p class = "nanumgothic"> 나눔고딕 웹폰트 사용

font-size : 속성 값

절대 크기 - 브라우저에서 지원하는 크기 xx-small, x-small, small, | medium, | large, x-large, xx-large

상대 크기 - 부모 요소의 font-size를 기준으로 크기를 조절 larger, smmaller

크기 - 브라우저와 상관없이 크기를 지정 {

   em - 해당 글꼴의 대문자 M을 기준으로 크기를 조절

   ex - x의 높이를 기준으로 크기를 조절

   px - 픽셀, 모니터에 따라 상대적 크기

   pt - 포인트. 일반 문서에서 가장 접하기 쉬운 단위 }

백분율 - 부모 요소의 글자크기를 기준으로 %를 표기  100%

font-weight :  속성 값

normal - 기본 굵기

bold, bolder, lighter - 굵게, 더 굵게, 가늘게

100~900까지 100 단위 - 400 기준(normal)으로 조절

color : 속성 값

#ffffff, rgb(0,0,0), white

text-decoration 

텍스트에 밑줄 또는 가로지르는 줄

텍스트 링크의 밑줄을 제거 가능

none - 제거

underline - 밑줄

overline - 윗줄

line-through - 텍스트를 가로지르는 줄

text-transform 

영문의 텍스트의 대문자나 소문자를 바꾸기

none - 그대로

capitalize - 문장의 첫 글자만 대문자로

uppercase - 모든 글자를 대문자로

lowercase - 모든 글자를 소문자로

full-width - 가능한 모든 문자를 전각 문자로 (가로 세로비가 1:1)

text-shadow : 가로 거리, 세로 거리, 번짐, 색상

text-align 

start - 줄의 시작 위치에 정렬

end - 줄의 끝에 정렬

left - 왼쪽

right - 오른쪽

center - 중앙

justify - 양쪽 맞춤

match-parent - 부모를 따라

text-justify 

text-align = "justify"일 때 적용 가능 

auto - 자동으로 지정

none - 정렬 안 함

inter-word - 단어 사이의 공백들 조절

distribute - 글자 사이의 공백을 똑같이 지정(글자 하나씩 떨어져 일정하게 배치)

text-indent : 크기, 백분율

들여 쓰기 지정

line-height : 1.5, 2, 2.5 

줄 간격 

 <style>  태그를 사용해 글꼴이나 색상, 정렬 등 문서의 외관을 설정

사용법

<style> 
        p{text-align:center;} 
</style>

이렇게 내부에 <style> 테그를 써서 바꾸는 방법과 외부의 css파일을 불러오는 방법이 있음

  <link rel = "stylesheet" href = "주소/파일명.css" >

주소는 다른 위치에 있을때 기입 

이런 방식을 사용하면 코드를 분리해서 css의 변경사항을 한꺼번에 관리할 수 있는 장점

css 뿐만 아니라 테그 별로 style="속성값" 을 주어서 따로 관리할 수도 있다

/* 전체를 선택할 때 */
*{margin:0; padding:0;}

/* 클래스(class) 선택할 때 */
.className{margin:0; padding:0;}

/* 아이디(id)를 선택할 때 */
#idName{margin:0; padding:0;}

/* 한개 이상을 선택할 때 */
h1, h2 {margin:0; padding:0;}

캐스캐이딩이란

스타일 적용에 우선순위를 두어서 겹치는 부분의 요류를 해결 한다

중요도 순 

1. 인라인 스타일 - 태그에 직접따로 style 속성 값을 부여한 것

2. id 스타일 - 해당 아이디만 해당 / 문서 안에서 한번만 적용

3. class 스타일 - 해당 클래스에만 적용 여러번 적용 가능

4. 태그 스타일 - 해당 태그만 적용 문서안의 모든 태그는 적용

다른 스타일 보다 가장 우선시 되어야한다면

속성값 뒤에 ;전에 !important 붙이기 

<from>

사용자가 DB와 데이터를 주고받는 일을 주로 하며

예를 들어 회원가입, 로그인, 중복확인 등등 DB와 연관된 다양한 것들을 처리

<!-- action에 실행할 메서드명 입력 -->
<form action ="#" method="post">
        <input type="text" title="검색">
        <input type="submit" value="검색">
        <!-- from문에 버튼이 있는데 type 설정이 없다면 기본값으로 submit으로 지정 --> 
    </form>

<label> 

클릭 액션이 따로 없고 주변의 요소를 설명해주는 역할

<fieldset>

요소들을 테두리로 묶어주는 역할 <form> 문의 안 또는 밖에서 사용

<legend>

<fieldset>으로 묶은 영역에 이름을 설명

<input>

사용자의 입력값을 받음 

입력값의 종류는 type의 값에 따라 변경

hidden : 사용자에게 보이지 않는 정보를 보낼 때 사용

password : 입력받는 정보를 *또는 ●로 표기

search : 검색필드를 받고, x표시로 자우기 기능 생성

email : 메일주소 형식 자동 체크

number : 숫자 입력, 중가 감소 버튼 생성

range : 숫자입력, 슬라이드 막대 생성

radio : 하나의 선택항목 (단일 선택) 

checkbox : 둘 이상의 항목 (복수 선택)

date, month, week : 달력 기능 생성 달력 기능을 통해 날짜 입력 가능

submit : 데이터 전송

reset : 입력 내용을 모두 삭제

value : 넘겨질 데이터 값을 지정

placeholder : 입력란의 힌트, 입력하기 위해 클릭 시 사라짐

redonly : 내용을 입력하지 못함, lable과 비슷한 역할

*required : 필수 입력 체크 별다른 것 없이 required 만 독립적으로 씀

데이터 나열 - <select>, <optgroup>, <option>

<select>
	<optgroup>
		<option> </option>
        	<option> </option>
	</optgroup>
    <!-- <optgroup>은 <select>내부에 그룹화. 구분선 생성 -->
	<optgroup>
		<option> </option>
        	<option> </option>
	</optgroup>
</select>

<textarea>

텍스트 영역, 여러 줄의 텍스트 입력 가능

col : 가로나비

rows: 줄 

이미지 형식

GIF

색상 수는 256가지에서 제한적이라 화질이 낮지만

움직이는 이미지를 만드는 특징

JPG/ JPEG

사진을 위해서 개발된 이미지 형식으로 픽셀 기반이라서 

확대하면 계단현상이 있다.

PNG 

벡터 기반으로써 확대해도 계단현상이

일어나지 않는 장점

<img>

<img src ="#"> 

#에는 이미지 경로와 이미지 명을 넣는다

<img alt ="#"> 

#에는 이미지를 표시할 수 없을 때 이미지 설명을 넣음

화면 낭독기에서 이미지 대신 대체 텍스트를 읽어주는 특징

<width, height> 

가로와 세로를 지정가능

<figure>, <figcaption>

<figure> 
    <img src="image/#.jpg" alt="사진 이름">
    <!-- 캡션 붙이는 부분 -->
    <figcaption>사진 캡션</figcaption>
    </figure>

하이퍼링크 사용법 

<a href="http://www.##.com"> 페이지로 이동 </a>

<!-- 이미지에 하이퍼링크를 넣는 방법 
버튼의 경우에는 버튼으로 감싸고 a 테그를 사용 -->
<a href="http://www.##.com">
    <img src="image/##.JPG" alt="페이지 이동"> </a> 

앵커 태그 사용법 (페이지 안에서 이동)

 
 <ul id="con4"> 
 <!-- 앵커태그 #이 앵커를 실행하고 같은 아이디 명의 위치로 이동  -->
    <li><a href="#con1">앵커실행</a></li>
    ...
 </ul>
    
<h2 id="con1">앵커 타겟</h2>
<p>
    웹문서가 너무 길 경우 필요한 곳마다 문서 한에 이름을 붙여높고 
    그 위치로 한번에 이동하는 링크를 앵커라고 한다
</p>
<p> <a href="#con4">돌아가기</a> </p>
    

텍스트를 다루는 태그

<h1~6> 태그 

제목을 표시할 때 사용  크고 굵은 글씨가 특징

<p> 태그 

입력한 내용 앞뒤로 빈 줄이 생기며 텍스트 단락 생성

주로 본문으로 사용

한 줄만 사용할 때 </p>를 안 써도 무방

<br> 태그

줄 바꿈 태그 

닫는 태그가 없음

<hr> 태그

수평 줄 생성 영역 분리

<blockquote> 태그

인용문으로 쓰이고 들여 쓰이는 특징

<pre> 태그

소스 그대로 표현이 가능해서 프로그램 소스를 표시할 때 사용 

텍스트 속성 - 텍스트 태그 안에서 자유롭게 사용 가능

<strong>, <b> - 각각 강조, 굵게

<em>, <i> - 기울이기

<q> - 인용 표시

<mark> - 형광펜 효과

<span> - 줄 안에서 묶기

<div> - 줄 바꿔 단락으로 묶기

목록 만들기 태그

<ul>, <li> - 순서 없는 목록

각 항목에 구분점 생성

css의 list-style-type 속성으로 제거하거나 다른 것으로 수정 가능

<ul>

   <li>

      <li></li> 

      <li></li> 구조

<ol>, <li> - 순서 목록

항목당 숫자 생성

<ol> 태그 속성 - <li> 태그 리스트가 시작되기 전에 사용

type : 구분점 앞의 숫자 조정

start : 중간 번호부터 수정 _type이 a일 때 start 값이 3이면 c부터

reserved : 역순으로

<dl> -> <dt> -> <dd> - 설명 목록 

<dl> 

   <dt>

          제목

      <dd>

             내용

      <dd>

             내용

표를 만드는 태그

<table> - 표를 생성하는 태그

<tr> 행 (가로)

<td> 한 개 셀 <th> 제목 셀

ex

<table> 

   <tr>

      <th> 제목 </th>

      <td> 열 </td>

      <td> 열 </td>

   </tr>

   <tr>...

</table> 

표 합치기

행 합치기 

<colspan="n"> 태그 사용 기준에서 오른쪽으로 합쳐짐

<rowspan="n"> 태그 사용 기준에서 아래로 합쳐짐

<caption> - 표 제목 표의 상단에 위치 (중앙 정렬)

<figure> - 표제목 표 상단, 하단에 위치 (왼쪽 정렬)

표의 양이 많을 때 

<thead>, <tbody>, <tfoot>으로 영역 구분

세로로 묶을때 

<colgrop> -> <col> 사용 

위치는 <table> 태그 바로 아래