funMV

2016년 1월 21일 목요일

bootstrap

0_bootstrap case

w3school의 youtube 한글 강의 자료를 요약하였다.

start from scratch, 처음부터 차근차근 시작한다는 의미

Container

bootstrap은 jquery와 css에 기반하므로 관련 파일들을 html에 포함해야 한다.

헤드에 css 파일 추가, 하단에 jquery와 bootstrap.js을 순서지켜서 추가한다.

<div>..</div>로 둘러싸고 속성으로 class=“container”를 삽입한다.

<div class=“container”>…</div>가 된다.

Jumbotron

Jumbotron은 강조를 위한 영역 설정(그레이박스 및 커진 글씨체로 나타남)에 사용.

<div>의 속성에 class=“jumbotron” 추가

Button

버턴을 추가할 때(다른 형식도 비슷함) 속성 표시에 같은 단어가 두 번을 반복해서 나타남.

class = “btn btn-default”처럼 btn btn-…형태임. 따라서,

<button type=“button” class=“btn btn-default”> Text </button> 또는

<a href=“#” class=“btn btn-info btn-lg>Search</a> 등으로 링크 연결 버턴에 사용한다.

btn-default, btn-info, btn-warning,..등의 다양한 버턴이 있고 색 차이로 용도 표시.

btn-xs, btn-sm, btn-md, btn-lg 등으로 버턴 크기를 설정

Glyphicon, 상형문자

속성 표기에는 위와 비슷하게 같은 단어가 두번 표시됨.

class=“glyphicon glyphicon-print” 는 프린트모양 상형문자 추가

보통 <span>태그를 사용하여 속성으로 추가하면 된다.

위의 Search 단어 앞에다 추가하면

<span class=“glyphicon glyphicon-search”></span> Search</a>

*span 태그는 자체로는 아무일도 하지 않으나, 한 문장 단위에서 css 스타일 지정에 사용

Multicolumn

줄(row)과 칸(column)이 있으며, 각각의 설정이 필요하다.

한 줄 설정은 class=“row” 속성으로 <div>태그로 둘러쌈.

줄 내의 칸은 class=“col-xs-3” 등으로 사용. 전체 칸은 항상 12개이므로 개별 칸을 합쳤을 때 12가 되어야 함.

칸 폭은 xs, sm, md, lg 등으로 적용 기기에 따라 나누어 짐

<div class=“row></div>로 먼저 한 줄을 둘러 싼다. 이 안에 칸에 대한 것을 넣음. 예를 들면, <div class=“col-sm-4>문자 문자 ..</div> 는 4칸 짜리 설정이므로 이런 것이 3개가 들어가면 12가 된다.

Menu

html 자체가 가지는 기본 메뉴는 다음과 같다

<ul>

</ul>

여기에 클래스를 추가한다. <ul class=“nav nav-tabs“>이다. 속성에 nav가 두 번 들어 갔다. nav-tabs외에 nav-pills(알약 디자인처럼 나열 표시하는 형식)의 두 가지 타입이 있다.

또 <li>탭에 class=“active”를 주면 화면 표시 때에 그 메뉴가 선택 됨.

메뉴 밑에 부 메뉴도 가능한데, 부메뉴 추가할 메뉴를 고르고 그 아래에 <li class=“dropdown”>을 사용한다.

<span class=“caret”>도 사용하는데 부메뉴 존재를 나타내는 펼침 표기인 삼각형 표시이다.

Navigation bar

페이지의 상단에 고정되어 있는 방향 바이다.

<nav class=“navbar navbar-default”> </nav>로 둘러싼다.

nav는 html5의 태그 중의 하나이다.

navbar-default 대신에 navbar-inverse를 사용하면 배경 값이 역으로 되어 색다른 디자인이 됨.

navbar-fixed-top(bottom)를 추가하면 화면 부분이 아래위로 스크롤되어도 navbar는 스크롤 안되고 상단에(하단에) 고정되는 효과를 가지게 할 수 있다.

navbar-right는 메뉴를 오른쪽 끝 단에 고정.

<ul class=“nav navbar-nav navbar-right>…</ul>처럼 사용 가능

class=“nav navbar-header”와 class=“nav navbar-nav”속성을 사용한다.

접을수 있는 방향 바를 만들기 위해서는 navbar-header 부분 수정

</button>

toggle은 토글된다는 의미, collapse는 접을 수 있음을 의미한다.

#이 붙은 것은 id표시고, 하단에 id가 myNavBar인 부분과 연동.

icon-bar는 줄 표시가 3개가 있고, 화면이 좁을 때는 메뉴대신에 줄 3개가 표시됨.

참고 할 만한 사이트

Bootstrap 네비게이션바, http://m.blog.naver.com/naripuru/220232331848

밑바닥부터 홈페이지 만들기, http://unikys.tistory.com/333

http://unikys.tistory.com/335

http://unikys.tistory.com/369

2016년 1월 11일 월요일

jQuery의 기본 문법

태그 선택

html 문서 내에서 임의으 태그를 선택할 수 있다.

$(‘li’).css(‘color’, ‘red’);

항상 $로 시작한다. $(..)로 괄호가 있으므로 $는 함수이다. 따라서 $를 jquery 함수라 부른다. 인자에는 다양한 값이 들어 갈 수 있으나 일반적 인자는 css 선택자이다.

위 명령은 li라는 태그 이름을 가진 요소의 선택자이다.

$(..) 함수가 실행되면 리턴한 값은 jquery 객체가 된다. 객체의 메쏘드로써 css(..)를 가지며, 이는 요소 li에 다음과 같은 작용을 한다.

즉, 실행되면 html의 태그 li의 스타일 속성에 색 속성을 추가해 준다.

이러한 사항을 기존의 DOM 코드로 해 주려면 요소 선택부터 좀 더 복잡하다.

var lis = document.getElementsByTagName(‘li’);

로 선택하면 된다. 수행 후, 여러 요소가 선택되어 배열로 넘어오고,

for(…) {…}

로 루프를 돌려 각각에 대해 필요한 처리를 해 주어야 한다.

클래스 선택

DOM 코드는

var lis = document.getElementsByClassName(‘active’);

이다. 이처럼 class명이 active인 요소를 선택할 때는

$(‘.active’).css(…)

로 해준다.

id 선택

DOM코드

var lis = document.getElementsById(‘active’);

는

$(‘#active’).css(‘color’, ’red’).css(‘textDecoration’, ‘underline’);

처럼 선택 후, 색은 붉게, 밑줄을 그어 준다.

여기서 $(..).css(..)를 실행하면 .css(..)도 메쏘드이고 리턴 값이 있을 것이다. 이 리턴 값은 또 객체이다.

따라서 계속해서 .css(..)로 객체 메쏘드를 연속 호출해 주었다. 이를 chaining이라 부른다.

참고

2016년 1월 8일 금요일

javascript 실행 하기

1. inline 방식으로 js 구현

정보(html)와 제어(js)가 혼재. 유지보수가 어렵다.

<!DOCTYPE html>

<html>

<body>

<input type="button" onclick="alert('Hello world')" value="Hello world" />

</body>

</html>

button이 onclick되면 alert(…)를 실행함. alert부분이 js 코드임. button, onclick 등은 이미 약속된 html 속성임.

2. 스크립트 방식으로 삽입

<!DOCTYPE html>

<html>

<body>

<input type="button" id="hw" value="Hello world" />

<script type="text/javascript">

var hw = document.getElementById('hw');

hw.addEventListener('click', function(){

alert('Hello world');

})

</script>

</body>

</html>

html5부터는 <script type="text/javascript">부분을 <script>로만 표시해도 됨. var hw에서 })까지가 js코드 이고 나머지는 html임.

3. 외부 파일로 js 코드 분리

js를 파일로 만들어 분리. 정보와 제어의 분리. 재활용성 강화. 재 사용시 전송량 감소 등의 잇점이 있다.

html 파일

<!DOCTYPE html>

<html>

<body>

<input type="button" id="hw" value="Hello world" />

<script type="text/javascript" src="script2.js"></script>

</body>

</html>

script2.js 파일

var hw = document.getElementById('hw');

hw.addEventListener('click', function(){

alert('Hello world');

})

html은 100%의 html 코드만으로 이루어짐.

html은 js를 만나면 화면 렌드링을 멈추고 js 파일을 다운한다. 따라서 body 뒷부분에 위치시키는 것이 유리.

<script type="text/javascript" src="script2.js"></script> 부분은 script2.js파일의 다운이 완료되면 js 스크립트를 <script>와 </script>사이에 삽입하게 된다.

3. script 파일의 위치

스크립트를 head 위치에 넣을 수 있는데 body에 있는 button이 생성되기 전이므로 오류가 발생한다. 따라서 브라우저의 모든 구성 요소의 로드가 끝났을 때 js가 호출되어야 한다. 만일 head부에 넣으려면 js부분은 windows.onload=function(){}으로 감싸주면 구성 요소가 로딩된 후에 js 코드가 실행되게 된다.

window.onload = function(){

var hw = document.getElementById('hw');

hw.addEventListener('click', function(){

alert('Hello world');

})

}

4. 실행 방법

파일을 저장하고 chrome의 파일->열기에서 오픈하면 자동실행.

js 파일만 실행 시는 Ctrl+Shift+J(windows), Comm+Alt+J(Mac)로 샐행 가능.

참고

[1] 생활코딩, js 로드하기.

2016년 1월 7일 목요일

php 실행 방법

php는 서버쪽에서 실행되는 스크립트다. 따라서 서버가 실행될 수 있는 환경이 만들어져 있어야 한다. 이를 위해 Bitnami라는 툴을 설치하여 환경을 구성해 준다.

Bitnami 툴은 Apache, Mysql, Php 등의 서버에서 필요한 요소를 다 가지고 있어 이들의 약자로 AMP라 부른다.

Windows용 설치 파일은 WAMP, MAC용은 MAMP 파일을 다운받아 설치한다. 설치 방법은 여기를 참고한다.

설치 후에는 localhost의 기본 폴더의 위치가 어디인지 확인해야 한다. 이 위치에 기본 페이지인 index.html가 있다.

Windows에서는

~설치위치/mampstack-5.6.26-1/apache2/htdocs

이고, mac에서는

/Applications/mampstack-5.6.26-1/apache2/htdocs

이다.

서버 실행은 Mac에서는
cmd+space bar를 눌러 manager-osx을 찾아 런한다. 툴의 Manager-server 탭을 선택하고 MySQL db와 Apache web server를 시작한다.

테스트를 위해 localhost에 php_test 폴더를 만들고 아래의 demo3.html 파일과 몇 개의 관련 파일을 만들었다. mac에서 접속 시에는 브라우저의 주소창에

localhost:8080/php_test/demo3.html

로 접속하면 된다.

파일이 3개가 필요한데 아래와 같다. 특히 php파일은 demo3.html과 같은 폴더 위치에 있어야 한다. php파일의 실행은 주소창에

localhost:8080/php_test/receivetxt.php

이지만 단독으로 실행하려면 코드 내에서 echo “hello php”로 값을 출력해 보면 된다.

receivetxt.php (업로드 파일을 받아 처리할 서버쪽 스크립트 파일)

—————————

<?php

echo file_get_contents($_FILES["image"]["name"]);

$output = 'outputtxt.txt';

file_put_contents($\$$output, file_get_contents($\$$_FILES["image"]["name"]));

내용을 화면에 출력하고 파일을 저장한다. txt파일은 저장되었지만 이미지파일은 안됨.

sendtxt.txt (전송될 파일)

—————————

vwxyz

demo3.html (클라이언트 파일)

—————————

<html>

<body>

<p>filename : <span id="filename"></span></p>

<p>contents : <span id="contents"></span></p>

formdata = new FormData();

$("#image_to_upload").on("change", function() {

var file = this.files[0];

$('#filename').text(file.name); // 업로드한 파일 이름 화면 표시

if (formdata) {

formdata.append("image", file);

$.ajax({

url: "./receivetxt.php", // 같은 폴더 위치. php가 파일을 받음.

type: "POST",

data: formdata,

processData: false,

contentType: false,

success: function(data) {

// callback함수이고 서버가 php의 실행 에코를 data 인자로 넘겨줌

$('#filename').text(data); // 에코 data 화면 표시

}

});

}

});

</script>

</body>

</html>

수행 작업은 client에서 파일 sendtxt.txt를 업로드해서 server로 보낸다. 서버의 receivetxt.php는 이 파일을 받아 내용을 화면에 echo한다. 만일 통신이 성공하면 이 echo는 다시 client로 전송되어 html 내에 표시된다. 비동기 통신에 관련된 내용은 여기에서 참고한다.

References

[1] 생활코딩, php

[2] 생활코딩, Ajax

[3] Send images through Ajax

2016년 1월 6일 수요일

PHP 기본

client가 browser에서 특정 url 주소를 입력하면 서버컴에 있는 웹서버(예를 들면 apache)는 해당 html 파일을 찾아서 client로 보내준다.

client컴의 사용자가 브라우저에서 입력이나 파일 업로드를 실행하면 html 내의 form의 action부분에 명시된 php파일이 서버로 호출된다. 웹서버 자신은 php를 직접처리 못하므로 하단의 php engine에게 php파일 처리를 위임한다. php 코드는 html을 만들어 내고 이에 따라 동적으로 생성된 문장을 html 코드에 추가하여 이를 client로 다시 보내고 browser는 이를 표시한다.

html 문서 내의 "<?php"와 "?>" 사이에 코드를 삽입하여 사용한다.

<html>

<body>

<?php

echo “Hello world”;

</body>

</html>

var_dump(7); # 인자에 변수나 상수, 배열 등을 넣으면 타입 출력

$a=1; #변수의 선언

echo $a+1; #2

echo “<br />” #줄바꿈

$first = “coding”; #문자열 변수 선언

echo $first.” everybody”; # “.”으로 두 문자열 연결해줌, “coding everybody”출력

<?php

echo $_GET[‘id’];

browser에서 http://localhost/IO_form/25.php?id=egoing으로 호출 하면 server의 php코드는 egoing을 출력한다. http는 hyper text transfer protocal로 전송규약이다.

클라이언트(browser)에서 실행된 html 코드
<html>

<body>

id : <input type="text" name="id" />

password : <input type="text" name="password" />

</form>

</body>

</html>

서버쪽 php 코드 (위 html과 같은 위치에 있어야 함)
<?php

echo ${\$}$_POST['id'].','.${\$}$_POST['password'];

client가 POST방식으로 호출 시는 url에 파라메터가 표시되지 않으며, php에서도 $_POST로 넘어온 값을 얻는다.

조건문

and, or, true, false와 같은 연산자를 사용한다.

<?php

if(${\$}$_POST[‘id’] ===‘going’ and $_POST[‘password’]===‘1111’) {

echo ‘right’;

} else {

echo “wrong”;

}

반복문

for, whie를 사용한다.

<?php

for(${\$}$i = 0; ${\$}$i < 10; $i++){

echo 'coding everybody' . $i . "<br />";

}

for(${\$}$i = 0; ${\$}$i < 10; $i++){

if(${\$}$i === 5){

break;

}

echo "coding everybody{$i}<br />";

}

함수의 사용

<?php

function get_arguments(${\$}$arg1, $arg2=50) {

return ${\$}$arg1 + $arg2;

}

echo get_arguments(10, 20);

echo get_arguments(20, 30);

배열의 사용

<?php

$member = ['egoing', 'k8805', 'sorialgi'];

$member2 = array('egoing', 'k8805', 'sorialgi'); #v5.4이하 하위 호환성을 위해 사용

<?php

function get_members(){

return ['egoing', 'k8805', 'sorialgi'];

}

$members = get_members();

for(${\$}$i = 0; ${\$}$i < count(${\$}$members); $i++){

echo ucfirst(${\$}$members[$i]).'<br />'; #ucfirst는 첫자를 대문자로 바꾸어 출력하게 해줌

}

배열 조작 명령

array_push, array_merge, array_unshift, array_splice, array_shift, array_pop, sort, rsort

연관배열은 요소접근 index가 정수가 아니고 문자열인 배열

<?php

$grades = array('egoing'=>10, 'k8805'=>6, 'sorialgi'=>80);

<?php

${\$}$grades = []; ${\$}$grades['egoing'] = 10; ${\$}$grades['k8805'] = 6; ${\$}$grades['sorialgi'] = 80;

var_dump($grades);

연관배열의 반복작업은 foreach를 사용

<?php

$grades = array('egoing'=>10, 'k8805'=>6, 'sorialgi'=>80);

foreach(${\$}$grades as ${\$}$key => ${\$}$value){

echo "key: {${\$}$key} value:{$value}<br />";

}

파일제어

복사

$file = 'readme.txt';

$newfile = 'example.txt.bak';

if (!copy(${\$}$file, $newfile)) {

echo "failed to copy $file...\n";

}

삭제

unlink('deleteme.txt');

읽기

$file = './readme.txt';

echo file_get_contents($file);

쓰기

$file = './writeme.txt';

file_put_contents($file, 'coding everybody');

네트웍 통해서 읽기

$homepage = file_get_contents('http://php.net/manual/en/function.file-get-contents.php');

echo $homepage;

이미지데이터 업로드

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<input type="hidden" name="MAX_FILE_SIZE" value="30000" />
#서버로 전송되는 데이터 중에서 숨겨진 것 정의. 최대파일 크기를 제한 시킴

</form>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<?php

#var_dump($_FILES) #업로드 후에 넘어온 변수 확인할 수 있음

#exit; #테스트 시 이후 부분은 무시

ini_set("display_errors", "1"); #에러를 화면에 출력

$uploaddir = 'C:\BitNami\wampstack-5.4.20-0\apache2\htdocs\upload\file\\';
#서버 컴퓨터에 업로드된 전송된 이미지를 저장할 위치

${\$}$uploadfile = ${\$}$uploaddir . basename($_FILES['userfile']['name']);
#저장할 경로+파일명. basename은 경로나 기타추가된 사항은 뗴어내고 파일이름 자체만 리턴하는 함수

echo '<pre>';

if (move_uploaded_file(${\$}$_FILES['userfile']['tmp_name'], $uploadfile)) {
#move~함수는 보안이나 형식 체크후 파일을 $uploadfile 위치로 옮김

echo "파일이 유효하고, 성공적으로 업로드 되었습니다.\n";

} else {

print "파일 업로드 공격의 가능성이 있습니다!\n";

}

echo '자세한 디버깅 정보입니다:';

print_r($_FILES);

print "</pre>";

<img src=“file/<?=$_FILES[‘user file’][‘name’]?>” />
#서버의 특정경로 위치에 접근하여 파일가져와서 client 화면에 출력하기 위함.
#(?=<pattern>)은 pattern이 존재하는지 찾아붙임

</body>

References

[1] PHP 기본수업

2016년 1월 5일 화요일

정규표현식

표현식

정규표현식은 구분자라고 불리는 특수문자로 둘러싸임:

/, #, +, %, …

/foo bar/im #im은 pattern modifier라고 부르며 탐색 패턴을 변경 시켜 줌. i는 대소문자 구별을 없애줌. m은 여러줄에 적용.

preg_match(“/php/i”, “PHP is the web scrip”, $matches);
preg_match는 PHP에서 제공하는 함수로, 첫인자로 두번째인자를 탐색. 결과를 세번째 인자에 저장.

\b는 경계 문자를 검색

/\bweb\b/i #…the web script… 처럼 독립된 ‘web’문자를 검색. ‘website’라는 단어는 검색 못함

$\$$subject = ’coding everybody http://tutorials.org egoing@egoing.com ...’

에서 url검색하면

preg_match(‘~http://\w+\.\w+~’,…)

~는 내부에 //떄문에 경계표시를 위해 /대신 사용. \w는 문자검색, +는 1개 이상이니 tutorials를 검색.

\.는 .을 escape시켜서 .자체를 검색.

preg_match(‘~(http://\w+\.\w+)\s(\w+@\w+\.\w)~’, $\$$subject, $\$$matches);

‘\s’는 공백을 나타내고 ()는 capturing이라고 하며 matches에

$\$$matches[0] = “http:… com” #전체 검색 결과 저장

$\$$matches[1] = “http://tutorial.com”

$\$$matches[2] = “egoing@egoing.com”

배열 형태로 부분 부분 추출이 가능.

검색

preg_match('@^(?:http://)?([^/]+)@i',"http://www.php.com/indax.html", $\$$matches);

@...@ 구분자(정규표현식의 시작과 끝). i는 대소문자 동시 매칭, ^는 경계, 즉 행의 시작점을 매칭한다는 의미,

^(..)는 괄호에 있는 항으로 시작하는 행을 검색.
()안에 있는 ?:는 원래 ()가 capturing이므로 $\$$matches[1]에 값이 들어가야 하지만 그러지 말라는 의미. 'http'는 보통 따로 저장하지 않아도 됨.
?는 수량자로 0~1개이므로 "http://"가 하나 있거나 없어도 된다는 의미.
[^/]+는 /을 제외한 어떤 글자가 1개 이상 나와야 된다는 의미.

$\$$host = $\$$matches[1]가 실행되면 $\$$host에 www.php.com이 저장됨.

preg_match('/[^.]+\.[^.]+$\$$/', $\$$host, $\$$matches);

/../는 구분자. [^.]+는 .을 제외한 어떤 문자가 1개이상 나와야 함. \.는 .의 escape니까 문자 .자체를 의미함.
다시 동일한 [^.]가 나온 후, 마지막에 $\$$가 나왔으므로 $\$$는 문자의 끝에서 매칭을 한다는 의미이다.
따라서 .을 중심으로 양쪽의 두 단어를 매칭하는데 www.php가 아니라 php.com이 얻어짐.

또 다른 예를 살펴 보면,

$\$$str = 'foobar: 2008';
preg_match('/(?P<name>\w+): (?P<digit>\d+)/', $\$$str, $\$$matches);

var_dump($\$$matches)해보면

Array
{
[0] => foobar: 2008
[name] => foobar
[1] => foobar
[digit] => 2008
[2] => 2008
}

라는 출력이 나온다.

(?P<name>\w+)에서 \w+는 문자가 1개이상 나오는 것을 매칭하는데 앞부분에 ?P<name>는 연관배열 키값으로 name 키에 매칭된 문자 값 foobar를 저장하라는 의미이다.

(?P<digit>\d+)의 \d+는 숫자가 1개이상 나오는 것을 매칭하며, ?P<digit>는 digit키에 매칭된 패턴 2008을 저장.

이것은 값 표현을 명확히 하기 위해 정수인 index 대신에 연관배열의 키 값을 사용한 것으로 back reference라고 함.

치환

$\$$string = 'April 15, 2003';
$\$$pattern = '/(\w+) (\d+), (\d+)/i';
$\$$replacement = '$\$${1}1,$\$$3';
echo preg_replace($\$$pattern, $\$$replacement, $\$$string);

preg_replace는 첫번째 인자의 패턴으로 3번째 인자에서 찾고, 2번째 인자로 대치하라는 명령이다.
$\$${1}은 April, $\$$2=15, $\$$3=2003이다.

따라서 $\$$replacement=April1,2003이 된다.

$\$$string = 'The quick brown fox jumped over the lazy dog.';
$\$$patterns = array();
$\$$patterns[0] = '/quick/';
$\$$patterns[1] = '/brown/';
$\$$patterns[2] = '/fox/';
$\$$replacements = array();
$\$$replacements[2] = 'bear';
$\$$replacements[1] = 'black';
$\$$replacements[0] = 'slow';
echo preg_replace($\$$patterns, $\$$replacements, $\$$string);

$\$$replacements="The slow black bear jumped over the lazy dog"가 된다.

$\$$patterns = array ('/(19|20)(\d{2})-(\d{1,2})-(\d{1,2})/',
'/^\s*{(\w+)}\s*=/');
$\$$replace = array ('\3/\4/\1\2', '$\$$\1 =');

// $\$$startDate = 5/27/1999
echo preg_replace($\$$patterns, $\$$replace, '{startDate} = 1999-5-27');

패턴과 replace가 둘다 배열이다. 먼저 3번째 인자에서 pattern배열의 1번째 인자패턴을 찾아서 replace패턴의 첫번째 배열요소로 바꾼다.

19나 20을 찾음. 다음으로 숫자 2자리. -다음에 숫자 1~2자리, 다시 -다음에 숫자 1~2자리를 찾음. 따라서 "1999-5-27"이 찾아짐.

^는 맨처음, \s는 공백, *는 0~여러개, 다음에 {..}로 중괄호가 나옴. 그 사이에 문자가 1개 이상. 다음에 \s로 공백이 0~여러개 나오고 마지막에 =이다. 따라서 "{startDate} ="가 매칭된다.

References

[1] cheet key
[2] 생활코딩
[3] ZVON
[4] http://www.pyregex.com/

2016년 1월 4일 월요일

초간단 html

html을 테스트 할 때는 jsfiddle에 html문장을 복사해서 run으로 테스트 할 수 있다.
html의 설명문(comments)은  이다.

기본

<!DOCTYPE html> #태그 형식에 대한 버전 표시

<html> # 전체(페이지) 블럭 시작

<head> # head 블럭

<title></title> # 브라우저 탭에 표시되는 페이지 제목

</head>

<body> # body 블럭

<h1>큰 제목</h1> #숫자가 커지면 작은 제목

<ol> # 순서가 있는(ordered) list 그룹

<li></li> # list(1,2,3,순으로 번호붙음)

</ol>

<ul> # 순서가 없는(unordered) list 그룹

<li></li> # list(*로 리스트 표시)

</ul>

</body>

</html>

태그는 <strong>, </strong>와 같이 시작과 닫음을 나타내는 2개 태그 쌍으로 구성됨.

태그에 속성을 추가할 수 있음. 속성은 순서없이 추가하면 됨.

<a>사이트명</a> 에 링크 속성을 추가하면

<a href=“http://aa.com”>사이트명</a> 가 되고, 추가로 (새로운 탭으로 링크 사이트를 오픈하라는)속성을 추가하면

<a target=“_blank” href=“http://aa.com” >사이트명</a> 가 된다.

전체적으로 보면 <html></html> 내에 두 개의 블럭 <head>와 <body>가 포함됨.

<body>내에서는 <li>로 리스트를 나열하는게 일반적인데, 리스트의 블럭을 구분하기 위해 <ol>이나 <ul>를 사용.

그리고 맨 앞에는 <!DOCTYPE html>을 추가(html의 버전을 나타내는 형식)한다.

폼 기본

...
<body>
<form action="http://localhost/login.php">
<p>아이디: <input type="text" name="id"></p>
<p>패스워드: <input type="password" name="pwd"></p>

<p>주소: <input type="text" name=address""></p>
<p>textarea :
<textarea cols="20" row="3"></textarea>
</p>
<input type="submit">

</form>
</body>

이렇게 해서 submit하면 login.php로 localhost/login.php?id=egoing&pwd=1111&address=seoul 주소로 넘어간다.

dropdown/radio, checkbox/기타

#dropdown으로 메뉴가 펼쳐지고 그 중에서 하나를 선택할 수 있다.

<h1>색상 선택</h1>
<select name="color">
<option value="red">붉은색</option>
<option value="black">검정색</option>

</select>

#radio(단일선택)

<p>
<h1>색상</h1>
붉은색 : <input type="radio" name="color" value="red">
검정색 : <input type="radio" name="color" value="black" checked>
푸른색 : <input type="radio" name="color" value="blue">
</p>

단일선택이니 name이 모두 동일

#checkbox(다중선택)

<p>
<h1>사이즈</h1>
95 : <input type="checkbox" name="size" value="95">
100 : <input type="checkbox" name="size" value="100" checked>
105 : <input type="checkbox" name="size" value="105" checked>
</p>

#파일업로드

<form action="http://localhost/upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="profile"> # name은 서버쪽에서 사용(정해줌)
<input type="submit">
</form>

파일 전송 방식을 나타내는 method는 get, post가 있는데 post로 해주면 전송 정보가 숨겨짐

참고문헌

[1] 이고잉 html
[2] html + AJS를 함께 테스트 할 경우 w3school

funMV

2016년 1월 21일 목요일

bootstrap

2016년 1월 11일 월요일

jQuery의 기본 문법

태그 선택

클래스 선택

참고

[1] 생활코딩, 제어 대상을 찾기(jQuery)

2016년 1월 8일 금요일

javascript 실행 하기

참고

2016년 1월 7일 목요일

php 실행 방법

2016년 1월 6일 수요일

PHP 기본

함수의 사용

배열의 사용

2016년 1월 5일 화요일

정규표현식

표현식

검색

치환

References

2016년 1월 4일 월요일

초간단 html

기본

태그

폼 기본

dropdown/radio, checkbox/기타

태그

프로필