도구의 필요성

삽과 포크레인


삽 : 직관적 사용

포크레인 : 훨씬 효율적


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

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

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

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

GIT 에 대해 배우기


코드 편집기 (Editor)

=> GITHUB 에서 만든 아톰


다운받고 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>
    </ol>
    </nav>
  </body>
</html>


다음 link의 내용을 추가.

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8 /">
   
  </head>
  <body>
    <header>
    </header>
    <nav>
    <ol>
    </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>
    <meta charset="UTF-8" />
  </head>
  <body>
    <ol>
      <li>html</li>
      <li>css</li>
      <li>JavaScript</li>
  </body>
</html>



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

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

ul의 유래 == unordered list

반대로ol == ordered list

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

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <ol>
      <ol>    
        <li>html</li>
        <li>css</li>
        <li>JavaScript</li>
      </ol>
      <ul>
        <li>가나다</li>
        <li>가나라</li>
      </ul>
  </body>
</html>



<head>의 의미

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

<body>의 의미

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

<meta charset="UTF-8" />

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

<title>생활코딩</title>

원래 연 파일의 제목이 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

재귀 부분에서 dfs(nx,ny,cnt+1)을 

++cnt로 했는데 틀렸습니다 가 나왔다. 차이는 나중에 생각해 봐야겠다. 

새로 배운 것

1. 플러드 필에서 이동할 때 썼던 int dx,dy 배열을 한번에 2차원 배열로 사용하는 방법

2. 앞에것 을 방문했는지를 확인하는 데에 원래 배열을 만들어서 이전에 방문했던 지점을 

저장하고, for문을 이용해서 그 것을 매번 다음 nx,ny를 방문할 때마다 반복해야 했다. 

하지만 이 코드로 bool ch에 배열 number로 저장해서 한번에 찾을 수 있다는 걸 알았다. 

3. 백트래킹에 대해 아주 많이 생각해 보게 되었다. 



#include <iostream>
using namespace std;
int r, c;
char a[22][22];
bool ch[26];
int dd[][2] = { { 1,0 },{ -1,0 },{ 0,1 },{ 0,-1 } };
int ans = 0;
void dfs(int x, int y, int cnt) {
       if (cnt > ans) ans = cnt;
       for (int k = 0; k < 4; ++k) {
               int nx = x + dd[k][0];
               int ny = y + dd[k][1];
               if (0 <= nx&&nx < r && 0 <= ny&&ny < c) {
                      if (ch[a[nx][ny] - 'A'] == false) {
                              ch[a[nx][ny] - 'A'] = true;
                              dfs(nx, ny, cnt+1);
                              ch[a[nx][ny] - 'A'] = false;
                      }
               }
       }
}
int main() {
       cin >> r >> c;
       for (int i = 0; i < r; ++i) {
               cin >> a[i];
       }
       ch[a[0][0] - 'A'] = true;
       dfs(0, 0, 1);
       cout << ans;
       return 0;
       
}

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

'알고리즘' 카테고리의 다른 글

[DP] 백준 동전 2 2294  (0) 2018.04.02
[DP] 백준 2011 암호코드  (0) 2018.01.02
[그래프] 백준 5567 결혼식  (0) 2017.12.13
[EAZY] 백준 1065번 한수  (0) 2017.08.17
[EAZY] 백준 4673 셀프넘버  (0) 2017.08.15
트리

사이클이 없는 그래프

정점의 개수 V

간선의 개수 V-1


루트 있는 트리


부모(Parent)


그래프가 있으면 루트에 가까운 것이 부모

루트는 부모가 없다. 


자식(Children)


​​​​부모 아래에 달려있는 노드

가장 아래층에 있는 노드 => 단말 정점 (Terminal Node) (Leaf Node)


형제(Sibiling)

​​​​같은 부모를 가지면 형제


​​깊이(Depth)


​​루트에서 부터의 거리 (루트의 깊이를 0으로 하나 1로 하나의 차이가 있다)



높이(Height)

깊이 중에서 가장 큰 값

조상, 자손(Ancestor, Descendent)

p->q로 갈 수 있을 때(형제 위치로는 갈 수 없음)
p가 q보다 루트에 가까우면
p는 q의 조상
q는 p의 자손


이진 트리(Binary Tree)

자식을 최대 2개만 가지고 있는 트리



트리의 표현

1. 그래프와 같은 방식으로 저장할 수 있다.

2. 트리의 모든 노드는 루트를 제외하고 모두 부모를 가지므로 부모만 저장하는 방식

2.의 장점 => 부모를 찾는데 O(1)만큼 걸린다. 

2의 단점 => 자식을 찾는데 O(V)만큼 걸린다. 

3. 이진트리의 경우 배열로 표현할 수 있다. 

부모를 x로 자식을 2x, 2x+1로 설정해서 배열로 저장

3의 단점 => 한쪽으로만 연결된 트리를 예로 들 경우 8개를 저장하기 위해 256개의 저장공간이 필요함

이진 트리가 꽉 차는 방식으로 차도록 해결할 수 있는 문제는 이런 방식으로 사용하면 아주 좋음 



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

boj.kr/5567

문제

상근이는 자신의 결혼식에 학교 동기 중 자신의 친구와 친구의 친구를 초대하기로 했다. 상근이의 동기는 모두 N명이고, 이 학생들의 학번은 모두 1부터 N까지이다. 상근이의 학번은 1이다.

상근이는 동기들의 친구 관계를 모두 조사한 리스트를 가지고 있다. 이 리스트를 바탕으로 결혼식에 초대할 사람의 수를 구하는 프로그램을 작성하시오.

입력

첫째 줄에 상근이의 동기의 수 n (2 ≤ n ≤ 500)이 주어진다. 둘째 줄에는 리스트의 길이 m (1 ≤ m ≤ 10000)이 주어진다. 다음 줄부터 m개 줄에는 친구 관계 ai bi가 주어진다. (1 ≤ ai < bi ≤ n) ai와 bi가 친구라는 뜻이며, bi와 ai도 친구관계이다. 

출력

첫째 줄에 상근이의 결혼식에 초대하는 동기의 수를 출력한다.



풀이과정
첫번째 for : 양방향 그래프로 입력을 받는다. 
두번째 for : 1과 친구인 관계를 ch에 1로 저장하고 queue에 친구관계인 node를 push한다.
세번째 while : queue에 들어간 node를 하나씩 꺼내서 그 것과 연결된 노드 중 방문하지 않은 노드의 ch에 2를 저장한다.
마지막 for : ch가 1인 것과 2인 것의 개수를 센다.

#include <iostream>
#include <vector>
#include <queue>
using namespace std;
queue<int> s;
vector<int> a[10001];
int ch[10001] = {0, };
int ans = 0;
int n;
int main() {
       cin >> n;
       int t;
       cin >> t;
       for (int i = 0; i < t; ++i) {
               int temp1, temp2;
               cin >> temp1 >> temp2;
               a[temp1].push_back(temp2);
               a[temp2].push_back(temp1);
       }
       int temlen = a[1].size();
       for (int i = 0; i < temlen; ++i) {
               ch[a[1][i]] = 1;
               s.push(a[1][i]);
       }
       while (!s.empty()) {
               int temp = s.front();
               s.pop();
               int len = a[temp].size();
               for (int j = 0; j<len; ++j)
                      if (ch[a[temp][j]] == 0) {
                              ch[a[temp][j]] = 2;
                      }
       }
       for (int i = 2; i <= n; ++i) {
               if (ch[i] == 2 || ch[i] == 1) {
                      ans++;
               }
       }
       cout << ans;
       return 0;
}


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

'알고리즘' 카테고리의 다른 글

[DP] 백준 2011 암호코드  (0) 2018.01.02
[그래프] 백준 1987 알파벳  (0) 2017.12.14
[EAZY] 백준 1065번 한수  (0) 2017.08.17
[EAZY] 백준 4673 셀프넘버  (0) 2017.08.15
백준 C++ 11721번  (0) 2017.08.15
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


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

+ Recent posts

티스토리툴바