Play Ground

나는 마우스오버했을 때 버튼이 돌아가는걸 만들었다.

서론 필요없고 소스부터

#chatBtn {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: url("/images/btn_chat.png") no-repeat center #9736e5;
}
#chatBtn:hover {
	background-color: #A13AF5;
	-webkit-animation:spin 3s linear infinite;
	-moz-animation:spin 3s linear infinite;
	animation:spin 3s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

infinite속성은 끊임없이 반복하기위함

한번만 돌게하려면 infinite는 빼면된다

아래는 적용한 예제임

내 맥은 진짜 빠가인듯

아니 왜 mysql을  brew로 설치해도 pid에러를 내뿜는것인가... 주륵

그래서 임시방편으로 MAMP를 깔아서 요 mysql을 공유하기로 결정!

나중에 진짜서버로 옮길땐 설정만 바꾸면 되는거니까ㅋㅋ

1. 

/app.js

...
var func = require('./routes/func');
...
app.use('/addMember', func); 
...

요 위에 두줄을 적절히 app.js에 적어주고

2.

/routes/func.js

var mysql = require('mysql'); 
var connection = mysql.createConnection({
    host: "localhost",
    user: "root",
    password: "root",
    database: "code",
    port: 8888,
    socketPath: '/Applications/MAMP/tmp/mysql/mysql.sock'
});
connection.connect(function(err) {
    if (err) {
        console.error('mysql connection error');
        console.error(err);
        // throw err;
    }
}); 

위에 저런식으로 넣어주었음

일단 MAMP설치하고 보니까 8888포트를 사용하고 있었음

그래서 port: 8888을 적어주었고

MAMP의 디폴드 계정정보는 아이디 root, 비밀번호 root 임 그래서 저렇게 해주었음

database는 생성한 db이름 적어주면 되고

제일중요한 소켓패쓰! MAMP의 mysql.sock이 있는 경로로 지정해주어야함

node.js의 ejs는 템플릿 엔진 모듈이다.

ejs말고 jade를 사용하는 경우가 있는데

ejs가 일반 asp, jsp, php와 사용방법이 비슷해 협업하기도 좋고 이해도 쉽다.

1. express 설치(http://hplayground.tistory.com/64) 완료 후 finder에서 작업폴더로 이동 후 

npm install ejs

ejs사용을 위해 ejs를 내려받는다.

node_modules폴더 안에 ejs폴더가 생성되면 잘 설치된 것

node.js에 대해서 쌩판 모르다 보니 설치부터 난관에 봉착했다.

먼저 나는 맥환경에서 작업하였음을 참고하고

node.js는 https://nodejs.org/en/ 에서 pc환경에 맞게 다운받았다.

1. 터미널을 켜서

sudo npm install -g express-generator

또는

npm install express

를 친다

-g 옵션이 어느 폴더에서나 사용가능하게 하는 것 같고

express-generator를 쓴 이유는

express만 치니 자꾸 express를 못찾는단다 주륵 (에러내용 -> -bash: express: command not found)

sudo 패스워드는 아시다시피 맥 패스워드(아이클라우드 패스워드)

2. 작업할 폴더로 들어가서 (cd 폴더이름 -> ex)) cd test)

express

를 친다

destination is not empty, continue? [y/N]

라고 물어보는데 요건 해당 폴더가 안 비어있다는 말임

y를 하면 그냥 그대로 진행하는거고 N을 하면 새로운 폴더 생성해서 들어가 다시 2번을 시도해야 한다.

2번까지 하고나면 express를 위한 폴더와 파일들이 자동으로 생성된다.

(app.js, bin, public, routes, views, package.json)

참고로 public폴더에는 css, js와 같은 것들

routes폴더에는 back단 js파일

views에는 화면에 보여지는 파일들 예를들어 ejs파일

이 들어간다.

3. 터미널에

node app.js

를 친다.

throw err;

Error: Cannot find module '설치안된모듈'

이런식으로 뜰텐데

그럼 

npm install 설치안된모듈

을 하나하나 치면 됨

(수정)하나하나 저렇게 치거나

npm install

위와같이 그냥 install만 하면 설치안된모듈들 한번에 다 설치해줌

그냥 npm install만 치는게 정신건강과 손가락건강에 이로움

4. app.js를 수정할 차례!

var http = require('http');

를 맨위 변수들과 함께 선언해주고

http.createServer(app).listen(8000, function(){
    console.log('server running...');
});

물론 8000은 내가 임의로 포트를 정한거고

알맞게 수정해서 사용하면됨

톰캣도 APMSETUP과 마찬가지로

폴더 바꾸고 포트 열어주는 방법이다

Tomcat 설정방법

※ 톰캣을 설치할 때에는 jdk와 톰캣 둘다 설치해야함

1.

C:\Program Files (x86)\Apache Software Foundation\Tomcat 6.0\conf

에 카탈리나 폴더를 복사, 붙여넣기로 만들어서 폴더명을 프로젝트 이름으로 바꾸고

localhost 폴더 안에 ROOT.xml 파일을 넣어줌

ROOT.xml (전체)

2.

C:\Program Files (x86)\Apache Software Foundation\Tomcat 6.0\conf\server.xml

이 파일에서 <service></service>를 복사하고

service name과 engine name에는 프로젝트 이름(1번에서 만든 폴더이름)을 적어주고

port에는 8080, 8081, 8082, 8083… 으로 수정

server.xml

APM SETUP설치 후 htdocs폴더가 아닌 다른 폴더로 연결하기 위해 설정하는 방법이다

요것도 구글 드라이브에 저장해놓고 썩히고 있었는데 아까우니 여기에 정리하는걸로!

APM Setup 설정방법

C:\APM_Setup\Server\Apache\conf\httpd.conf

1.

46번째 줄의 Listen 80 아래에 Listen 81 작성(81번포트 열기)

(포트를 더 열고싶다면 82, 83, 84 …)

2.

206~234줄 쯤에 있는 (<Directory> … </Directory>)를 아랫줄에 복붙하고 경로 수정

3.

C:\APM_Setup\Server\Apache\conf\extra\httpd-vhosts.conf

1.

맨 아래에 포트, 디렉토리 추가

1. 미디어 쿼리(Media Query)란? :

media의 종류에 따라 특정 css 스타일을 적용하고자 할 때 사용하는 css 스펙 가운데 하나

데스크탑 브라우저, iPhone, iPad 모바일 브라우저 등에 스타일 시트를 구분하기 위해 사용

2. 미디어쿼리의 역할

CSS에서 최초로 스크린의 종류(모니터 or 프린터 등)를 감지할 수 있게 되었고 CSS3에서 더 상세하게 변경되어 해상도, Landscape/Portrait(가로/세로)감지가 가능하게 되었다.

3. 미디어 쿼리 사용가능한 브라우저

CSS3속성이므로 최근에 출시된 브라우저들에서 지원 가능

미디어 쿼리를 지원하지 않는 브라우저는 조건과 상관없이 CSSS를 읽게 된다.

• PC용 브라우저 : MS익스플로러9+(8이하 지원X), 파이어폭스, 사파리, 크롬, 오페라 등

• 모바일용 브라우저 : iOS, Android 브라우저

4. 문법 :

(1) 마크업에서 css파일 분기(http request를 발생시켜 성능을 저하시킴)

<link rel="stylesheet" type="text/css" media="only all and (min-width:600px)" href="test_media_query.css" />

(2) style 태그에서 media 선언(inline으로 적용해야 하기때문에 유지보수에 어려움)

<style type=”text/css” media=”screen and (max-width:480px)”>

…

</style>

(3) css 내에서 media 선언(BEST)

@media screen and (min-width: 400px) and (max-width: 700px) { … }

• only 또는 not으로 뒤의 조건을 한정함

- only : 미디어 쿼리를 지원하는 브라우저에서만 조건을 인식하도록 하는 키워드로 생략가능하며

생략 가능하며, 생략 했을 때 기본값이 only로 설정된다.

 (IE8이하버전을 제외한 모든 브라우저가 미디어 쿼리를 지원하므로 “only”를 사용하지 않아도 문제 없음)

- NOT : 해당 미디어 타입을 제외한 다른 미디어타입에 대응할 경우에 사용하는 키워드

• 미디어 타입(media type) : “all”, “screen”, “print” 등

• 미디어 속성 (media feature) : ‘min-width’ ‘320px’와 같은 해당 값의 쌍을 ‘:’으로 연결하고 괄호로 둘러싸서 조건을 표현

• 미디어 타입을 사용하지 않으면 ‘all’로 이해하고, ‘(미디어 속성 : 값)’ 조건은 ‘and’ 또는 쉼표 ','로 연결하여 동일한 스타일에 여러 조건을 적용할 수도 있다.(“and”=AND / “,”=OR)

• 미디어 쿼리는 문장 내에서 대소문자를 구분하지 않는다.

• 공통, 모바일, 테블릿&데스크톱, 테블릿, 데스크톱 순으로 코드를 분리해서 작성

5. 미디어 타입

현재 HTML5/CSS3의 미디어 타입 종류는, HTML4/CSS2에서 정의된 것들을 그대로 사용하고 있다.

미디어쿼리에서 사용할 수 있는 미디어 타입은 다음과 같다.

위 타입 중 실제로 많이 사용되는 것은 'all', 'screen', 'print'이다.

handheld 타입의 경우 주의가 필요하다. 휴대용 기기라고 해서 요즘의 스마트폰 등의 모바일 기기가 연상 될 수 있는데, 실제로 아이폰이나 안드로이드에서는 screen에 대응하고 있다.

6. 조건문이 될 수 있는 특징(미디어 속성)

미디어 쿼리의 조건문에는 다른 프로그래밍 언어에서 사용하는 “>”, “<”, “=” 등의 연산자를 사용하지 않고 css에서 사용하는 “:”만을 사용한다.

대신, “max-” 또는 “min-”등의 접두사를 사용하여 최대값, 최소값을 통한 비교가 가능하다.

width/height : 뷰포트(스크롤바를 포함한)의 너비와 높이

device-width/device-height : (단말기)스크린의 물리적인 너비와 높이

• ‘width’와 ‘device-width’의 차이는, iPhone4 (레티나)처럼 기기 스크린은 320x480이지만 해상도는 640x960 인 경우, ‘device-width’ 는 320px이고, ‘width’는 640px가 된다.

orientation : 뷰포트의 너비와 높이 비율을 이용하여 세로모드인지 가로모드인지 판단

aspect-ratio : 뷰포트의 너비와 높이에 대한 비율

device-aspect-ratio : (단말기)스크린의 너비와 높이에 대한 비율

color : 단말기에서 사용하는 색상에 대한 비트 수(단위 = 자연수)(0 = false)

color-index : 단말기가 사용하는 최대 색상 수에 대응(팔레트의 색상 갯수)

(단위 = 자연수)(지원하는  브라우저 없음)(0 = false)

monochrome : 흑백 출력되는 단말기인 경우 픽셀당 비트 수(단위 = 자연수)(0 = false)

resolution : 단말기의 해상력에 대응( 단위 = dpi[인치당 도트 수] / dpcm[센티미터당 도트 수] )

-webkit-min-device-pixel-ratio : 단말기의 화소와 실제 화면의 pixel간의 비율

7. 반응형 웹을 만들기 위한 Viewport meta tag 설정

• 모바일 스크린에 맞게 폭과 스케일을 설정하는 태그. iOS전용 설정으로, 안드로이드는 위 설정 없이 적절하게 렌더링 된다.

(http://sir.co.kr/bbs/board.php?bo_table=pb_lecture&wr_id=167)

8. 미디어쿼리 사용시 주의점

• IE8 이하에서는 미디어쿼리가 적용되지 않는다.

• @import된 css 내부에 미디어 쿼리를 선언할 경우 적용되지 않는다.

• 미디어 쿼리는 기능상의 분기는 불가능하며, 결국 css의 추가 로딩이나 css의 수정에만 영향을 주기때문에 디자인에만 영향을 줄 수 있다. 기능 지원이 안되는 단말기의 특성을 파악하여 해당 섹션을 css의 display: none 등으로 가리는 것은 가능하지만, 근본적으로 해당 기능을 단말기에서 로딩하지 않는 등의 개발 분기는 어렵다.

• HTML5인지 확인(다른 HTML의 버전인 경우 개발에 어려움이 있음)

9. IE 6~8에서 미디어 쿼리를 사용하기 위한 스크립트

IE9 이전 버전에서는 CSS3 미디어 쿼리를 지원하지 않으므로,

IE 6~8을 비롯한 구식 브라우저에서 미디어쿼리가 작동하길 원한다면 Respond.js나 css3-mediaquries.js 등의 하위 호환용 자바스크립트를 이용한다.

• https://github.com/scottjehl/Respond

• https://code.google.com/p/css3-mediaqueries-js/

*두 라이브러리 비교 -> http://gionaf.com/playgroud/mq-fallback/results.html

하위 호환용 자바스크립트 사용시 단점 :

Respond.js는 페이지가 로딩되기 전에 먼저 사용자가 작성한 css를 전부 분석하여 사용된 미

디어쿼리 구문을 골라내서 IE가 해석할 수 있는 방식의 css로 변환시켜 주는 역할을 함으로서 미디어쿼리의 동작을 대신 수행한다.

하지만 이러한 라이브러리들은 대개 빠른 처리를 하지 못하고 속도 저하의 주범이 되기 때문에 실제 서비스에 적용을 하는데 걸림돌이 되는 경우가 많다.

10. 미디어쿼리 예제

• http://mediaqueri.es/

11. 테스트 예제

• http://jsfiddle.net/haeru/LLT67/

예전에 구글드라이브에 정리해놓은 글이 있어 블로그에 옮겨본다

※ Print mode(인쇄 스타일)를 적용하는 방법

• 코드 분리, 수정을 위해 @media print{}를 활용하는것을 권장.
  (크롬 개발자도구- 설정에서 media버전을 강제 지정하여 확인할 수 있다.)

• 프린트시 반복적으로 나오거나, 필요없는 부분은 display: none;으로 안보이도록 작업을 먼저 한 후, 프린트 모드에 맞게 수정하면 된다.

• 인쇄물의 제목, 회사의 로고, 카피등을 고정적으로 출력하기위해서 상단과 하단에 출력에만 나오는 헤더와 푸터를 삽입할 수 있다.

• 전체출력 외 브라우저 내 특정부분만 출력하게 하기 위해서
  <script type="text/javascript" src="../folderName/folder/jquery.printElement.js"></script>
  
  

CSS Image Replacement(IR기법)  

의미가 포함되어 있는 image를 배경으로 표현하고, 그에 상응하는 내용을 text로 전경에 기입하는 방법으로,
시각이 있는 사용자는 이미지로 처리된 화면을 볼 수 있지만 "화면 낭독기를 사용하는 시각 장애인, CSS제거 및 인쇄"시에는 문자에 접근하거나 문자를 볼 수 있는 형태로 설계 하는 기법을 말한다

첫번째

h1#technique-one { width: 250px; height: 25px; background-image: url(logo.gif)}
h1#technique-one span{display: none;}

<h1 id="technique-one">
 <span>CSS-Tricks</span>
</h1> 

두번째

h1.technique-two {width: 2350px; height: 75px; background: url("images/header-image.jpg") top right; margin: 0 0 0 -2000px;}

<h1 class="technique-two">
 CSS-Tricks
</h1>

세번째

h1.technique-three {width: 350px; height: 75px; background: url("images/header-image.jpg"); text-indent: -9999px;}

<h1 class="technique-three">
 CSS-Tricks
</h1>

네번째

h1.technique-four {width: 350px; height: 75px; background: url("images/header-image.jpg"); text-indent: -9999px;}

<h1 class="technique-four">
<a href="#">
<img src="images/header-image.jpg" alt="CSS-Tricks" />
</a>
</h1>

다섯번째

h1.technique-five {width: 350px; height: 75px; background: url("images/header-image.jpg") }

h1.technique-five span {display: none}

<h1 class="technique-five">
<img src="images/blank.gif" alt="CSS-Tricks" />
<span>CSS-Tricks</span>
</h1>

여섯번째

h1.technique-six {width: 350px; padding: 75px 0 0 0; height: 0;  background: url("images/header-image.jpg")

 no-repeat;  overflow:hidden;}

<h1 class="technique-six">
 CSS-Tricks
</h1>

일곱번째

h1.technique-seven {width: 350px; height: 75px; background: url("images/header-image.jpg") no-repeat }
h1.technique-seven span {display: block; width: 0;  height: 0;  overflow: hidden}

<h1 class="technique-seven">
<span>CSS-Tricks</span>
</h1>

여덣번째

h1.technique-eight {width: 350px; height: 75px; position: relative}

h1.technique-eight span {background: url("images/header-image.jpg"); position: absolute; width: 100%; height: 100%}

<h1 class="technique-eight">
<span></span>CSS-Tricks
</h1>

아홉번째

h1.technique-nine {width: 350px; height: 75px; background: url("images/header-image.jpg") no-repeat; 

font-size: 1px;  color:white}

<h1 class="technique-nine">
CSS-Tricks
</h1>

그밖에

- 텍스트 요소에 z-index 음수 값을 주어 이미지 뒤로 숨기는 방법
- visibility:hidden