티스토리 뷰

개인 서재..*/코딩야학

[2일차 필기노트] 웹서버 설치 ~ HTML 이론

낭만붕어빵 2017. 6. 2. 16:29
반응형

※ 개인적으로 공부하면서 끄적끄적 받아적은 거라 다소 엉망일 수 있습니다.



[코딩야학 2일차 필기 노트] 웹서버 설치부터 HTML 이론까지


1. 윈도우에 웹 서버 설치 https://opentutorials.org/course/1688/9337

2. 서버 제어 https://opentutorials.org/course/1688/9410

3. 프로그래밍 언어 https://opentutorials.org/course/1688/9339

4. HTML 이론 https://opentutorials.org/course/1688/9340


================================================



1. 윈도우에 웹 서버 설치



영상 순서에 따라 bitnami를 설치


localhost/index.html 을 입력하면 설치가 잘 되었는지를 알 수 있다.


localhost : 웹브라우저가 설치되어있는 컴퓨터에 설치된 웹서버의 주소

/index.html : 웹브라우저가 웹서버에게 index.html 파일을 내놓으라고 요청하는 것

웹서버는 이 컴퓨터에 있는 htdocs(약속된 디렉토리)에 있는 index.html파일을 읽어서 웹브라우저에게 쏴준다 

웹브라우저는 이렇게 받은 html 문서를 모니터에 출력 


(확인해보고 싶다면? C -> bitnami->wamp->apache2->htdocs)


이번엔 localhost/helloworld.html 을 쳐보자

->404 not found 

->찾지 못했다는 에러 

이걸 고쳐보자.

메모장을 열어 helloworld.html 을 htdocs디렉토리에 저장 ( UTF-8 인코딩) 

다시 새로고침해보면 에러가 고쳐짐을 알 수 있다



요약해보면 다음 그림과 같다.

실제로는 웹 서버를 별도의 컴퓨터에 두고 서비스를 운영하게 된다. 


htdocs 는 특수한 디렉토리. 즉,웹페이지를 만들어서 저장하는 곳.

Document Root 라고도 함 (웹 서버가 문서를 찾는 최상위 디렉토리)



2. 서버 제어


wamp폴더에서 window manager 실행.

Manage Servers 탭 클릭


Configure 메뉴를 통해 각종 로그등을 확인할 수 있다.



3. 프로그래밍 언어


프로그래밍 언어란 무엇인가?

: 컴퓨터와 사람의 소통을 도와주는 매개체


언어란?

: 사람과 사람 사이의 약속

↓

프로그래밍 언어란?

: 사람과 컴퓨터 사이의 약속



코드는 어떤 프로그램을 만드는데 있어서 <설계도>의 역할을 한다.




4. HTML 이론


<기본 문법과 속성> 


HTML : 웹을 위한 언어 


[HyperText] 

문서와 문서가 링크로 연결되어 있다. (무언갈 클릭하면 다른 텍스트로 넘어감). 그물망처럼 연결되어 하나의 거대한 정보망을 형성.

링크는 HTML의 본질이고, HTML의 본질은 웹의 본질이다.

[Markup Language]

TAG : 옷에 대한 정보를 담고 있는 택과 같은 목적을 지님. 

ex) 안녕하세요 <strong>(시작태그)생활코딩(컨텐츠)</strong>(끝태그)입니다.


1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
    </head>
 
    <body>
        Hi, This is <strong>OV CODING</strong>, my friend. 
    </body>
</html>
cs

이러한 형태의 링크를 걸고 싶을 때, a 라는 태그를 이용한다. 
ex) <a>생활코딩</a> 

웹브라우저 입장에선, 이 태그를 보고 "링크가 있구나"라는 사실을 알게 된다.


그러나 어떠한 문서로(목적지) 링크될 것인지에 대해서는 알 수 없다.

그래서 나오는 것이 "속성"


<a href(속성)="http://opentutorials.org/course/1">생활코딩</a> 

웹브라우저 : "아! 저 주소로 이어지는 링크가 있구나!"


target="_blank" // 클릭한 링크가 새 창에서 열리게 함 


1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
Hi. This is <a href="http://cafe.naver.com/onvoicing" target="_blank">OV CODING</a>, my friend.
</body>
</html>
 
cs




a 태그 하나로는 우리가 하고 싶은 것을 할 수 없었으므로,

두 개의 속성(href, target)을 사용했다. 

href : 어디로 링크할 것인가

target : 웹 브라우저의 무엇을 통해 열 것인가 (없으면 현재창에서 열림, _blank : 새 창에서 열림, _self:현재 창에서 연다(기본값)) 

속성과 속성을 구분하는 구분자는 "공백(스페이스)" 한 칸 이다. 



*리스트 (LIST) 속성 

<li> html </li> : li는 '리스트의 약자', 리스트로 표현해주는 태그.

<ul> : 그룹핑, Unordered List (순서가 없는 리스트)

<ol> : Ordered List (순서가 있는 리스트>, 숫자가 자동으로 붙게 됨


<body> : 문서의 내용

<head> : 문서에 대한 정보 

<meta charset-"utf-8"/> : 안쓰면 한글이 깨짐

<title> : 타이틀을 표시해줌, <head>내부에 씀 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>OV COIDNG</title>
    </head>
 
    <body>
        <ol>
        <li>html</li>
        <li>css</li>
        <li>javascript</li>
        </ol>
 
        <ul>
            <li>John</li>
            <li>Ellen</li>
            <li>Lion</li>
        </ul>
 
    </body>
</html>
cs




<그 외 이야기들>


HTML을 처음 만든 사람은 팀 버너스 리. 

어느순간 개인이 관리하기에는 한계가 생겼고, w3c (World Wide Web Consortium)라는 국제 기구가 출범.

이 기구는 국제적으로 HTML의 표준을 정의함. (어떠한 태그는 필요없다고 버려지기도 하고, 시대의 요구에 부응하여 새로 추가되기도 하므로,

이런 것들을 관리하기 위해 나왔다)


이 국제기구의 의장이 바로 팀 버너스 리. 구글,애플,삼성 등의 많은 회사들이 멤버로 참여하고 또 자신의 회사에 유리하게끔 관리하기 위해 경쟁하고 있음.

 

<!DOCTYPE html>

html의 문법이 아니라서 <html>타입 바깥에 존재.

이 html문서가 어떤 html 표준안에 따라서 작성된 것인지를 웹 브라우저가 이해할 수 있도록 기술해준 것. 


위와 같이 다양한 표준안이 존재하므로 명시적으로 독타입을 기술해주어야 한다.



html의 문법 자체는 별로 없지만, 다양한 태그를 사용할 줄 알면 좋다.

영어로 치면 태그란 영단어같은 것.

=> Tag Reference 를 활용. (링크1) (링크2)



html의 본질은 "정보"다.

즉, 어떠한 정보를 사람이 이해할 수 있게 태그라는 이용해서 규정하고 정의하는 것이 HTML의 궁극적인 목표.

그 목표에 전념하기 위해, 시각적이고 디자인을 할 때 사용되는 기능을 CSS라는 별도의 언어로 분가시킴.


반응형

'개인 서재..* > 코딩야학' 카테고리의 다른 글

[1일차 필기노트] 수업 소개 ~ 서버  (0) 2017.06.01
댓글