웹 애플리케이션 만들기 – 호스팅 1 : 웹호스팅 VS 서버호스팅

네, 이번 시간에는 호스팅이라고 하는 주제에 대해서 알아보겠는데요 지금까지 우리가 살펴 본 것은 자신의 컴퓨터에 여러분이 설치한 운영체제죠 그리고 거기에 PHP, MY SQL도 직접 설치했고 거기에 여러분이 만든 애플리케이션을 탑재해서 인터넷을 통해서 사용자들에게 서비스를 제공하는 것이 지금까지 우리가 했던 겁니다

다시 말해서 우리가 다 혼자서 한거에요 자, 그런데 제가 말씀 드린 것 처럼 여러가지 복잡한 이슈들이 있고 여러분의 집에서 서비스를 운영하는 것은 상당히 제한적이고 여러가지 불편한 점들이 많이 있습니다 그래서 그런 불편한 점을 대행해주는 비지니스가 있어요 그게 바로 호스팅 이라고 하는건데요 우선 HOST가 뭔지 부터 한번 살펴 보면 자, 이렇게 인터넷에 접속되어 있는 여러대의 컴퓨터들 하나 하나를 우리가 보통 호스트라고 부릅니다 자, 그런데 그 중에서 호스팅(HOSTING) 이라고 하는 것은 조금 관점이 달라요 호스팅 이라고 하는 것은 클라이언트 쪽이 아니라 보통 정보를 제공하는 사업자 즉 이쪽에 있는 저런 서버쪽 에서 사용되는 컴퓨터 또는 소프트웨어 이러한 것들을 제공하는 그런 사업자들을 우리가 호스팅이라고 보통 부릅니다 자, 그래서 이 호스팅에서는 어떤 환경을 갖추고 비지니스를 하냐면 이 사업자들이 일단 IDC 라는 것이 있습니다 IDC 는 Internet Data Center 라는 뜻이에요 그래서 이 IDC는 그냥 건물이에요

건물인데 엄청나게 크고 엄청나게 많은 컴퓨터들이 이렇게 빼곡히 자리를 잡고 있어요 즉 컴퓨터들의 집이라고 할 수 있습니다 그래서 이 IDC는 아주 안전한 곳에 또 전기가 차단되면 그 전기가 자동으로 자가발전을 시작하는 그런 인프라고 그리고 인터넷과 같은 네트워크가 아주 빵빵하게 들어와서 아주 원할하게 통신할 수 있는 그런 서버가 동작하기에 최적의 조건을 갖춘 그러한 공간을 우리가 IDC 데이터 센터(Data Center) 라고 합니다 그래서 이 데이터센터가 갖춰야될 가장 중요한 경쟁력은 일단은 안전한 보안 그리고 네트워크가 빵빵해야 된다 라는 것이죠 바로 이런 인프라를 갖춰놓고 또는 이런 인프라 안에 들어가서 사용자들에게 어떤 웹 애플리케이션을 운영하고자 하는 사람들에게 그 서버의 운영을 대행해주는 역할을 하는 곳이 바로 호스팅 사업입니다 자, 크게 대표적으로는 두가지로 웹호스팅, 그리고 서버 호스팅을 얘기할 수 있을텐데요 자 우선 웹 호스팅이라는 것은 웹이 앞에 붙어 있잖아요 그 얘기는 뭐냐면 웹 애플리케이션을 운영하기 위한 다시 말해서 웹 서버를 운영하기 위한 모든 것을 제공 하는 것을 우리가 웹 호스팅이라고 합니다 자, 그래서 기본적으로 서버, 여기서 얘기하는 서버는 하드웨어를 의미하는 것이고 또 운영체제까지 포함이 되는거죠 그리고 거기에는 당연히 빵빵한 인터넷이 연결이 되어 있어야 되죠 그리고 그러한 것들 뿐만 아니라 실제로 우리가 웹 애플리케이션을 동작하기 위해서는 이러한 것들이 필요했잖아요 데이터베이스, PHP, 웹서버 이런 것들이 필요했는데 그런 것들을 여러분들이 설치하는게 아니라 사업자가 미리 설치해 놓고 여러분들은 그냥 거기에다가 자신이 만든 애플리케이션을 업로드 하기만 하면 이제 동작하기 시작하는 것이 웹 호스팅 입니다 장점은 그냥 업로드만 하시면 되요 신경쓸게 없습니다 여러분은 자신이 만들고 있는 애플리케이션을 잘 만드는 것에 집중하면 된다는 것이고요 그리고 단점은 웹 애플리케이션을 동작하는 용도로만 사용할 수 있다는 겁니다

왜냐하면 여러분이 운영체제 레벨에서 접근해서 뭔가 할 수 있는 여지가 전혀 없기 때문에 그냥 웹사이트를 운영하는데만 사용 할 수 있어요 그리고 일반적으로 웹호스팅은 한대의 컴퓨터에 여러명의 사용자들이 들어가서 같이 한대의 컴퓨터의 자원을 공유하고 있기 때문에 만약에 이웃을 잘못 만나서 이웃이 대박이 나면 여러분한테는 슬픈 일이 오는거에요 왜냐 자신의 사이트가 느려지는거죠 바로 이러한 장점과 단점을 가지고 있는 것이 웹호스팅 입니다 하지만 가장 사용하기 쉽고 비용도 대체로 저렴하기 때문에 여러분이 자기가 직접 집에서 서버를 운영하는 것이 아니라면 제일 먼저 고려해 볼 만 한 것은 웹호스팅 입니다 자 그 다음에는 서버호스팅이라고 하는 형태의 호스팅이 있는데요 자, 이 서버 호스팅은 쉽게 생각해서 컴퓨터를 제공하는 겁니다 그리고 이 컴퓨터는 인터넷에 연결이 잘 되어 있기 때문에 여러분이 이걸 이용해서 서버의 용도로 사용할 수 있는거죠 자 그래서 이 서버 호스팅은 일단은 서버 컴퓨터를 제공합니다 예, 그런데 이 서버 컴퓨터에는 아까 우리가 (배운) 웹호스팅과는 다르게 웹서버, 미들웨어, 데이터베이스 이런 것들이 하나도 설치가 안되어 있고 그냥 컴퓨터 한대를 임대해 준거에요 그럼 여러분은 자신이 필요한 그런 것들은 직접 설치해서 운영하셔야 합니다

장점은 뭐냐면 웹호스팅과는 다르게 여러분이 컴퓨터로 할 수 있는 모든 일을 다 할 수 있어요 네, 그렇기 때문에 자유도가 높기 때문에 활용도가 높다는 장점이 있습니다 근데 단점은 직접 운영을 해야되요 자, 서비스를 직접 운영한다는거 결코 만만한 일이 아닙니다 네, 알아야 될것들이 상당히 많다는거죠 하지만 여러분의 집에서 여러분이 운영하는 것과는 다르게 서버 호스팅은 뭐, 장비라던지 어 그런 것들에 대해서는 어

업체들이 대행해 준다라는 차이가 있죠 하지만 여러분이 직접 운영하면 여러분은 자신의 장비까지 컴퓨터까지 직접 챙겨야 된다 라는 점에서 차이점이 있는거죠 지금 우리가 살펴본 호스팅의 두가지 형태 웹호스팅, 서버호스팅 이 두가지가 우리가 인터넷을 통해서 어떤 서비스를 사용자들에게 제공한다고 하면 가장 일반적으로 사용되는 가장 쉽게 여러분들이 접근해 볼 수 있는 전통적인 모델이라고 할 수 있습니다 자, 그러면 또 다른 모델이 있냐? 있습니다 클라우드 컴퓨팅 이란 것이 있는데요 이 클라우드 컴퓨팅 이라고 하는 것은 우리가 다음 영상에서 도대체 클라우드 컴퓨팅 이란 것이 무엇이고 이건 어떤 차이점이 있는지에 대해서 다음시간에 살펴보도록 하죠

야무의 모던 웹사이트 디자인 프로세스

안녕하세요 야무입니다 이 과정에서는 디자이너가 웹 디자인을 구현하는데 있어 자격을 얻는 데 있어서 필요로 하는 그는 모든 테크닉 등을 배우게 될 겁니다 기자의 창을 방지하는데 있어서 대기중인 그래픽을는 부정하는 데 그치지 않고 시스템을 도입을 하여 적재적소에 콘셉트를 해체하고 배치하는 과정에 있어서 필요한 최재lg로 옮긴 gist 필요한 초중고 저는 사는 방법을 여부도 컸습니다 체질적으로 디자인되어 있는 데이터를 외부로 공개할 때는 구조 장비가 필요하게 되는데요 코레일은 오는 기자는 구조를 태도를 견지할 수가 없습니다 이렇게 그런데 있는 웹 디자인 이게 이달의칠지에 불고기 – 제기한 디자이너가 설계한 대로 오기 쉬셔야겠죠 그건을 그려보는적으로 이번 fta 통과 백개의 새로운 변신 결과물을 부드럽게냈습니다 인하대 보여지는 이겨나가는 앞서 보신 부산의 페스티발에 well being hdmi가 실수로 큰된 뒤 있다구요 인터액션이 잘 구현되어 있는 결과를 있는 확인하실 수 있습니다 크지만 그대로 옮긴 것은 아니구요 도착예정 과 그대로 통일하게 처리할 수 있도록 시스템을 활용하여 포토샵의 데이터 메디에이트를 동일하게 처리하는 것을 확인할 수 있습니다 metro 베이스를 기점으로되지 않아 잡았죠 이미지를 포함한 컨텐츠 박소라이니 위해서부터 칸 the khan 메카 한다

다섯째 볼커 다카 역할이 떨어지는을 함께 할 수 있고요일지매' 한 강력한 비판했다쿼터서 율무 정확하게 그 두 차례 디자인과 호랑이 마친 그건 mediator 확인하실 수 있습니다 이화장에서 배울 수 있는 그건으로 이것이포인트일 수 있겠죠 디자이너가 psp의 그래픽 데이터를 베풀어져 설립할 수 있고 화면에 그려질 수 있는 html 시스템의 데이터로 바꿔주는까 그것이 이번 사업에서여명이 있고요 귀국한 반면 hlpag에 맞고 구조와 스타의 시체를 작성하는 방법 그 부분에 대해서 공부하게 됩니다 한목소리로주는 9회약 기술을 통해서 이제는는 css 에 대해서 이해할 수 있게 되고 구조로 설계의 수신료 psp 상업화할 때부터 그 부분은 시스템이 런던의 수가 있게 되는 것이죠 여러분들이 과정을 즐길 수 있다면 돌아보니 실제 그러나 오늘도 네이버로 캐스팅 환경과 민자역사는 그는 수 있는 것은 연수실겁니다

WEB1 부록 : 코드의 힘 : 웹사이트 방문자 분석기

자 이번 시간에는 우리 웹페이지 분석기 라고 불리는 서비스를 살펴볼 거구요 그 과정에서 한 줄의 코드가 얼마나 강력한 힘을 갖는지를 잘 체험해 보십시오 여러가지 웹페이지 분석기 라고 하는 서비스가 있습니다 이 서비스들은 웹사이트에 몇명이 방문했는지부터 시작해서 그 방문자가 어떤 경로를 통해 이 웹사이트의 도착했는지 또 어떤 경로를 통해서 이동하고 있고 그리고 어떤 환경에서 웹 사이트를 탐색하고 있는지와 같은 아주 고급 정보를 제공해주는 서비스들입니다 그중에서 저는 구글 analytics 라고 하는 서비스를 선택했구요 이 서비스의 사용 방법을 살펴 보면서 여러분들이 분석기 라고 하는 서비스의 일반적인 동작 방법과 사용방법을 익힐 수가 있을 것이고 그러면 다른 서비스를 이용하시는데도 큰 도움이 될 겁니다 자 우선 analytics

googlecom 이란 주소로 들어오시면 이렇게 생긴 웹페이지가 나올 거에요 일단 로그인을 해 주시고요 저는 이미 로그인 되어 있는 상태입니다 자 그러면 새로운 계정 만들기 라고 화면에 나올 거고요 여러분이 만들고 있는 것이 웹사이트 면 현재 상태 모바일 앱을 만들고 있으면 이렇게 선택을 바꿔주시면 됩니다 여기 보시면 account name 이라는 것은 (2018년 8월 15일 기준으로 해당 사이트가 한글 번역이 되어있다) 한국어로는 계정 이름이라고 할 수 있는데 그냥 여러분의 자신의 계정, 자신의 이름을 적는다고 적으시면 될 것 같아요 저는 WEB-1이라고 적겠습니다 그 다음에 여기 보면 Website name 이라고 되어 있는데 그것은 WEB-1이라고 하는 어떤 범위 안에서 여러 개의 프로젝트가 있을 수 있단 말이에요 그 여러 프로젝트 중에 하나 또는 그 웹사이트 중에 하나를 적는 겁니다 전 WEB-1에 대한 예제 페이지를 추적할 거기 때문에 WEB-1이라고 적었습니다 자 그 다음에 Website url 이라고 적혀 있는 부분에는 여러분이 운영하고자 하는 웹 사이트의 주소를 적어주시면 됩니다 자 저의 웹사이트는 이런 주소를 가지고 있기 때문에 제가 분석하고자 하는 웹 사이트의 주소를 여기다가 이렇게 붙혀 주겠습니다 자 앞에 https 로 하고 이 앞에 있는 부분이 이제 지우면 되겠죠 Industry Category 는 산업분류를 적는 건데요 나중에 여러분들이 자신의 웹 사이트와 어떤 산업 분야의 웹 사이트들 전체에 대한 통계를 비교해서 어떤 그 통찰력을 얻고 싶을 때 사용할 수 있는 그런 기능입니다 저는 뭐 대충 아무거나 적겠습니다 뭐가 있을까요 아 첫번째꺼 적었어요 그냥 그 다음에 음 리포팅 타임 존 이라는 것은 시간 때를 선택하라는 건데요 전 여기서 한국의 있기 때문에 코리아 사우스 코리아 를 적었고 요 밑에 있는 부분은 그냥 두고 get Traking ID 라는 걸 클릭한 다음에 여기 약관이 나오는 부분에서 역시나 사우스 코리아 를 선택한 다음에 I Accept의 동의한다 라는 것을 클릭합니다 자 그럼 이렇게 생긴 페이지가 뜨는데요 여기에서 여기에서 Tracking info, Tracking code 라고 되있는거 보이시죠 코드 이제 우리는 코드 라는 텍스트가 보이면 관심이 간단 말이죠 Tracking code 를 선택한 다음에 밑으로 쭉 내려오면 Global Site Tag 라고 되어 있습니다 여기 있는 요 코드 요거를 이렇게 선택했는데요 자 이거는 어떤 코든지 모르셔도 되요 저도 관심이 없어요 그냥 '이 코드를 당신의 웹사이트의 넣으면 구글 분석기 가 알아서 분석해 줄 겁니다' 라고 적혀 있는 거기 때문에 우리는 그냥 애가 코드 란 사실을 알면 되는 겁니다 자 그럼 저는 저기 있는 저 코드를 여기에 모든 웹페이지의 head 태그 안쪽에 넣으라고 돼 있거든요 그래서 저는 여기서 head 태그 안쪽에 다가 요 코드를 붙여넣기 그리고 다른 웹페이지도 head 태그 안에 다 붙여넣기를 이렇게 할게요 자 그럼 됐습니다 그러면 여러분이 여기 실시간이라고 되어 있는 부분을 클릭해서 들어오셔서 이렇게 보고 계시고요 그리고 오른쪽이 에 웹 페이지에는 이제 이 구글 analytics 가 준 코드가 들어가 있는 상태입니다 그럼 여기있는 이 리로드 버튼을 클릭하면 그 코드가 실행되면서 analytics 서버에 다가 어떤 정보를 전송할 거에요 그러면 여기에 그 실시간으로 반영되는지 안 되는지를 한번 확인해 봅시다 보시는 것처럼 제가 리로드 했더니 잠시 후에 이렇게 선이 하나 생기는데 저 선이 뭐냐 한 명이 방문했다는 뜻입니다

즉 '이 웹사이트를 현재 한 명이 보고 있는 상태다' 라고 나오는 거구요 자 그리고 여기 오디언스 라고 되어있는 부분은 뭐냐면 저건 이제 그 한국어로는 잠재 고객으로 되어 있을 겁니다 그래서 여기 보시면 각각의 방문자들이 예를 들어서 Geo 요거는 어떤 언어를 주로 사용하고 있는가 또는 Location 은 어느 지역에 거주하고 있는가 이런 정보들을 보여주는 건데 아직 우리는 그 방문자가 없기 때문에 이게 별로 의미가 없단 말이죠 그래서 제가 opentutorials 의 예제를 보면서 통계를 보면서 조금 더 실감나는 데이터를 보여드릴게요 여기 잠재고객을 보시면 여기에 Geo, Language를 보면 현재 이 opentutorials 라는 사이트에는 ko 한국어 가 압도적으로 많구요 예 그리고 뭐 영어 그 다음에는 또 뭐 다른 언어 러시아어 도 있고 그러네요 자 그 다음에 Location을 클릭해 보면 방문자들이 주로 어느 지역에 있는지를 볼 수 있는데 역시나 한국사이트이기 때문에 한국의 집중적으로 많고 전세계적으로 분포되어 있고 또 정보통신 이 아직 발전하지 않은 기술들 그 국가들은 별로 접속자가 없는 상태네요 그렇죠 자 그 다음에 그 Technology 라고 되어있는 부분은 Browser 그리고 운영체제(os) 이렇게 나오죠 어떤 브라우저와 어떤 운영체제를 많이 쓰는가 보이는데 크롬이 일단 아주 많다 라는 것을 볼 수가 있죠 이런 고급 정보들을 무료로 제공한다는 거죠 자 이렇게 해서 분석기의 사용 방법을 간단하게 소개해 드렸구요 여러분이 웹 사이트를 만들면 이런 분석기 와 같은걸 이용해서 분석할 수 있는 데이터는 무조건 쌓아 두십시오 어떻게 분석을 잘 할지는 나중에 고민 하시면 될 문제지만 데이터가 없다면 분석할 수가 없거든요 일단 데이터 부터 쌓아 놓고 나중에 이 웹사이트나 그 데이터가 너무 중요하면 그때 정교한 분석을 하시면 됩니다 그리고 또하나 여러분들께 다시한번 상기해 드릴 것은 우리 수업은 분석기 수업 이면서 동시에 코드가 얼마나 강력한 힘을 보여주는지를 알려 드리는 수업입니다 한 다섯줄 정도 되는 코드가 이런 어마어마한 서비스를 함축하고 있다 그렇기 때문에 코드는 중요하다 라는 것을 여러분이 이번 시간을 통해서 또 한번 상기 하셨으면 좋겠습니다 여기까지 하겠습니다

#2 시놀로지 나스로 집에서 웹서비스 운영하기 | web staion setting | package install | sub KOR, ENG

나스를 검색한 당신 보통 사람이 아니라는 걸 난 알고 있습니다 안녕하세요 동네 컴퓨터 학원 입니다 오늘은 웹사이트를 나스 를 통해서 호스팅 하는 방법에 대해서 좀 알려 드릴 건데요 웹사이트를 혹시라도 만들어 보신 분이 있다고 한다면 서버 와 클라이언트 개념을 이해하시고 계실겁니다 구체적으로 설명 드리지는 않을 거에요 웹사이트를 만들기 위해서는 서버가 필요합니다 아시겠지만 나스는 개인 서버 입니다 그 말인즉슨 웹 사이트를 호스팅할 수 있다라는 건데요 워드프레스는 물론이고요 php djanogo nodjs 등 다양한 웹 사이트를 호스팅할 수 있습니다 다 실제로 해본 건 아니기 때문에 해본 것부터 하나하나 좀 보여드릴까 해요 오늘은 php 로 환경 설정 세팅입니다 기본적으로 패키지 설치 위주로 진행을 할 거구요 ddns 설정을 진행할 거예요 ddns 가 뭔지는 뭐 인터넷이나 검색을 해 보시면 굉장히 자세하게 잘 써놓은 글들이 있기 때문에 찾아 보시구요 간단하게 설명을 드리자면 ip 가 계속해서 변동을 합니다 그걸 유동 ip 라고 하는데요 어 시놀로지 에서 주는 일정한 도메인을 이용해서 항상 동일하게 접속할 수 있게 해주는게 ddns 설정 이에요 그것까지 해서 첫 화면 띄우는 것 까지 보여드릴 거에요 오늘도 굉장히 유용하실겁니다 나스를 지금 구매 하셨거나 아니면 구매를 예정 중이신 분이라면 제가 앞으로 만든 컨텐츠 그리고 오늘 것도 굉장히 유용하실겁니다 구독과 좋아요 그리고 알람도 부탁 바라겠습니다 나쓰 고~~~오급 강의 시작합니다 이제 시놀로지 나스 에서 웹 사이트의 호스팅 하는 방법에 대해서 설명을 드리겠습니다 과정은 생각보다 간단한데요 필요한 패키지를 설치를 하고 ddns 설정을 하면 웹사이트를 사용하실수가 있습니다 dsm 환경에서 세팅을 진행을 할 건데요 dsm 에 접속을 하시게 되면 바탕화면에 패키지 센터 라는게 있습니다 이걸 클릭합니다 그러면 플레이 스토어나 앱스토어 처럼 설치할 수 있는 패키지 들이 나열이 되는데요 뭐 스크롤 해서 찾으셔도 상관은 없지만 검색이 가능하니까 검색 기능을 이용해 보겠습니다 검색창에 web 이라고 입력하시고 엔터를 치시면 패키지들이 나옵니다 이중에서 웹 스테이션을 설치하겠습니다 그리고 aphach http 서버 22 도 설치 하겠습니다 php 라고 검색을 한번 해볼게요 5

6 을 설치합니다 그리고 phpmyadmin까지 설치를 할게요 56 을 설치해야 phpmyadmin이 설치가 되는게 팝업창으로 확인이 되십니다 설치합니다 이렇게 메뉴버튼을 누르시고 이쪽에 웹 스테이션으로 들어갑니다 확인하시면 되구요 일반 설정 에 들어가셔서 php 백 엔드 서버를 뭐 아파치 설치 했으니까 아파치로 설정을 하시고 php 는 56 으로 합니다 70 은 기본적으로 설치가 되어 있으실 거에요 개인 웹사이트를 활성화 옵션을 클릭해 주십니다 요렇게 까지만 해주시면 되고 나서 제어판으로 들어가셔서 외부 엑세스를 클릭합니다 클릭한 들어가셔서 ddns 라는게 뜨는데요 여기에 보시면 추가 라는 버튼이 있어요 추가를 누르시고 서비스 제공 업체는 시놀로지 그리고 호스트 이름이 웹사이트를 웹사이트를 접속하실 때 쓰시는 id 같은거에요 근데 여기서 주의 할게 하나 있으세요 뭐 hello 이걸로 한번 입력을 해볼게요 한 다음에 연결 테스트 이 호스트 이름은 이미 사용 중입니다 라고 나옵니다 고유한 주소를 만드시는 거기 때문에 네이버나 뭐 이런데 id 만드시는 것 처럼 고유한 걸 찾으셔야 되요 요것도 한번 눌로보도록 할게요 확인도 눌러 지가 않죠 고유한 id를 접속하실 때 쓸 단 하나의 아이디를 만드신 다음에 확인을 누르십니다 추가가 된게 보이시죠 요걸 한번 다시 눌러 보구요 호스트 이름을 확인합니다 시놀로지 는 이 뒤에 이름을 바꿀 수가 있어요 다양하게 있으니까요 원하시는 걸 하시면 됩니다 이렇게 하시고 나서 플러스 버튼을 눌러서 새창을 여신 다음에 도메인으로 접속을 하시면 첫번째 화면이 나오죠 요 파일 스테이션으로 들어가시면 web 이라는 폴더가 새로 생겼습니다 요 폴더 안에 파일들이 위치하게 되는 거에요 여기 안에 있는 파일들을 수정을 하게 되면 페이지의 내용이 바뀌게 됩니다 한번 해볼게요 hello to 라고 되어 있는데 hi로 바꿔 볼게요 index

html로 들어가셔서 수정하시면 됩니다 이게 무슨말인지는 무시한 해주세요 hi로 바꿔보겠습니다 전체 문장을 바꿔보겠습니다 저장하면 웹 사이트가 새로고침을 한번 해보면 하이로 바뀐 게 보이시죠 여기까지 입니다 어떠셨나요 조금은 어려웠을 수도 있을 것 같아요 근데 나스가 아니었다면 또는 그냥 일반 공유기 (iptime) 를 사용하셨다면 훨씬 더 어려운 과정을 거치고 요 화면에 첫 화면을 띄우 셨을 겁니다 나스이기 때문에 어렵지 않은 거구요 웹 호스팅을 집에서 한다는 것은 굉장히 어려운 일이에요 생각지도 못한 문제들이 많이 발생하구요 여기까지 진입하는데 이정도의 노력으로 할 수 있다면 상당히 좋은 시스템이라고 보시면 됩니다 일전에 제가 라즈베리 파이로 서버를 만들어 봤는데 나쁘지 않았어요 CLI(commend line interface) 의 환경에서 전부 세팅을 했어요 됐구요 이렇게 이제 GUI로 보이는 화면에서 마우스를 가지고 클릭해서 사용하는 것은 불가능 한게 라즈베리 파이 입니다 설명이 길어지네요 노잼 입니다 오늘은 여기까지 하고요 앞으로 가능하면 이론적인 설명보다는 실제로 작동하는 튜토리얼을 많이 공유할까 합니다 실제로 해보시구요 모르시겠는 것은 최대한 검색을 해보시고 그래도 모르시겠으면 저에게 댓글좀 남겨주세요 제가 아는만큼 설명해 드릴께요 제가 다 아는 건 아닙니다 저도 이제 공부 하는 거고 요걸 통해서 발전하고자 하는 채널이니까요 앞으론 응원 많이 해 주시구요 구독 좋아요 알람 설정 부탁드리겠습니다 오늘은 여기까지 입니다 아 다음 콘텐츠 또 기대해주세요 안녕

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의 태그들을 살펴보도록 하겠습니다

3. 워드프레스로 프런트 페이지 만들기 – carousel slide

[음악] 자, 계속해서 프론트 페이지를 편집하겠습니다 php get header 소괄호, 세미콜론

그리고 끝나고 부분에 php get footer 소괄호 세미콜론 주석을 하나 넣지요 front section 닫히는 주석도 넣겠습니다 다음에 이 사이에 section에 아이디는 front-section, 그 밑에 클래스로 section-content, 그 밑에 클래스 container 그 밑에 클래스 row 탭키를 눌러주세요

여기에는 우측에 main 섹션 좌측에 side 섹션이 들어옵니다 그래서 front main이라고 주석 표시해주고, 닫히는 주석도 표시합니다 이 주석들을 복사해서 붙여넣기 합니다 그리고 main 대신에 side라고 수정합니다 여기 메인 섹션에는 div 클래스 col-md-9, 9개의 컬럼으로 하나의 단을 만듭니다

탭키를 눌러주세요 먼저 슬라이드를 넣을텐데요, 부트스트랩 사이트에서 카로우젤 슬라이드라는 컴포넌트가 있습니다 좌우 화살표 콘트롤이 있는 슬라이드, 슬라이드 아래에 인디케이터라고 하는 이런 바가 있는 슬라이드도 있네요 캡션이 들어가게 할 수도 있습니다

예제 코드를 카피해서, 텍스트 에디터로 갑니다 그 전에 주석으로 slide라고 하고, 이 사이에 붙여넣기 합니다 줄정리를 하겠습니다 서브라임에서는 Edit 메뉴에서 Line에 Reindent를 클릭해주세요 여기에서 조금 수정할 필요가 있는 것이, 여기 아이디인데요, 이것들을 모두 컨트롤 D를 눌러 4개를 지정하고, carousle-front라고 고쳐줍니다

그 다음, src에는 슬라이드 이미지가 오는데, 더미이미지로, http viaplaceholodercom에 사이즈는 1600×1100으로 하겠습니다 알트는 그대로 합니다 슬라이드에 물음표 text 이퀄 first + slide라고 해주세요

이 부분을 드래그 합니다 아, 1660이 아니라 1600으로 해주세요 두번째 슬라이드에도 고쳐줍니다 세번째도 고칩니다 텍스트를 다른 슬라이드에도 넣을텐데, 이러면 더미이미지에 사이즈 대신 이미지 타이틀이 보이게 됩니다

text = second + slide 세번째도 물음표 text = third + slide라고 추가합니다 이제는 슬라이드의 아래부분에 캡션을 넣겠습니다 이 캡션은 여기에서 보듯이 carousel-items div 속에 이런 클래스들과 함께 넣어주면 된다고 합니다 복사하고, 텍스트에디터로 가서 이미지 밑에다가 붙여 넣기를 해주십니다 reindent 하고, h5에 퍼스트 슬라이드 캡션이라고 넣고 p 태그에는 lorem 10개의 단어를 더미텍스트로 넣겠습니다 그리고 이제는 이 부분들을 모두 복사해서 다른 슬라이드에도 같은 위치에 붙여넣기 해주세요

파트 구분을 하기 위해 carousel-indicators라고 주석을 넣고, 두번째는 carousel-inner라고 하고 줄도 좀 띄웁니다 그리고 아, 캡션을 붙여넣기할때 div가 빠졌네요 첫번째 div 캡션을 복사하고, 다시 붙여넣기 합니다 Second라고 고칩니다

세번째는 third로 고쳐주세요 그리고 이 부분은 carousel-controls라고 주석을 넣어줍니다 그리고 세이브해 주세요 브라우저로 가서, 대쉬보드로 갑니다 지난 번에 페이지에 홈이라는 페이지를 만들었구요

이 페이지를 프런트 페이지로 등록해야 합니다 설정에 읽기로 들어가서, 전면 페이지를 홈으로 선택하고 변경사항 저장을 눌러줍니다 프런트 엔드로 가서, 주소창에 localhost:8080/coding_diy로 엔터를 치면, 이런 전면페이지가 보입니다 네 슬라이드는 반영된 걸 볼 수 있구요, 인디케이터 제대로 되구요

그런데 컨트롤이 제대로 안되네요 다시 텍스트 에디터로 갑니다 콘트롤 파트를 보니까, href에 이 아이디들이 처음 설정할 때의 아이디와 다르죠 인디케이터에 target에만 carousel-front라고 수정하고, 콘트롤의 href도 바꿨어야 하는데, 그렇지 못해서 작동이 제대로 되지 못했습니다 수정하구요

세이브를 하고, 브라우저에 가서 리프레쉬한 다음 좌측 우측 인디케이터를 누르니까 이번에는 모두 제대로 잘 됩니다 네 그런데 슬라이드는 오른쪽에 위치시키려고 계획했고, 좌측에는 사이드 메뉴를 넣으려고 하는데, 슬라이드가 왼쪽에 있지요 이런 경우에는 부트스트랩에서 컬럼의 순서를 변경시키는 클래스가 있는데요, 부트스트랩 사이트 flex에 order를 보시죠 div에 코딩은 첫번째, 두번째, 세번째로 아이템들을 넣었지만, 프런트 엔드에서는 순서를 변경시킬 때 order를 쓰고 하이픈을 한 다음 순서의 숫자를 적어줍니다

또한 이 클래스는 breakpoint를 넣어 디바이스마다 순서를 다르게 지정해 줄 수도 있습니다 이 클래스와 breakpoint를 잘 활용하면, PC에서는 어떤 순서가 모바일과 태블릿에서는 각각 다른 순서대로 엘리먼트를 배치할 수 있습니다 그래서 프런트 페이지에서 메인섹션과 아직 코딩하지 않은 사이드 섹션의 순서를 임의로 정할 수 있겠지요 지금 메인 섹션은 오른쪽에, 사이드 섹션은 왼쪽으로 하고 싶습니다 그래서 이 front-main 부분에서 col-md-9 다음에 order-2 아니면 안전하게 12라고 해줍니다

그리고 미디엄 이상에서만 이 순서로 배치하게 하기 위해서 order 다음에 하이픈 md라고 해줍니다 사이드 섹션에서는 order-md-1로 해주면 되겠지요 그냥 front-main의 div를 모두 복사해서, 사이트 섹션 주석들 사이에 붙여넣기, 그리고 12 대신 1이라고 해줍니다 닫히는 div 태그 달아 줍니다 그리고 일단 이 사이에는 lorem 100개의 더미 텍스트를 넣고 세이브합니다

브라우저로 가서 리프레쉬하면 이제는 슬라이드가 오른쪽에 위치하고, 사이드 섹션은 왼쪽에 위치하게 되었습니다 order라는 클래스는 위치를 변경하는 클래스가 아니라 배열 순서를 지정하는 건데, 사실상 위치를 조정하는 효과가 생깁니다 breakpoint를 넣어 디바이스마다 개별 지정이 가능하고, 숫자는 1에서 12까지 정할 수 있는데, 이번에는 그냥 12로 지정을 했습니다 만약 order를 정할 엘리먼트가 2개뿐이라면 이렇게 1과 12라고 해도 되겠습니다 프런트 페이지 슬라이드는 여기까지 마무리하고, 다음에는 페이지 아이템 박스에 대해 코딩하겠습니다