안경잡이개발자

728x90
반응형

클라우드 구름 IDE 서비스를 이용해 용량 0MB로 개인 웹 사이트 만들기 7강: MDBootstrap으로 푸터 만들기

나동빈


  이번 시간에는 마지막으로 푸터 요소를 넣고 프로젝트를 완성합니다. 따라서 <footer> 태그를 다음과 같이 꾸며줍니다.


    <!-- 페이지의 하단부 영역 -->

    <footer class="page-footer text-center text-md-left font-small blue pt-4 mt-4">

        <div class="container-fluid text-center text-md-left">

            <div class="row">

                <div class="col-md-6 pb-3">

                    <h5 class="text-uppercase">푸터 내용</h5>

                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>

                </div>

                <div class="col-md-6 pb-3">

                    <h5 class="text-uppercase">부가 서비스</h5>

                    <ul class="list-unstyled">

                        <li>

                            <a href="#">Q/A</a>

                        </li>

                        <li>

                            <a href="#">고객센터</a>

                        </li>

                    </ul>

                </div>

            </div>

        </div>


        <div class="footer-copyright py-3 text-center">

            © 2018 Copyright:

            <a href="#"> 나동빈 </a>

        </div>

    </footer>



  이제 이런한 방식으로 이것저것 정리하시면서 웹 개발을 할 수 있습니다. 다만 우리가 이용하고 있는 것은 구름 IDE 무료 버전이라서 컨테이너를 계속 실행하구 있어야 외부에서 언제든지 접속이 가능해요. 만약에 언제 어디서나, 우리가 컴퓨터를 끈 다음에도 외부에서 접속이 가능하도록 '항상 실행' 시키기 위해서는 유료 서비스를 사용하셔야 합니다.


  하지만 굳이 유료 서비스를 살 필요는 없으며 필요하신 분만 구매하시면 될 것 같아요. 단순히 공부 용도로 이렇게 활용하기에는 구름 IDE가 정말 최고인 것 같네요. 일단 여기까지 잘 따라오신 분이라면 구름 IDE가 아니라 어떤 클라우드 서비스라고 해도 잘 웹서버를 띄우실 것 같아서 안심이 됩니다. 이상으로 '클라우드 구름 IDE 서비스를 이용해 용량 0MB로 개인 웹 사이트 만들기' 강의를 마치겠습니다.


※ 부트스트랩 웹 디자인 강좌 ※


  만약에 HTML, 자바스크립트, CSS에 대해서 더욱 깊게 공부하고 부트스트랩을 이용해 다양한 웹 사이트를 스스로 디자인 해보고 싶으신 분이라면 다음의 강좌를 참고해보시면 좋을 것 같습니다. 제가 만든 강좌인데요. 유료 강좌이긴 하지만 쿠폰을 적용해서 할인된 가격으로 보실 수 있어요.


  부트스트랩 웹 디자인 강좌: https://www.udemy.com/bootstrap-4-web-design-tutorial/learn/v4/?couponCode=NADONGBIN_BOOTSTRAP2

728x90
반응형

Comment +2

728x90
반응형

클라우드 구름 IDE 서비스를 이용해 용량 0MB로 개인 웹 사이트 만들기 6강: MDBootstrap으로 메인 콘텐츠 만들기

나동빈


  지난 시간에는 MDBoostrap을 이용해 내비게이션 영역을 디자인 해보는 시간을 가졌습니다. 이번 시간에는 MDBoostrap으로 메인 콘텐츠를 디자인 해보는 시간을 가져보도록 하겠습니다. 따라서 바로 <main> 태그 영역에 이어서 작성해보겠습니다.


    <!-- 페이지의 메인 영역 -->

    <main>

        <div class="container mt-4">

            <div class="row">

                <div class="col-md-7">

                    <img src="https://mdbootstrap.com/img/Photos/Slides/img%20(70).jpg"

                         class="card-img-top">

                </div>

                <div class="col-md-5">

                    <h2 class="mt-2">회사의 특징</h2>

                    <hr>

                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>

                    <a href="#" class="btn btn-primary">자세히 보기</a>

                </div>

            </div>

        </div>

    </main>



  현재 우리는 간단히 디자인만 해보는 것이며 각자 내용을 채우면 되는 거니까 위와 같이 의미 없는 단어들을 채워보았습니다. 의미 없는 단어를 넣고자 할 때로렘 입숨을 이용하시면 됩니다. 구글에 'Lorem Ipsum'을 검색 해보시면 다양한 덤프(Dump) 문자열을 확인할 수 있습니다.


  이어서 카드 디자인 요소를 이용해 <main> 태그 내에 몇 개의 사진과 함께 디자인을 더 넣어보도록 하겠습니다.


            <div class="row mt-4">

              <div class="col-lg-4 col-md-12">

                <div class="card">

                  <div class="view overlay">

                    <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(72).jpg" class="card-img-top">

                  </div>

                  <div class="card-body">

                    <h4 class="card-title">콘텐츠 1</h4>

                    <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>

                    <a href="#" class="btn btn-primary">자세히 보기</a>

                  </div>

                </div>

              </div>

              <div class="col-lg-4 col-md-6">

                <div class="card">

                  <div class="view overlay">

                    <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(74).jpg" class="card-img-top">

                  </div>

                  <div class="card-body">

                    <h4 class="card-title">콘텐츠 2</h4>

                    <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>

                    <a href="#" class="btn btn-primary">자세히 보기</a>

                  </div>

                </div>

              </div>

              <div class="col-lg-4 col-md-6">

                <div class="card">

                  <div class="view overlay">

                    <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(75).jpg" class="card-img-top">

                    <a href="#">

                      <div class="mask rgba-white-slight"></div>

                    </a>

                </div>

                  <div class="card-body">

                    <h4 class="card-title">콘텐츠 3</h4>

                    <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>

                    <a href="#" class="btn btn-primary">자세히 보기</a>

                  </div>

                </div>

              </div>

            </div>



  그러면 위와 같이 <main> 태그가 잘 꾸며진 것을 확인할 수 있습니다. 다음 시간이 마지막 시간이에요.

728x90
반응형

Comment +0

728x90
반응형

클라우드 구름 IDE 서비스를 이용해 용량 0MB로 개인 웹 사이트 만들기 5강: MDBootstrap으로 내비게이션 만들기

나동빈


  지난 시간까지 공부하여 MDBootstrap 웹 디자인 프레임워크까지 구축하는 시간을 가졌습니다. 이제 개발 환경 설정은 모두 끝났으므로 개인 웹 사이트를 자유롭게 만드시면 됩니다. 이 강의는 웹 개발 자체에 초점을 둔 강의는 아니므로 간단히 몇 개만 설명해드린 뒤에 어떻게 웹 개발 공부를 할 수 있는지 방향성만 제공해드리고자 합니다.



  일단 introduce/index.html로 이동합니다. 웹 문서는 일반적으로 HTML이라는 언어를 이용해서 제작합니다. HTML 문서 내부에서 실질적인 내용을 담당하는 부분은 <body> 태그로 감싸져 있답니다. 따라서 기본적으로 <body> 태그 안의 내용을 다 지워봅시다. 그리고 '여기에 내용을 넣어주세요.'라고 넣어주겠습니다.


  그리고 이제 한 번 제목을 설정해봅시다. 저는 간단한 회사 소개 페이지를 만든다고 가정해보도록 할게요. 제목 부분은 <head> 태그 안에서 설정할 수 있어요.


  <title>간단한 회사 소개 페이지</title>


  이후에 저장해서 페이지를 새로고침해서 확인해봅시다.



  우리는 MD 부트스트랩이라는 디자인 프레임워크를 이용한다고 했습니다. 따라서 프레임워크에 대한 사용 방법에 대해서 알고 있어야 합니다.


  MD Bootstrap 디자인 튜토리얼 공식 사이트: https://mdbootstrap.com/bootstrap-tutorial/



  자세한 내용은 위 튜토리얼 사이트에서 참고하시면 될 것 같습니다. 기본적으로 자료들은 영어 인데 참고할 자료는 많으므로 찾아보시면서 공부하시면 됩니다. 저는 일단 제 방식대로 진행해볼게요. 일반적으로 HTML 문서는 상단부의 <header>, 중간부의 <main>, 하단부의 <footer>로 나누어 작성합니다. 따라서 <body> 태그에서 자바스크립트 영역 위 쪽으로 다음과 같은 내용을 넣어주시면 됩니다.


    <!-- 페이지의 내비게이션 영역 -->

    <header>

    

    </header>

    

    <!-- 페이지의 메인 영역 -->

    <main>


    </main>

    

    <!-- 페이지의 하단부 영역 -->

    <footer>


    </footer>



  이제 내비게이션을 만들어봅시다. 내비게이션특정 웹 페이지에서 링크를 이용해 사용자를 이동시키도록 해주는 영역이에요.


    <!-- 페이지의 내비게이션 영역 -->

    <header>

        <nav class="navbar navbar-expand-lg navbar-dark blue">

            <a class="navbar-brand" href="#">간단한 회사 소개 페이지</a>

            <button class="navbar-toggler" type="button" data-toggle="collapse"

                    data-target="#toggler">

                <span class="navbar-toggler-icon"></span>

            </button>

            <div class="collapse navbar-collapse" id="toggler">

                <ul class="navbar-nav mr-auto">

                    <li class="nav-item active">

                        <a class="nav-link" href="#">메인</a>

                    </li>

                    <li class="nav-item">

                        <a class="nav-link" href="#">특징</a>

                    </li>

                    <li class="nav-item">

                        <a class="nav-link" href="#">가격</a>

                    </li>

                    <li class="nav-item dropdown">

                        <a class="nav-link dropdown-toggle" id="dropdown"

                           data-toggle="dropdown">

                            부가 서비스

                        </a>

                        <div class="dropdown-menu dropdown-primary"

                             aria-labelledby="dropdown">

                            <a class="dropdown-item" href="#">Q/A</a>

                            <a class="dropdown-item" href="#">고객센터</a>

                        </div>

                    </li>

                </ul>

                <form class="form-inline">

                    <div class="md-form mt-0">

                        <input class="form-control mr-sm-2" type="text"

                               placeholder="검색">

                    </div>

                </form>

            </div>

        </nav>

    </header>


  이후에 새로고침을 하면 다음과 같이 내비게이션이 구성됩니다.



  마지막으로 내비게이션의 글씨체가 너무 기본이니까 나눔고딕체 웹 폰트를 적용해봅시다. 나눔고딕체가 없는 브라우저에서도 볼 수 있또록 웹 폰트 기술을 이용해 접근성을 높여주는 것입니다. MDBootstrap 프레임워크의 css 폴더에서 커스텀 css를 적용하시면 됩니다.


@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic');


* {

    font-family: 'Nanum Gothic' !important;

}


728x90
반응형

Comment +0

728x90
반응형

클라우드 구름 IDE 서비스를 이용해 용량 0MB로 개인 웹 사이트 만들기 4강: MDBootstrap 디자인 프레임워크 설치하기

나동빈


  이번 시간에는 완전히 구축된 nginx 웹 서버에 MDBoostrap 웹 디자인 프레임워크를 설치하는 시간을 가져보도록 하겠습니다. 부트스트랩(Bootstrap)은 잘 알려진 CSS 디자인 프레임워크로 양질의 디자인을 매우 빠르게 구성하고자 할 때 많이 사용됩니다. MDBootstrapMaterial Design 트렌드를 잘 따르는 버전으로 Bootstrap 프레임워크의 최신 버전입니다.


  MDBootstrap 깃 허브 주소: https://github.com/mdbootstrap/bootstrap-material-design



  일단 깃 허브에 있는 소스코드를 불러오기 위해서는 우리의 메인 프로젝트 경로로 이동해야 합니다.


  cd /workspace/Tutorial: 메인 프로젝트 경로로 이동합니다.

  git clone https://github.com/mdbootstrap/bootstrap-material-design.git: MDBoostrap 프레임워크를 클론(Clone)합니다.



  이후에 폴더 이름을 소개 페이지라고 해서 introduce라고 바꾸어줍시다.


  mv bootstrap-material-design introduce: 다운로드 받은 디자인 프레임워크 폴더를 introduce라는 이름으로 변경합니다.

  rm bootstrap-material-design -rf: 기존에 존재하는 프레임워크 폴더를 제거합니다. (폴더가 남아 있는 경우)



  이후에 nginx를 재구동 해줍니다.



  이제 MDBootstrap 웹 디자인 프레임워크가 성공적으로 구축되었습니다.



  introduce라는 이름으로 웹 디자인 프레임워크 폴더를 만들어주었으므로 /introduce/index.html 경로로 접속해서 기본적으로 구성된 웹 페이지를 확인할 수 있습니다.

728x90
반응형

Comment +0

728x90
반응형

클라우드 구름 IDE 서비스를 이용해 용량 0MB로 개인 웹 사이트 만들기 3강: nginx의 HTML 폴더 경로 변경하기

나동빈


  지난 시간까지 작업한 내용으로 HTML 폴더에 있는 HTML 문서들이 우리의 화면에 보이도록 설정했습니다. 이번 시간에는 HTML 문서를 직접 작성해보고, 쉽게 관리하기 위해서 HTML 문서들이 존재하는 루트 폴더의 위치를 우리가 직접 설정해보도록 하겠습니다.



  일반적으로 우분투 서버에서 /etc/nginx/ 경로로 가면 우리가 이전 시간에 설치했던 nginx 웹 서버와 관련한 환경설정 파일이 있습니다. 이후에 sites-enabled 폴더로 이동합니다. 거기에서 default 문서를 열어 볼 수 있습니다.



  vi default: default 설정 파일을 수정합니다.


  vi는 우분투에서 제공하는 가장 기본적인 파일 편집기(Editor)입니다. a를 눌러서 수정 모드로 진입할 수 있습니다. 여기에서 root라는 명칭이 존재합니다. 말 그대로 nginx 서버가 구동될 루트 폴더가 되는 건데, 이걸 우리의 컨테이너 프로젝트 경로로 바꾸어주면 됩니다. 저는 컨테이너의 이름을 'Test'라고 지었으므로 'root /workspace/Test;' 로변경하고, esc를 누른 뒤에 :wq!를 눌러서 '저장하고 빠져나오기'를 해주었습니다.



  service nginx stop: nginx 웹 서버 환경 설정 파일이 변경되었으므로 nginx를 정지(stop)시킵니다.

  cd /workspace/Test: 자신이 새롭게 설정해 준 HTML 폴더 경로로 이동합니다.



  vi index.html: index.html 파일을 작성합니다.


  이제 우리가 직접 HTML 문서를 만들수 있습니다. index.html 파일을 만들어서 안에 'Hello'라고 넣어봅시다.


  service nginx start: 종료된 nginx 웹 서버를 다시 구동시킵니다.



  위와 같이 웹 서버 경로로 접속해보면, Hello라고 출력되는 것을 확인할 수 있습니다. 또한 구름 IDE의 프로젝트 경로에서도 index.html가 보이게 됩니다. 결과적으로 nginx 웹 서버에 다양한 정적 웹 콘텐츠를 올릴 수 있도록 자체적인 개발 환경이 클라우드 상에서 구축이 된 것이라고 할 수 있습니다. 언제든지 이 구름 IDE에서 컨테이너만 실행하면 굳이 우리 컴퓨터를 거치지 않아도 사실상 모든 실습을 할 수 있는 거죠.


  향후 내용을 수정한 뒤에는 간단히 nginx를 reload하면 바로 변경된 내용을 확인할 수 있습니다.


  service nginx reload: nginx 웹 서버를 재구동합니다.

728x90
반응형

Comment +0

728x90
반응형

클라우드 구름 IDE 서비스를 이용해 용량 0MB로 개인 웹 사이트 만들기 2강: 구름 IDE 컨테이너 생성하기

나동빈


  지난 시간에는 클라우드 구름 IDE 서비스를 이용해 우리만의 컨테이너(Container)를 생성해보는 시간을 가졌습니다. 일단 개인 웹 사이트를 운영하기 위해서는 당연히 하나의 웹 서버(Web Server)를 구축한 뒤에 그 위에 웹 파일을 올리는 방식으로 개발을 진행해야 합니다.


※ nginx 설치하기 ※


  지난 시간에 생성해준 '빈 프로젝트'의 컨테이너를 실행한 뒤에 콘솔(Console) 창에서 명령어를 입력합니다.


  apt-get update: nginx 웹 서버 패키지를 설치하기 전에 일단 패키지를 최신 상태로 바꾸어줍니다.

  apt-get install nginx: nginx를 우분투 서버 내에 설치합니다.

  nginx -v: 설치된 nginx의 버전을 확인합니다.



  이제 웹 서버를 구동시켜봅시다.


  service nginx start: nginx 웹 서버를 구동합니다.


  기본적으로 HTTP 프로토콜을 사용하는 웹 서버는 기본적으로 80번 포트를 사용하도록 세계적으로 약속이 되어 있습니다. 다만 구름 IDE와 같이 우리에게 서버를 제공해주는 클라우드 서비스들은 한정된 숫자의 공인 IP만을 가지고 있습니다. 그래서 우리는 전용 공인 IP를 사용할 수는 없답니다. 이를 해결하기 위해 클라우드 서비스들은 내부적으로 NAT와 같은 기술을 사용해 사용할 수 있는 IP의 개수를 늘린답니다.


  NAT(Network Address Translation)포트 번호와 내부 아이피를 매핑해서 공인 IP 한 개만 가지고도 내부 서버에서 여러 개의 서버가 운용될 수 있도록 하는 것입니다.



  바로 '포트포워딩' 설정 버튼을 누른 뒤에 내부 포트로 80을 입력하고 '등록'을 진행하시면 됩니다. 아이피 13.124.195.10을 이용하는 웹 서버가 많다고 했을 때, 우리는 같은 아이피를 사용하는 서버 중에서 '50696' 포트를 할당 받은 것이라고 볼 수 있습니다.



  이제 구동된 웹 서버를 확인해봅시다. 웹 브라우저를 실행해서 13.124.195.10:50696와 같이 자신의 'IP번호:포트번호'를 입력하면 구동된 nginx 웹 서버에 접속할 수 있습니다. 이후에 자신의 친구한테 한 번 접속을 해보라고 해도, 잘 접속이 되는 것을 알 수 있습니다.


  정상적으로 작동이 되는 것을 확인했다면 nginx 웹 서버를 구동 중지해봅시다.


  service nginx stop: nginx 서버를 중지시킵니다.


  이제 기본적으로 설치된 nginx 서버가 존재하는 위치를 찾아봅시다. 운영체제마다 조금씩 다른데, 구름 IDE가 제공해주는 우분투 리눅스 서버에서는 /usr/share/nginx/html 에서 그 경로를 찾아볼 수 있습니다.



  들어가 보면 50x.html과 index.html가 있습니다. 마찬가지로 50x.html 페이지를 브라우저에서 접속할 수 있습니다. 확인을 해보시면 50x.html은 오류 페이지이고, index.html는 아까 우리가 봤던 기본 페이지인 걸 알 수 있습니다. 이로써 웹 서버에서 index.html 페이지는 기본이 되는 페이지로 존재한다는 것까지 쉽게 이해하실 수 있습니다.

728x90
반응형

Comment +0

728x90
반응형

클라우드 구름 IDE 서비스를 이용해 용량 0MB로 개인 웹 사이트 만들기 1강: 구름 IDE 컨테이너 생성하기

나동빈


※ 강의 소개 ※


  이번 강의는 클라우드 IDE 서비스를 이용해 용량 0MB로 개인 웹 사이트 만들기 강의입니다. 클라우드 서비스를 이용한다는 점에서 우리 컴퓨터에 어떠한 별도의 추가 프로그램을 설치하지 않고 개인 웹 사이트를 구축할 수 있습니다.


 - 사용할 웹 서버: nginx

 - 사용할 웹 디자인 프레임워크: Material Design Bootstrap Framework

 - 사용할 개발 환경: 구름 클라우드 IDE


  이 강의를 통해 도움을 받을 수 있는 분은 다음 등과 같습니다.


 - 웹 개발에 대해서 잘 모르지만 개발 공부를 시작하기 전에 일단 웹 개발 과정을 대략적으로 이해하고 넘어가고 싶으신 분

 - 이외에도 클라우드 서비스의 개념, NAT 네트워크 서비스의 개념, nginx 웹 서버나 프론트 엔드 디자인 기술을 배우고 싶으신 분


※ 함께 만들어 볼 웹 사이트 ※


  강의 내용을 그냥 따라하시기만 해도 다음과 같은 웹 사이트를 만들 수 있습니다.



※ 구름 IDE 컨테이너 생성하기 ※


  구름 IDE 공식 사이트: https://ide.goorm.io/


  위 사이트에 접속한 이후에 회원가입 및 로그인을 진행합니다. 이후에 대시보드에 접속하면 컨테이너를 생성할 수 있어요. 컨테이너라고 부르는 이유는 기본적으로 구름 IDE는 도커(Docker) 컨테이너를 기반으로 클라우드 서비스가 구성되어 있기 때문입니다.



  컨테이너를 생성할 때는 기본적인 운영체제만 존재하는 '빈 프로젝트' 템플릿을 만들어줍니다. 처음부터 차근차근 서버를 구축하고 개발까지 해 볼 겁니다.



  저는 위와 같이 컨테이너 이름 및 설명을 설정했습니다.



  '빈 프로젝트'로 진행하면 우분투(Ubuntu) 운영체제 하나만 달랑 설치됩니다.



  컨테이너 생성 이후에는 바로 컨테이너를 실행해 볼 수 있습니다. 다음 시간부터는 실행된 컨테이너 nginx 웹 서버를 설치해보겠습니다.

728x90
반응형

Comment +0