코딩야학 : 생활코딩 배우는 중

리뷰/기기
2017. 7. 28. 11:50

코딩야학 : http://code-night.ga/
코딩야학 > 수업바로가기 : https://opentutorials.org/course/1688

7. 윈도우에 웹서버 설치

Bitnami - 서버 소프트웨어를 쉽게 한방에 설치함.

>설치방법

구글 검색 Bitnami wamp

windows : https://bitnami.com/stack/wamp
Mac : https://bitnami.com/stack/mamp
Linux : https://bitnami.com/stack/lamp

[다운로드 ]
bitnami-wampstack-5.6.31-0-windows-installer.exe

마지막꺼만 체크하고 나머지 해제 후 설치.

브라우저에 localhost/index.html 잘 나오면 설치완료.

윈도우탐색기 > c: > Bitnami > wampstack... > apache2 > htdocs

에 index 파일있어.

이걸 보여주는 것.

여기에 메모장 > hello world.html (모든파일/UTF-8)로 저장

브라우저에 localhost/helloworld.html 치면 그 화면나와.

htdocs 디렉토리는 Document Root 라고도함. 웹서버가 문서를 찾는 최상위 드렉토리.
여기에 저장해야 웹서버가 웹브라우저에 보내줌.

10. HTML 이론

(1) HTML의 기본문법

H(yper)T(ext)M(arkup)L(anguage)

문서와 문서가 링크로 연결되어있다. 이런형태의 문서시스템을 하이퍼텍스트라고한다.
HTML - 사람도 알아들을수 있고 웹브라우저도 알아들을수 있어

메모장 > htdocs 폴더에 저장 > study.html 로 > 모든파일/utf-8 저장

--------------------------

<!DOCTYPE html>
<html>
    <head>
         <meta charset="utf-8" />
    </head>
    <body>
         안녕하세요. <strong>생활코딩</strong>입니다.
    </body>
</html>

--------------------------

글쓸때 탭키눌러. 보기편하게.

저장하고 주소창에 http://localhost/mystudy.html 치면 나와

(2) HTML 문법 - 속성

-링크연결

<DOCTYPE html>
<html>
    <head>
         <meta charset="utf-8" />
    </head>
    <body>
         안녕하세요. <a href="http://opentutorials.org/course/1">생활코딩</a>입니다.
    </body>
</html>

- target="_blank" : 새창으로 연결

<DOCTYPE html>
<html>
    <head>
         <meta charset="utf-8" />
    </head>
    <body>
         안녕하세요. <a href="http://opentutorials.org/course/1" target="_blank">생활코딩</a>입니다.
    </body>
</html>

target - 어떤 브라우저의 무엇을 통해서 열것인가.
_blank - 새로운 창에서 링크를 연다(약속)
_self - 현재창에서 링크를 연다 (target="_self")

속성과 속성 연결할때는 띄어쓰기 한칸

(3) HTML 문법 - 태그의 중첩

리스트 태그
<li>
</li>

구분 태그

순서가 없는 리스트(동그라미) : u(nordered) l(ist)

순서가 있는 리스트 (숫자가 나와)

------------------------------------

파일저장 : list.html / 모든파일 / utf-8

<DOCTYPE html>
<html>
    <head>
         <meta charset="utf-8" />
    </head>
    <body>
         <ol>
         <li>html</li>
         <li>css</li>
         <li>javascript</li>
         </ol>

         <ul>
         <li>최진혁</li>
         <li>최유빈</li>
         <li>한이람</li>
         </ul>
    </body>

</html>

------------------------------------

body - 웹페이지에서 본문에 해당되는 내용이 바디태그안쪽에 들어가도록 약속되어있어. 화면에 표시되는 내용.

head - 문서를 설명하는 정보들을 감싸고 있는. 문서에대한 정보를 담고 있는.
문서가 utf-8이라는 문자코드로 저장되어있다.(이걸 쓰지 않으면 한글이 깨져나오는 경우 있어)

html - html안쪽에 있는 것들이 html문서이다.라는걸 브라우저에게 알려주는 역할.

헤드태그에 들어올수있는 태그
<title> 생활코딩</title> -> 문서의 제목 이 됨.윈도우창 제목

<DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> 생활코딩</title>
</head>
<body>
<ol>
<li>html</li>
<li>css</li>
<li>javascript</li>
</ol>

(4) HTML 정리

html 체계적으로 발전시키기위한 기구 - w3c
여기서 html표준을 정해.

<!DOCTYPE html> 은 HTML 바깥에 존재해. 왜냐면 이건 html이 아니기 때문. 없어도..ok
독타입 의미 - html문서가 어떤 표준안에 따라 작성된 것인지 웹브라우저가 이해할수 있도록 표현한것.
이 저걸(보고 이렇게 해석하면 되겠구나...라고

tag 영어로 치면 영단어 정도.

Tag Reference - 태그 사전

http://dev.w3.org/html5/html-author/
http://opentutorials.org/course/1058

11. HTML 실습

(1) 모델링을 HTML로 만들기

텍스트가 진하게 / 점점 작아짐
<h1>JavaScript</h1>
<h2>JavaScript</h2>

h는 문서의 제목 주제를 나타내는거라서 숫자대로 가면 점점 작아져.

디자인은css에서...
.
.

-------------------------------------------

<!DOCTYPE html>
<html>
    <head>
         <meta charset="utf-8" />
    </head>
    <body>
         <h1>JavaScript</h1>
             <ol>
                  <li>Javascript란?</li>
                  <li>변수와 상수</li>
                  <li>연산자</li>
             </ol>
         <h2>변수와 상수</h2>
             변수란
             <ul>
                  <li>변하는 값</li>
                  <li>설명 어쩌구</li>
             </ul>
    </body>
</html>

-------------------------------------------

(2) 의미론적인 웹

시멘틱웹(semantic web) : 의미가 잘 드러나는 웹

예전엔 XHTML 지금 잘쓰이진않아

현재는 HTML5

<nav> </nav>

어떤 기능이 있진않아. 화면상 똑같아.
약속된 태그를 통해 안쪽이 웹사이트를 탐색하는데 필요한 정보라는걸 알수있어.

안쪽내용이 내비게이션을 위한것이란 의미론적인걸 나타내는것.

<header> </header>

문서의 간판에 해당되는것이다라는걸 분명하게 드러낼수있어.

<article> </article>

본문에 해당되 는정보를 의미론적으로 들어나게하는 방법.

사람/기계들이 저게 본문이구나 알고 어떤 처리를 할수 있어.

웹페이지자체가 사람에게도 기계에게도 정보로서의 가치가 있는 방향으로 발전하고 있다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<header>
  <h1>JavaScript</h1>
</header>
<nav>
  <ol>
   <li>Javascript란?</li>
   <li>변수와 상수</li>
   <li>연산자</li>
  </ol>
</nav>
<article>
  <h2>변수와 상수</h2>
  변수란
  <ul>
   <li>변하는 값</li>
   <li>설명어쩌구</li>
  </ul>
</article>
</body>
</html>

저장 : page_html.html

(3) 사이트 완성

-링크연결

index.html 대문페이지. 약속
지워도 화면 똑같아. 암묵적약속이라 굳이 안쓰고 주소만 입력해도 index.html을 찾아.

내비게이션 각각의 항목 링크가 되야해.

링크걸리고 밑에 다른 설명하는글은 날라가. 변수와 상수

각각의 페이지마다 전체.공통적으로 들어가야해.
저장해놓고 아티클 부분만 바꿔.

홈피메인으로 돌아갈때 h1에다가 태그 달아주면됭.

<h1>JavaScript</h1>
<h1><a href="http://localhost/">JavaScript</a></h1>
홈으로 가는걸 모든내용에 추가해야되. 인덱스파일에도.

잘 안됐어!! 다시 듣기.
아. 홈으로 가기 됐다. 주소를 바꿔야.
<모든 내용에 추가한다는 말 이해 못함> 그부분 다시 듣기. 끝부분.이야

12. 개발도구

'리뷰 > 기기' 카테고리의 다른 글

요거베리 요거트 메이커 1년 사용기 (0)	2017.11.14
메이커스 : 어른의 과학 '플라네타륨 조립식 키트' (0)	2017.11.12
갤럭시 s8 고속충전 vs 일반충전 비교 (0)	2017.10.11
갤럭시s8 빅쏘 액정보호필름 + 주토피아 스마트링 (0)	2017.09.28
갤럭시s8 케이스 득템 ♡ : 마리몬드 폰케이스 리뉴얼 이벤트 (0)	2017.09.26