<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>

 <script type="text/javascript">
  function plus(num1, num2) {
   alert(num1 + num2);

  }
 </script>
 
 <a href="javascript:plus(10,20)">plus 함수이름 부르기(10,20 더하기)</a>


</body>
</html>

 

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
 <table border=1>
  <tr>
   <td colspan=2 align=center>Plus Example
  </tr>

  <tr>
   <td>number1:
   <td><input type=text placeholder="input number1" id=num1>
  </tr>

  <tr>
   <td>number2:
   <td><input type=text placeholder="input number2" id=num2>
  </tr>

  <tr>
   <td colspan=2 align=center><input type=button value=plus id=plus>
  </tr>

  <tr>
   <td colspan=2 align=center><input type=text placeholder="result here" id=result>
  </tr>
  
</table>

<script type="text/javascript">

document.getElementById("plus").onclick = function(){
 var num1 = parseInt(document.getElementById("num1").value);
 var num2 = parseInt(document.getElementById("num2").value);
 document.getElementById("result").value = num1 + num2;
 
 
}

</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>

<table border=1>
  <tr>
   <td align=center>Password Confirm
  </tr>

  <tr>
   <td><input type=text placeholder=password id=pw1>
  </tr>

  <tr>
   <td><input type=text placeholder=passwordCheck id=pw2>
   <td><span id=check ></span>
  </tr>
 
</table>
<script type="text/javascript">

document.getElementById("pw2").onkeyup = function(){
 var num1 = parseInt(document.getElementById("pw1").value);
 var num2 = parseInt(document.getElementById("pw2").value);
 
 if(num1 == num2){
  document.getElementById("check").innerHTML="OK";
 }else
  document.getElementById("check").innerHTML="Not OK";
}

 

</script>


</body>
</html>

17.12.14 웹수업2일차

자바 스크립트 수업시작 -비전문개발자를 위해
세미콜론 붙여도 되고 안붙여도됨
더블쿼테이션도 구분안함
변수를 선언하지않아도 사용가능(명시적자료형은 없지만 묵시적자료형있음)

 


네스케이프에서 개발한 프론트엔드 언어
정적문서 html 동적요소 지원하기 위해서 제작
Node.js Back End 영역까지 확장

최초 Live Script로 개명  ECMA스크립트(es) -> 자바스크립트

풀스택개발자

프론트엔드
문법은 같은데 자원관리 CPU Thread 뎁스 부족으로 돌아옴
자바디벨로퍼

3가지 방식있음

External - 파일을 따로 만들고 임포트
 
Internal - Html 에 자바코드 넣음(해드 - 스크립트 / 바디- html)

Inline  - 한줄정도 함수로 연결


우리는 Internal 로 시작한다
외부 라이브러리

문서상에 <script> - </script>

내장라이브러리 내장객체 이용가능
클라이언트브라우져에 내장되어있음 라이브러리는 이미 준비되어있음

 

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
  
 <script type="text/javascript">
  document.write('Hello Java Script<br>');
  document.write('Hello Document');
 </script>
</body>
</html>


===========

 

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
 <script type="text/javascript">

  window.alert("Hello");
  
  var result = window.confirm("Confirm Function 연습중입니다.");
  document.write(result);
 </script>
</body>
</html>

=============
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
 <script type="text/javascript">
  var result = window.confirm("Confirm Function 연습중입니다.");
  document.write(result);
 </script>
</body>
</html>

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


<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
 <script type="text/javascript">
  var input = window.prompt("메세지를 입력하세요");
  document.write(input);
 </script>
</body>
</html>

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

자바스크립트 html 제어 공부
DOM
html 인스턴스처럼 자바스크립트에서 가져다 쓸수있게 하는것

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
Hello
 <script type="text/javascript">
  var br = document.createElement("br");
  document.body.appendChild(br);
 </script>
 World
</body>
</html>

=========== Element접근2
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
 <input type=text id=inputText>
 <script type="text/javascript">
  var ptag = document.getElementById("inputText");
  ptag.value = "input  value by id";
 </script>
</body>
</html>

=========


<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>

 <table border=1>
  <script>
   var row = prompt("행");
   var col = prompt("열");

   var count = 1;
   for (var j = 0; j < row; j++) {
    if (j % 2 == 0) {
     document.write("<tr bgcolor=#d2ddef>");
    } else {
     document.write("<tr>");
    }
    for (var i = 0; i < col; i++) {
     document.write("<td>" + count++);
    }
    document.write("<tr>");
   }
  </script>
 </table>

</body>
</html>

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

자바스크립 함수(Function)
메소드와 동일
매개변수 가지지만 반환형가지지않음
C언어 함수포인터

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
 <script type="text/javascript">
  function plus(num1, num2) {
   return num1 + num2;
  }
  var asVar = plus;
  document.write(asVar(10, 20));
 </script>

</body>
</html>

==========

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">

function doFunc(func){
 func();
}

doFunc(function(){
 document.write("hello<br>")
});

doFunc(function(){
 document.write("hoho")
});


</script>
</body>
</html>

17.12.13 웹 수업 1일차


로컬어플리케이션

네이티브? 어플리케이션 시장? - 배포 및 보안에 문제가 있음

이번 과정은 웹어플리케이션을 만드는걸 배운다


JD GUI


자르파일

바이너리 디컴파일러에 넣으면 모두 노출됨

자바로 만든 안드로이드 앱 피킹버전?

라이센스키/ 시리얼키를 해도 노출될 수 있기에 개인은 제공하지만 기업은 단속함


웹어플리케이션은 자바뿐만아니라 모든 부분에 해당함

웹솔루션이 나옴

Web application 은 홈페이지도만들고 SNS도 만들고 한다

- SNS
- 포탈사이트
- 쇼핑몰

이 포함됨

php(윈도우급임) > ASP  / JSP  > django(파이선) / RoR / Nod JS  -> 글로벌시장

한국은 JSP가 많음
운영체제는 윈도우가 큼


브라우져 - 인터넷익스플로러 사파리 크롬 등에서 만들어짐

브라우져는 코드 분석기이다


클라이언트 - 요청하고 결과 받아들이고 브라우져에 보냄 - 클라이언트사이드(프론트엔드) 프로그램-웹퍼블리셔-html/javascript/CSS/jquery 등

서버 - 클라이언트 요청을 수렴하고 결과만들고 반환 - 서버사이드프로그램(백엔드) 필요-웹디벨로퍼-jsp/asp/php

포트폴리오 만들기

둘의 언어는 다르심

프롤

팀장 - 웹디벨로퍼(1~2) 웹디자이너(자원능력자)또는 웹퍼블리셔으로 구성 / 여러팀과 협업하는 DB전문가

기존코드를 잘 만들어보자

html - sc...... / jsp
jrs
css
jquery


html - 언어긴한데 정적요소만 있음/ 동적요소는 없음 하여 변수가 없음

html 구성하는 요소
Element - 예약어 시작태그 종료태그

정적웹서버 - 단순요청 - 단순대응
동적웹서버 -

 

네이버 - tomcat검색
http://tomcat.apache.org/

본인 컴에 jdk 버전 확인 후 톰켓 다운 8진행


https://tomcat.apache.org/download-80.cgi
8.0.47 메이져 버전이 0대인 것으로 검색 후 다운

윈도우 + R
services.msc
Apache tomcat 9.0중지시키기

윈도우 + R
appwiz.cpl


8080 톰캣포트 실행 후(웹서비스를 위한 웹서버를 구축한거임)

윈도우 + R
http://localhost:8080


윈도우 + R
cmd
netstat -ano | findstr 8080 검색

Microsoft Windows [Version 6.1.7601]
Copyright (c) 2009 Microsoft Corporation. All rights reserved.

C:\Users\user>netstat -ano | findstr 8080
  TCP    0.0.0.0:8080           0.0.0.0:0              LISTENING       3320
  TCP    [::]:8080              [::]:0                 LISTENING       3320

C:\Users\user>tasklist | findstr 3320
TNSLSNR.EXE                   3320 Services                   0     22,844 K

C:\Users\user>taskill /F /PID 3320
'taskill'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는
배치 파일이 아닙니다.

C:\Users\user>taskkill /F /PID 3320
오류: 프로세스(PID 3320)를 종료할 수 없습니다.
원인: 액세스가 거부되었습니다.

ㄴ 이렇게 되면
cmd 실행파일을 관리자로 실행하고  다시 들어가 삭제해야함

Microsoft Windows [Version 6.1.7601]
Copyright (c) 2009 Microsoft Corporation. All rights reserved.

C:\windows\system32>taskkill /F /PID 3320
성공: 프로세스(PID 3320)가 종료되었습니다.

 

다이나믹 웹 프로젝트 사용시 서버필요인지 후 톰캣 활용함


구성요소 - element attribute 있음
Attribute

이름과 값이 짝을 이루어서 작성됨
1개 이상 가능

html은 주로 소문자를 사용함

html - 문서의 시작과 끝 차지 /프론트엔드 설정부분을 진행
head
body - 눈에 보여지는 부분 브라우져에 표시
html


color picker

rgb


<body>
 <font size=10 color=#07617c>여기는 000의 홈페이지입니다.(innerHTML이라고함)</font>

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Index</title>
</head>
<body>
 <font size=10 color=#07617c>여기는 000의 홈페이지입니다.</font>
</body>
</html>

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


Element 종류
<h1>~<h6> - 굴고 크게
<p> 하나의 문단
<img>

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>이미지 삽입</title>
</head>
<body>
 <img src=001.jpg width=50%>
</body>
</html>
========================

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Anker 태그 연습</title>
</head>
<body>
 <a href="https://www.naver.com">네이버로 가기</a>
</body>
</html>

======================
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Anker 태그 연습</title>
</head>
<body>
 <a href="https://www.naver.com"><img src=001.jpg></a><br>
 <a href="exam03.html">이전 예제로 가기</a>
</body>
</html>

 

======


<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Input 연습</title>
</head>
<body>

 <form action=exam03.html>
  <input type=text placeholder="ID를 입력하세요."> <br> <input
   type=password placeholder="PW를 입력하세요."> <br> <input
   type=button value=login> <input type=button value=join>
  <br> <input type=checkbox>아이디를 체크하시겠습니까? <br> <input
   type=radio>동의합니다. <input type=radio>동의하지않습니다. <br>
  <textarea rows=20 cols=50></textarea>
  <br> <select size=3>
   <option>영국
   <option>미국
   <option>한국
  </select> <br>
  <input type=reset value=초기화>
  <input type=submit value=전송>
 </form>
</body>
</html>

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

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Table 태그</title>
</head>
<body>


 <table border=1>
  <tr>
   <td width=100 align=center>A
   <td height=100 valign=top>B
  </tr>

  <tr>
   <td align=right>C
   <td>D
   <td>E
  </tr>

 </table>

</body>
</html>

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

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>퀴즈01</title>
</head>
<body>
 <table border=1>
  <tr>
   <td colspan=2 align=center>가
  </tr>

  <tr>
   <td>나
   <td>다
  </tr>


  <table border=1>
   <tr>

    <td rowspan=2>가
    <td>나
    
   </tr>

   <tr>
    <td>다
   </tr>

  <table border=1>
   <tr>

    <td rowspan=2>가
    <td colspan=2 align=center>나

   </tr>

   <tr>
    <td>라
    <td rowspan=3>마
   </tr>
   
   
   <tr>
    <td colspan=2 align=center>바
   </tr>

</body>
</html>

 

1) 네이버 한글 나눔글꼴 : http://hangeul.naver.com/font

'네이버는 좀 더 많은 사람들이 다양하고 아름다운 한글을 함께 사용할 수 있도록 나눔글꼴을 개발하여 무료로 배포하고 있습니다. 나눔고딕과 나눔명조를 시작으로 잉크를 아낄 수 있는 나눔글꼴 에코까지 다양한 나눔글꼴을 미리 체험해보고 마음에 드는 글꼴을 설치해보세요!'

해당 글꼴은 팩키지로 되어 있으며 나눔고딕, 나눔명조, 나눔고딕라이트, 나눔손글씨 와 잉크를 35% 정도 절약이 가능한 나눔고딕 에코 글꼴 (나눔고딕 에코, 나눔고딕 명조) 로 이루어져 있습니다.
윈도우나 맥도 사용이 가능하므로 범용성이 높다고 할 수 있습니다.


2) 은글꼴 : http://kldp.net/projects/unfonts

'은글꼴은 HLaTeX의 저자로 유명한 은광희님이 만드신 UHC글꼴을 FontForge 툴을 사용하여 박원규에 의해 2003년 최초 트루타입 글꼴로 변환 시킨 글꼴을 말하며, 그 이후에 신정식/박원규/김도현에 의해 개발/ 관리 되고 있습니다.'

해당 글꼴은 팩키지 자체가 GSUB기술을 지원하여 미려한 옛한글을 지원하며 윈도우/리눅스 등등에서 트루타입/오픈타입 글꼴을 지원하는 다양한 운영체제에서 쓸 수 있게 되어 있습니다. 또한 개발자들에 의해 지속적인 개발이 이루어지는 글꼴체 입니다. 단, 은봄체는 저작권 분쟁이 있어 사용이 금지되어 있습니다. 이점에 유의하시기 바랍니다.


3) 인터파크 전용서체 : http://incorp.interpark.com/gate/company_info/info_ci.html

'인터파크만의 Identity를 가진 인터파크 워드마크에 충실한 서체로 고딕의 강함과 곡선의 부드러운 이미지가 합쳐진 감성적이며 현대적인 스타일을 추구하는 인터파크만의 전용서체 입니다.'

해당 글꼴은 고딕 전용으로 고딕 라이트, 고딕 미디움, 고딕 볼드 까지 고딕 서체로는 친숙한 이미지로 이루어지며 로고와 하트를 이용하여 14가지의 특수문자를 표현할 수 있는 특징을 가졌습니다.


4) 다음 서체 : http://search.daum.net/search?w=tot&DA=YZRR&t__nil_searchbox=btn&sug=&q=%EB%8B%A4%EC%9D%8C%ED%8F%B0%ED%8A%B8

'Daum이 누리꾼들을 위하여 Daum만의 색을 담아 개발했습니다. 언제 어디서나 마음껏 즐겁게 사용하세요! 글쓰기가 더욱 즐거워집니다!'

해당글꼴은 한글은 물론 영어 서체까지 다양하고 풍성하며 세련되고 안정감 있는 디자인으로 아름다움과 가독성을 한번에 갖추었습니다. 개인과 기업에 단순 사용에는 라이선스 문제가 발생하지 않으나 단, 상업적인 목적으로 해당 서체를 사용할 시에는 저작권사인 다음 커뮤니케이션즈에 승인을 받으셔야 합니다.


5) 제주 전용서체 : http://www.jeju.go.kr/contents/index.php?mid=100108

'제주특별자치도의 상징성과 문화적 고유성을 살리고 국제도시로서 디자인적 예술적 품격을 갖춘 문화예술의 이미지를 담은 미래지향적 서체 개발을 통해 도민 및 국내외 관광객이 함께 한다는 시각적 친근감으로 활용도를 높이고 기능의 다양화로 공공디자인 인프라 조성'

제주 전용서체는 제주특별자치도의 상징 서체로서 영상매체, 인쇄매체, 웹, 모바일 등 다양한 매체에 자유롭게 사용이 가능하며, 특별한 허가절차 없이 사용할 수 있는 서체입니다. 단, 유료 양도나 판매 행위는 금지되어 있으며 윈도우용 TFF만 설치 가능합니다.
해당 팩키지에서 전용서체로서 제주상징(제주한라산체), 제주고딕, 제주명조 3개 글꼴이 들어가 있습니다.


6) 서울 서체 : http://design.seoul.go.kr/dscontent/designseoul.php?MenuID=490&pgID=237

'누구나 한번 찾고 싶은 관광도시, 가장 살고 싶은 명품도시, 디자인 수도 서울을 만들기 위해 문화관광디자인본부의 행보가 시작됩니다. 도시의 특성에 맞는 디자인을 개발하여 국제적인 디자인 도시를 만들기 위해 노력하겠습니다.'

서울특별시가 서울의 상징으로 개발한 서울 서체는 서울시의 고유글꼴로 널리 활용되며 도시정체성과 브랜드 가치를 높일 목적으로 개발되었습니다. 강직한 선비정신과 단아한 여백을 담고 있으며 조형적으로는 한옥의 열림과 기와의 곡선미를 표현한 서울시 고유의 글꼴입니다. 오픈타입/트루타입을 모두 다운 받을 수 있으며 서울한강체, 서울남산체, 서울 서체 정체, 서울서체 장체로 곡선의 미가 살아있는 글꼴을 자아낼 수 있습니다. 단, 저작권과 관련해서는 서울 서체 홈페이지 페이지에 명시되어 있으며 다운로드 받기 전 꼭 읽어보시기를 바랍니다.


7) 아리따 폰트 :  http://www.amorepacific.com/about/about_font.jsp

'아리따체라는 이름은 시경(詩經)의 '아리따운 아가씨 요조숙녀'에서 따운 사랑스럽고 아리따운 여성이라는 의미를 포합하고 있습니다. 아모레 퍼시픽은 2005년부터 아리따 글꼴을 개발하기 시작하여 자족별로 개발이 완료되는 대로 일반인들에게 공개하고, 무료로 사용할 수 있도록 하고 있습니다. 아모레퍼시픽은 아리따 글꼴이 기업 아이덴티티의 전용글꼴로서의 역할을 실행할뿐만 아니라 대중에게 널리 보급하여 나눔의 가치가 공유되길 희망합니다.'

아리따체는 아모레퍼시픽이 추구하는 아름다운 문화를 사회에 환원하는 문화나눔의 일환으로 개발되었으며 누구에게나 무료로 배포되는 수려한 글꼴입니다. 트루타입/오픈타입 사용이 모두 가능하며 아리따 돋움 3.0 과 Arita Sans 가 있습니다. 단, 저작권과 관련해서는 아리따 폰트 홈페이지 밑에 명시되어 있으며 다운로드 받기 전 꼭 읽어보시기를 바랍니다.


8) 옥션 고딕체 : http://company.auction.co.kr/company/main/brands/brands_02.asp

'옥션고딕은 옥션의 기업이미지를 담은 전용서체로써 옥션만의 독특한 아이덴티티 구현을 표현하고 있습니다. 옥션고딕의 디자인은 산세리프의 간결함과 중립성을 유지하면서 세리프가 갖는 감성적(쇼핑의 즐거움, 스타일볼의 소프트함과 운동감)이미지를 추가하여 부드럽고 친근하면서도 가독성을 잃지 않는 모던한 스타일을 추구하고 있습니다.'

옥션 고딕체는 옥션 특유의 기업 이미지 글꼴로 감성적인 면을 높인 한글체로 소개되고 있습니다. 단, 저작권과 관련하여서는 옥션 고딕체를 받는 홈페이지에 명시된 점을 유념하시고 사용하시기 바랍니다.


9) 바른바탕체, 바른 돋움체 : http://www.print.or.kr/

대한인쇄문화협회와 산돌커뮤니케이션이 합동으로 만든 바른 바탕체와 바른 돋움체는 가변폭이 적용이 되어 눈에 부담을 주지 않는 글꼴로 대한인쇄문화협회 홈페이지에서 무료로 받으실 수 있습니다.


10) 수화 폰트 시리즈 : http://font.jungle.co.kr/index.asp

'폰트가 사회에 기여할 수 있는 길은 오직 디자이너를 위한 저렴하고 질 좋은 폰트개발이라고 생각합니다. 정수화 폰트연구소는 글꼴의 화려함보다는 단순함과 내재된 절제미, 기능성을 추구하며 오직 디자이너를 위한 무료 폰트와 저렴한 폰트를 제공합니다.'

(주) 디자인정글에서 개발한 디지털 환경에서 최적화된 글꼴로 특이하게 폰트를 개발한 디자이너 이름을 그대로 사용한 글꼴입니다. 사용기간에도 제한이 없으며 인증과정도 없지만 고해상도 인쇄물 및 웹사이트 제작, BI, CI, 패키지, 옥외간판, 각종 잡지와 신문광고, CF에서 사용해도 되는 100% 무료 글골입니다.


11) 성동서체 : http://sd.go.kr/sd/main.do?mCode=13G010030030&op=mainSub&lay=5

성동구청에서 지방자치단체 무료 폰트로 만든 성동고딕체, 성동명조체는 성동구 특유의 지역이미지를 형상화하여 개발하였습니다. 해당 저작권은 성동구청에 있으며 자유롭게 배포할 수 있으나 수정이나 대가를 요구할 수 없습니다. 단, 맥 사용에 제한이 있을 수 있으므로 저작권자인 성동구청에 꼭 확인하여주시기 바랍니다.

12) KoPub서체 : http://www.kopus.org/bus/b81.asp#

'2010년 '전자출판의 원년, 출판인의 손으로 기록하자'는 기치를 천명하고 출판계를 위한 각종 전자출판 정책을 개발하여 전자출판 시대에서 출판계가 명실상부한 출판문화의 주역으로 자리매김할 수 있는 사업을 전개'

문화체육관광부는 전자 출판 산업의 발전을 위해 사단법인 한국 출판인회의와 공동으로 전자출판사, 유통사, 단말기업체 등이 무료로 사용할 수 있게 개발한 전자 출판용 서체 입니다. 활자의 기본이 되는 '바탕체'와 '돋움체'를 전자 출판에 적합하게 변형한 서체로 활용도가 매우 높은 글꼴입니다. 단, 라이선스 관련하여 해당 홈페이지에서 확인하셔야 합니다.


위에 소개했던 글꼴들은 반드시 다운받으시기 전에 반드시 해당 홈페이지에서 저작권의 사용범위를 확인해보시고 받으시기 바랍니다.

 

 

 

출처는 한국저작권위원회 게시물입니다.

https://www.copyright.or.kr/fairuse/itsam/licensedata/view.do?brdctsno=45

개인은 물론 기업도 사용해도 좋은 무료 폰트를 알려줍니다.


+ Recent posts