HTML – 웹사이트 만들기

이번시간에는 좀 더 실전적인 예제를 살펴볼겁니다 생각하기에 따라서는 우리가 아직 할 게 많이 있죠 그런데 여러가지 태그들이 있습니다 140개 정도의 태그가 현재까지 있는데 태그를 다 살펴보는 거는 쉽지도 않은 일일 뿐더러 별로 의미가 없습니다

여러분들이 지금까지 배운 것들, 가장 중요한 것을 우리가 다 배웠고, 바로 그런 것들을 이용해서, 최소한의 지식을 통해서 우리가 뭔가 의미 있는 것들을 해보는 것이 제가 보기엔 더 중요해요 그래서 지금해 볼 것은 이런걸 만들어 볼거예요 보시는것 처럼 이렇게 생긴 웹페이지 인데 여기 있는 항목들을 클릭하면 그 항목에 대한 링크로 이동을 하고 여기 있는 html 부분을 클릭하면 보시는 것처럼 첫 번째 페이지로 이동을 하는 그래서 여기있는 각각의 링크들이 서로 상호 작용하면서 이렇게 움직일 수 있는 완결된 웹사이트 하나 만들어 보자는 거죠 그래서 첫 번째 페이지는 여기있는 html을 클릭했을때 나오는 페이지인데 이 페이지의 이름은 보시는 것처럼 indexhtml 입니다 그리고 첫번째 링크를 클릭하면 1html 이 나오고 두번째는 2html 세번째는 3html 네번째는 4

html 이 나와서 어디로든지 이동할 수 있는 동선을 구성해 보자는 거에요 그러면 우리가 이걸 만들기 위해 필요한 파일은 총 다섯 개의 파일이 필요할 겁니다 그럼 지금부터 한번 해보죠 우선 chtml에 있는 내용을 그대로 재활용 하겠습니다 chtml을 다른이름으로 저장을 할게요 그리고 파일의 이름은 index

html이라고 하겠습니다 이건 대문 페이지예요 모든 파일로 해서 저장 이제 indexhtml 파일을 만들었으니까 한번 열어보시죠 이렇게 열렸죠? 자 그리고 우리가 뭐~ 1html / 2html / 3html 이런거 만들기 전에 우선 링크를 먼저 마련해 놓는게 좋습니다 왜냐하면 여기있는 각각의 링크들 여기에 걸리게 될 링크들은 각각의 페이지마다 똑같이 들어갈 내용이기 때문에 여러분이 파일을 먼저 만들고 링크를 추가하면 중복되는 작업이 생겨요

그런데 링크를 다 완성한 다음에 그걸 복제하면 더욱 효율적으로 일을 할 수 있다는 거예요 한번 해보죠 우선 여기있는 html은 이 부분이죠 이걸 클릭했을 때는 indexhtml이 나와야하니까 여기는 이렇게 indexhtml에 링크를 걸었습니다 그리고 기술소개라는 것을 클릭했을때는 1html이 나오면 돼요 물론 아직 우리는 1

html을 가지고 있진 않지만 링크부터 만든다고 문제 될 건 없습니다 그럼 보시는 것처럼 기술소개는 1htm이죠 물론 클릭해도 파일이 없기 때문에 해당 웹페이지를 찾을 수 없다는 메시지가 뜨겠죠 그 다음에 밑에 있는 기본 문법은 2html 3html 복사 붙여넣기를 이용하시면 조금 수월하죠 자 이렇게해서 각각의 링크를 일단 완성했어요 자 그럼 이제 indexhtml만 있으니까 1

html / 2html / 3html 이걸 이제 만들어야겠죠 자, 그럼 여기있는 indexhtml을 제가 다른 이름으로 저장하기를 해서 1 html 이라는 파일로 만들었습니다

그럼 이제 기술소개라는걸 클릭하면 보시는 것처럼 1html 페이지로 가죠 물론 내용의 변화는 없습니다 왜? 내용을 수정 안했으니까요 여기있는 내용을 수정해 봅시다 1html은 기술소개니까 이렇게 기술소개라고 하고 본문은 html은 아무거나 입력하세요 'html은 Hyper Text Markup 약자로 약자로서 웹페이지를 만드는 언어입니다' 라고 이렇게 하고 여기서 리로드를 해보면 보시는 것처럼 이렇게 되죠 그럼 이제 여기 있는 제목을 클릭하면 indexhtml로 갈테고 기술소개를 클릭하면 이제 기술소개에 대한 페이지로 이동을 하겠죠 그럼 여기서 1html을 다시 2

html로 복사한 다음에 여기있는 내용을 2html에 해당되는 기본문법으로 바꾸는거죠 내용은 아무거나 하시면 되죠 그 다음에 3html 그리고 하이퍼텍스트와 속성이라고 하고 텍스트와 속성 a 를 사용합니다 대충쓰는거죠

여러분 실습에 너무 집착하지마세요 4html 그리고 4

html은 본문이 리스트와 태그의 중첩 리스트는 li를 쓰고 ul 이나 ol로 감싸서 사용합니다 그렇게하면 우리가 모든 웹페이지를 다 완성했기 때문에 보시는것 처럼 이렇게 순환하는 웹페이지를 또 웹 사이트를 만들 수가 있는 것이죠 지금까지 제가 소개해드린 내용들이 html에서 가장 중요한 내용들은 다 다룬겁니다 나머지것들은 제가 생각하기에 훨씬 더 어려운데 훨씬 덜 중요한 것들이예요 그래서 여러분들은 제일 중요한 것들을 살펴봤다는 거예요 자 그럼 이제 우리 예전에 제가 수업 시작 할 때 여러분들한테 뭐를 말씀드렸었냐면 웹 페이지에서 오른쪽 클릭해서 소스보기를 한번 해보라고 말씀드린 적 있었죠 이렇게하면 나오는 것들 바로 여기있는 html 코드가 바로 이 웹 페이지에 해당되는 html 코드 였잖아요 자 그런데 여기서 제가 얘기하고 싶었던 건 뭐였냐면 여기는 코드를 이제 여러분들이 상당히 많은 부분 해석할 수 있게 되었다는 겁니다 위에있는 DOCTYPE 뭔지 아시겠죠 그리고 이 문서도 정말 html로 시작하네요 여러분들 네이버나 구글이나 여러분들 자주가는 사이트들 아무데나 들어가서 소스 보기를 해서 꼭 살펴보세요 그리고 정말로 head라는 태그로 시작하고 있네요 그리고 이렇게 생긴 태그들이 있는데 쭉 내려가보면 우리가 모르는 것도 상당히 많아요 여기 있는 것도 다 모르겠죠 쭉 내려가보면 여기 있는 태그 하나만 살펴볼까요? 여기 보시면 버튼이라는 태그가 있네요

여기 제가 선택한 이거, 이게 뭔진 여러분들이 잘 모르실 겁니다 하지만 무얼 알 수 있냐면 얘가 태그라는 사실은 이미 알고 있어요 그렇죠? 그렇다면 여러분이 이 태그라는 사실을 알고 있으면 뭘 할 수 있냐면, 검색할 수 있습니다 또는 질문할 수 있어요 어떻게? 예를 들면 검색을 이렇게하는 거죠 구글 같은 검색엔진에서 우리가 지금 원하는 것은 버튼이라고 하는 태그잖아요? 근데 그냥 버튼이라고 하면 이 세상의 수 많은 버튼이 있을거 아니예요 그럼 여기에 html 이라고 쓰는거죠

그리고 조금 더 정확하게 하기위해서 태그라고 하면 이렇게 검색어를 입력하고 엔터를 치면 엄청나게 많은 html버튼 태그라는 문자가 들어있는 웹페이지를 검색엔진이 순식간에 검색해줍니다 자 그럼 그 중에서 아무거나 제일 먼저 나온 걸 클릭해서 들어가 보면 보시는 것처럼 html 버튼 태그에 대한 설명이 나오네요 그럼 여러분들이 이걸 보시고 여기 있는 Try it yourself 같은 걸 보면 이렇게 clik me라고 돼 있는 부분이 보이네요 무슨 뜻이겠어요 바로 여기있는 버튼이라는 태그가 여기 오른쪽에 있는 버튼을 만들어주는 역할을 하는 태그라는 뜻인 거죠 즉 여러분이 여기 있는 모든 태그를 미주알고주알 기본적으로 다 암기하고 있지 않다고 하더라도 어떠한 것이 태그라는 사실을 알면 또는 어떠한 것이 속성이라는 것을 알면 여러분은 검색할 수 있습니다 또 누군가에게 html의 버튼이라는 태그는 무엇인가요 타입이라는 속성이 submit으로 되어 있으면 어떤 의미를 갖는 건가요 라는 질문을 할 수 있다는 것이죠 제가 생각하기에는 하나하나의 태그를 여러분들이 익히는 것 못지않게 질문하는 법 검색하는 법 이런 것들을 알아가는 것이 훨씬 더 중요할 수 있습니다 왜냐, 지식이라는 것은 계속 바뀌니까요 그 지식을 습득하는 방법만이 사실은 중요한 것이겠죠 자 이렇게 해서 우리가 지금까지 html의 문법, 구조 그리고 하이퍼텍스트를 통해서 완결성이 있는 웹사이트를 만드는 방법까지 살 봤고요 다음 시간부터는 주요한 html의 태그들을 살펴보도록 하겠습니다

웹에플리케이션 만들기 – JS, PHP 프로그래밍 3 : 웹페이지에 코드 삽입하기

지금부터 프로그래밍에 대한 기본 문법을 살펴 볼 건데요 우리는 자바스크립트와 PHP라는 두 개의 언어를 서로 다른 언어를 동시에 익혀 갈 겁니다 그것을 통해서 여러분들이 하나의 언어만 배우면 사실 거의 모든 언어를 배우는데 있어서 기본적인 소양을 갖추게 되는 거라는 사실을 이해하실 수가 있을 겁니다

마치 한국어와 영어 둘 다 완전히 다른 언어이지만 이 세상에 거의 모든 언어들이 주어 동사 목적어라고 하는 요소를 다 가지고 있는 것처럼 이 프로그래밍 언어들은 대부분 공통적인 기능성을 가지고 있고 그것을 좀 더 각자의 언어의 취향에 따라서 다른 스타일의 문법들이 있을 뿐입니다 우선 살펴 볼 것은 이 프로그래밍 코드를 HTML에 삽입하는 이 방법에 대해 살펴 볼 건데요 우리 이전에 CSS 공부할 때 HTML 안에 CSS를 넣기 위해 스타일 태그를 사용한다는 거 그거 배웠었죠? 그것과 똑같이 자바스크립트와 PHP도 웹페이지 안에서 삽입해서 사용하는 언어이기 때문에 웹페이지라는 HTML이라는 이질적인 문법 안에 자바스크립트와 PHP가 공존하는 방법이 존재합니다 그게 뭔지를 살펴보자는 거에요 우선 새로운 디렉터를 하나 만들겠습니다

그 디렉토리의 이름은 “phpjs” js는 자바스크립트의 줄임말이고요 엔터 그리고 여기에다가 우리의 실습을 진행할게요 우선 첫 번째 파일은 그냥 간단하게 “1php”라고 하겠습니다 우선 php부터 설명을 좀 드릴게요

그리고 "localhost/phpjs/1php" 하고 엔터를 한번 쳐보세요 그러면 빈 화면이 뜰거에요 여기에서 1html 에다가 "Hello World" 입력하고 이 파일을 리로드를 해보면 "Hello World"가 그대로 출력되는 것을 볼 수가 있습니다

기본적으로 이 PHP파일은 HTML과 똑같이 동작합니다 제가 이 탬플릿에 있는 내용을 카피해서 그것을 1php에다가 붙여넣기를 했습니다 그리고 바디 안에다가 "Hello World"라고 입력하고 그리고 리로드를 해볼게요 이렇게 나왔죠? 이렇게 나오는 이 웹페이지의 소스코드를 한번 볼게요

오른쪽 클릭하고 페이지소스 보기를 하면 현재 화면에 출력되고 있는 이 화면에 대한 소스코드를 볼 수 있습니다 이게 소스코드의 내용이에요 우리가 PHP파일에 작성한 내용과 동일하게 화면에 표시되고 있죠? 그럼 좀 혼란스러우실 거에요 도대체 이건 PHP는 뭐야? 이런 생각이 드실 겁니다

그런 의문은 조금만 뒤로 미뤄두고 PHP의 시작을 알리는 코드를 한번 작성해 보겠습니다 여기서 “<?php” 라고 하면 저특수한 기호 여기 있는 이 특수한 기호는 지금부터 PHP가 시작된다는 것을 PHP 엔진에게 알려주는 역할을 하는 코드입니다 그리고 이렇게 "?>" 닫아주면 이제 PHP가 끝났다 라는 뜻이에요

여기에 시작"<?php" , 여기에 끝 "?>" 을 의미하는 약속되어 있는 기호라는 것이죠 그럼 여러분은 여기에다가 아직 우리가 배우지 않은 PHP의 코드를 여기에다가 적으시면 되는 거죠 그러면 PHP로 한번 화면에다가 "Hello World"라고 하는 텍스트를 출력해 보겠습니다 PHP에서 무언가를 출력할 때는 echo 라는 걸 씁니다 "echo" 그리고 문자를 사용할 때는 "Hello World"라는 기호를 써요

아시겠죠? 그리고 제가 "1php" 파일을 리로드를 해볼게요 거의 바뀐 게 없죠? 여기 소문자 였던게 대문자로 바뀌었을 뿐이네요 소스코드를 한번 볼까요? 페이지 소스보기를 하면 보시는 것처럼 "Hello World"라고 하는 텍스트가 출력되고 있습니다

그런데 좀 이상한 점이 보이죠? 뭐가 이상한 가요? 여기에 현재 웹브라우저에 소스코드를 보니까 HTML에서 소스코드를 보니까 바디까지는 똑같아요 여기까지는 똑같죠? 그렇죠? 내용이 똑같잖아요

그런데 여기 이쪽에 바디도 줄바꿈이 조금 달라 보이기는 하지만 어쨌든 똑같다는 걸 알 수가 있습니다 그러면 어디가 다른가요? 바로 이 부분과 이 부분이 다르죠? 똑같은 "1php"파일 임에도 불구하고 제가 지금 강조 표시한 부분이 다르게 나타나고 있어요 그것은 왜 그러냐면 바로 이 부분이 이 부분이 PHP엔진에 의해서 해석되어서 여기 "Hello World"라고 하는 이 텍스트를 이 웹페이지에 포함시키도록 동작했기 때문에 그렇습니다

그래서 여기 있는 이것이 소스고 여기에 있는 이 "Hello World"라고만 적혀있는 저 부분은 그 소스에 출력된 결과라는 것이죠 그럼 조금 다른 예를 들어 볼게요 여기에다가 제가 “10+10”을 해볼게요 그러면 이쪽에 소스코드에는 뭐가 찍힐 것인지를 한번 생각해보세요

“20”이 찍힙니다 즉 여기에 있는 echo라고 하는 부분을 PHP 엔진이라고 하는 것이 PHP 인터프리터라고 하는 것이 해석해서 그 해석된 결과를 여기에다가 이 위치에 웹페이지상에 이 위치에다가 탁 갖다 놨기 때문에 "20"이라는 숫자가 저기에 나타나는 거에요 이렇게 더하기와 같이 무언가를 더하는 이런 작업은 HTML이나 CSS는 할 수 없는 일이에요 하지만 PHP는 할 수 있는 일입니다

좀 혼란스러우실 수 있는데 조금 시간이 지나면 다 정리가 될 겁니다 머릿속에서 이게 PHP를 웹페이지에 삽입하는 방법입니다 그러면 자바스크립트를 한번 웹페이지에 삽입해볼까요? 이 PHP코드 위에다가 제가 “<h1>php</h1>" 라고 이렇게 적어놓을 게요

그리고 얘를 이건 소스코드구요 여기 있는 웹페이지를 리로드하면 PHP가 "20" 찍힌 것을 볼 수가 있죠? 그럼 이번에는 "<h1>JavaScript</h1>" 해볼게요 자바스크립트를 웹페이지에 추가시킬 때는 이렇게 하셔야 됩니다

”<script> " 그리고 "</script>" 로 끝내야 되요 여기 있는 이 코드는 HTML태그입니다 이거는 HTML 태그가 아니라 PHP만의 어떤 독특한 문법이에요 HTML태그 그리고 이 가운데 에다가 자바스크립트를 써주면

웹브라우저는 이 웹페이지를 이렇게 해석하다가 자바스크립트를 만나면 이 부분을 자바스크립트의 문법에 따라서 해석해서 거기에 적혀있는 대로 동작하고 그 다음부터, 여기서부터는 다시 HTML을 해석하는 모드로 변경되게 됩니다 그러면 문서에다가 이번에도 "Hello World" 를 한번 찍어볼게요 자바스크립트에서 어떤 정보를 화면에 표시할 때는 이런 명령을 씁니다 이명령의 문법에 대해서는 지금 모르셔도 됩니다

"documentwrite()" 그리고 저 괄호에다가 여러분이 화면에 출력하고 싶은 정보를 적어주시면 되요 예를 들어서 "documentwrite("Hello World");" 까지 한번 화면에 출력해보죠

보시는 것처럼 "JavaScript" 라고 뜨고 "Hello World" 라고 출력된 것을 볼 수가 있어요 이 "Hello World"는 뭐의 결과냐면 바로 여기에 있는 이 코드가 이렇게 화면에 출력이 된 겁니다 그러면 여기에 있는 이 코드를 이번에는 저 PHP처럼 "10+10" 으로 하고 저장을 한 다음에 리로드를 해보죠 그러면 이렇게 출력이 될 거에요

이렇게 출력되는 이유는 바로 여기있는 이 코드를 이 웹브라우저가 자바스크립트를 해석해서 그것을 여기에다가 이렇게 위치시킨 것이죠 여기까지 됐고요 그럼 여기에서 오른쪽 클릭해서 소스보기를 하게 되면 현재 이 웹브라우저가 이 화면에 표시하고 있는 이 웹페이지의 소스코드를 우리가 볼 수 있다고 말씀드렸죠? 소스보기를 한번 해봅시다 그러면 놀라운 결과가 여기에 있습니다

자바스크립트와 PHP의 차이를 극명하게 보여주는 화면이에요 보시는 것처럼 여기에 있는 이 "20"은 여기에 있는 세 줄의 코드 전체의 결과입니다 그렇죠? 그리고 여기에 있는 자바스크립트 태그로 시작해서 자바스크립트로 끝나는 부분은 바로 이 부분이에요 그리고 이 둘은 완전히 같은 코드입니다

같잖아요 딱 보시기에도 PHP와 자바스크립트의 차이가 극명하게 드러나는 대목입니다 왜 그럴까요? 결론적으로 말씀드리면 이 PHP는 서버쪽에서 실행되는 언어에요 서버 사이드언어입니다

여러 번 말씀드렸죠? 그렇기 때문에 서버에서 이 구문이 실행된 그 결과가 만들어져서 웹브라우저에게 전송이 됩니다 그러니까 당연히 웹브라우저에는 그냥 "20"이라고 찍혀있을 뿐입니다 그런데 자바스크립트는 웹브라우저가 해석해서 처리하는 언어입니다 따라서 서버에서는 얘를 손대지 않아요 그리고 웹브라우저에서 이 자바스크립트 코드를 해석해서 그것을 화면에 반영하기 때문에 여기에 있는 이 코드가 이렇게 화면에 출력되는 것이죠

누가 해석해서요? 웹브라우저가 해석해서 이전에 살펴봤던 PHP가 동작하는 원리에 대한 그림인데요 다시 한 번 보죠 웹브라우저가 웹서버에 "aphp" 즉 PHP파일을 요청을 하면 웹서버는 저것이 PHP파일이라는 것을 알면 자기가 할 수 없다는 것을 알고 PHP인터프리터

다른 말로는 PHP엔진 이라고도 부르는 저것에게 저 소프트웨어에게 저 파일의 처리를 위임합니다 그럼 PHP는 여기 있는 그림을 다시 한 번 보시죠

우리가 이전에 살펴봤던 것을 좀 더 간략화시킨 겁니다 웹브라우저에 "localhost/phpjs/1php" 라고 요청을 하고 엔터를 땅 치면 웹브라우저는 웹서버에게 "1

php"를 요청하게 되죠 그럼 웹서버는 이 사용자가 요청한 파일이 PHP파일이라는 것을 알 수가 있어요 그럼 그것을 자기가 처리할 수 없다는 것을 알고 PHP인터프리터에게 위임합니다 그럼 PHP인터프리터는 "1php" 라는 파일을 읽어서 거기에 있는 내용을 해석한 다음에 그 결과를 웹서버에게 전달을 하는 거에요

바로 이 PHP 인터프리터가 소스코드를 해석한 결과가 웹서버에게 전달되기 때문에 바로 이 단계에서 "<?php echo 10+10; ?>" 아까 우리가 작성했었던 코드있죠? 바로 이 부분이 "20"으로 바로 이 단계에서 바꿔치기된 상태의 웹페이지를 웹서버가 받게 됩니다 그 다음에 웹서버는 웹브라우저에게 그 내용을 전송하기 때문에 웹브라우저는 PHP 코드를 볼 수 없는 것이죠

하지만 자바스크립트는 웹브라우저에서 실행되는 언어이기 때문에 바로 여기 있는 이 스크립트를 자바스크립트가 보고서 여기 있는 코드를 자바스크립트의 문법에 따라서 실행한 다음에 그 결과를 화면에 반영한 것이 이것입니다 그래서 여기에 있는 "20"은 누가 처리한 거냐면 PHP 인터프리터라고 하는 것이 PHP 해석엔진이 이 "20"을 해석해서 처리한 결과인 것이고요 즉 서버쪽에서 처리된 결과인 것이고요

여기 있는 "20"은 웹브라우저에서 자바스크립트를 해석해서 처리한 결과이기 때문에 이것은 웹브라우저 쪽에서 실행된 것이고 그것을 우리는 클라이언트쪽 컴퓨터에 자원을 써서 사용한 결과이기 때문에 이거를 자바스크립트를 클라이언트쪽에서 동작하는 언어라고 부르는 겁니다 이미 이해가신 분들은 좀 반복되는 얘기라서 좀 지루하실 수도 있는데

중요한 내용이라서 그래요 이거를 이해 못하면 그 다음 부분에서는많이 헤맬 수밖에 없기 때문에 제가 좀 반복적으로 여러분들에게 이런 저런 방법을 동원해서 설명을 드린 겁니다 이 내용만 이해했으면 이번 영상의 목적은 달성된 거고요 이 다음 영상에서는 또 다른 이야기들을 해보도록 하죠

웹에플리케이션 만들기 – JS, PHP 프로그래밍 1 : JavaScript 실습

지금까지 우리가 JavaScript의 문법을 살펴봤는데요 이제 그 문법 이용해서 아주 간단한 이 JavaScript로 만든 애플리케이션을 한 번 만들어보죠

우리가 무엇을 만들 것인지 먼저 보여드리면 이렇게 생긴 화면에서 black 버튼을 누르면 검은색 디자인이 되고 white 를 누르면 흰색 디자인이 되는 이것을 만들어 볼 것인데요 이 버튼을 눌렀을 때 디자인이 바뀌는 것은 바로 JavaScript를 통해서 가능한 일 입니다 그래서 여러분들이 주목해야 될 것은 바로 이것을 만들기 위해서 필요한 것들도 중요하지만 그것은 어차피 시간 조금만 지나면 금방 까먹습니다 그런 것들은 체계적으로 공부해 나가야 될 것들이에요 어차피 중요한 것은 아 JavaScript가 그것 이구나! JavaScript와 HTML과 CSS의 이 미묘한 삼각관계는 그런 거구나 하는 것을 여러분들이 어렴풋이 이해하고 무엇보다 JavaScript가 HTML을 프로그래밍 쪽으로 제어하는 언어라는 것을 이해하는 것이 우리 수업의 중심 주제이고 여러분이 장기적으로 기억해야 될 내용입니다

구체적인 각론들은 어차피 까먹을 거기 때문에 까먹어도 상관없어요 아시겠죠 새로운 폴더를 만들죠 javascript라는 폴더를 만들겠습니다 그리고 여기에다가 일단은 우리가 1

html 이란 파일을 하나 만들게요 간단한 HTML파일을 만들었구요 그리고 <html>입력하고 탭 그리고 <body>라고 입력하고 탭 왜 이렇게 불편하게 하고 있나요 탬플릿을 그냥 복사하면 되는데 탬플릿을 복사해서 이렇게 <body>로 </body>까지 오세요

그리고 우리가 필요한 것들을 미리 먼저 해봅시다 우선 웹페이지에 다가 버튼을 만들어보겠습니다 버튼을 만들 때는 <input>이란 태그를 씁니다 그리고 <input> 태그의 type으로 "button”을 지정해요 그리고 value=“white”라고 해 볼게요

그리고 이렇게 이런 기호(/>) 무슨 뜻이냐면 이 태그가 굳이 닫히는 태그가 필요 없을 때는 태그가 끝나는 지점에 다가 이렇게 /(슬래시) 를 붙여주는 것으로 예 저렇게 끝내줘도 됩니다 이렇게 코드를 작성하고 javascript의 1html 파일로 오면 보시는 것처럼 우리가 작성한 <input> 태그가 이렇게 버튼이 된 것을 알 수가 있어요 그렇고 여기 type이란 것에 “button“이라고 되어 있는데 이것을 “text“로 바꿔보세요 어떻게 되나요 이번에는 사용자가 어떤 정보를 타이핑해서 입력할 수 있는 텍스트박스가 됩니다

그리고 이것을 ”checkbock“로 하면 보시는 것 처럼 체크 체크할 수 있는 체크박스가 되요 <input> 태그라는 것은 이것은 사용자가 어떤 정보를 이 우리가 만들고 있는 웹 애플리케이션에게 <input> 한국어로는 입력할 수 있는 장치들을 의미하는 태그이고요 그 태그의 type 속성으로 무엇을 주느냐에 따라서 사용자가 input 하는 방법이 달라지게 됩니다 그래서 우리가 지금 하려는 것은 사용자가 무언가 자기가 어떤 걸 끝냈다 뭐 이런 경우에 이제 “button”을 누르니까 이 “button”도 <input> 안에 들어 있는 겁니다

그리고 여기에 다가 “white”라고 주게 되면 그 “button”에 값이 white가 되는 거예요 아시겠죠 이게 input 버튼 그 중에서 <input>이라는 태그고 그 중에서 버튼을 만드는 방법입니다 그 다음에 우리가 이전에 살펴봤던 것처럼 JavaScript는 이렇게 <script>하고 그 <script> 안에다가 JavaScript 코드를 작성하면 됐죠 prompt(“hello world”)라고 하면 이렇게 생긴 창이 뜨죠 그런데 여기 prompt 말고 alert 이라고 한번 입력해보세요

alert은 경고라는 뜻이죠 실행해 보겠습니다 보시는 것 처럼 이번에는 무언가를 입력할 수 없는 그냥 화면만 그냥 이 메시지만 화면에 뜨고 있어요 바로 여기 alert이라고 하는 것은 이런 창을 뜨게 하는 API입니다 즉 여러분이 입력한 이 “hello world”가 바로 여기에 이렇게 표시되고 있는 것이죠

그래서 바로 이 alert은 경고 창을 표시할 때 사용하는 것 인데 개발할 때 자주 사용되는 것이기 때문에 알아두시면 편합니다 이번에는 JavaScript의 이벤트라는 것에 대해서 배워 볼 건데요 그 전에 이 JavaScript에서는 JavaScript의 코드가 이 <script> 태그 안쪽에 존재할 수도 있지만 이 HTML 태그 상에서도 존재할 수가 있어요 예를 들어서 이렇게 하면 해 보세요 onclick=“ onclick이라고 하는 속성의 값으로 alert 그리고 ‘hello world’ 라고 이렇게 입력해보세요

(화면에 코드 정리 중) 이게 큰가보네요 됐나요 F5 위에 있는 이 <script>태그는 이제 지워버립시다 white 버튼을 누르면 어떤 일을 생기는 지를 보세요 ‘Hello world’가 떴습니다

어떻게 된 걸까요? 웹브라우저 입장에서 한 번 동작해보죠 웹브라우저가 여기 있는 이 웹페이지를 쭉 해석하면서 <input>태그를 쭉 봅니다 쭉 보다가 음 알았어 알았어 어 onclick이 나왔네 onclick이라고 하는 것은 약속되어있는 태그 중의 하나입니다 다른 이름 쓰시면 안돼요

onclick이 나왔으니까 나중에 사용자가 여기에 있는 이 버튼 이 버튼을 onclick, 클릭 했을 때, 여기에 있는 JavaScript 코드를 기억했다가 실행해줘야 겠네 라고 웹브라우저는 기억하게 됩니다 그것을 기억하고 있는 웹브라우저가 일단 있어요 그 상태에서 사용자가 여기 있는 버튼을 클릭하면 웹브라우저는 이 alert(‘Hello world’)라는 것을 기억하고 있다가 저 자바 스크립트 코드를 그때 실행시켜준다는 겁니다 이것이 바로 이벤트 프로그래밍이라는 거예요 이벤트라는 것은 사건이란 뜻입니다 이 웹브라우저의 입장에서 사건이라는 것은 이런 거예요

이 버튼을 사용자가 클릭한 사건 또는 여기에 글이 그 정보가 많다고 하면 사용자가 스크롤을 움직이는 사건 또는 사용자의 마우스가 움직이는 사건 그런 것들이 다 사건입니다 바로 그러한 사건이 일어났을 때 어떤 코드가 실행되어야 한다는 라는 것을 브라우저에게 명령해놓는 것이 바로 이벤트 프로그래밍이라는 거예요 좀 다른 예를 좀 빨리 들어 볼게요 이건 그냥 구경합시다 <input type=’text’/> 제가 text가 뭐라고 했어요

보시는 것처럼 이렇게 사람들이 무엇인가를 입력할 수 있는 창이 저 text필드라고 말씀드렸죠 자 여기에서 on 그리고 focus (길게 쉬면서 코드 작성) onfocus 즉 이 text 필드에 사용자가 포커스를 맞췄을 때 경고 창(alert)에 작은따옴표 focus라고 출력해라 라고 명령을 한 거예요 제가 마우스 포인트를 저기 있는 저 text 필드에 클릭하면 그게 focus가 됩니다 어때요 이 focus라고 하는 경고창이 떴죠 그리고 제가 이번에는 onblur=’alert(‘blur’) 경고 창에 blur라고 이렇게 출력되라고 제가 명령을 해 논겁니다

focus를 맞추면 포커스가 뜨고 여기에 지금 현재 커서가 껌벅 껌벅 거리고 있다는 것은 저 text 필드에 포커스가 되어 있단 뜻인데 제가 다른 아무 곳이나 클릭하면 저 포커스가 해제되는데 바로 그것이 해제되는 사건의 이름이 ‘blur’입니다 방금 blur가 일어났기 때문에 이 이벤트가 발생한 거에요 그래서 여기 있는 onclick, 또 여기 있는 onfocus, onblur 이런 것들은 이 웹브라우저에 약속되어있는 이벤트들이고요 저 속성들은 특이하게도 그 속성의 값으로 JavaScript 코드를 취한다 라는 거예요 그래서 바로 이러한 이벤트 프로그래밍 덕분에 사용자가 어떤 액션을 주면 그것에 따라서 어떤 우리가 작성한 JavaScript코드가 실행되도록 프로그래밍 할 수 있다는 겁니다

시간이 좀 많이 된 관계로 여기에서 잠깐 끊고 잠시 쉬었다가 다음 시간에 나머지 얘기를 계속 진행해 보도록 하죠

웹에플리케이션 만들기 – PHP 실습 1

자, 지금부터 PHP 실습을 시작하겠는데요 우리가 이전에 PHP 문법을 배웠죠 자, 그것을 바탕으로 이제 PHP로 PHP 다운 애플리케이션을 만들어 볼겁니다 자, 우선 복습을 좀 해보죠 어떻게 기술이 상호작용하는지를 다시 한번리뷰를 해보죠 웹브라우져, 웹서버, PHP가 있다고 했을때 웹브라우져에 누군가가 http://a

com/aphp 라고 입력하고 엔터를 땅 치면 웹브라우져는 acom 에 해당되는 웹서버를 찾아가서 aphp를 내놓으라고 합니다 자, 그러면 웹서버는 a

php가 자신이 처리할 수 없는 데이터라는 것을 알고 PHP를 처리 할 수 있는 PHP 엔진에게 위임해요 자, 그럼 PHP 엔진은 aphp 파일을 읽어서 거기에 적혀 있는 php 코드를 해석 한 다음에 그 결과를 웹서버에게 돌려줍니다 그럼 웹 서버는 그 결과를 웹브라우져에게 다시 중개해주는 과정을 통해서 이렇게 하나의 사이클이 흘러가게 되는거죠 자, 이번 시간에 우리가 할 것은 무엇이냐면 이 단계에서, 방금 우리가 살펴본 단계에서 조금 더 복잡하게, 이렇게 처리가 될 겁니다 웹브라우져, 웹서버,PHP, 그리고 파일이 있어요 그리고 저 파일에는 정보가 담겨 있습니다 (우리가) HTML 페이지 안에 HTML 코드도 있고 그 안에는 실재 내용이라고 할 수 있는 자바스크립트가 어떻고 변수가 어떻고 뭐 이런 내용들이 또 들어 있죠 바로 그 실재 내용이 정보일건데요 그 정보들을 우리가 파일에다가 저장을 하는거에요

이제 그러면 웹브라우져가 웹서버에게 요청하고 웹서버가 PHP에게 요청하면 PHP는 우리가 작성한 그 코드에 파일에 있는 내용을 읽어오라는 것이 적혀 있을 거거든요 그럼 그 파일을 읽어서 그 파일의 정보를 결합한 다음에 그것을 웹서버에게 돌려주고 웹서버는 웹브라우져에게 보내주게 됩니다 자, 이 과정은 이 그림만으로는 설명하기 어렵기 때문에 실제로 코드를 보시면 무슨 얘기인지 금방 이해하실 수 있는 얘기에요 자, 그래서 우리가 서버측에 있는 PHP를 다루기 전까지 웹사이트를 만든다 그러면 이렇게 웹사이트를 만들게 됩니다 보시는 것처럼 웹브라우져가 있고요 이 웹브라우져를 통해서 acom/indexhtml a

com/page_htmlhtml 이런 식으로 주소를 입력하면 그 주소에 해당되는 html 파일을 가져오는 그런 관계였습니다 그래서 만약에 페이지가 지금 보시는 것처럼 4개의 페이지가 있다면 4개의 실재 파일이 존재하는 방식으로 웹사이트를 구축했다 라는 거에요 그렇다보니까 어떤 문제가 생기냐면 만약에 html 의 코드를 변경해야 된다면 코드안에 ol 로 썼던 코드를 ul 로 바꾼다던지 h1을 h2로 바꾼다던지 또는 버튼을 추가한다던지 이런 식의 웹페이지의 변화가 필요해 지면 결국에는 각각의 페이지마다 그 내용을 하나씩 하나씩 다 수정해 줘야되는 그런 문제가 있었다는 것이죠 다시 말해서 중복이 존재했다 라는 겁니다 자, 이제 우리가 할 건 뭐냐면 이 중복을 제거해서 html 정보는 하나의 파일에 담으려고 하는 거에요 그러기 위해서는 html과 정보를 다시 분리해서 그 정보는 텍스트 파일에 담고 html 파일은 indexphp 라는 단 하나의 파일에 담는 겁니다

그러면 사용자가 웹브라우져에 이렇게 acom/indexphp?id=1 이라고 입력하고 엔터를 땅 치면 여기 있는 이 indexphp가 사용자가 입력한 이 id 값 1을 보고 이 1에 해당되는 1txt 파일에 있는 내용을 가지고 와서 가지고 와서 그 결과를 만든 다음에 그것을 웹브라우져에게 돌려주게 된다

라는 겁니다 이 과정 역시도 지금으로선 추상적으로 느껴지실수 밖에 없지만 코드를 보시면 이해하실 수 있을 거에요 지금 보시는 것처럼 우리가 만든 웹 애플리케이션인데요 자, 클릭하면 그것에 해당되는 정보들이 이렇게 화면에 보이고 있어요 자, 그런데 구조가 조금 특이합니다 여기 제가 임시로 만들어 놓은 디렉토리에 php 라는 디렉터리 안에 이 파일들을 보시면 자, 우리가 접속하는 접속할 때 사용하는 웹페이지는 indexphp 에요 다른데로 이동해도 indexphp 라는걸 볼수가 있죠 바로 이 index

php 가 여기에 있는 이것이고요 그리고 이 indexphp 안에는 실재로 정보가 들어가 있지 않고 실재 정보는 listtxt 에 들어 있고 그리고 각각의 1,2,3txt 안에 들어가 있습니다 자, 여기 보시는 것처럼 이것이 index

php 파일인데요 indexphp 에서 글 목록이 표시되는 nav 밑에 있는 여기에 php 코드가 있는데요 이 php 코드는 바로 여기에 있는 listtxt 에 있는 내용을 내용이 여기에 위치하게 됩니다 php로 인해서 그리고 사용자가 요청한 정보가 무엇이냐에 따라서 사용자가 요청한 정보가 무엇이냐에 따라서 1txt, 2

txt, 3txt 가 이중의 하나가 php에 의해서 프로그래밍적으로 읽혀서 바로 이 위치에 출력되게 되는 거에요 그래서 하나의 하나의 php 안에 이렇게 html 코드들이 이렇게 이렇게 여기에 모여있고 그리고 정보들은 각각의 텍스트 파일에 텍스트 파일로 분리되어 있는 상태입니다 즉, 정보로부터 여기 있는 것들이 정보죠 정보로부터 여기 있는 각각의 html 들을 html 은 중복이 되기 때문에 그 중복을 제거한거라고 할 수 있습니다 정보로부터 html 을 끄집어 내서 정보가 좀 더 정보만으로 이루어져 있는 파일들을 만들어 낸 거라고 할 수 있어요 자, 그런데 우리가 지금 하고 있는 텍스트에다가 정보를 저장하는 이 방식은 과도기적인 방법이에요 좀 더 좋은 방법이 있는데 궁극적으로 우리가 하려는 것은 이것이 아니고 바로 이것입니다 데이터베이스 라는 것을 사용을 해서 저 데이터베이스라고 하는 소프트웨어에 정보를 저장하고 그리고 사용자가 어떤 정보를 요청하면 저 indexphp 가 데이터베이스에 있는 정보를 가지고 와서 사용자에게 보여주는 이런 흐름이 우리가 최종적으로 이해해야 될 전체적인 모습이고 근대적인 웹 애플리케이션이라고 한다면 기본적으로 이런 구성을 가지고 있습니다 자, 그래서 저기에 있는 저 데이터베이스는 말씀 드린 것처럼 그냥 하나의 소프트웨어 입니다 그런데 이 소프트웨어가 하는 역할은 데이터를 아주 체계적으로 관리하고 많은 데이터를 효과적으로 처리하고 또, 뭐랄까요 보안성이 높기 때문에 데이터를 안전하고 보관 할 수 있는 전용 소프트웨어에요 그래서 여러분이 파일에다가 데이터를 저장하는 것도 방법이지만 데이터베이스에 데이터로 저장하면 여러가지 장점들이 생깁니다

바로 그 장점 때문에 실재로 데이터는 데이터베이스에 저장하게 되요 자, 이 관계 역시도 지금으로서는 이해가 잘 안갈거니까 우리가 코드를 보면서 공부를 해보고 나중에 이 화면을 다시 한번 우리가 볼 기회가 있으면 살펴 보겠습니다 그럼 그때는 지금 보이는 것과는 다른 느낌으로 이 그림을 보실 수 있을거에요

웹애플리케이션 만들기 – MySQL 실습1 : PHP와 연동

우리가 이전 시간에 데이터베이스 이론 수업을 진행을 했구요 이번 시간에는 우리가 배운 그 데이터베이스를 실제로 활용해서 웹 애플리케이션을 만드는 구체적인 방법에 대해서 살펴보겠습니다

우선 복습 차원에서 예전에 우리가 작업했던 것을 다시 한 번 리뷰를 해 보죠 보시는 것 처럼 이런 구성이었어요 웹브라우저, 웹서버, PHP 그리고 데이터는 FILE에 저장되어 있는 상태가 우리가 지금까지 만들어오던 micro 한, 작은 opentutorials 예제가 이런 구성으로 현재 되어 있었다는 것이죠 그 중에서 저 FILE이라고 되어있는 부분, 데이터를 FILE에 저장하고 있었던 것을 좀 더 개선해서, FILE이 아니라 바로 MySQL이라고 하는 데이터베이스로 교체하는 작업을 이번 시간부터 우리가 진행을 할 겁니다 그래서 결과적으로 우리가 만든 애플리케이션이 동작하는 방법에는 차이가 없습니다 다만 그 내부적으로 정보를 파일에 저장하느냐 데이터베이스에 저장하느냐의 차이가 생겼을 뿐이구요

그런 맥락에서 이 PHP라고 하는 것은, 이 파일에 데이터 저장하고 읽고 이랬던 역할에서, 보시는 것처럼 이 데이터베이스 시스템과 또 웹서버 사이에서 이렇게 중계자와 같은 역할을 하게 됩니다 즉 사용자가 요청한 aphp를 웹서버가 처리할 수가 없기 때문에 PHP에게 위임을 하는데 그 aphp에 데이터베이스에 있는 정보를 가져와서 웹페이지로 만들라는 코드가 들어가 있다면 이 PHP가 중간에서 데이터베이스에 있는 정보를 가져와서 웹페이지를 만들어내는 일종의 중계자와 같은 역할을 한다는 것이죠 그런 맥락에서 이런 PHP 애플리케이션을 우리가 미들웨어라고도 부릅니다

그럼 PHP가 그런 일을 하기 위해서 무엇을 우리가 사용을 해야 되고 어떻게 프로그래밍을 해야 되냐면, 바로 “mysqli”라고 하는 이 PHP에 내장되어 있는 API를 사용을 해서 우리가 그런 목적을 달성할 수가 있습니다 그러면 지금부터 우리가 일단 실습 환경을 좀 구축을 해 보죠 실습 환경은 이미 다 구축이 되어있어요 우리가 기존에 indexphp라는 파일을 이용해서 샘플을 만들었죠

그리고 이 파일 내부적으로는 8개 콘텐츠, 즉 파일을 읽어드릴 때 사용하는 API를 사용을 해서 구축이 되어 있었습니다 바로 이런 부분들을 우리가 PHP로 데이터베이스를 핸들링 할 때 사용하는 mysqli로 교체 하려고 하는 겁니다 그 때 사용하는 것은 일단은 제일 위 쪽에 이렇게 PHP를 입력할 수 있는 부분을 만들어주시고요 여기에 제가 지금부터 설명 드리는 내용을 추가하시면 됩니다 그런데 데이터베이스를 핸들링하는 데이터베이스를 다루는 코드는 꽤 복잡하고 다양한 이 문제 상황들이 발생할 수가 있기 때문에, 여러분들이 어떤 문제가 발생했는지를 알고 계셔야 됩니다

그냥 보시면 화면에 아무것도 표시가 안 될 거기 때문에, 그래서 제가 예전에 여러분들에게 말씀 드렸던게 기억나실지 모르겠는데, 이 디버그라는 수업에서 문제가 발생했을 때 어떤 문제가 발생했는지를 알 수 있는 파일이 있다고 말씀을 드렸습니다 그 파일을 열어놓고 실습을 진행하셔야 돼요 그러면 그 파일을 찾는 법을 다시 한 번 remind를 시켜줄게요 우선 “FILE”에서 “Open File”을 선택하시구요 “Bitnami”디렉토리에서 “ampstack”으로 들어가신 후에, 그 중에서 “apache”로 들어 가시고, “logs”라고 되어있는 곳으로 들어가시면, “error

log”라는 파일이 있습니다 저 파일을 열어보시면 이렇게 생긴 화면이 뜨는데요 바로 여기에 에러가 있을 경우에 그 에러 내용이 여기에 표시가 됩니다 그 내용을 보시고 어디에서 문제가 생겼는지를 추적하시면 되구요 또는 다른 사람에게 질문할 때 이 에러 메시지를 다른 사람에게 보여주는 것을 통해서 문제 해결에 도움을 받을 수 있을 겁니다

그러면 이제부터 이곳에 들어가야 될 코드들을 우리가 하나씩 하나씩 살펴보도록 하죠 제가 표를 하나 준비 했는데요, 여기 보시면 이 MySQL monitor가 왼쪽에 있고요, 그 오른쪽에는 PHP에서 데이터베이스를 사용하기 위해서 PHP가 제공하는 내장 함수 API인 mysqli가 이렇게 있습니다 그리고 왼쪽 끝에 보시면 “서버접속”, “DB 선택”, “조회”, “출력” 이라고 되어 있는데요, 이것은 우리가 이 데이터베이스 클라이언트가 베이터베이스 서버에 접속해서 어떤 일을 처리할 때 일어나는 작업들을 순차적으로 나열한 것 입니다 그래서 우리가 이미 MySQL monitor를 사용을 해 봤잖아요 그리고 이제부터 사용할 것은 mysqli인데, 이 두 가지 모두 이 데이터베이스 서버 입장에서는 그 서버에게 무언가를 요청하는 클라이언트이기 때문에 본질적으로 하는 일이나 또는 그것을 조작하는 방법은 사실 같습니다

하나는 일반적인 프로그램이고 그리고 또 하나는 API라고 하는 그런 차이가 조금 있을 뿐 이예요 그래서 익숙한 MySQL monitor를 통해서 그것에 대응되는 이 mysqli의 사용 방법을 짚어보도록 하겠습니다 우선 제일 먼저 MySQL monitor를 사용할 때 우리가 제일 먼저 하는 일은 뭐예요? 이런 명령을 운영체제에서 입력하죠? 이 명령이 의미하는 것은, localhost에 존재하는 데이터베이스 서버에 접속할 때, 아이디 값은 “root”고, 비밀번호는 “111111”인 사용자의 명의로 접속을 하겠다 라는 뜻이죠 그것과 대응되는 mysqli의 명령은 이렇게 됩니다 여기 보시면 “mysqli_connect()” 이렇게 되어 있습니다

그것은 뭐냐면 mysqli_connect가 바로 함수라는 거죠 그런데 저 함수는 여러분이 만든 적이 없기 때문에 기본적으로 PHP에서 내장되어있는 함수예요 실제로 데이터베이스를 핸들링하는 작업은 아주 복잡한 로직들에 의해서 이뤄지기 때문에 mysqli_connect 라고 하는 저 함수의 실제적인 내용은 상당히 복잡할 겁니다 그런데 단지 우리가 저 mysqli_connect 그리고 입력 값들을 주는 것을 통해서 데이터베이스에 아주 쉽게 접속할 수 있다는 거예요 처음 보셨을 때는 이것도 복잡하겠지만, 사실이 코드 한 줄이 함의하고 있는 복잡한 메커니즘을 생각한다면 우리가 얼마나 편하게 이 데이터베이스를 사용할 수 있는 것인지 여러분들이 상상은 하실 수 있을 것 같다는 생각을 합니다

아무튼 mysqli_connect라고 하는 저 함수의 메뉴얼을 살펴보면 그 첫 번째 입력 값으로는 host, 즉 접속하려고 하는 서버의 주소가 와야 된다고 되어 있구요 바로 그것이 MySQL monitor로 치면 이 부분이라고 할 수 있습니다 그리고 두 번째 입력 값은 사용자의 아이디 여기에 해당 되구요 마지막으로는 사용자의 비밀번호를 입력하라고 메뉴얼에 적혀있어요 “순서대로 입력해야 된다”라고 적혀있습니다 그것은 마지막 것은 이것이 되겠죠? 그래서 여러분이 이 코드를 실행을 시키면, 내부적으로 우리 눈에 보이지 않는 메커니즘에 의해서 데이터베이스 서버에 PHP가 접속을 하게 됩니다

그리고 접속에 성공하게 되면, 접속 결과를 “conn”connect를 줄여서 쓴 거예요 “conn” 변수에 입력 값으로 변수의 값으로 이렇게 이것이 출력을 해주는 것이죠 그럼 우리는 이 “$conn”라는 변수를 통해서 우리가 접속한 바로 이 정보에 의해서 접속된 서버를 제어할 수 있게 됩니다 이 코드를 실제 PHP 애플리케이션 코드에 반영하도록 하죠 PHP 코드가 시작되는 여기에 저렇게 하고서, 우선 “mysqli_connect(‘localhost’” -큰따옴표 작은 따옴표 상관 없습니다- 그 다음에 우리는 “root” 아이디이니까 아이디를 “root”를 적고요, 그 다음에 비밀번호는 “111111”이라고 적고 “;”을 합니다

그러면 저 함수가 실행된 결과는 “conn” 변수라고 할게요, “conn” 변수에 담기게 돼요 그 다음에 우리가 MySQL monitor를 사용할 때는 생각해보면, 서버에 접속한 다음에 그 다음에 뭘 했나요? 잘 기억 안 나실 수도 있는데 바로 데이터베이스를 선택했습니다 그때 사용하는 명령은 “use opentutorials” 였죠? 이 중에서 “use”라는 것은 명령어예요 그리고 “opentutorials”라는 것은 우리가 만든 데이터베이스의 이름인데요 “opentutorials”라는 데이터베이스를 이제부터 사용하겠다라고, MySQL monitor에서 명령을 내린거죠

그러면 그것에 해당되는 mysqli API는 무엇이 있을까요? 이것입니다 보시는 것 처럼 이 함수는 “mysqli_select_db“ 라고 하고, 첫 번째 인자로는 “$conn” 변수를 주셔야 됩니다 conn 변수라는 것은 mysqli_connect라고 하는 것을 통해서 접속에 성공했고 그 접속된 정보를 이 “conn”이라고 하는 변수에 담은 건데요 그 정보를 “mysqli_select_db“ 의 첫 번째 인자로 전달해 주도록 약속되어 있기 때문에 그대로 쓰시면 되는 겁니다 그 다음에는 우리가 사용하려고 하는 데이터베이스인 opentutorials를, 이렇게 그 다음 줄에 적어주시면 DB를 선택하는 것까지 끝난 것이 돼요 그러면 우리 코드에 반영해 보죠

우선 “mysqli_select_db”, “db”데이터베이스 약자입니다 그 다음에 첫 번째 입력 값으로 “conn”을 주시구요 그 다음에 두 번째로는 “opentutorials ”라고 이렇게 코딩을 하시면 됩니다 이렇게 해서 우리가 데이터베이스에 접속하고 데이터베이스를 선택하는 것 까지 우리가 알아 봤어요 그런데 시간이 좀 많이 됐고 우리가 할 이야기가 좀 더 많이 있기 때문에 실제로 테이블에 접근해서 그 테이블에 있는 정보를 가져온 후에 그것을 웹페이지로 만드는 우리 수업의 정말 클라이막스는 다음 시간에 다음 영상에서 살펴볼게요