'웹 프로그래밍' 카테고리의 글 목록 (4 Page)

CSS 이론

도입

HTML => 너무 못생겼다.

정보를 꾸미기 위한 언어 CSS

Cascading Style Sheet

CSS => Style 을 위한 언어

HTML + CSS : CSS는 독립적인 언어이긴 하지만 HTML 없이는 의미가 없다.

HTML : 정보에 집중

CSS : 디자인에 집중

HTML과 CSS의 공존

=> Style이란 태그

tip : Ctrl + \ 를 통해 왼쪽에 있는 Tree View를 껐다 켰다 할 수 있음

CSS실습 전 코드

실습 1 : h1태그의 색과 글자크기를 바꾸고 싶다.

<style>
  h1 {color : red}
</style>

CSS의 시작과 끝은 style 태그에 있다.

이유 : Markup(꺽새) 가 있으므로

h1의 의미 : h1이란 태그를 가지고 있는 것들의 속성을 설정

1번 코드

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
<h1>CSS</h1>
<h2>JavaScript</h2>
<h3>HTML</h3>
  </body>
</html>

2번코드

<!DOCTYPE html>

<html>

<head>

<style>

h1 {color:red}

</style>

</head>

<body>

<h2>JavaScript</h2>

</body>

</html>

저작자표시 비영리 변경금지

'웹 프로그래밍' 카테고리의 다른 글

CSS 이론 - 박스모델 (0)	2017.12.17
CSS 이론2 (0)	2017.12.16
개발도구 - 아톰 (0)	2017.12.16
HTML실습 (0)	2017.12.14
HTML 문법 - 태그의 중첩 (0)	2017.12.14

도구의 필요성

삽과 포크레인

삽 : 직관적 사용

포크레인 : 훨씬 효율적

반드시 알아두었으면 좋겠다는 개발도구

버전 관리 시스템 (Version Control System)

문제가 발생했을 때 언제, 누구에게서 발생했는지를 파악할 수 있게 해준다.

여러사람이 함께 작업할 때 질서를 잡아준다.

GIT 에 대해 배우기

코드 편집기 (Editor)

=> GITHUB 에서 만든 아톰

https://atom.io/

다운받고 settings -> install -> emmet 검색 & install

<html></html> 이렇게 칠 필요 없이

html + tab 을 하면 자동으로 완성

리스트 3개가 있는 부분은

li*3>a + tab으로 한번에 만들어 줄 수 있다.

이전 사진과 다르게 localhost가 opentutorials.org로 바뀌었다.

이처럼 한번에 여러 내용을 수정하고 싶을 때

Ctrl 키를 누르면 MultiSelection이 가능해진다. 하고 수정하면 된다.

저작자표시 비영리 변경금지

'웹 프로그래밍' 카테고리의 다른 글

CSS 이론2 (0)	2017.12.16
CSS 이론1 (0)	2017.12.16
HTML실습 (0)	2017.12.14
HTML 문법 - 태그의 중첩 (0)	2017.12.14
HTML 이론 - HTML의 기본문법과 속성 (0)	2017.12.12

HTML실습

최종적으로 만들 페이지.

제목을 나타내는 태그 <hx> x는 숫자이다.

<h1> -> 진하게 글씨가 나온다.

<h2> -> <h1> 보다 작은 글씨가 나온다.

태그 없이 쓰면 앏게 나온다.

중간실습

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8 /">
  </head>
  <body>
    <h1>JavaScript</h1>
    <ol>
      <li>JavaScript란</li>
      <li>변수와상수</li>
      <li>연산자</li>
    </ol>
  </body>
</html>

정보의 전달을 위한 것이 html이라는 것을 상기하면서 작성

<!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>x=10일 때 왼쪽항</li>
    </ul>
  </body>
</html>

html 코드화 한다 = Markup 한다.

의미론적인 웹

Semantic Web

웹에서 html이 차지하는 것은 정보

디자인적인 측면은 CSS로 분리

html 정보를 더욱 잘 들어내게 하는 것들 => Semantic Web

문서를 탐색하는 역할을 하는 정보 네비게이션

<ol>
      <li>JavaScript란</li>
      <li>변수와상수</li>
      <li>연산자</li>
</ol>

문서에서 본문에 해당되는 내용 컨텐츠

<ul>
      <li>변하는 값</li>
      <li>x=10일 때 왼쪽항</li>
</ul>

두 내용은 성격이 다르다

<nav>

기계들 입장에서 안에있는 list들이 navigation의 역할을 하는 것임을 분명히 알 수 있다.

어떤 기능이 있는 태그는 아니다. but navigate하는 역할의 내용이라는 것은 분명히 알 수 있음 => 의미론적인 웹

<header>

<h1>으로 감싸져 있던 내용은 문서의 간판에 해당되는 내용임. 여기에는 <header> 태그를 달아서 더 분명히 할 수 있다.

<article>

본문에 해당되는 내용은 <article> 태그로 감싸서 의미를 더 분명히 할 수 있다.

사이트 완성

index.html => 대문 페이지라는 약속이 되어있음. (Default)

1,2,3 리스트를 클릭하면 해당하는 정보를 나타내는 article 이 나오도록 만들기.

link를 넣기 위해

<a herf=""> 사용

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8 /">
  </head>
  <body>
    <header>
    <h1>JavaScript</h1>
    </header>
    <nav>
    <ol>
      <li><a href="http://localhost/page_html.html">JavaScript란</a></li>;
      <li><a href="http://localhost/page_vc.html">변수와상수</a></li>;
      <li><a href="http://localhost/page_op.html">연산자</a></li>;
    </ol>
    </nav>
  </body>
</html>

다음 link의 내용을 추가.

제목을 누르면 index.html로 갈 수 있도록 링크를 추가.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8 /">
   
  </head>
  <body>
    <header>
    <h1><a href="http://localhost/index.html">JavaScript</a></h1>;
    </header>
    <nav>
    <ol>
      <li><a href="http://localhost/page_html.html">JavaScript란</a></li>;
      <li><a href="http://localhost/page_vc.html">변수와상수</a></li>;
      <li><a href="http://localhost/page_op.html">연산자</a></li>;
    </ol>
    </nav>
    <article>
       <h2>연산자</h2>
       연산자는 계산을 할 때 사용되는 것 입니다.
    </article>
  </body>
</html>

저작자표시 비영리 변경금지

'웹 프로그래밍' 카테고리의 다른 글

CSS 이론1 (0)	2017.12.16
개발도구 - 아톰 (0)	2017.12.16
HTML 문법 - 태그의 중첩 (0)	2017.12.14
HTML 이론 - HTML의 기본문법과 속성 (0)	2017.12.12
수업소개 ~ 서버와 클라이언트 (0)	2017.12.04

List

리스트를 사용하기 위해 사용하는 태그

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<ol>

<li>JavaScript</li>

</body>

</html>

만약 두가지 리스트가 있으면 그 두 가지를 구분하기 위한 것이 필요

=> 각각의 태그드를 묶어주는 태그 사용 <ul>

ul의 유래 == unordered list

반대로ol == ordered list

ol을 통해 순서가 관계있는 list 라는 것을 브라우저에게 알려주고,

ul을 통해 순서가 상관없는 list 라는 것을 브라우저에게 알려준다.

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<ol>

<li>JavaScript</li>

</ol>

<ul>

</ul>

</body>

</html>

<head>의 의미

문서를 설명하는 정보들을 감싸고 있는 태그

<body>의 의미

웹페이지 에서 본문에 해당하는 의미.

쓰지 않으면 한글이 깨져 보일 수 있다

원래 연 파일의 제목이 html의 제목으로 나왔는데 이것은 제목을 설정해준다.

<html> 태그

태그 안에 있는 것들이 html문서이다. 라는 것을 브라우저에게 알려주는 역할.

<!DOCTYPE html>

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

Tag Reference

태그 사전.

저작자표시 비영리 변경금지

'웹 프로그래밍' 카테고리의 다른 글

CSS 이론1 (0)	2017.12.16
개발도구 - 아톰 (0)	2017.12.16
HTML실습 (0)	2017.12.14
HTML 이론 - HTML의 기본문법과 속성 (0)	2017.12.12
수업소개 ~ 서버와 클라이언트 (0)	2017.12.04

HTML

: Hyper Text Markup Language의 약자

Hypertext

: 문서와 문서가 '링크' 로 연결되어 있다. 이러한 문서 시스템

Link - HTML의 본질

HTML의 본질 - WEB

Markup

tag의 이해부터 시작

tag

안녕하세요 생활코딩 입니다. 이것을 HTML로 표현하고 싶다면

안녕하세요 <strong>생활코딩</strong>입니다. (여기서 태그 사이에 있는 것을 컨텐츠라고 한다)

여기서 <strong> 이 Tag이다.

실습

실습을 위해 메모장 파일을 만들어 apache2의 htdocs에 저장한다.

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

HTML 문법 - 속성

링크를 나타내기 위한 tag

<a>생활코딩</a> => 어딘가에 링크가 걸려 있다는 것을 알 수 있음.

어디에 걸려있는지에 대한 정보가 필요함

<a href="http://opentutorials.org/course/1">생활코딩</a> 로 표현가능

여기서

href : 속성명

이후의 것 : 속성의 값

새창에서 열기가 하고 싶다면 target="_blank" 사용

=> target 도 속성. 속성과 속성 사이는 빈칸 하나로 구별함

a태그 실습

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
</head>
<body>
    안녕하세요. <a href="http://pkiop.tistory.com">푸키키키</a>; 입니다.
</body>
</html>

새 창에서 열기

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
</head>
<body>
    안녕하세요. <a href="http://pkiop.tistory.com" target="_blank">푸키키키</a>; 입니다.
</body>
</html>

저작자표시 비영리 변경금지

'웹 프로그래밍' 카테고리의 다른 글

CSS 이론1 (0)	2017.12.16
개발도구 - 아톰 (0)	2017.12.16
HTML실습 (0)	2017.12.14
HTML 문법 - 태그의 중첩 (0)	2017.12.14
수업소개 ~ 서버와 클라이언트 (0)	2017.12.04

수업 소개

생활코딩 초창기 버전의 index.php 파일을 만들 것.

반응형 웹, 글을 작성하면 추가되도록 만들 것.

모든 기능을 배우는 것은 불가능. 어떻게 조합하는 지를 배울 것.

보이는 코드를 수업이 끝났을 때

하나하나 남에게 설명할 수 있을 정도가 되거나, 처음부터 끝까지 안보고 작성할 수 있을 정도가 되면 주인공이 되어 공부할 수 있는

자질을 갖추게 되는 것

웹 애플리케이션을 만드는 순서

제일먼저 구상 (뭘 만들 것인가)

다음으로 기획 (세부적인 계획 작성)

디자인

==> 그 다음 개발 시작

테스트

무한반복

Start Small => 우선 완성을 목표로 최소한의 기능만으로 작게. 이후에 크기를 키워나가자

복잡도 =>

체크박스 1개 => 2가지 경우

체크박스 2개 => 4가지 경우

체크박스 3개 => 8가지의 경우

체크박스 50개 => 천조 이상 가지 => 이만큼 테스트를 해야한다.

2^50 => 2^51 => 지수가 늘어날 수록 수가 폭발적으로 늘어난다 : 지수폭발

프로그램 기능 하나 추가하는 것 => 지수폭발이 일어날 수도.

기획

UI : User Interface => 사용자가 시스템을 제어하는 조작장치

ex) PC 버튼, 웹 사이트의 버튼

Modeling : 가상으로 만들어 보는 것

UI Modeling : 사용자의 입장에서 동작하는 기능을 가상으로 만들어보기

=> 무엇을 만들지를 분명하게 알 수 있어서 그렇지 않았을 때에 발생하는 여러 문제들을 방지할 수 있음

방법 1. 손으로 그리기

방법 2. Pencil이라는 오픈소스 프로그램 이용하기

방법 3. balsamiq 이용하기 (유료)

방법 4. PowerPoint

인터넷과 웹의 역사

인터넷 : 운영체제

웹 : 운영체제 위에서 돌아가는 애플리케이션

이메일, FTP(파일전송기술) : 웹의 형제

1960년대 : 인터넷 등장

1990년대 : 웹의 등장

인터넷 : 전세계에 있는 컴퓨터들이 파일을 주고받는 가장 거대한 네트워크. 도로같은 것

웹 : 인터넷이라는 네트워크를 이용해서 HTML이란 언어를 사용해서 컴퓨터끼리 정보를 주고받는 것. 대중교통같은 것

만든사람 : 팀버너스리

최초의 웹브라우저를 만듬

웹브라우저를 위한 컴퓨터 웹서버를 만듬

둘 사이의 통신 규약 ==> HTTP

웹페이지의 정보를 담고 있는 언어 ==> HTML

서버와 클라이언트

클라이언트 : 웹 브라우저가 설치되어 있는 PC => 요청하는 쪽 (갑)

웹 서버 : 웹 서버가 설치되어 있는 PC => 응답하는 쪽 (을)

필요한 것 : 웹 브라우저(매우 친숙) 웹 서버(들어본 적이 보통 없음)

웹 서버에 지금 집중

한 PC 내에서 웹 브라우저와 웹 서버가 통신하게 할 수 있음

웹서버 종류 => Apache, Nginx (오픈소스 진영)

IIS (마이크로소프트)

구글 => 단일 기업에서 사용하는 양 만으로 상당히 높은 점유율을 차지하고 있음

Nginx 뜨고있음

서버쪽 software 설치는 매우 불편함

=> bitnami를 사용해서 한방에 설치

저작자표시 비영리 변경금지

'웹 프로그래밍' 카테고리의 다른 글

CSS 이론1 (0)	2017.12.16
개발도구 - 아톰 (0)	2017.12.16
HTML실습 (0)	2017.12.14
HTML 문법 - 태그의 중첩 (0)	2017.12.14
HTML 이론 - HTML의 기본문법과 속성 (0)	2017.12.12

푸키키키