태그2 - Prev.kr
Download
Report
Transcript 태그2 - Prev.kr
소중한 교육자료
제작 이영수
웹 브라우징의 원리
사용자, 브라우저, 서버가 서로 통신하는 구조
사용자 주소 입력
브라우저가 서버에
해당 주소로 요청
브라우저의 요청을
해석하여 파일 값 전송
웹 브라우징
서버가 보낸 파일 값을 브라우저가
해석하여 화면에 출력
기본 HTML 태그 작성법
<태그>내용</태그>
단, 태그는 연 순서대로 닫아야 한다.
ex) <태그1>내용1</태그1>
<태그2><태그3>내용2</태그3></태그2>
<태그2><태그3>내용2</태그2></태그3> (X)
HTML 문서의 기본구조
<html>
웹 문서 제작자나 사용된 언어 등 화면에 직접적으로
<head> 표시되지 않는 여러 정보가 들어감
<title>페이지 제목</title>
</head>
<body>
웹 문서의 내용
</body>
</html>
정말 간단한 HTML 페이지 예제
<html>
<head>
<title>My Homepage</title>
</head>
<body>
Welcome to my homepage!
</body>
</html>
닫는 태그가 없는 특수한 태그
<br> 등의 태그는 </br> 처럼 닫지 않음
대신 <br /> 처럼 사용가능 (XHTML에서 표준)
ex) Hello<br>
World<br />
<img src=“parameter.png” width=“100” height=“100” />
<br> 태그
기본적으로 HTML은 코드 가독성 향상을 위해 줄 바꿈을
해도 줄 바꿈이 화면에 출력되지 않는다. (=한 줄로 연이어
나온다.)
이때 <br>(<br />)태그를 사용하면 줄 바꿈이 된다.
ex) 잎새에 이는 바람에도<br>나는 괴로워했다.
<p> 태그
하나의 문단을 만들 때 씀
줄 바꿈이 되고 하나의 여백 문장이 생김 (<br> 태그를 두
번 쓴 것과 같음)
ex) <p>서시</p>
<p>죽는 날까지 하늘을 우러러….</p>
<center> 태그
태그 내 내용들을 가운데 정렬한다.
ex) <center>
<p>서시</p>
<p>죽는 날까지 하늘을 우러러….</p>
</center>
<b> 태그와 <i> 태그
<b> 태그는 태그 내 내용을 굵게 표시한다.
<i> 태그는 태그 내 내용을 기울여서 표시한다.
ex) <center>
<p>
<b>서시</b>
</p>
<p>
<i>죽는 날</i>까지 하늘을 우러러….
</p>
</center>
태그의 속성
태그의 속성은 <태그 속성=“값”> 의 형태로 사용한다.
ex) <font color=“red” face=“나눔고딕”> Hello </font> World
<font> 태그
글씨에 색이나 글꼴 등 다양한 효과를 준다.
color 속성은 색상, face 속성은 글꼴을 나타낸다.
ex) <font color=“red” face=“나눔고딕”>Hello</font>
<a> 태그
하이퍼링크를 걸어주는 태그
<a> 태그 사이에 표시될 내용을 쓰고 href 속성에 클릭하
면 이동 할 링크를 작성한다.
ex) <a href=“http://prev.kr”>Prev HomePage</a>
target 속성은 새로 열 페이지의 특성을 나타낸다.
기본값은 “_self” 로 현재페이지이며 “_blank” 사용시 새 페이지로 이동한다.
ex) <a href=“http://prev.kr” target=“_blank”>Prev HomePage</a>
<img> 태그
브라우저에 이미지를 삽입하는 태그.
</img>로 닫지 않는 태그이다.
src 속성에 이미지 경로를 입력하고 width(가로), height(세
로) 속성으로 크기를 지정한다.
ex) <img src=“parameter.png” width=“500” height=“300” />
<table> 태그
표를 만드는 태그
<table> 태그 안에 <tr> <td> 등을 써서 사용한다.
<tr>은 열, <td>는 행을 나타낸다.
ex) <table>
<tr>
<td>
내용1
</td>
<td>
내용2
</td>
</tr>
</table>
XHTML, HTML5
HTML은 한 회사가 단독적으로 언어를 제작하는 것이 아니
고 상용 되고 있는 대다수의 브라우저들이 독립적으로 파
일을 해석하므로 표준이 잘 정해져 있지 않다.
오랜 기간 동안 표준이 정해져 있지 않다가 등장한 것이
HTML5 이다. 그 이전 버전은 주로 XHTML을 쓴다.
XHTML, HTML5 - doctype
HTML문서 앞에 doctype을 설정하는 것으로 버전을 표시
한다.
XHTML 문서는 아래와 같은 doctype을 쓴다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
HTML5 문서는 아래와 같은 doctype을 쓴다.
<!doctype html>
doctype을 지정하지 않을 경우 ie는 구 버전 처리 방식을
사용하므로 꼭 지정 해 주도록 한다.
한글 깨짐 문제
HTML의 인코딩 방식 때문에 한글이 종종 깨질 때가 있다.
이럴 때에는 문서의 인코딩 방식을 UTF-8로 설정하고
HTML파일의 <head> 부분에 XHTML의 경우
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
HTML5의 경우
<meta charset="utf-8">
를 삽입한다.
* 파일 저장시에도 UTF-8 인코딩을 사용해야 한다.
(드림위버는 자동으로 utf-8 형식으로 저장함)
XHTML ie 최신 모드 사용
기본적으로 XHTML(일반 html 규격) 에서 ie는 쿼크 모드
혹은 ie7 모드를 사용한다.
최신 버전의 ie모드를 호출하려면
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
를 <head> 태그에 쓴다.
<div> 태그
아무것도 없는 상자 역할
가로, 세로 크기를 지정 할 수 있고 테이블 대체 용도로 쓸
수 있음
div 태그 내 style속성에서 각종 추가 설정 가능
ex) <div style=“width:500px; height:300px; background-color:red;”>
div태그 예제
</div>
<div> 태그 2
<div> 태그 다음태그는 자동으로 줄 바꿈 되어 표시된다.
<div style=“width:500px; height:300px; background-color:red;”>
div1
</div>
<div style=“width:400px; height:300px; background-color:blue;”>
div2
</div>
위와 같은 태그는 세로로 2개의 div 상자가 만든다.
태그의 style 속성
Style속성은
<태그 style=“속성1:값1; 속성2:값2;”>
의 형태로 사용한다.
※ style속성값의 속성의 값(위 태그의 값1, 값2)는 따옴표를 표시하지 않는다.
※ 속성-속성값의 끝에는 세미콜론(;) 을 붙인다. (단 마지막 값 뒤에는 안 붙여도 됨)
ex) <div style=“width:500px; height:300px;”></div>
<div style=“width:500px”></div>
<span> 태그
<div> 태그와 비슷한 태그
하지만 크기를 설정 할 수 없고 줄 바꿈이 되지 않는다.
(inline 요소)
ex)
<span style="background-color:blue">span태그</span>
<button> 태그
버튼을 만드는 태그,
<button>버튼 안에 들어갈 내용</button>
처럼 작성하며 div태그와 속성은 비슷하다.
<li> 태그
목록을 만드는 태그
<ol> 혹은 <ul>태그 내부에 사용한다.
<ol>태그는 번호를 메겨 순서대로, <ul>태그는 순서없이
문양으로 목록을 만든다.
ex)
<ol>
<li>목록1</li>
<li>목록2</li>
<li>목록3</li>
</ol>
<ul>
<li>목록1</li>
<li>목록2</li>
<li>목록3</li>
</ul>
<li> 태그 2
<ul>태그 style 속성의 list-style 을 none 설정 시 문양이
보이지 않는다. 이를 이용하여 메뉴 네비게이터를 만들기도
한다.
<ul style="list-style:none;“>
<li style="float:left; width:50px; text-align:center;“>목록1</li>
<li style="float:left; width:50px; text-align:center;“>목록2</li>
<li style="float:left; width:50px; text-align:center;“>목록3</li>
</ul>
id속성과 class속성
대부분의 태그에는 id 속성과 class 속성이 있는데, 이를 이
용하면 CSS나 JavaScript에서 태그를 좀더 쉽게 이용 할 수
있다.
id는 원칙상 하나의 id당 하나의 태그에만 적용 할 수 있으
며 class는 하나의 class당 여러 태그에 적용 할 수 있다.
CSS 1 – 일반 태그에 적용
웹 개발자와 디자이너 분리가 가능해지게 해줌
<style> 과 </style> 사이에 작성
<style> 대신 <style type="text/css"> 로 사용가능 (추천)
<style> 태그 사이에
태그{ 속성1:속성값1; 속성2:속성값2; }
처럼 작성한다.
ex) body { margin:0; padding:0; }
CSS 2 – id/class에 적용
태그에서 설정한 id나 class에도 스타일을 줄 수 있다.
id에 줄 경우 #아이디{ 속성1:속성값1; 속성2:속성값2; }
class에 줄 경우 .클래스명{ 속성1:속성값1; 속성2:속성값2; }
처럼 작성한다.
ex) body{ background-color:red; }
#m_box{ width:500px; height:300px; }
.box{ background-color:blue; }
CSS 예제
<html>
<head>
<style>
body{ background-color:red; }
#m_box{ width:500px; height:300px; }
#s_box{ width:400px; height:200px; }
.box{ background-color:blue; }
</style>
</head>
<body>
<div id=“m_box”></div>
<div class=“box”></div>
<div class=“box”></div>
<div id=“s_box” class=“box”></div>
</body>
CSS 3 – CSS 여러 개 동시 적용
쉼표를 사용하면 여러 가지의 태그나 id/class 값에 동시에
css를 적용 시킬 수 있다.
ex) html,body{ margin:0; padding:0 }
CSS 4 – 태그 + id/class 상세적용
태그이름#아이디 { 속성1:속성값1; 속성2:속성값2; }
태그이름.클래스명 { 속성1:속성값1; 속성2:속성값2; }
위와 같은 CSS 설정은 해당 아이디 또는 클래스명을 가진
특정 태그에만 적용 할 수 있다. (태그이름이 다르면 사용
불가)
ex) div#m_box{ width:500px; height:300px; }
div.box{ background-color:blue; }
CSS 5 – 하위 태그 적용
태그이름 하위태그이름 { 속성1:속성값1; 속성2:속성값2; }
위와 같은 CSS 설정은 특정 태그 하위에 있는 태그에 CSS
를 적용시킨다.
ex) div span{ text-align:center; padding:10px; }
이전 설정처럼 태그이름 뒤에 #아이디 .클래스명 을 붙여
특정 아이디나 클래스명에도 CSS를 적용 할 수 있다.
ex) div. yellow_box span{ background-color:yellow; }
div#c_box span{ text-align:center; padding:10px; }
div span.blue_span{background-color:blue; }
div span#c_span{ text-align:center; padding:10px; }
CSS 6 – 추상 클래스
CSS 태그 혹은 아이디, 클래스명 설정 뒤 :이벤트 를 붙이면
특정 이벤트마다 적용 할 CSS를 사용 할 수 있으며 이를 추
상(가상)클래스라 한다.
그 중 :hover을 붙이면 CSS가 적용된 태그에 마우스가 올
려졌을 때 적용할 CSS를 의미한다.
ex) .box{ background-color:blue; }
.box:hover{ background-color:red; }
div#c_box span:hover {background-color:green; }
:hover외에도 :active 등이 있는데 :active는 해당 태그를 클
릭하고 있을 때의 CSS를 의미한다.
CSS 7 – after 가상 선택자
:hover, :active 외에도 다양한 추상 클래스 / 가상 선택자가
존재하는데 그 중 :after 라는 가상 선택자가 존재한다.
이는 컨테이너 요소 안 맨 마지막에 추가시킬 태그를 지정
할 수 있다.
#container:after{ content:"추가된 텍스트"; display:block }
위 같은 CSS는 container 태그 안 맨 마지막에 "추가된 텍
스트"를 출력시킨다.
단, IE7 이라는 after 가상 선택자를 지원 하지 않는다.
자주 쓰는 CSS 속성 (1)
width : 가로
height : 세로
margin : 외부 여백
padding : 내부 여백
color : 글자 색상
font-family : 글꼴
font-size : 글자 크기
font-weight : 두께 설정
text-align : 글자 정렬
background-color : 배경 색상
background-image : 배경 이미지 ( url(“경로”) 값 사용)
background-position : 배경 이미지의 위치
cursor : 해당 태그에 마우스를 올렸을 때 마우스 상태
border : 테두리
자주 쓰는 CSS 속성 (2)
position : 태그를 표시할 방법
left : 화면 맨 왼쪽으로부터 태그 객체 왼쪽 모서리까지의 거리
top : 화면 맨 위쪽으로부터 태그 객체 위쪽 모서리까지의 거리
right : 화면 맨 오른쪽으로부터 태그 객체 오른쪽 모서리까지의 거리
bottom : 화면 맨 아래쪽으로부터 태그 객체 아래쪽 모서리까지의 거
리
z-index : 태그의 z 인덱스 (높을수록 다른 태그 위에 배치됨)
float : 태그 정렬 방법
display : 태그 표현 방법
CSS – width/height
width와 height 속성은 각각 가로길이, 세로 길이를 의미한
다.
“100px” 처럼 숫자 뒤에 단위를 표시하여 적는다.
(px는 픽셀 이라는 의미)
<span> 등 inline 요소는 적용 되지 않는다.
(※ inline 요소는 추후 설명)
#box{ width:500px; height:300px }
CSS – margin/padding
margin과 padding 속성은 각각 바깥쪽 여백, 안쪽 여백을
의미한다.
#box{ margin:10px; padding:20px }
CSS – margin/padding (2)
margin과 padding 속성은 상,하,좌,우 각각 따로 너비를 줄 수
있으며 이에 따라 margin-left, margin-top, margin-right,
margin-bottom, padding-left 등의 속성이 따로 있다.
뿐만 아니라 띄어쓰기를 구분으로 두 값을 지정 할 경우 각각
상하 간격, 좌우 간격을 의미한다.
margin:50px 10px; -> 상하 여백 50px, 좌우 여백 10px
띄어쓰기를 구분으로 네 값을 지정 할 경우 각각 위, 오른쪽,
아래, 왼쪽 간격을 의미한다. (시계방향)
padding:5px 20px 10px 15px; -> 각각 위 5px 오른쪽 20px
아래 10px 왼쪽 15px 의 간격
CSS – margin/padding (3)
기본적으로 body 태그에는 margin이 적용되어 있어 상하
좌우에 여백이 생긴다.
여백을 없애려면 body에 margin과 padding을 0으로 적용
시키면 된다. 이때 IE는 html 태그에도 margin이 있으므로
html 태그의 margin과 padding을 없애도록 한다.
html,body{ maring:0; padding:0 }
CSS – margin auto
태그 객체의 margin-left, margin-right에 모두 auto를 적용
시 태그는 하위요소에 영향을 미치지 않고 자기 자신의 위
치를 가로 가운데로 위치시킨다.
단, 태그가 div일 경우 크기가 지정되어야 한다.
(미지정시 크기가 100%)
margin:0 auto; 등으로 보다 더
쉽게 적용 시킬 수도 있다.
#box{ width:500px; margin:0 auto }
CSS – color
color 속성은 글자 색을 의미한다.
color는
“red”, “blue” 등 이미 정의된 색이나
“#000”, “#FFFFFF” 등의 16진수 색상 코드,
“rgb(255, 255, 255)” 등의 rgb 색상,
“rgba(200, 100, 150, 0.5)” 등의 알파가 적용된 rgb 색상
(rgba) 등을 사용 할 수 있다.
#box{ color:green }
#box2{ color:#F0C }
CSS – font-family
font-family 속성은 글꼴을 의미한다
= font 태그의 face 속성과 같음
쉼표(,)로 여러 글꼴을 등록 할 수 있는데, 이때 맨 앞에 있
는 글꼴을 우선으로 적용시키며, 맨 앞에 있는 글꼴이 사용
자의 컴퓨터에 없을 때 그 다음 글꼴을 사용한다.
body{ font-family:나눔고딕,NanumGothic,돋움,Dotum }
CSS – font-size
font-size 속성은 글자 크기를 의미한다
= font 태그의 size와 같음
pt, em, 등의 단위와 small, big등의 상수 크기가 있다.
body{ font-size:40pt }
CSS – font-weight
font-weight 속성은 글자 두께를 의미한다.
100~900 사이의 숫자, 혹은 normal, bold, bolder,
lighter 의 상수가 있는데 이는 각각 400, 700, 900, 100을
의미한다.
body{ font-weight:bold }
CSS – text-align
text-align 속성은 텍스트의 정렬 방향을 의미한다.
left : 왼쪽 정렬
right : 오른쪽 정렬
center : 중앙 정렬
justify : 자동 줄바꿈시 오른쪽 경계선 부분이 정리 (양쪽 정렬)
#box{ text-align:center }
CSS - visibility
visibility 속성은 태그의 가시성 (보이는지) 을 결정한다. 총
4가지 속성이 있으며 기본값은 inherit 이다.
visible : 보임
hidden : 숨기지만, 자신의 영역은 계속 차지한다.
collapse : 겹치도록 지정( 테이블의 행과 열 요소만 지정할
수 있으며, 그 외 요소의 지정하면 hidden으로 해석된다.)
inherit : 부모 요소의 값을 상속
#box{ visibility:hidden }
CSS – background-color
background-color 속성은 배경색을 의미한다.
color 속성과 거의 비슷하게 설정 한다.
※ color속성과 혼돈하지 않도록 주의한다.
※ 크기가 없을 경우 표시되지 않으므로 주의한다.
#box{ background-color:green }
#box2{ background-color:#FF00CC }
CSS – background-image
background-image 속성은 배경 이미지를 설정한다.
png, jpg 등의 이미지를 사용하려면 “url(이미지경로)” 를 사
용한다.
이때, 컨테이너의 크기와 상관없이 background-image의 크
기는 그대로 표시되며, 컨테이너가 더 클 시 이미지는 반복되
어 표시된다.
#box{ background-image:url(logo.png) }
CSS – background-repeat
일반적으로 background-image 로 컨테이너보다 작은 이미
지를 적용 시 이미지는 반복된다.
이때 background-repeat 속성을 사용하면 반복여부를 지정
할 수 있다.
no-repeat : 반복 안함 (이미지 1개만 출력)
repeat : 반복 (기본값)
repeat-x : 가로로만 반복
repeat-y : 세로로만 반복
#box{ background-repeat:no-repeat }
CSS – background-position
일반적으로 background-image 는 왼쪽 위부터 이미지를 출
력한다. 이때 background-position 속성을 사용하면 이미지
의 좌표를 수정 할 수 있다.
margin/padding에서 지정했던 것과 비슷하게 띄어쓰기를
기준으로 x좌표, y좌표를 지정한다.
background-postiton:-50px -100px
-> 이미지의 x좌표를 왼쪽으로 50px, 위쪽으로 100px만큼
이동하여 출력
#box{ background-postiton:-50px -100px }
CSS – cursor
cursor 속성을 이용하면 해당 태그 위에 위치하는 마우스 커
서의 상태를 바꿀 수 있다.
auto : 자동
default : 기본값 (화살표)
pointer : 클릭시의 마우스 (손가락 모양)
wait : 로딩
등 다양한 종류가 있다.
참고 : http://www.homejjang.com/09/cursor.php
#box{ cursor:pointer }
CSS - border
border 속성을 이용하면 태그에 테두리를 지정 할 수 있다.
border는 두께, 종류, 색상의 복합적인 특성을 가지므로 이
세 속성을 모두 정의해 주어야 한다.
border-width 는 두께로, "3px" 등의 크기로 지정하며
border-style 는 선 종류로 "solid", "dashed", "dotted" 등으
로 지정하며
border-color는 색상으로 style의 color, background-color
처럼 지정한다.
CSS – border (2)
이 셋을 따로 지정 해 주지 않고 border 속성에 한번에 표시
할 수도 있다.
띄어쓰기를 구분으로 두께, 종류, 색상을 순서대로 쓴다. (순서
를 바꿔도 일부 브라우저는 정상적으로 작동)
border:1px solid green
border는 사방의 테두리를 각각 다르게 설정 할 수도 있다.
이때, border-top, border-left 등의 속성을 사용한다.
border-right:2px solid blue
#box{ border:1px solid green; border-bottom:2px solid blue }
CSS – border-radius
border-radius 속성은 테두리를 둥글게 표시해준다.
<※ ie8이하 미지원>
px, em등의 단위를 사용하며
border-top-left-radius , border-bottom-right-radius 같은
속성이나 margin/padding처럼 띄어쓰기를 구분으로 4개
모서리를 각각 설정 할 수 있다.
#box{ border-radius: 4px 3px 6px 5px }
#box2{ border-radius: 3px }
CSS– position
position 속성은 태그의 위치 표시 상태를 의미한다.
속성값에는 아래의 5개가 있다.
static - 기본값으로 위치정보를 임의로 설정 해줄 수 없다.
absolute - 절대위치
relative - 상대위치
fixed - 위치 고정 (브라우저의 스크롤을 이동해도 정해진 위치에 고정됨)
inherit - 부모의 속성을 상속받는다.
#box{ position:absolute }
CSS – position (2)
static은 기본값으로, 앞에 있는 태그들과 함께 순서대로 배치
된다.
absolute는 문서 최 좌측상단을 기준으로 위치정보를 설정하
며 스크롤시 이동한다.
fixed는 스크롤과 상관없이 항상 문서 최 좌측상단을 기준으
로 좌표가 설정되어있다.
relative는 static 위치 사용시 있던 위치를 기준으로 이동한다.
inherit은 부모 태그의 속성값을 상속받게 된다.
CSS – left, right, top, bottom
position속성을 static을 제외한 나머지 값 지정 시 위치정
보(좌표)를 지정 할 수 있는데 이때 left, right, top, bottom
속성을 이용한다.
left는 문서 좌측부터 태그의 좌측 좌표 까지의 거리,
right는 문서 우측부터 태그 우측 좌표 까지의 거리,
top은 문서 상단부터 태그 상단 좌표 까지의 거리,
bottom은 문서 하단부터 태그 하단 좌표 까지의 거리
를 의미한다.
CSS – left, right, top, bottom 예제
left, right, top, bottom 등 위치 과련 속성을 사용 할 때는
반드시 position 값을 적절히 변경 해주도록 한다.
left값과 right값은 반대되는 속성으로 두 값을 모두 지정해
버릴 경우 더 뒤쪽에 선언한 한가지 속성만 적용된다.
#box{
position:absolute;
left:30px;
top:100px;
}
CSS – z-index
position 속성을 absolute 등으로 변경하면 태그들이 겹치
게 될 수 있다.
일반적으로 더 나중에 선언한 태그가 위에 배치되지만,
style 속성의 z-index를 이용하면 더 위에 배치시키거나 더
아래에 배치시킬 수 있다.
z-index 값이 높을수록 위, 작을수록 아래에 배치되며 정수
혹은 자연수 값을 사용한다.
#box{ z-index:999 }
CSS – float (1)
부유 속성이라고도 한다.
이미지와 텍스트를 쉽게 배치
시키기 위해 만들어졌으며,
float 속성을 left나 right로 지
정해 준 요소 아래 혹은 위 요
소는 float를 지정해 준 요소를
감싸게 된다.
CSS – float (2)
• inherit - 요소를 감싸는 바깥 요소에서 float 속성을 상속
받는다. 기본 값이다.
• left - 요소는 왼쪽에 부유하는 블록 박스를 생성한다. 페
이지 내용은 박스 오른쪽에 위치하며 위에서 아래로 흐른
다. 이후 요소에 clear 속성이 있으면 페이지 흐름이 달라
진다. "none"이 아니라면 "display" 속성은 무시된다.
• right - 요소는 오른쪽에 부유하는 블록 박스를 생성한다.
페이지 내용은 박스 왼쪽에 위치하며 위에서 아래로 흐른
다. 이후 요소에 clear 속성이 있으면 페이지 흐름이 달라
진다. "none"이 아니라면 "display" 속성은 무시된다.
• none - 요소를 부유시키지 않는다.
CSS – float(1,2) - 예제
동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리
나라 만세 무궁화 삼천리 화려강산 대한 사람 대한으로 길
이 보전하세
<img src="flag.png" width="300" height="200"
style="float:left;" />
남산 위에 저 소나무 철갑을 두른 듯 바람 서리 불변함은
우리 기상일세 무궁화 삼천리 화려강산 대한 사람 대한으
로 길이 보전하세
CSS – float (3)
float 속성은 텍스트와 이미지 배치를 위해 만들어 졌지만,
레이아웃 배치용으로 자주 사용된다.
일반적으로 div태그는 가로길이가 전체를 차지하여 자동으
로 줄 바꿈이 되어 버리는데, 이때 div 태그에 float 속성을
사용해주면 div태그를 가로로 배치 할 수 있다.
<div>
<div style=“float:left”>ㅁㄴㅇㄹ</div>
<div style=“float:left”>ㅁㄴㅇㄹ</div>
<div style=“float:right”>ㅁㄴㅇㄹ</div>
</div>
CSS - clear
float 속성으로 텍스트와 이미지를 배치 시킬 때는 문제가 없지
만 div 태그 등을 배치 시킬 때는 상위 태그가 높이 값이 float를
적용한 하위 태그의 높이를 반영하지 않아 이상하게 된다.
다음요소가 float에 영향을 받지 않고 일반적인 레이아웃을 사용
하게 하기 위한 여러 방법이 있는데 그 중 float를 준 태그 다음
에 clear속성을 준 요소를 삽입하는 방법이 가장 쉽다.
<div>
<div style=“float:left”>ㅁㄴㅇㄹ</div>
<div style=“clear:both”></div>
</div>
삽입하면clear 속성 값에 "both"을 적용하면 float의 left, right 모
두 제거된다.
after 가상 선택자와 clear
css혹은 style속성에서 float를 사용한 후 마지막 객체에
clear속성을 지닌 태그를 일일이 추가시키는 방법대신 after
가상 선택자를 이용하면 더 편리하게 관리 할 수 있다.
#container:after{
content:""; display:block; clear:both;
}
IE7 이하는 after 가상 선택자를 지원 하지 않는데 이 경우
#container{ *zoom:1 } 같은 문을 추가시키면 자동으로
clear된다.
CSS - display
display 속성은 요소를 어떻게 보여줄지를 결정한다.
주로 4가지 속성값이 쓰이는데, 태그마다 기본값이 다르다.
none : 보이지 않음
(visibility:hidden과 다르게 자리도 차지하지 않음)
block : 블록 박스로 만듬
inline : 인라인 박스로 만듬
inline-block : block 박스로 만들어지나, inline처럼 배치가
된다.
CSS – display (2)
display 속성 중 block(블록 요소)는 요소의 가로 길이가 100%가
되어(width값을 수동으로 지정해도 보이지 않는 margin같은 값
이 화면을 꽉 채운다) 자동으로 줄 바꿈이 되고 width, height 속
성을 지정 할 수 있는데, 자동으로 display:block 이 적용되는 대
표적인 태그는 div 가 있다.
inline 요소는 block과 달리 줄 바꿈이 되지 않고, width와 height
를 지정 할 수 없다. display:inline이 적용되는 대표적인 태그는
span이 있다.
inline-block 요소는 inline요소와 block요소의 특징을 합친 것으
로 자동으로 줄 바꿈이 되지 않지만 크기를 지정 할 수 있다.
inline-block 요소와 요소 사이에는 공백이 생기게 된다.
(단, ie7 이하는 지원하지 않는다.)
CSS의 적용 우선 순위
CSS의 특성상 중복되는 속성이 등장 할 수 있다.
이때 특정 원칙에 따라 CSS를 처리한다.
1.
2.
3.
4.
5.
6.
속성값 뒤에 !important를 붙인 속성
HTML에서 style을 직접 지정한 속성
#id로 지정한 속성
.클래스, :추상클래스 로 지정한 속성
태그이름 으로 지정한 속성
상위 객체에 의해 상속된 속성
같은 우선 순위에 있는 경우, 쪽수가 많은 경우('CSS 4' 페이지 참조)가
우선하며, 이 마저 같은 경우 CSS에서 나중에 선언한 것이 우선한다.
CSS의 적용 우선 순위 - !important
CSS 에는 중복되는 속성 등장시 특정 순위에 따라 적용하
는데, 이를 무시하고 절대적으로 우위에 가게 하고 싶다면
속성 값 뒤에 !important를 사용하면 된다.
#box1 { color:blue }
div{ color:red !important }
위 같은 CSS는 원래 #box1 이 div 보다 우선함에도 불구하
고 !important를 사용 했기 때문에 box1의 글자 색상은
red가 된다.
이는 우선순위 뿐만 아니라 디자이너-개발자간 교류에서 중요한
속성이라는 표현을 할 때 쓰이기도 한다.
CSS 파일 분리
<head>
<link rel="stylesheet" href=“경로.css" type="text/css">
</head>
외부에서 css 파일을 불러 올 수 있다.
불러올 경우 style 태그에 쓴 것 처럼 자동으로 적용된다.
css 파일에는 style 태그 안에 작성하는 것처럼 작성한다.
favicon (웹 페이지의 아이콘)
<link rel="shortcut icon" href="파일이름.ico" />
.ico 파일은 .png 파일을 툴로 변경하여 만들 수 있다.
favicon의 기본 크기는 16x16 이다
JavaScript
레이아웃 위주의 정적인 HTML 문서를 좀더 Dynamic 하게
해주는 언어이며, 나름 객체지향이다.
<script type=“text/javascript”></script> 사이에 작성
※ type=“text/javascript“ 대신 language=“javascript” 로 사용해도 되며
생략해도 됨. 단, 표준에 맞지 않으므로 비추천
HTML5 버전에서는 좀더 새롭게 추가된 태그 뿐만 아니라
JavaScript 메서드(함수) 등을 사용 할 수 있다.
JavaScript 의 변수선언
종류(타입)에 상관없이 var 로 선언
String, Int, Float(Number), Boolean, Array 등 다양한 타입 지정 가능
ex) <script type="text/javascript">
var str = “Hello World”
</script>
※ var a,b,c 처럼 여러 변수 동시에 선언 가능
배열은
var arr = new Array(); 또는
var arr2 = []; 처럼 선언 할 수 있다.
arr[0] 처럼 접근 또한 가능 하다.
JavaScript 의 함수선언
반환 타입에 상관없이 function() {} 으로 선언
Void, String, Int, Float(Number), Boolean, Array 등 다양한 반환 타입
지정 가능
함수이름(); 으로 함수를 실행한다.
괄호 안에는 매개변수가 들어 갈 수 있다.
ex) <script type="text/javascript">
function add(num1, num2) {
return num1 + num2;
}
add(1, 2);
</script>
JavaScript 예제
<script type=“text/javascript”>
var isGameOver = false;
function gameOver() {
isGameOver = true;
alert(“The Game is Over”);
}
gameOver();
</script>
※ alert 함수는 경고창을 띄우는 JavaScript의 기본 글로벌 함수이다.
JavaScript 조건 문 (if문)
JavaScript또한 일반적인 언어와 같이 if문이 있으며 쓰임새
는 거의 같다.
ex) <script type="text/javascript">
var bool = false;
if (bool == false) {
bool = true;
}
</script>
JavaScript 반복 문
JavaScript또한 일반적인 언어와 같이 for문과 while문이 있
고 쓰임새는 거의 같다.
ex) <script type="text/javascript">
for(var i = 0; i<10; i++) {
alert( i );
}
</script>
<script type="text/javascript">
var i = 0;
while( i < 10 ) {
alert(i);
i++;
}
</script>
JavaScript 분기 문
JavaScript또한 일반적인 언어와 같이 switch문이 있고 쓰임
새는 거의 같다.
ex) <script type="text/javascript">
switch( i ) {
case 0 :
//action
break;
case 1 :
//action
break;
}
</script>
JavaScript 배열
C언어와 달리 배열 안에 모든 객체를 담을 수 있고 길이를
지정하지 않아줘도 된다.
선언(초기화) -> 아래 둘은 같은 방법으로, 아무것도 담고
있지 않은 배열을 선언한다.
var arr = new Array(); //빈 배열 선언
var arr = []; //빈 배열 선언
var arr = [“a”, “b”, “c”]; //순서대로 a,b,c가 담긴 배열 선언
C언어와 달리 배열 선언(초기화)시 중괄호( {,} )대신 대괄호
를 사용한다.
JavaScript 배열 2
배열 참조시 C언어와 마찬가지로 대괄호( [,] )를 쓴다.
var arr = [“a”, “b”, “c”]; //순서대로 a,b,c가 담긴 배열 선언
arr[0] // “a” 반환
arr[1] // “b” 반환
arr[2] = “C” //배열의 3번째 요소 “C”로 변경
arr[3] = “d” //배열의 4번째 요소 추가 및 “d”삽입
JavaScript 배열의 속성와 메서드
배열의 length 속성은 배열의 길이를 반환한다.
var arr = [“a”, “b”, “c”];
arr.length // 3 반환
배열의 push 메서드는 배열의 맨 마지막에 하나의 요소를
추가하고 매개변수로 들어온 값을 집어넣는다.
var arr = [“a”, “b”, “c”];
arr.push(“d”);
arr // [“a”, “b”, “c”, “d”];
JavaScript 배열에는 이보다 더 많은 속성과 메서드가 있다.
JavaScript Object
JavaScript에서는 일반 언어처럼 객체지향적 성질을 사용
할 수 있다. 객체는 ‘new Object()’ 나 ‘{}’ 로 초기화한다.
객체 변수 gilDong이 있다고 했을 때,
gilDong 의 속성은 마음껏 생성하거나 변경, 참조 할 수 있다
ex)
var gilDong = new Object();
gilDong.location = “Korea”;
gilDong.gender = “man”;
alert( gilDong.location ); //Korea
JavaScript Object 2
Object의 속성은 배열이나 Object가 될 수 있다.
var gilDong = new Object();
gilDong.possession = [“brush”, “paper”];
gilDong.family = new Object();
gilDong.family.father = “아버지”;
gilDong.family.mother = “어머니”;
alert( gilDong.possession[0] );
alert( gilDong.family.mother);
JavaScript Object 3
Object는 중괄호와 콜론(:), 쌍따옴표(“), 쉼표(,) 등으로 간단
히 나타 낼 수 있으며 이를 JSON(JavaScript Object Model)
이라 한다.
var gilDong = {
location : “Korea”,
possession : [“brush”, “paper”],
family : {
father : “아버지”,
mother : “어머니”
}
}
alert( gilDong.family.father ); //아버지
JavaScript Object 4
JSON 사용시 속성에 따옴표를 감싸주는 것이 조금 더 안정
적이다. 또한 JSON은 다른 프로그램과 통신시에 데이터 전
송용으로 많이 사용된다.
var gilDong = {
“location” : “Korea”,
“possession” : [“brush”, “paper”],
“family” : {
“father” : “아버지”,
“mother” : “어머니”
}
}
JavaScript 난수
JavaScript에서는 간편하게 난수(무작위의 수) 를 호출 할
수 있는 Math.random() 이라는 함수가 있다.
Math.random()을 호출하면 0보다 크고 1보다 작은 실수
중 하나가 호출된다.
JavaScript 반올림, 올림, 버림
반올림 : Math.round(number);
올림 : Math.ceil(number);
버림 : Math.floor(number)
* JavaScript의 Math 클래스에는 다양한 수학적 메서드(함
수)가 내장 되어 있다.
JavaScript의 글로벌 콜백 함수
JavaScript는 특수한 글로벌 콜백 함수를 지니고 있다.
예를 들어 window.onload 라는 변수는 함수 자체를 나타
내는데, 이 함수에 자신이 원하는 함수를 대입하면 그 함수
가 문서가 모두 로드 됬을 때 실행된다.
ex) <script type="text/javascript">
window.onload = function() {
var st = document.getElementById("stalker");
}
</script>
Tip> window.onresize 함수는 화면 크기가 바뀌었을 때 실행된다.
JavaScript의 글로벌 콜백 함수 2
window.onresize : 화면 크기가 바뀌었을 때 실행
window.onerror : 에러가 발생 했을 때 실행
window.onmousemove : 마우스가 움직였을 때 실행
window.onmousedown : 마우스를 눌렀을 때 실행
window.onmouseup : 마우스를 눌렀다 떼었을 때 실행
window.onkeydown : 키보드를 입력했을 때 실행
window.onkeyup : 키보드를 눌렀다 떼었을 때 실행
등 다양한 글로벌 콜백 함수가 존재한다.
HTML onclick 속성
HTML태그에는 onclick 속성이 있는데 이 속성 안에는
JavaScript 문법을 쓸 수 있다. 이 속성은 이 태그 안의 문법
은 태그를 클릭 했을 때 실행된다.
ex)
(…)
<script>
function clickFunc() {
alert(“버튼이 클릭되었습니다”);
}
</script>
</head>
<body>
<div style=“width:100px; height:100px; background-color:black”
onclick=“clickFunc()”>버튼</div>
(…)
HTML on~ 속성
HTML 태그에는 onclick 속성 뿐만 아니라 onmouseover
등 다양한 속성이 존재한다.
이들은 각각 클릭 됬을때, 마우스가 객체 위에 올라 왔을
때 속성값에 있는 JavaScript를 실행 시켜 준다.
또한, 이처럼 태그등에 특정한 일이 있어 났을 때의 상황을
이벤트라 한다.
JavaScript 태그 객체 참조 1
document.getElementById(“아이디”)
는 html문서에서 해당 아이디를 가진 객체(태그)를 반환한다.
var st = document.getElementById("stalker");
처럼 변수에 담아서 보관하며 style 속성을 사용 할 수 있다.
ex)
var st = document.getElementById("stalker");
st.style.left = “100px”;
st.style.left = (parseInt( st.style.left ) + 100) + “px”;
※ document.getElementById 로 가져온 객체는 속성이 CSS에서 정의되어있더라
도 style속성에 자동으로 대입되지 않아 참조가 되지 않는다.
태그 객체의 속성
document.getElementById 등으로 불러온 객체(=Object)는
속성이 있는데 이는 태그의 속성과 같다. (font의 color 등)
이중 당연히 style 속성도 존재하는데 style속성에서 하위속
성에 참조하여 style속성도 변경 할 수 있다.
이때 style속성의 하위속성의 언더바(–) 는 그 다음문자가
대문자로 변하며 사라진다.
ex)
var box = document.getElementById(“box1”);
alert( box.offsetWidth) //box의 offsetWidth 속성 출력
box.style.backgroundColor = “blue”
//box의 style속성 Object의 backgroundColor 속성을 “blue”로 변경
태그 객체의 속성 - 크기 (1)
객체.style.width(style.height)가 문자열을 반환하기 때문에
parseInt (혹은 parseFloat) 등으로 크기를 정수로 변환한 후 값을
더하거나 빼주는 방법 등으로 원래 크기 값에서 더하거나 뺄 수
있다.
이때, 객체의 style의 width는 초기화가 되어야 한다.
(CSS로 초기화 불가)
var st = document.getElementById("stalker");
st.style.width = (parseInt( st.style.width ) + 100) + “px”;
// st.style.width 값이 “200px” 이라고 했을 때, 이 값을 parseInt
해주면 정수 200을 반환한다.
// 200에 100을 더한 후 단위 “px”을 붙여 준 값을
객체.style.width 속성에 적용시킨다.
태그 객체의 속성 - 크기 (2)
객체의 실질적 크기를 구하는 방법에는 객체.offsetWidth
등의 속성을 사용 하면 된다.
(style속성의 width값을 초기화 해주지 않아도 된다.)
var st = document.getElementById("stalker");
st.style.width = (st.offsetWidth + 100) + “px”;
크기를 제어하는 속성은 offsetWidth(offsetHeight) 뿐만 아
니라 clientWidth(clientHeight), scrollWidth(scrollHeight)
등이 있다.
http://blog.daum.net/webdeveloper/6277113
태그 객체의 속성 – 위치
태그 객체에서도 style속성에 있는 left, right, top, bottom
속성을 이용하여 위치정보를 변경 할 수 있다.
이때, style 속성 혹은 CSS에서 객체의 좌표는 absolute 혹
은 fixed 혹은 relative 로 변경 되어야 한다.
크기정보처럼 offsetLeft, offsetTop, clientLeft, scrollLeft 등이
있으며 나머지 사용법은 크기 속성의 사용법과 비슷하다.
var st = document.getElementById("stalker");
st.style.left = (st.offsetLeft + 100) + “px”;
JavaScript 태그 객체 참조 2
document.getElementsByClassName(“클래스이름”)
는 html문서에서 해당 클래스이름을 가진 객체(태그)의 배열을
반환한다.
var st = document.getElementsByClassName (“enemy");
처럼 변수에 담아서 보관하며 style 속성을 사용 할 수 있다.
이때 출력값(변수)는 배열이다.
ex) var enemys = document.getElementsByClassName (“enemy");
for (var i=0; i<enemys.length;i++) {
enemys[i].style.left = “100px”;
}
※ document.getElementsByClassName 로 가져온 객체의 배열의 값들은 속성이
CSS에서 정의되어있더라도 style속성에 자동으로 대입되지 않아 참조가 되지 않
는다.
JavaScript 태그 객체 참조 3
document.getElementsByTagName(“태그이름”)
는 html문서에서 해당 태그이름을 가진 객체(태그)의 배열을 반
환한다.
var st = document.getElementsByTagName(“div");
처럼 변수에 담아서 보관하며 style 속성을 사용 할 수 있다.
이때 출력값(변수)는 배열이다.
ex) var divs = document.getElementsByTagName (“div");
for (var i=0; i<divs.length;i++) {
enemys[i].style.backgroundColor = “yellow”;
}
※ document.getElementsByTagName 로 가져온 객체의 배열의 값들은
document.getElementsByClassName 와 마찬가지로 속성이 CSS에서 정의되어있
더라도 style속성에 자동으로 대입되지 않아 참조가 되지 않는다.
JavaScript querySelector (HTML5)
document.querySelector(“셀렉터”)
는 태그의 아이디, 클래스, 이름 등으로 태그 객체를 반환하는 메
서드로 jQuery의 $(“셀렉터”) 와 비슷하다.
셀렉터는 CSS에서 사용하는 태그 셀렉터 (“#아이디” , “.클래스이
름”, “태그이름”, "태그이름 하위태그이름" 등 ) 을 사용한다.
이때, 클래스이름이나 태그이름으로 불러와도 배열이 아닌, 맨
앞 객체 하나만 불러오게 된다.
var container = document.querySelector(“#container");
var box = document.querySelector(“.box"); //배열이 아님
var body = document.querySelector(“body"); //배열이 아님
JavaScript querySelectorAll (HTML5)
document.querySelectorAll(“셀렉터”)
는 document.querySelector와 다르게 여러 개의 태그 객체를 담
는 배열을 반환한다. (아이디로 불러왔을 경우에도 배열 반환)
ex)
var containerArr = document.querySelector(“#container"); //배열
var boxArr = document.querySelector(“.box"); //배열
var divArr = document.querySelector(“div"); //배열
XHTML JavaScript 화면크기 구하기
현재 브라우저의 창의 크기를 JavaScript 내장 속성으로 구
할 수 있다. (허나 XHTML에서 표준이 정해지지 않음)
가로길이 :
document.body.offsetWidth
document.body.scrollWidth
document.body.clientWidth
세로길이 :
document.body.offsetHeight
document.body.scrollHeight
document.body.clientHeight
(문서 전체의 크기)
(창의 크기)
(문서 전체의 크기)
(창의 크기)
HTML5 JavaScript 화면크기 구하기
XHTML과 달리 HTML5는 화면크기 구하기에 대한 표준이
정해저있다.
inner~ : 브라우저 윈도우 두께를 제외한 내용이 표시되는 화
면의 실질적인 크기
outer~ : 브라우저 윈도우 두께를 포함한 브라우저 전체 크기
가로길이 :
window.innerWidth, window.outerWidth
세로길이 :
window.innerHeight, window.outerHeight
ie document.documentElement.clientHeight
JavaScript addEventListener
JavaScript객체에서 특정 태그에 이벤트 리스너를 붙일 수
있다. 이는 객체가 특정 이벤트를 발동 시킬 때(클릭 됬을
때 등) 마다 함수를 실행시켜준다.
예를 들어
var st = document.getElementById("stalker");
st.addEventListener(이벤트종류, 함수이름);
이벤트 종류에는 “click”, “mousedown”, ”mouseup”, “mouseover” 등 수
많은 이벤트가 있다.
JavaScript addEventListener 예제
window.onload = function() {
var myBtn = document.getElementById(“my_btn");
myBtn.addEventListener(“click”, myBtnClickHandler);
}
function myBtnClickHandler() {
alert(“myBtn이 클릭되었습니다”);
}
JavaScript addEventListener IE 구 버전 호환화
ie구 버전은 addEventListener을 지원하지 않다.
단, 비슷한 메서드로 attachEvent 라는 함수가 있다.
attachEvent 는 이벤트 등록 시 “click”, “mouseover” 대신
“onclick”, “onmouseover” 등으로 사용 한다.
var st = document.getElementById("stalker");
st.attachEvent(이벤트종류, 함수이름);
attachEvent도 지원하지 않는 브라우저는 st.onclick 등의
콜백함수를 사용한다.
JavaScript addEventListener IE 구 버전 호환화 예제
window.onload = function() {
var myBtn = document.getElementById(“my_btn");
if (document.addEventListener)
myBtn.addEventListener(“click”, myBtnClickHandler);
else if (document.attachEvent)
myBtn.attachEvent(“onclick”, myBtnClickHandler);
}
function myBtnClickHandler() {
alert(“myBtn이 클릭되었습니다”);
}
JavaScript 이벤트
addEventListener 등으로 등록 할 수 있는 이벤트는 여러
종류가 있다. 그 중 가장 자주 쓰이는 이벤트는 아래이다.
change – input text 등 변경 시 이벤트
click – div 등 클릭 시 이벤트
focus – input text 등 포커스를 얻었을 시 이벤트
keydown – 키보드 다운시 이벤트
keyup – 키보드 업시 이벤트
load – 로드가 완료됬을시의 이벤트
mousedown – 마우스를 클릭했을 때(누를때) 이벤트
mouseout – 마우스가 특정 객체 밖으로 나갔을 때의 이벤트
mouseover – 마우스가 특정 객체 위로 올려졌을 시의 이벤트
mousemove – 마우스가 움직였을 때의 이벤트
mouseup – 마우스를 클릭했다 떼었을 때의 이벤트
select – option select 등에서 선택했을 때의 이벤트
JavaScript EventHandler의 첫번째 인자
addEventListener등으로 실행한 함수에는 첫번째 인자(매
개변수) 가 있는데 이는 이벤트를 반환한다.
이 이벤트에는 다양한 속성들이 있는데 이중 target은 이벤
트가 호출된 객체 (클릭된 객체 등) 를 반환한다.
function myBtnsClickHandler(e) {
alert( e.target.id + ”이 클릭되었습니다”);
}
myBtn1.addEventListener(“click”, myBtnsClickHandler);
myBtn2.addEventListener(“click”, myBtnsClickHandler);
myBtn3.addEventListener(“click”, myBtnsClickHandler);
JavaScript EventHandler 첫번째 인자
IE 구 버전 호환화
IE 구 버전에서 EventHandler의 첫번째 인자로 이벤트가 잘
넘어오지 않는다. 이때 window.event 를 사용한다.
또한 IE 구 버전에서 첫번째 인자의 target 속성은 지원하지
않는데, 이때 srcElement으로 접근 할 수 있다.
function myBtnsClickHandler(e) {
var event = e || window.event;
var targetElement = event.target || event. srcElement;
alert( targetElement.id + ”이 클릭되었습니다”);
}
(addEventListener, attachEvent로 이벤트 등록)
JavaScript removeEventHandler
addEventListener로 등록한 이벤트 리스너를 지울 수 있다.
removeEventListener 을 실행한 순간부터 해당 Handler 함
수는 더 이상 이벤트를 전달 받지 못한다.
ex)
function winowClickHandler() {
window.removeEventListener(”click”, winowClickHandler);
}
window.addEventListener(”click”, winowClickHandler);
IE 호환 태그로는 detachEvent가 있다.
JavaScript Interval
자바스크립트 Interval :
타이머 개념, 일정 주기마다 함수 실행
Interval 생성 : setInterval(함수이름, 주기);
※주기 : 밀리초단위(1000밀리초 == 1초)
Interval 제거: clearInterval(interval아이디);
※주기 : interval아이디는 interval 생성시 변수에 담아 설정
ex)
var intv = setInterval(moving, 1000);
clearInterval(intv);
JavaScript 태그 객체 innerHTML 속성
태그의 innerHTML 속성은 태그 내부값을 불러오며 설정할 수 있다.
<div id=“in_test”>innerHTML속성은 이부분의 내용을 관리합니
다.</div>
ex) <html>
<head>
<script type= "text/javascript">
window.onload = function() {
document.getElementById("in_test").innerHTML = "Hello World";
}
</script>
</head>
<body>
<div id="in_test"></div>
</body>
</html>
JavaScript Class
JavaScript Class는 독특한 선언방식을 갖는다.
선언 : function으로 선언
메서드 : 클래스이름. prototype.메서드이름 = function () {…}
속성(변수) : 선언문, 메서드 안에서 this 사용
생성 : var 변수 = new 클래스이름();
한번 생성한 클래스는 그 변수마다 고유한 속성을 가지며 배
열, Object처럼 활용 할 수 있다.
JavaScript Class 예제
function MyClass (myvarA, myvarB) {
this.a = myvarA;
this.b = myvarB;
this.mix = myvarA + “,” + myvarB;
}
MyClass.prototype.getRandomVar = function() {
if (Math.random() > 0.5)
return this.a;
else
return this.b;
};
CSS background-image 최적화
여러 가지의 이미지를 동적으로 사용하거나 작은 이미지들
을 처리할 때 하나의 이미지를 여러 개 불러 온 후
background-position 속성으로 이미지 위치를 바꾼다.
http://lab.parameter.kr/test/optimization/backgroundposition.html
#act_btn{ background-image: url('res/act_btn.png');
background-position:0px 0px; }
#act_btn:hover{ background-position:-160px 0; }
#act_btn:active{ background-position:-320px 0; }
<script> 와 <style>
브라우저 처리 속도 개선을 위해
<script> 태그보다 <style> 태그를 위에 쓴다.
이 둘은 (default).js 파일이나 (default).css 파일로 분리하면
더더욱 좋다.
스크립트 불러오기
<script type="text/javascript" src=“JS파일.js"></script>
CSS 불러오기
<link rel="stylesheet" href=“경로.css" type="text/css">
PHP
서버에서 실행되는 언어이며,
일반적인 방법으로는 소스를 볼 수 없다.
HTML문서에 포함 할 수 있으며, 단독적으로 실행된 후 출
력 값을 HTML소스에 포함시켜 클라이언트로 보낸다.
<?php (혹은 <?)로 시작하고
?> 로 끝낸다
ex) <?php
//php문법이 위치하는 자리
?>
PHP + HTML
<html>
<head></head>
<body>
<?php
echo “Hello World”;
?>
</body>
</html>
브라우저에서는 기본적으로 php문법을 확인 할 수 없으며
php 실행 결과만 보게 된다.
php에서 html태그를 출력 할 경우 html이 그대로 적용된다.
PHP의 변수 선언과 함수 선언
PHP에서 변수선언은 “$변수이름” 으로 하며 참조 또한
“$변수이름” 으로 한다. (딱히 선언 할 필요가 없다.)
함수는 JavaScript와 마찬가지로 “function 함수이름() {}”으
로 선언하여 “함수이름()” 으로 실행한다.
ex) $a = “Hello”;
$b = $a;
function add($a, $b) {
return $a + $b;
}
echo add(10, 20);
PHP 큰 따옴표 안의 변수
PHP의 큰 따옴표 문자열 안에 있는 변수는 값으로 치환되
어 출력된다.
$a = “Hello”;
echo “$a World!”; //Hello World
이때, 변수와 일반 문자열을 띄어줘야 한다.
$a = “Hello”;
echo “$aWorld!”; (X)
만약 붙여서 쓰고 싶다면 ${변수이름} 으로 처리한다.
$a = “Hello”;
echo “${a}World!”; //HelloWorld
PHP의 점(.) 연산자
PHP의 점 연산자는 문자열과 문자열을 이어 주는 역할을
한다.
ex) $a = “Hello” . “World”;
[ 문제 ]
100 + 200
100 . 200
“100” + “200”
“100” . “200”
$_GET, $_POST, $_REQUEST 변수
php 주소 뒤에 붙는 ?변수1=변수값1&변수2=변수값2
는 php에서 $_GET[ ‘변수1’ ] 같이 참조 할 수 있다.
post 방식으로 넘어온 변수는 $_POST[ ‘변수1’ ] 로 참조하
며
$_REQUEST[ ‘변수1’ ]
는 get이나 post 방식 상관없이 어떤 방식으로나 넘어온 변
수를 참조할 수 있다.
$_GET 예시
http://parameter.kr?postno=19
에서 $_GET[ ‘postno’ ] 는 19를 반환한다.
• 자신만의 홈페이지를 php를 이용하여 더 편리하게 만들
어보자.
• Hint : <a href=“주소?page=2”></a> 로 링크를 걸고
php내부에서는 $_GET으로 넘어온 변수를 if문이나 switch
문으로 분석하여 페이지에 맞는 내용을 echo한다.
<form> 태그
설문 조사 등의 양식(폼)을 만들 때 사용하는 태그
폼을 전송 할 때 php등 서버측에서 폼 전송 값을 처리한다.
<form> 태그의 기본 속성
name : 폼의 이름을 지정한다.
*method : 폼의 전송방식을 지정한다. 주로 get과 post방
식을 사용한다.
*action : 폼의 값을 전송할 페이지를 지정한다.
enctype : 폼의 또 다른 전송방식, 일반적으로 많은 양의 데
이터를 전송 할 때 사용된다.
target : 폼이 전송시 페이지 이동방식
<form action="./result.php“ method="get“>
…(폼 안에 들어갈 태그들)…
</form>
<input> 태그
폼 안의 데이터를 입력 할 수 있는 태그,
type속성으로 종류를 정할 수 있다.
text : 일반적인 글자입력
password : 비밀번호 입력
hidden : 일반적으로 볼 수는 없지만 전송되는 내용
checkbox : 네모난 선택 상자 (중복 선택 가능)
radio : 둥그런 선택 상자 (중복 선택 불가)
file : 파일을 선택 할 수 있는 폼
submit : 폼 값 전송버튼
reset : 폼 초기화 버튼
<input> 1 - <form>과 <input>
form의 name속성은 그리 중요하지 않으나 input의 name
속성은 필수이다. (폼 전송 시 변수 이름으로 정의됨)
<form action="result.php“ method="get“>
<input type="text" name="txt" />
<input type="submit" value="전송" />
</form>
PHP처리 ↓
<?
echo “전송된 값은 “ . $_GET[“txt”] . ”입니다”;
?>
<input> 2 – text/password
<form action=“result.php“ method=”post“>
아이디 : <input type=“text” name=“id” />
<br />
비밀번호 : <input type="password" name=“pw” />
<br />
<input type="submit" value="전송" />
</form>
<?
echo “ID : “ . $_POST[“id”] . ”<br /> PW : ” . $_POST[“id”];
?>
<input> 3 - radio
한 그룹에서 하나만 선택 가능한 둥근 버튼
<input
<input
<input
<input
type="radio"
type="radio"
type="radio"
type="radio"
name="f1"
name="f1"
name="f1"
name="f1"
value="1">1.
value="2">2.
value="3">3.
value=“4">4.
매우 만족
만족
불만족
매우 불만족
radio에서 한 그룹의 name속성은 모두 같다.
폼 전송 시 값은 선택한 radio의 value값으로 넘어간다.
( ‘3. 불만족’ 선택 시 ‘경로?f1=3’ 형식으로 넘어간다)
<input> 4 - checkbox
한 그룹에서 여러 개를 선택 가능한 네모 버튼
<input type="checkbox" name=“windows" value=“true">Windows
<input type="checkbox" name=“mac" value=“true">Mac OS
<input type="checkbox" name=“linux" value=“true">Linux
혹은
<input type="checkbox" name=“os[]" value=“windows">Windows
<input type="checkbox" name=“os[]" value=“mac">Mac OS
<input type="checkbox" name=“os[]" value=“linux">Linux
로 전송. 후자 사용시 PHP에서 배열로 받아옴
<select>, <option>
누르면 숨겨진 옵션이 늘어 나는 선택 도구
<select name="country">
<option value="kr">한국</option>
<option value="us">미국</option>
<option value="cn">중국</option>
<option value="in">인도</option>
<option value="uk">영국</option>
</select>
처리 방법은 radio와 비슷하다
<selection>의 multiple속성
<selection>의 multiple속성을 이용하면
여러 가지 옵션을 선택 할 수 있는 선택 도구가 표시된다.
<select name=“country[ ]” multiple=“multiple”>
<option value="kr">한국</option>
(….)
처리 방식은 checkbox처럼 php에서 array로 처리한다.
PHP fopen 함수
파일을 여는 함수
resource fopen ( string $filename , string $mode [, …] )
ex)
$fp = fopen(‘resource.txt’ , ’r’);
-> 읽기전용으로 “resource.txt “라는 파일을 읽고 $fp에 참
조시킨다.
fwrite, fgets등의 함수를 같이 이용하면 서버 측에 파일을
쓰고 관리 할 수 있다.
PHP fopen 의 2번째 인자 “mode”
r
읽기 전용으로 오픈
r+
읽기와 쓰기 모드로 오픈
w
쓰기 전용으로 오픈. 기존 파일 내용은 완전히 지워지고, 새로 만듦.
파일이 존재하지 않는다면 새로 만듦.
w+
읽기와 쓰기 모드로 오픈. 기존 파일 내용은 완전히 지워지고, 새로 만
듦. 파일이 존재하지 않는다면 새로 만듦.
a
내용 추가, 파일의 끝에 내용을 추가. 파일이 존재하지 않는다면 새로
만듦.
a+
내용 추가와 읽기모드로 오픈 하여 파일의 끝에 내용을 추가함.
파일이 존재하지 않는다면 새로 만듦.
b
바이너리모드로 오픈.
PHP fwrite 함수
서버 측에 파일을 저장하는 함수
<쓰기 권한이 있어야 한다>
int fwrite ( resource $handle , string $string [, int $length ] )
ex)
$fp = fopen(‘test.txt’, ‘w’);
fwrite($fp, ‘ABCD TEST TEST’);
fclose($fp); //파일 닫기 (꼭 안 써줘도 됨)
-> “text.txt”라는 파일을 열거나 새로 만들고 “ABCD TEST
TEST” 라는 내용을 쓴다.
PHP fread 함수
서버 측에 있는 파일을 불러오는 함수
<읽기 권한이 있어야 한다>
string fread ( resource $handle , int $length )
ex)
$fp = fopen(‘test.txt’, ‘r’);
$contents = fread( $fp , filesize(‘test.txt’));
echo $contents;
fclose($fp);
-> “test.txt”라는 파일을 읽기 전용으로 불러와 출력
PHP fgets 함수
fread함수와 비슷하나 줄마다 끊어서 읽어온다
string fgets ( resource $handle [, int $length] )
ex)
$fp = fopen(‘test.txt’, ‘r’);
$content = '';
while( !feof($fp) ) { //feof함수는 파일 포인터가 끝인지를 반환
$content .= fgets($fp, 1024);
}
echo $contents;
fclose($fp);
PHP file_exists 함수
파일이 존재하는지 검사한다.
bool file_exists ( string $filename );
$filename = ‘foo.txt‘;
if (file_exists($filename))
echo "The file $filename exists“ ;
else
echo "The file $filename does not exist“;
PHP copy, unlink 함수
파일을 복사/삭제 한다.
<쓰기 권한 필요>
bool copy ( string $source , string $dest [, …] )
bool unlink ( string $filename [, …] )
ex)
copy("test.txt“, "test_copy.txt“);
unlink("test.txt“);
mySQL
MySQL[마이 에스큐엘]은 SQL에 기반을 두고 있는
관계형 데이터베이스 관리 시스템 중 하나이다. 1998
년 1월에 처음 발표된 MySQL은 모기업인 MySQL
AB의 데이터베이스 서버 및 개발 도구 제품군 중 하
나의 구성요소가 되었다.
인터넷을 막 시작한 많은 사람들은 오라클이나 IBM 또는 인포믹스 등과 같은 상용 데이터베
이스 시스템의 대안으로, MySQL의 개방형 소스 버전에 흥미를 느끼게 된다. MySQL은 현재
GNU GPL 개방형 소스 시스템, 또는 비즈니스용을 위한 MySQL 네트웍 가입 등 두 개의 라이
선스 규칙 하에서 활용이 가능하다.
MySQL은 리눅스, 유닉스 그리고 윈도우 등 사실상 모든 플랫폼에서 운영될 수 있다. MySQL
은 커널 스레드를 사용한 완전한 멀티스레드이며 C, C++, Eiffel, Java, Perl, PHP, Python, Tcl
등을 포함한 많은 프로그래밍 언어를 지원할 수 있는 API를 제공한다.
MySQL은 데이터웨어하우징, 전자상거래, 웹데이터베이스, 로깅 및 분산 애플리케이션 등 광
범위한 응용프로그램에서 사용되며, 상용 소프트웨어 및 그 외 다른 기술의 일부로 내장되는
경우가 점차 늘고 있다. MySQL AB에 따르면, 전 세계적으로 6백만 개 이상의 MySQL이 설치
되어 사용되고 있다고 한다.
테이블(Table)
열과 행으로 구성된 “표”
가로 줄 : 행(row) = record
세로 줄 : 열(column) = field
데이터 베이스 (Database : DB)
데이터베이스(database)는 여러 응용 시스템들의 통합된
정보들을 저장하여 운영할 수 있는 공용 데이터들의 묶음
이다.
phpMyAdmin
mySQL을 웹으로 관리 - http://127.0.0.1/myadmin/
phpMyAdmin 둘러보기 - db
데이터베이스
phpMyAdmin 둘러보기 - 테이블
phpMyAdmin 둘러보기 - 테이블
phpMyAdmin 둘러보기 - 테이블
phpMyAdmin 둘러보기 – 데이터 삽입
INSERT INTO `test2`.`class` (`no` ,
`name` ,
`number`
)
VALUES ('1', '이영수', '010-1234-5678'
);
phpMyAdmin 둘러보기 – 데이터 로드
SELECT *
FROM `class`
LIMIT 0 , 30
phpMyAdmin 둘러보기 – 데이터 업데이트
UPDATE `test2`.`class` SET `number` = '010-8888-8888' WHERE `class`.`no` =1
AND `class`.`name` = '이영수' AND `class`.`number` = '010-1234-5678' LIMIT 1 ;
phpMyAdmin 둘러보기 – 데이터 삭제
phpMyAdmin – 한글 깨짐 문제 해결
데이터베이스/테이블 -> 테이블 작업 -> Collation을
utf8_unicode_ci 혹은 utf8_general_ci로 설정
가장 좋은 방법 : DB 생성 / 테이블 생성시 Collation 설정
SQL, 쿼리
SQL (Structured Query Language) : 데이터베이스의 일종
의 언어
DB 생성 및 관리, 테이블 생성 및 관리, 데이터 생성 및 관
리 등을 할 수 있다.
phpMyAdmin에서 한걸 수동으로 하는 것?
=> 수동으로 하던 쿼리 작업을 phpMyAdmin에서
자동으로 해 주는 것.
SQL 쿼리 문 요약 정리
http://blog.prev.kr/20150953244
php와 mySQL의 연동
php에서 데이터베이스(mySQL) 에 접근 하고 관리 할 수 있다.
이로 사용자의 반응에 따라 DB에 자료를 생성하고, 불러오는
작업을 통해 온라인 자동화가 가능하다.
phpMyAdmin은 웹 페이지 탐색을 통해 DB를 관리 할 수 있
었지만 php에서 DB의 접근은 SQL문을 직접 써가며 활용 해
야 한다.
php에서 mySQL 연결
php에서 mysql 연결
-> mysql_connect(서버 주소, 아이디, 비밀번호);
ex)
$db = mysql_connect("localhost“, “root”, “apmsetup”);
-> 아이디 root, 비번 apmsetup으로 localhost(127.0.0.1)에
접속 한 후 $db에 저장
php에서 mySQL 연결 예제
<?php
$db = mysql_connect("localhost“, “root”, “apmsetup”);
if ($db)
echo "DB연결에 성공했습니다.“;
else
echo "DB연결에 실패했습니다.“;
?>
php에서 mySQL DB 선택
php에서 mySQL DB 선택
-> mysql_select_db(DB명, $db);
ex)
$db = mysql_connect("localhost“, “root”, “apmsetup”);
mysql_select_db(“database1”, $db);
php에서 mySQL DB 선택 예제
<?php
$db = mysql_connect("localhost“, “root”, “apmsetup”);
$selectdb = mysql_select_db("DB명", $db);
if ($selectdb)
echo "DB선택에 성공했습니다.“;
else
echo "DB선택에 실패했습니다.“;
?>
php에서 mySQL 쿼리 실행
php에서 mySQL 쿼리 실행
-> mysql_query(쿼리, $db);
ex)
$db = mysql_connect("localhost“, “root”, “apmsetup”);
mysql_select_db(“database1”, $db);
mysql_query(쿼리문, $db);
php에서 mySQL 쿼리 실행 예제
<?php
$db = mysql_connect("localhost“, “root”, “apmsetup”);
mysql_select_db(“database1”, $db);
$query = "INSERT INTO user (name, phoneNumber,
location, age) VALUES (‘hong-gil-dong','010-12123434',‘korea','50')“ ;
$result = mysql_query($query, $db);
if ($result)
echo "쿼리가 성공했습니다.“;
else
echo "쿼리가 실패했습니다.“;
?>
쿼리 : INSERT 문
INSERT INTO 테이블명 (컬럼1, 컬럼2....컬럼n) VALUES (’데이터1',’데이터
2’....’데이터n’)
= INSERT INTO 테이블명 VALUES (데이터1,데이터2....데이터n)
: 테이블 의 컬럼1, 컬럼2…컬럼n 에 각각 데이터1,데이터2…데이터n을 삽입한다.
컬럼은 생략 할 수 있으며, 이때 컬럼 수와 데이터수가 같이 않을 시 제대로 삽
입되지 않는다.
ex)
INSERT INTO adress (no, name, tell ) VALUES ( 1',‘이영수','010-1234-5678‘ )
= INSERT INTO adress VALUES ( 1',‘이영수','010-1234-5678‘ )
php에서 mySQL 쿼리 실행 예제2
<?php
$db = mysql_connect("localhost“, “root”, “apmsetup”);
mysql_select_db(“database1”, $db);
$query = “SELECT * FROM user” ;
$result = mysql_query($query, $db);
$row = mysql_fetch_array($result);
if ($result)
echo $row[name] . $row[phoneNumber] . $row[location] . $row[age];
else
echo "쿼리가 실패했습니다.“;
?>
쿼리 : SELECT 문
SELECT 컬럼명 FROM 테이블명
: 특정 테이블 의 특정 컬럼 데이터를 불러온다
ex)
SELECT name FROM adress
: adress 테이블 에서 name 컬럼의 데이터를 불러옴
SELECT * FROM adress
: adress 테이블 에서 모든 컬럼의 데이터를 불러옴
여러 줄의 데이터 불러오기 1
(…)
$result = mysql_query($query, $db);
$row = mysql_fetch_array($result);
echo $row[name] . $row[phoneNumber] . $row[location] . $row[age];
$row = mysql_fetch_array($result);
echo $row[name] . $row[phoneNumber] . $row[location] . $row[age];
(…)
위처럼 코드 작성시 데이터를 2줄 불러온다
여러 줄의 데이터 불러오기 2
(…)
$result = mysql_query($query, $db);
while ($row = mysql_fetch_array($result)) {
echo $row[name] . $row[phoneNumber] . $row[location] . $row[age];
}
(…)
위처럼 코드 작성시 데이터를 모든 줄의 데이터를 불러 오게
된다.
여러 줄의 데이터 불러오기 3
<?php
$db = mysql_connect("localhost“, “root”, “apmsetup”);
mysql_select_db(“database1”, $db);
$query = “SELECT * FROM user” ;
$result = mysql_query($query, $db);
while ($row = mysql_fetch_array($result)) {
echo “name : ” . $row[name] . “<br>” ;
echo “phoneNumber : ” . $row[phoneNumber] . “<br>” ;
echo “location : ” . $row[location] . “<br>” ;
echo “age : ” . $row[age] . “<br><br>” ;
}
?>
쿼리 : SELECT문의 조건
SELECT 컬럼명 FROM 테이블명 WHERE 조건
쿼리문은 편리하게 원하는 데이터만 가져 올 수 도 있다.
이때 ‘WHERE 조건 ’ 을 쿼리 뒤에 추가한다.
ex)
SELECT name FROM address WHERE gender=‘man’
adress 테이블 에서 name 컬럼의 데이터 중 gender 컬럼이 ‘man’ 인 데
이터만 불러옴
SELECT 문의 조건 예제
<?php
$db = mysql_connect("localhost“, “root”, “apmsetup”);
mysql_select_db(“database1”, $db);
$query = “SELECT * FROM user WHERE age > 5” ;
$result = mysql_query($query, $db);
while ($row = mysql_fetch_array($result)) {
…
쿼리 : SELECT문의 LIKE 조건
SELECT 컬럼명 FROM 테이블명 WHERE 컬럼명 LIKE '문
자%'
특정 문자를 포함하는 데이터를 불러 오고 싶을 경우,
WHERE 컬럼 LIKE ‘문자%’ 를 사용한다
- %는 모든 문자를 의미한다 (‘*’과 비슷)
- 문자 양쪽에 %를 붙일 경우 문자를 포함하는 모든 데이터
를 불러오며, 한쪽에만 쓸 경우, 그 방향으로 문자를 포함하는
데이터를 불러온다.
쿼리 : SELECT문의 LIKE 조건 상세히
SELECT * FROM adress WHERE name LIKE ‘a%‘
-> ‘apple, ajax’ 등 의 데이터 불러옴
(‘banana, yoga’ 등의 데이터는 불러 오지 않음)
SELECT * FROM adress WHERE name LIKE ‘%a%‘
-> ‘apple, ajax, banana, yoga’ 등 의 데이터 불러옴
SELECT * FROM adress WHERE name LIKE ‘%a‘
-> ‘yoga’ 등 의 데이터 불러옴
(‘banana, apple, ajax’ 등의 데이터는 불러 오지 않음)
SELECT 문의 LIKE 조건 예제
<?php
$db = mysql_connect("localhost“, “root”, “apmsetup”);
mysql_select_db(“database1”, $db);
$query = “SELECT * FROM user WHERE name LIKE 김%” ;
$result = mysql_query($query, $db);
while ($row = mysql_fetch_array($result)) {
…
쿼리 : SELECT문의 정렬
SELECT 컬럼명 FROM 테이블명 ORDER BY 컬럼명 [ASCIDSC/DESC]
테이블에 있는 컬럼을 컬럼 순서에 맞게 오름차순(기본=ASCIDSC)/내
림차순으로 가져옴
ex )
SELECT * FROM adress ORDER BY no (ASCIDSC)
: adress 테이블의 모든 컬럼 데이터를 no 컬럼의 오름차순으로 가져옴
SELECT * FROM adress ORDER BY no DESC
: adress 테이블의 모든 컬럼 데이터를 no 컬럼의 내림차순으로 가져옴
SELECT 문의 정렬 예제
<?php
$db = mysql_connect("localhost“, “root”, “apmsetup”);
mysql_select_db(“database1”, $db);
$query = “SELECT * FROM user ORDER BY age” ;
$result = mysql_query($query, $db);
while ($row = mysql_fetch_array($result)) {
…
쿼리 : SELECT문의 제한
SELECT 컬럼명 FROM 테이블명 LIMIT 수
데이터를 특정 수만큼 제한하여 불러온다.
SELECT 컬럼명 FROM 테이블명 LIMIT 인덱스,수
데이터를 특정 인덱스부터 특정 수만큼 제한하여 불러온다.
ex)
SELECT name FROM adress LIMIT 5
: 데이터를 5개만큼 제한하여 불러옴
SELECT * FROM adress LIMIT 4,5
: 데이터를 4번부터(0번이 처음) 5개만큼 제한하여 불러옴
SELECT 문의 제한 예제
<?php
$db = mysql_connect("localhost“, “root”, “apmsetup”);
mysql_select_db(“database1”, $db);
$query = “SELECT * FROM user LIMIT 3” ;
$result = mysql_query($query, $db);
while ($row = mysql_fetch_array($result)) {
…
쿼리 : UPDATE 문
UPDATE 테이블명 SET 컬럼1='데이터1‘ , 컬럼2='데이터
2', .... 컬럼n='데이터n‘
데이터를 수정한다.
뒤에 WHERE 조건문을 추가하여 원하는 데이터를 수정 할 수 있다. (미
지정시 모든 데이터 수정)
ex)
UPDATE adress SET name=‘tester‘ , tell='010-9876-5432‘
: adress 테이블의 모든 데이터의 name 컬럼을 tester, tell 컬럼을 010-98765432로 수정한다.
UPDATE adress SET tell='010-1234-5678' WHERE name=‘tester’
: adress 테이블의 name 컬럼이 tester인 데이터의 tell 컬럼을 010-9876-5432
로 수정한다.
UPDATE 문 예제
<?php
$db = mysql_connect("localhost“, “root”, “apmsetup”);
mysql_select_db(“database1”, $db);
$name = $_REQUEST[ ‘name’ ] ;
$age = $_REQUEST[ ‘age’ ] ;
$location = $_REQUEST[ ‘location’ ] ;
$query = “UPDATE user SET age=‘$age’, location=‘$location’ WHERE
name=‘$name’” ;
$result = mysql_query($query, $db);
echo $result ? “쿼리 성공” : “쿼리 실패”;
?>
쿼리 : DELETE 문
DELETE FROM 테이블명
DELETE FROM 테이블명 WHERE 조건
(조건에 맞는) 데이터를 삭제한다.
ex)
DELETE FROM adress WHERE name = ‘tester’
: adress테이블의 name이 ‘tester’ 인 데이터를 삭제한다.
DELETE 문 예제
<?php
$db = mysql_connect("localhost“, “root”, “apmsetup”);
mysql_select_db(“database1”, $db);
$name = $_REQUEST[ ‘name’ ] ;
$query = “DELETE FROM user WHERE name=‘$name’” ;
$result = mysql_query($query, $db);
echo $result ? “쿼리 성공” : “쿼리 실패”;
?>
쿼리 : 조건 여러 개 쓰기
SELECT 컬럼명 FROM 테이블명 WHERE 조건 AND 조건
SELECT 컬럼명 FROM 테이블명 WHERE 조건 AND 조건 AND 조건
AND 연산자로 여러 개의 조건을 쓸 수 있다.
ex)
SELECT name FROM adress WHERE age > 5 AND gender = ‘man’
: adress 테이블에서 age 가 5 보다 크고 gender가 ‘man’ 인 모든
‘name’ 데이터를 불러온다.
SELECT * FROM adress WHERE location = ‘Seoul’ AND gender =
‘woman’ AND age = 17
: adress 테이블에서 location 이 ‘Seoul’이고 gender가 ‘woman’ 이며
age가 17인 모든 데이터를 불러온다.
쿼리 : 조건/제한/정렬 등 동시에 쓰기
쿼리문은 조건, 제한, 정렬등의 명령을 동시에 사용 할 수
있다.
SELECT 컬럼명 FROM 테이블명 WHERE 조건 ORDER
BY 컬럼명 [ASCIDSC/DESC] LIMIT 수
ex)
SELECT * FROM adress WHERE location = ‘Seoul’ AND gender =
‘man’ ORDER BY age DESC LIMIT 0,10
adress 컬럼에서 location 이 ‘Seoul’ 이고 gender 가 ‘man’인 모든 데이
터를 age컬럼 내림차순으로 정렬하여 0번부터 10개를 가져온다