modal pop-up 만들기



버튼이나 사진을 클릭 했을때 튀어나오는 나오는 화면을 modal pop-up 이라고 한다.

쉽게 말해서, 인스타그램이나 페이스 북에서 사진을 클릭 했을 때,

화면 전환 없이 해당 페이지에서 팝업 창이 뜨는 것을 말한다.


modal pop-up의 특징으로는 페이지가 넘어 가지 않으므로

작은 크기의 팝업 창이 화면 중앙에 위치하며, 외부의 배경색은 반투명 검은색이 보통이다.


예제를 통해 modal pop up을 만들어보자

jquery는 사용하지 않는다.




1
2
3
4
5
6
7
8
9
10
11
12
13
    <!-- Trigger/Open The Modal -->
    <button id="myBtn">Open Modal</button>
 
    <!-- The Modal -->
    <div id="myModal" class="modal">
 
      <!-- Modal content -->
      <div class="modal-content">
        <span class="close">&times;</span>
        <p>Some text in the Modal..</p>
      </div>
 
    </div>
cs


HTML 소스코드이다.

button 클릭시 팝업이 동작하게 된다.

modal의 기본적인 레이어는 .modal div로 감싼다.

이후 안에 들어가는 내용은 .modal-content div로 다시 감싼 후, 원하는 내용을 입력해준다.




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
        /* The Modal (background) */
        .modal {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 1; /* Sit on top */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgb(0,0,0); /* Fallback color */
            background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
        }
    
        /* Modal Content/Box */
        .modal-content {
            background-color: #fefefe;
            margin: 15% auto; /* 15% from the top and centered */
            padding: 20px;
            border: 1px solid #888;
            width: 50%; /* Could be more or less, depending on screen size */
        }
        /* The Close Button */
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }
        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
cs


다음으로 CSS 작업을 하게 된다.


 우선 창 전체를 담당하는 .modal부터 디자인을 시작한다.

 modal 창은 처음에 보이지 않아야하므로

display를 none으로 설정한다. 또한, display가 block으로 설정 되었을 때

사용자에게 보여지던 view보다 상단에 노출되어야 하므로, z-index를 1로 설정한다.

(기본컨텐츠의 z-index는 default로 0이다.)

또한, 백그라운드 컬러를 검은색, 0.4의 투명도를 부여한다.

투명도는 임의로 지정하지만 적당한 투명도를 주는것이 좋다.

높이와 너비는 창 전체를 사용하도록 100%로 설정한다.


다음으로 중앙에 들어갈 .modal-content 인데,

margin으로 중앙 정렬 후, 임의의 너비를 줌으로써 원하는 content의 크기를 설정한다.

색은 .modal이 검은색이므로 대비되도록 하얀색 계통이 좋다.


.close는  modal pop up에 들어가는 팝 업 끄기 버튼이다.




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
        // Get the modal
        var modal = document.getElementById('myModal');
 
        // Get the button that opens the modal
        var btn = document.getElementById("myBtn");
 
        // Get the <span> element that closes the modal
        var span = document.getElementsByClassName("close")[0];
 
        // When the user clicks on the button, open the modal 
        btn.onclick = function() {
            modal.style.display = "block";
        }
 
        // When the user clicks on <span> (x), close the modal
        span.onclick = function() {
            modal.style.display = "none";
        }
 
        // When the user clicks anywhere outside of the modal, close it
        window.onclick = function(event) {
            if (event.target == modal) {
                modal.style.display = "none";
            }
        }
cs


마지막으로 자바 스크립트 코드이다.

코드가 길어보이지만 실제로는 간단하다.

버튼을 클릭 했을 때 modal pop up을 block형식으로 display 해주면

index-z가 기존의 view 보다 높은 modal 창이 위로 뜨게 되는것이다.

마지막의 window.onclick은 외부의 검은 화면을 클릭 했을 때 팝업이 꺼지게 동작한다.





버튼을 클릭하면 다음과 같은 화면을 볼 수 있다.

close버튼이나 외부의 검은 화면을 클릭하면 팝업창이 꺼지게 된다.



저작자 표시
신고

'WEB > web 기타' 카테고리의 다른 글

[Web] modal pop-up 만들기  (0) 2017.04.21
[Web] Database - 2  (0) 2017.04.18
[Web] Database - 1  (0) 2017.04.18
[Web] JavaScript&PHP  (0) 2017.04.18
[Web] CSS(Cascade Style Sheet) - 2  (0) 2017.04.18
[Web] CSS(Cascade Style Sheet) - 1  (0) 2017.04.18

Database




SQL 실습


Bitnami를 설치하면 아파치 웹서버 뿐만아니라 MySQL도 자동으로 설치가 된다.

이를 이용하여 SQL에 대한 실습을 진행해보자


먼저 MySQL을 설치하면 기본적으로 Monitor도 같이 설치가 된다.

이를 실행하기 위해서는 터미널을 열고 mysql-> bin 폴더로 들어간후 모니터를 실행시켜 준다.

맥 기준으로 현재(2017-01-01) 버전 경로는 다음과 같다.

cd /Applications/mampstack-5.629-0/mysql/bin






모니터를 실행시키기 위해서는 다음과 같은 명령어를 입력해야한다.

./mysql - hlocalhost -uroot -p


-h~ : 서버의 주소를 설정한다. h 뒷부분이 주소이며, 현재는 로컬로 접속한다는 뜻이다.

-u~ : 비밀번호 접근을 설정한다. 현재는 root로 접근한다는 것이다.

-p~ : 비밀번호를 입력받아라는 뜻이다. p 뒤쪽에 바로 비밀번호를 입력받을수 있으나 이렇게 할 경우 해킹의 위험이 있으므로 -p 만 입력후 이후에 추가 입력한다. 


명령어를 입력하면 위와 같은 그림이 뜨는데, 설치 초기에 설정한 비밀번호를 입력하면 모니터에 접속이 된다.





이제 터미널 창에서 SQL문을 입력할 수 있다.
먼저 show databases를 입력하여 현재 구성되어있는 데이터베이스를 출력해본다
세미콜론(;)이 질의문의 끝을 알리기때문에 모든 질의의 끝에는 세미콜론을 입력한다.
4개의 항목이 뜨게되는데, 4개 모두 초기에 필요한 DB이므로 남겨둔다.






다음으로 DB를 만들어보자
CREATE DATABASE 을 이용하여 DB를 만든다.
질의 뒤쪽은 사용할 포맷에 대한 설명이다.






만들어진 DB로 이동하기 위해 use 키워드를 사용한다.
use DB명 을 사용하면 해당 DB를 사용하게 된다.






이동한 DB에서 본격적으로 table을 만들어보자.
다음과 같이 id, title, description, author, created 5개 항목으로 구성된다.
항목 뒤에는 속성들이 표시되는데, 자료형과 NOT NULL등이다.
NUT NULL : NULL값을 저장하지 않는다.
AUTO_INCREMENT : 자동으로 숫자가 상승한다.







테이블이 잘만들어졌는지 확인하려면 앞과 동일하게 show 명령어를 사용한다.
show tables를 사용하면 앞서 만든 테이블이 생성된것을 확인할 수 있다.





테이블에 값을 넣기위해서는 INSERT INTO 명령어를 사용한다.
테이블 이름과 속성, 값을 차례로 입력한다.





테이블 값을 확인하기 위해 SELECT * FROM 명령어를 입력하면
앞서 입력한 INSERT 명령어로 삽입된 행을 볼수있다.





다시  INSERT값으로 값을 넣어보자





테이블 내에 행이 다시 추가된 것을 볼 수 있다.


신고

'WEB > web 기타' 카테고리의 다른 글

[Web] modal pop-up 만들기  (0) 2017.04.21
[Web] Database - 2  (0) 2017.04.18
[Web] Database - 1  (0) 2017.04.18
[Web] JavaScript&PHP  (0) 2017.04.18
[Web] CSS(Cascade Style Sheet) - 2  (0) 2017.04.18
[Web] CSS(Cascade Style Sheet) - 1  (0) 2017.04.18

Database





데이터베이스란


정보를 관리하는 전문 애플리케이션이다.

웹에서 데이터베이스가 담당하는 것은 정보이며 서버에서 정보를 저장하는 역할을 한다.




정보를 저장한다는 면에서 DB는 파일과 비교될 수 있는데

파일은 어느 시스템에서나 사용가능하다, 그러나 DB는 프로그램이 설치되야하며 사용법을 알고있어야한다.

그럼에도 불구하고 DB가 쓰이는 이유는 파일과는 비교할 수 없을정도로 많은 장점을 가지고 있기 때문이다.


첫번째, DB는 안전하다.

백업이나 보안기능을 가지고 있으므로 임의로 열람이 가능한 파일과 다르게 안전하다는 장점이 있다.


두번째, DB는 빠르다.

인덱스 기능을 가지고 있으므로 프로그래밍적으로 제어가 가능하다. 

이외에도 다양한 장점이 많으나 크게 나누자면 이 두가지가 될수 있겠다.


현재 자주 사용되는 것은 관계형 DB이며 MySQL, MSSQL, Oracle등이 대표 주자이다.

이중 MySQL은 오픈소스로 제공되며 상당한 점유율을 가지고 있다.

또한 MySQL 개발진이 회사에서 나와 개별적으로 제작한 Maria DB는 

MySQL과 완벽한 호환성을 보이며 현재 공격적으로 발전중이라고 할수 있다.





데이터베이스의 이해


DB를 한단어로 표현하자면

Structed - 구조화된, 이라고 할수 있다.

이는 정보가 구조화된 형식으로 표현가능 하다는 것인데

실제로 DB는 table(표) system을 이용하여 정보를 나타낸다.

쉽게 말하자면 우리가 자주쓰는 Excel의 방식으로 표현한다고 생각하면 된다.


그러나 DB가 Excel과의 큰 차이점은 컴퓨터에게 질의를 한다는 것이다.

SQL의 약자 그대로 정규화된 질의를 가지고 

DB에 정보를 수정하거나 삽입/삭제하는 연산이 가능하다.





데이터베이스의 응답 과정




DB도 웹과 마친가지로 클라이언트와 서버로 나뉜다.

그러나 요청하고 받는쪽으로 역할은 정해지며,

즉, 클라이언트와 서버의 역할은 가변적이라고 할수 있다.


데이터베이스가 웹에 서버를 주는 과정은 다음과 같다.

먼저, 웹에서 서버로 요청을 하면 웹 서버에서 PHP로, 

PHP에서 다시 데이터베이스로 자료를 요청한다.

응답의 과정은 반대로 일어나게 된다.



신고

'WEB > web 기타' 카테고리의 다른 글

[Web] modal pop-up 만들기  (0) 2017.04.21
[Web] Database - 2  (0) 2017.04.18
[Web] Database - 1  (0) 2017.04.18
[Web] JavaScript&PHP  (0) 2017.04.18
[Web] CSS(Cascade Style Sheet) - 2  (0) 2017.04.18
[Web] CSS(Cascade Style Sheet) - 1  (0) 2017.04.18

 JavaScript&PHP



웹페이지를 만들기 위해서는 여러가지 언어가 필요하다.

HTML로도 충분히 웹페이지를 만들수 있지만 디자인적/기능적으로 부족하기 때문에

다른 언어로 그 부분을 보충해줘야한다.

그 중 기능적인 부분을 담당하는것이 Java Script, PHP이다.

그중 Java Script는 클라이언트 쪽, PHP는 서버 쪽에서 동작하게 된다.






Java Script - 정적인 웹페이지에 동적인 기능을 부여한다.

PHP - 서버 쪽에서 하나의 PHP로 여러개의 웹페이지를 호출 하는 기능

크게 나누자면 다음과 같이 분류 할수 있다.





더 쉽게 말하자면 HTML은 정보를 제공하기 위함,

CSS는 웹페이지의 디자인, Java Script는 기능적인 부분을 담당한다라고 할수있다.

PHP는 추후 DB와 함께 설명하도록 하겠다.




웹페이지에 코드 삽입하기


1.php

php의 기본 문법은 다음과 같다.

HTML 태그 사이에 다음과 같이 php의 태그가 들어가며 중간의 ~에 php 코드가 들어가가 된다.

웹 브라우저는 <?php를 읽을 때 php코드가 시작된다고 인식하게 된다.

또한 echo는 php에서 출력을 담당하는 코드이다.





2.Java Script

Java script도 동일하게 동작한다.

Java script에서 출력 코드는 document.write(~)이다.




Java Script와 PHP의 차이점


앞서 말한 것 처럼 가장 큰 차이점은 어디에서 동작하느냐이다.

Java Script는 클라이언트,PHP는 서버 쪽에서 동작하게된다.

이를 확인할 수 있는 코드는 다음과 같다.






     


먼저, 두 언어 모두 다 연산이 가능하다.

위의 코드를 브라우저에서 확인하면 다음과 같이 동일한 값이 나오는데

브라우저 상에서는 별 차이가 없어 보인다.

그러나, 결과창에서 오른쪽 클릭 -> 페이지 소스 보기를 클릭하면

차이점을 명확히 볼수 있다.






 


Java Script는 코드가 명확하게 드러나는 반면에

PHP는 결과값이 나온다.

이와같은 결과가 나오는 이유는 무엇일까?





 


이유는 PHP는 서버 사이드이므로 서버에서 처리된 결과가 나오기 때문이다.

반대로 Java Script는 클라이언트 사이드 언어이기 때문에,

브라우저에 그래도 출력되는 것이다.




JavaScript&PHP 기초 문법




php에서 +는 숫자를 더하는 연산자 이므로 "숫자" + 숫자도 계산한다.

또한, php에서 문자를 더하고 싶으면 "문자"."문자"를 사용한다.

Java script에서 문자를 더하고 싶으면 "문자"+"문자"를 사용한다.


변수는 바뀔수 있는 값을 뜻하며 프로그램을 최대한 바꾸지 않기 위해 사용한다.

php에서는 변수 앞에 $표시를 붙이며 문법 뒤에는 세미콜론(;)으로 끝났다는 표시를 해준다.





신고

'WEB > web 기타' 카테고리의 다른 글

[Web] Database - 2  (0) 2017.04.18
[Web] Database - 1  (0) 2017.04.18
[Web] JavaScript&PHP  (0) 2017.04.18
[Web] CSS(Cascade Style Sheet) - 2  (0) 2017.04.18
[Web] CSS(Cascade Style Sheet) - 1  (0) 2017.04.18
[Web] ATOM 에디터  (0) 2017.04.18

CSS(Cascade Style Sheet) - 2




박스 모델



CSS로 태그들의 부피 위치 등을 지정해주는 것이다.

위의 그림을 보면 쉽게 이해가 될 것이다.

CONTENT를 기점으로 넓이와 높이, 내부공간에 대한 Padding, 아웃라인인 Border

그리고 다른 컨텐츠 사이의 간격인 Margin을 통해 content를 배치한다.

CSS는 이러한 위치, 부피에 박스 모델을 적용한다.






우선 3개의 리스트를 작성했다.

리스트마다 효과를 다르게 주기 위하여 내부에 ID를 부여한다.

CSS에서 아이디는 #ID로 구분할 수 있다.

먼저 2번째 리스트에 border라인과 padding, margin이 적용되었다.

여기서 내부공간과 다른 태그와의 간격이 어떻게 변경되었는지 확인해보자.






구글의 경우 웹페이지에서 우측클릭 -> 검사를 누르면 개발자를 위한 페이지가 나온다.

우측하단에 보면 박스 모델과 동일한 모양이 나오는데, 상단의 소스를 클릭하면

해당 태그의 박스 모델 현황이 나오게된다.

개발자는 이 값을 조정하여 적절한 배치를 조정할수 있다.

기존에는 소스 코딩 후 무한 새로고침으로 확인해야 했던것에 비하면 상당히 편리한 기능이다.

물론 조정된 값은 자신의 소스코드에 바로 적용되지 않으므로 주의해야한다.



신고

'WEB > web 기타' 카테고리의 다른 글

[Web] Database - 1  (0) 2017.04.18
[Web] JavaScript&PHP  (0) 2017.04.18
[Web] CSS(Cascade Style Sheet) - 2  (0) 2017.04.18
[Web] CSS(Cascade Style Sheet) - 1  (0) 2017.04.18
[Web] ATOM 에디터  (0) 2017.04.18
[Web] HTML(Hypertext Mark-up Language)  (0) 2017.04.18

CSS(Cascade Style Sheet) - 1





HTML을 설명하는데 있어서 뗄레야 뗄수 없는 관계 바로 CSS이다

CSS는 HTML과 다른 독립적 언어임에도 불구하고, 개별적으로 사용되기 어렵다.

이유는 CSS가 HTML을 디자인하기 위해 제작되었기 때문이다.

초기에는 HTML에도 디자인을 담당하는 태그가 있었으나 현재는 CSS에 흡수 되었다.

쉽게 말해 웹페이지에서 HTML은 정보를, CSS는 디자인을 담당한다고 할 수 있다.




이러한 CSS를 HTML문 내에서 구분할수 있게 만드는 것은 <Style>태그이다.

상단에서부터 브라우저는 HTML 코드를 읽다가 <Style>이 나오는 순간 CSS 코드임을 인식한다.

범위는 </Style>이 나올 때 까지이다.






<style> 내부의 문법은 다음과 같다.

먼저 선택자는 누구에게 스타일을 적용할 것 인가를 나타낸다.

서술은 어떤효과를 적용할것인가를 나타낸다.

마지막으로 이를 통틀어 속성이라고 부른다.




  

 

간단한 예제를 통해 CSS를 배워보도록 하자

먼저 다음과 같이 코드를 작성 했을때 결과는 우측과 같다.






   

 h1과 h2에 폰트 크기와 색상을 부여했다.

결과는 우측과 같다.





  

다음은 h2에 개별적으로 밑줄을,

header로 지정된 h1에 외곽선을 그리는 코드이다.


이와같이 <Style> 내부에서 CSS 코드를 이용하여 웹페이지를 디자인할 수 있다.



신고

'WEB > web 기타' 카테고리의 다른 글

[Web] JavaScript&PHP  (0) 2017.04.18
[Web] CSS(Cascade Style Sheet) - 2  (0) 2017.04.18
[Web] CSS(Cascade Style Sheet) - 1  (0) 2017.04.18
[Web] ATOM 에디터  (0) 2017.04.18
[Web] HTML(Hypertext Mark-up Language)  (0) 2017.04.18
[Web] Mac Bitnami 설치  (0) 2017.04.18

ATOM 에디터



HTML은 메모장에서 돌아갈 정도로 가볍지만, 이 경우 가독성과 생산성이 그리 좋지 않다

따라서 ATOM이나 sublime text등과 같은 여러 툴들이 생겨나게 되었다.

이러한 텍스트 에디터의 장점으로는 코드 하이라이터로 가독성이 좋고,

자동완성 기능으로 생산성이 비약적으로 향상된다는 것이 있다.

또한, 플러그인등의 설치로 확장성도 높아진다.


오늘은 이러한 텍스트 에디터 중 ATOM에 대한 설치와 사용법에 대해 알아보자


ATOM은 git재단에서 지원하는 무료 에디터 이다.

공식 홈페이지는 다음과 같다.

https://atom.io/


홈페이지에 접속하여 ATOM을 다운받는다
윈도우나 맥 둘다 설치과정이 그리 어렵지 않으니, 방법은 생략한다.
설치가 완료 되었으면 ATOM을 실행시킨다.




1. 폴더 지정 및 새 파일 만들기

  

File -> Open Folder를 누르고 자신의 work space 폴더를 지정하면

오른쪽과 같이 파일들 전체를 관리할수 있어 편리하다.
수정등의 세부작업이 필요할 때 파일을 더블 클릭하면된다.






해당 폴더에 새 파일을 만들기 위해서는 폴더위에서 오른쪽 클릭 -> New File을 선택한다.

 






이 때 파일 이름을 입력하라는 창이 뜨게된다.
적당히 자신이 원하는 이름과 확장자를 넣어서 파일을 만들어주자





완료가 되면 파일이 만들어지고 다음과 같은 화면이 뜬다.
밑의 HTML 코드는 임으로 작성하였다




2. 자동완성 패키지 설치


다음은 자동 완성 플러그인을 설치해보자 
우선 File -> setting에 들어간다.
맥의 경우 ATOM -> preference에 들어가면 된다.







좌측에 intall 탭을 클릭 후 emmet이라고 검색한다.

이후 첫번째있는 패키지를 인스톨한다.







다시 작업 화면으로 돌아와 HTML 태그를 작성할 때 하단에 자동완성 기능이 추가가 된다

여기서 TAB을 누르면 자동으로 끝 태그까지 입력이 된다.

또한, 태그 사이에서 엔터를 입력하면 자동으로 들여쓰기가 된다.



 


신고

'WEB > web 기타' 카테고리의 다른 글

[Web] JavaScript&PHP  (0) 2017.04.18
[Web] CSS(Cascade Style Sheet) - 2  (0) 2017.04.18
[Web] CSS(Cascade Style Sheet) - 1  (0) 2017.04.18
[Web] ATOM 에디터  (0) 2017.04.18
[Web] HTML(Hypertext Mark-up Language)  (0) 2017.04.18
[Web] Mac Bitnami 설치  (0) 2017.04.18

HTML(Hypertext Mark-up Language)




1. HTML이란?





HTML을 설명하기 앞서 먼저 우리가 사용하는 웹페이지의 동작과정에 대해 알아보도록 하자

우선, 웹은 크게 클라이언트와 서버의 두파트로 나뉘어진다. 

클라이언트는 우리가 흔히 사용하는 PC이다. 이 PC에서 웹 서버로 요청을 보내게 되는 것이다. 

서버에서는 이러한 요청을 받아 페이지를 찾고, 응답하게 된다.

이런 일련의 과정을 통하여 우리가 보는 웹페이지가 브라우저에 뜨게 되는것이다.


HTML은 Hypertext Mark-up Language의 약자이다.

이것이 뜻하는 바가 무엇인지 알아보면 HTML에 대한 이해가 더 쉬울것이다..






- Hypertext : 쉽게 말해 문서 사이의 링크라고 할수 있다.

우리가 네이버 등에서 텍스트를 클릭하면 다른 페이지로 전환이된다.

이것은 네이버 메인페이지와 전환되는 페이지와의 링크로써 연결이다.

Hypertext를 통하여 쉽게 웹페이지 전환이 가능해진다.

중요성을 강조하자면, 링크는 HTML의 본질이며, HTML의 본질은 웹이 본질이다.

즉 HTML의 우선순위 1위는 Hypertext로 구현된 링크라고 할수 있다.







- Mark-up Language : HTML의 주요 기능중 TAG를 뜻한다.

옷에 있어서 TAG는 옷에 대한 정보를 소비자에게 알려준다.

HTML에서 TAG는 코드에 대한 정보를 브라우저와 사용자에게 알려준다

<~> 내용 </~>

보통 다음과 같은 형태를 가지며 앞쪽을 시작태그, 뒤쪽을 끝태그라고 부른다.




2. HTML 속성


 

앞서 말한 HTML의 주요 기능 중 TAG를 몇 가지만 살펴 보도록 하자.


<a> 태그 : 링크 태그이다.

-> 링크의 경우 자주 사용하므로 한글자, 알파벳상으로도 첫번째이다.(중요도 높음)


이러한 태그는 태그와 내부의 속성, 값으로 나태낼수 있는데 예를들어

ex) <a href = "http://www.naver.com"> 네이버 </a>

의 형태와 같다.

여기서 a가 태그, href(hypertext reference)가 속성, "~"의 내용이 속성값이 된다. 


또한 태그는 중첩이 가능한데,



위와 같은 태그 내부에 또 다른 태그가 담기는 것이 그 예라고 할 수 있다.




3. 추가적으로 HTML에 대하여


HTML은 초기에 공식적인 기구 없이 생성되었지만, 웹의 확장에 따라 그 수요가 많아졌다.

따라서 표준화를 위하여 w3c(www consortium)라는 기구가 출범하게 되었다.

w3c의 의장은 HTML의 개발자인 팀 버너스리 이다.

w3c에 참여하고 있는 여러 기업들을 멤버라고 칭하는데, 이 멤버들은

HTML의 발전을 위하여 기능을 추가하거나 삭제하는 것에 대한 의견으로 표준화를 정립하는데 도움을 준다.

흔히 알려진 삼성 MS 애플 구글 등의 기업이 w3c의 멤버이다


또한, 태그에 대한 레퍼런스는 다음에서 찾을수 있다


http://opentutorials.org/course/1058


해당 내용의 출처는 다음과 같다.


https://www.inflearn.com/course/%EC%9B%B9%EC%96%B4%ED%94%8C%EB%A6%AC%EC%BC%80%EC%9D%B4%EC%85%98-%EA%B0%95%EC%A2%8C/





신고

'WEB > web 기타' 카테고리의 다른 글

[Web] JavaScript&PHP  (0) 2017.04.18
[Web] CSS(Cascade Style Sheet) - 2  (0) 2017.04.18
[Web] CSS(Cascade Style Sheet) - 1  (0) 2017.04.18
[Web] ATOM 에디터  (0) 2017.04.18
[Web] HTML(Hypertext Mark-up Language)  (0) 2017.04.18
[Web] Mac Bitnami 설치  (0) 2017.04.18

Bitnami 설치(mac 기준)



우리가 사용하는 어플리케이션은 클라이언트 사용자 기준에서 제작되었기 때문에 

설치과정에 있어서 별다른 어려움이 없다.

그러나 서버에서 사용하는 프로그램의 경우 사용자가 엔지니어라는 가정하에,

서버프로그램을 만드는 제작자 입장에서 제작 되었기 때문에 설치과정이 복잡하다.

따라서, 이와 같은 불편함을 겪는사람들이 상당수이다.

특히 학생들은 개발환경 구축에서 막혀 더이상 진행하지 못하는 경우도 있다.


이를 위해 Apache, MySQL, PHP를 한방에 설치할수있는 프로그램이 제작되었다. 

Bitnami도 그러한 프로그램중에 하나이다.









구글에 bitnami mamp를 검색하고 제일 상단 사이트에 접속한다.








웹사이트의 우측 하단에 보면 로컬 인스톨이라는 창이 있다.

버전을 선택하여 다운로드한다.







다운 받은 파일을 클릭하면 다음과 같은 화면이 뜬다.

MAMP 아이콘을 더블클릭하면 설치화면으로 넘어간다.







PhpMyAdmin을 제외한 나머지는 필요가 없으므로 체크를 해제한후 Next







클라우드도 체크 해제한후 Next하면 설치가 진행된다.







설치가 정상적으로 완료되면 로컬 호스트 주소로 index.html이 출력된다.

다음과 같은 화면이 뜬다면 정상적으로 설치가 완료된것이다.






 

신고

'WEB > web 기타' 카테고리의 다른 글

[Web] JavaScript&PHP  (0) 2017.04.18
[Web] CSS(Cascade Style Sheet) - 2  (0) 2017.04.18
[Web] CSS(Cascade Style Sheet) - 1  (0) 2017.04.18
[Web] ATOM 에디터  (0) 2017.04.18
[Web] HTML(Hypertext Mark-up Language)  (0) 2017.04.18
[Web] Mac Bitnami 설치  (0) 2017.04.18

+ Recent posts

티스토리 툴바