Visual Studio에서 파일 인코딩 형식 UTF-8을 지정해서 저장 방법

Visual Studio에서 파일 인코딩 형식 UTF-8을 지정해서 저장 방법

1. 파일 > 다른이름으로 *** 저장(A)

2. 팝업 아래 [저장]버튼 옆 드롭다운클릭하여 "인코딩하여 저장(V)" 선택

3. 유니코드(서명있는  UTF-8) - 코드페이지 65001  선택 후 저장

CSS 반응형 웹(Responsive Web) 설명

http://www.nextree.co.kr/p8622/

플렉서블 박스 설명

http://www.nextree.co.kr/p8622/

input button을 스타일시트 적용

<style>
.button {
border:1x solid #ff0080;    /*---테두리 정의---*/
background-Color:#ffe6f2;   /*--백그라운드 정의---*/
font:12px 굴림;      /*--폰트 정의---*/
font-weight:bold;   /*--폰트 굵기---*/
color:#ff0080;    /*--폰트 색깔---*/
width:130;height:30;  /*--버튼 크기---*/
}
</style>

<input type="button" value="확인" class="button">

JSON parser사용 (JSON Text를 JSON Object로 변환)

JSON parser(JSON Text를 JSON Object로 변환)
- JSON.org 제공하는 JSON parser사용
- JSON parser는 JSON text만 받아들이고 다른 스크립트는 거부

예)
var obj = JSON.parse(returnValue.responseText);
// -> { id:"kim", sex:"male" }

- 키와 값을 모두 쌍따옴표(")로 묶어주는 문법을 정확하게 지켜주어야 한다.
{ "id":"kim", "sex":"male" }

- JSON.parse() 사용하기 위해서는 json2.js가 필요
- json2.js는   JSON의 편리한 사용을 위해 만든 JSON API의 새버전
- API에는 2개의 메서드가 들어있는데 JSON.stringify()와 JSON.parse().
- JSON.stringify()는 JSON.parse()와는 완전히 반대로 JSON 객체를 주면 JSON 텍스트로 변환.

Grunt 설명 및 사용(grunt-uisemin, jsmin)

1. Grunt 란
- Grunt is a task-based command line build tool for JavaScript projects.
- 자바스크립트 용 빌드 툴
- Node설치 필요

1. Grunt 설치
- Command Line Interface(CLI)를 설치 (옵션 -g  global설치)
$ npm install -g grunt-cli
- 프로젝트 폴더의 root경로에서 grunt를 설치 (옵션  --save-dev  package.json 파일과 연동)
$ npm install grunt --save-dev
- package.json 파일 생성
$ npm init
- Gruntfile.js 파일 생성
- package.json과 같은 위치(프로젝트 폴더의 root경로)에 Gruntfile.js 생성. (Grunt가 실행될 때, 이 파일을 보고 어떠한 동작을 할지 결정하는데 쓰인다.)


2. grunt-uisemin란
- js, css 파일 팩키징
- usemin에서 concat, uglify, cssmin, requirejs 플러그인 실치필요
- 설치
$ npm install grunt-usemin --save-dev

2. grunt-uisemin설정
-Gruntfile.js  파일 편집

- html 파일 편집
  <!-- build:css ../../../FrontEnd/home.zeus/all_css.min.css -->
    <link type="text/css" rel="stylesheet" href="/css/jquery-ui-1.12.1.min.css" />
    <link type="text/css" rel="stylesheet" href="/css/a.css" />
  <!-- endbuild -->
  <!-- build:js ../../../FrontEnd/home.zeus/all_script.min.js -->
    <script type="text/javascript" src="/common/js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="/common/js/jquery.signalR-2.2.2.min.js"></script>
    <script type="text/javascript" src="/common/js/socket.io-1.7.3.min.js"></script>
  <!-- endbuild -->

- cmd에서 루트 경로로 이동후 아래 명령어 실행
grunt useminPrepare concat uglify cssmin


3. jsmin란
- javascript를 min파일 형식으로 압축
- http://crockford.com/javascript/jsmin.html 이동하여 "zip file containing an MS-DOS.exe file" 링크로 다운로드

3. jsmin 사용
jsmin < ./common/js/home.default.js > ./common/js/home.default.min.js
jsmin < ./common/js/home.function.js > ./common/js/home.function.min.js

자연스럽고 일관성 있게 자바스크립트 코딩하는 원칙

https://github.com/rwaldron/idiomatic.js/tree/master/translations/ko_KR

marquee tag(글자흐르기) & 줄간격,글씨간격 조절하기

* 위로 흘러가는 글
1) <marquee direction="up" scrollamount="1" height="150" style="line-height:130%;"><font color=red size=3 face=굴림>적고싶은 글</font></marquee>

2) <marquee direction="up" scrollamount="2" height="150" style="color:red; font-size:14pt; font-weight:bold; font-family:바탕; line-height:200%;">적고싶은 글</marquee>

* 아래로 흘러가는 글
1) <marquee direction="down">적고싶은 글</marquee>

2) <marquee direction="down" style="line-height:200%;" scrollamount="1"><font color="olive">적고싶은 글</marquee></font>

* 옆으로 흘러가는 글
<marquee behavior="scrooll" width="800">적고싶은 글</marquee>


<!-- 마퀴 태그를 사용한 문자표현 입니다. div style= 에서 문자의 top,좌우 위치를 정의 합니다. -->
<div style="width: 470; position: absolute; z-index: 1; left: -40; top: 60">
<marquee style="color: #FF9900; font-size: 40; font-family: arial; font-weight: 800" width=470>Welcome to MORAEDLE ~유기농법으로 생산하는 모래들 農場~</marquee>
</div>

* 옆으로 왔다가다 흐르기
<marquee behavior="ALTERNATE" width="200">적고싶은 글</marquee>

* 통통 튀는 글자
<marquee behavior=alternate direction=up height=50><marquee><font color=red size=3 face=굴림><b>통통 튀는 글씨</b></marquee></marquee>

* 글씨가 슬라이드로 올라와서 멈추는 태그
<marquee style="text-align:left;" direction=up scrolldelay=100 scrollamount=1 behavior=slide width=330 height=450><font size=2 color=red>글쓰기</marquee>

* 올라가는 글의 위치를 지정하는 태그
<div id="layer1" style="position:absolute; left:180px; top:420px; width:350px; height:549px; z-index:1;"><MARQUEE DIRECTION=UP SCROLLAMOUNT=1 height=300>글쓰기!!!</marquee></div>

* 글씨가 아래위로 움직이다 올라감
<marquee style="text-align:left;" direction=up behavior=alternate scrollamount=1 height=400> <marquee direction="up" scrollamount="1"><span style="text-align:left;margin-left:10;color:white;filter:shadow(color=ff00ff);height:15px"><font size=3 face=엽서체> 글 쓰기 !!! </marquee></marquee>

*글자가 올라가다 멈추다 올라가는 태그
<marquee style="text-align:left;" direction=up behavior=alternate scrollamount=1 height=400><style="filter:alpha(opacity=100, style=2, finishopacity=0)" WIDTH="300" height=280><br><marquee style="text-align:left;" direction="up" scrollamount="1"><span style=color:#F9FFFF;filter:shadow(color=#9400D3);height:15px><pre> <font size=3 face=굴림체>글쓰기!!!</marquee></marquee>

*마우스를 대면 글이 멈추고 떼면 다시 올라가는 태그
<MARQUEE onmouseover=stop(); onmouseout=start(); scrollAmount=1 direction=up height=280>글쓰기!!!</marquee>

================================
글 정렬 / 줄간격,글씨간격 조절하기
================================

1. 왼 줄 맞워서 왼쪽에서 몇 번째(왼쪽 여백 100)
<P align=left style="margin-left:100;">글</p>

2. 무조건 중앙에(왼쪽여백 150 / 오른쪽 여백 150)
<P align="center" style="margin-right:150; margin-left:150;">글</p>

3. 오른쪽 끝에 맞워서(오른쪽 여백 100)
<P align="right" style="margin-right:100;">글</p>

* 줄간격= 100%~인 경우 (예제는 250%)
<p style="line-height:250%;"><font size="4">태그 사용중 글자 크기를 정할때
4포인트 정도로 했는데..
윗줄과 아랫줄 글자가 겹치거나..
짤립니다^^;
어떻게 해야 하는지 가르쳐 주세요~~~~</font></p>

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

줄간격,글씨간격 조절하기

먼저 줄입니다.

<font style="font-size:9pt; line-height:10pt; font-family:굴림;">

위의 글에서 line-height:10pt; 있죠?
저 숫자를 조정해 보세요. 그러면 늘어나기도, 줄어들기도 합니다. l
ine-height:130% 이런것도 가능한건 아시죠..
숫자가 작을수록 좁아지겠지요.

그 다음 글씨 간격.

<font style="font-size:9pt; letter-spacing:-1; font-family:굴림;">
letter-spacing:-1; 이란 부분이 있는데요
저것을 1로 하면 글씨 간격이 1씩 차이나고
-1로 하면 글씨 간격이 1씩 좁아집니다.


원본 :http://zone04.n4.cc/zb41pl3/view.php?id=infor_tema&page=5&sn1=&divpage=1&sn=off&ss=on&sc=on&select_arrange=hit&desc=asc&no=99

자바스크립트(Javascript) 소수점 자리수, 올림, 버림, 반올림, 원단위 절삭

1. 소수점 올림, 버림, 반올림

Math.ceil() : 소수점 올림, 정수형 반환
Math.floor() : 소수점 버림, 정수형 반환
Math.round() : 소수점 반올림, 정수형 반환

var n = 123.456;
alert(Math.ceil(n)); // 124
alert(Math.round(n)); // 123

n = 123.567;
alert(Math.ceil(n)); // 124
alert(Math.floor(n)); // 123
alert(Math.round(n)); // 124


2. 소수점 자리수 표기

toFixed() : 숫자를 문자열로 변환하면서 지정된 소수점 이하 숫자를 반올림하여 출력한다.
toExponential() : 숫자를 문자열로 변환하면서 소수점 앞의 숫자 하나와 지정된 개수의 소수점 이후 숫자로 구성되는 지수표기법을 사용하여 출력한다.
toPrecision() : 지정된 수의 유효 숫자 개수만큼 숫자로 출력한다. 만약 유효 숫자 갯수가 숫자의 정수부분 전체를 출력할 만큼 충분하지 않으면 지수 표기법으로 출력된다.
위 세 가지 Method는 모두 반올림하여 출력된다.

var n = 123.456;
alert(n.toFixed(0)); // 123
alert(n.toFixed(2)); // 123.46

alert(n.toExponential(1)); // 1.2e+2
alert(n.toExponential(3)); // 1.235e+2

alert(n.toPrecision(2)); // 1.2e+2
alert(n.toPrecision(4)); // 123.5
alert(n.toPrecision(7)); // 123.4560


3. 원단위 절사

원단위의 경우 10, 십원단위의 경우 100, 백원단위의 경우 1000, ... 을 이용하면 원단위 절사가 가능하다.

var n = 2117;
n = Math.floor(n/10) * 10; // 10으로 나누면 211.7, floor 함수로 소수점을 버리면 211, 다시 10을 곱하면 2110
alert(n); // 2110

인풋박스(input) 기본입력 설정 ime-mode

inactive	default 로 영문모드
active	default 로 한글모드
auto	한/영 중 선택된 모드
disable	영문만을 사용할 수 있는 모드

사용법 : 

<input type="text" style="ime-mode:inactive;" />

or

<style type="text/css">
input.han {ime-mode:active;}
</style>
<input type="text" class="han" />

익스플로러에서만 적용됨.