★세치 혀★



오늘 세치혀가 작성할 글은 웹쟁이들에게 간혹 필요한 정보글이다.


이름하야 특수문자 기호표.










에디터에서 글을 작성하거나 웹페이지 마크업을 할때

원하는 기호를 코드를 통해 넣어줘야 할 때가 간혹 생긴다.


예를들어  "You&Me" 라는 문자를 작성한다고 가정하면

에디터, 혹은 코드상에서 "You&Me"라고 적어줘야 하는 것.
(혹은 
&)



에디터들의 버전이나 호환도 제각각이라 결과물이 깨질때 

이런 방법(&를 표현하기 위해 코드화된 &를 써주는 방법)으로 문제를 해결 할 수 있다.

아래 도표를 참고해보자.
















코드 기호 코드 기호 코드 기호 코드 기호
  e e É É ĭ ĭ
  f f Ê Ê Į Į
  g g Ë Ë į į
  h h Ì Ì İ İ
  i i Í Í ı ı
  j j Î Î IJ IJ
 k k Ï Ï ij ij
  l l Ð Ð Ĵ Ĵ
	   m m Ñ Ñ ĵ ĵ

   n n Ò Ò Ķ Ķ
   o o Ó Ó ķ ķ
   p p Ô Ô ĸ ĸ

   q q Õ Õ Ĺ Ĺ
  r r Ö Ö ĺ ĺ
  s s × × Ļ Ļ
  t t Ø Ø ļ ļ
  u u Ù Ù Ľ Ľ
  v v Ú Ú ľ ľ
  w w Û Û Ŀ Ŀ
  x x Ü Ü ŀ ŀ
  y y Ý Ý Ł Ł
  z z Þ Þ ł ł
  { { ß ß Ń Ń
  | | à à ń ń
  } } á á Ņ Ņ
  ~ ~ â â ņ ņ
    ã ã Ň Ň
  € ä ä ň ň
    å å ʼn ʼn
  ‚ æ æ Ŋ Ŋ
  ƒ ƒ ç ç ŋ ŋ
    „ è è Ō Ō
! ! … é é ō ō
" " † ê ê Ŏ Ŏ
# # ‡ ë ë ŏ ŏ
$ $ ˆ ˆ ì ì Ő Ő
% % ‰ í í ő ő
& & Š Š î î Œ Œ
' ' ‹ ï ï œ œ
( ( Œ Œ ð ð Ŕ Ŕ
) )   ñ ñ ŕ ŕ
* * Ž Ž ò ò Ŗ Ŗ
+ +   ó ó ŗ ŗ
, ,   ô ô Ř Ř
- - ‘ õ õ ř ř
. . ’ ö ö Ś Ś
/ / “ ÷ ÷ ś ś
0 0 ” ø ø Ŝ Ŝ
1 1 • ù ù ŝ ŝ
2 2 – ú ú Ş Ş
3 3 — û û ş ş
4 4 ˜ ˜ ü ü Š Š
5 5 ™ ý ý š š
6 6 š š þ þ Ţ Ţ
7 7 › ÿ ÿ ţ ţ
8 8 œ œ Ā Ā Ť Ť
9 9   ā ā ť ť
: : ž ž Ă Ă Ŧ Ŧ
&#59; ; Ÿ Ÿ ă ă ŧ ŧ
&#60; < &#160;   &#260; Ą &#360; Ũ
&#61; = &#161; ¡ &#261; ą &#361; ũ
&#62; > &#162; ¢ &#262; Ć &#362; Ū
&#63; ? &#163; £ &#263; ć &#363; ū
&#64; @ &#164; ¤ &#264; Ĉ &#364; Ŭ
&#65; A &#165; ¥ &#265; ĉ &#365; ŭ
&#66; B &#166; ¦ &#266; Ċ &#366; Ů
&#67; C &#167; § &#267; ċ &#367; ů
&#68; D &#168; ¨ &#268; Č &#368; Ű
&#69; E &#169; © &#269; č &#369; ű
&#70; F &#170; ª &#270; Ď &#370; Ų
&#71; G &#171; « &#271; ď &#371; ų
&#72; H &#172; ¬ &#272; Đ &#372; Ŵ
&#73; I &#173; ­ &#273; đ &#373; ŵ
&#74; J &#174; ® &#274; Ē &#374; Ŷ
&#75; K &#175; ¯ &#275; ē &#375; ŷ
&#76; L &#176; ° &#276; Ĕ &#376; Ÿ
&#77; M &#177; ± &#277; ĕ &#377; Ź
&#78; N &#178; ² &#278; Ė &#378; ź
&#79; O &#179; ³ &#279; ė &#379; Ż
&#80; P &#180; ´ &#280; Ę &#380; ż
&#81; Q &#181; µ &#281; ę &#381; Ž
&#82; R &#182; &#282; Ě &#382; ž
&#83; S &#183; · &#283; ě &#383; ſ
&#84; T &#184; ¸ &#284; Ĝ    
&#85; U &#185; ¹ &#285; ĝ    
&#86; V &#186; º &#286; Ğ    
&#87; W &#187; » &#287; ğ    
&#88; X &#188; ¼ &#288; Ġ    
&#89; Y &#189; ½ &#289; ġ    
&#90; Z &#190; ¾ &#290; Ģ    
&#91; [ &#191; ¿ &#291; ģ    
&#92; \ &#192; À &#292; Ĥ    
&#93; ] &#193; Á &#293; ĥ    
&#94; ^ &#194; Â &#294; Ħ    
&#95; _ &#195; Ã &#295; ħ    
&#96; ` &#196; Ä &#296; Ĩ    
&#97; a &#197; Å &#297; ĩ    
&#98; b &#198; Æ &#298; Ī    
&#99; c &#199; Ç &#299; ī    
&#100; d &#200; È &#300; Ĭ    



본 페이지에서 Ctrl + F를 눌러

원하는 기호를 입력하면 더욱 빨리 결과를 찾을 수 있다.



찾고자 하는 코드가 없을시 유용할법은 다른 링크도 남겨두겠다.

Entity Code : http://www.digitalmediaminute.com/reference/entity/index.php











 

저작자 표시 비영리 동일 조건 변경 허락
신고

COMMENT 0

오늘 작성할 글은 인스타그램의 각종 아이콘 모음!에 관한 글이다.

센스있는 나답게 인스타그램의 홈페이지에서 훔쳐온(?)것이다.














▲위의 이미지파일이 실제 사이트에서 가져온 PNG파일이다.

인스타그램의 로고에서부터 카메라아이콘, 새로고침 버튼 좌우버튼에 좋아요버튼 등등

온갖 아이콘들의 집함체.

ㅋㅋㅋㅋㅋㅋㅋㅋㅋ





▲투명PNG파일의 흰 그래픽요소들은 확인이 잘 안되니까 


센스있게 검은배경처리한 것도 첨부해본다.


난 센스녀니까.



이렇게보니 자물쇠아이콘에 흰색그래픽 요소도 많다는게 보여지는 군

굳굳








출처 : https://instagramstatic-a.akamaihd.net/bluebar/0b78f27/sprites/core-sprites-cd6d7d.png




저작자 표시 비영리 동일 조건 변경 허락
신고

COMMENT 0

오늘 작성할 글은....다양한 로딩바 이미지에 관한 글이다.

이미지 뿐 아니라 간단한 작업으로 직접 제작하는 방법도 설명하겠다.

나의 경우엔 GIF애니메이션(움짤)로 제작함.

 

 

 

 

 

 

 

 

 

 

 

 


 














이건 내가 직접 강좌를 보고 만든 애니메이션.

효과를 주고선 씬별로 각도변화를 줘서

흡사 회전하는 것 같은 움직임을 만든 결과물이다.

 

 

 

강좌 링크는 아래...ㅋㅋㅋ

http://www.iceflowstudios.com/2013/tutorials/loading-circle-animation-using-photoshop-cs6/

귀찮으면 아래서 바로보기




보면 알겠지만 만드는 방법이 생각보다 간단하다.

영어로 설명하지만 우린 어차피 화면보며 이해하는거라

크게 어려운거 없이 가능할거다!!!!

 

 


 


사실 내가 사용하는 포토샵 버전과 강좌에서의 버전이 달라

난 위 강좌에서 언급한 대로 안하고

기존의 GIF애니메이션 제작할 때 사용하던

타임라인을 활용하였다.

그래도 개 충분.

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ


 







GIF애니메이션이 싫다면 이 소스도 눈여겨 보자.

css를 활용한 html코드만으로 구현하는 로딩바 이미지.

일명 CSS Spinner Animation.

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ




http://codepen.io/samd21313/pen/Ixlap

봐도 봐도 신기함




https://thomas.vanhoutte.be/miniblog/android-lollipop-animated-loading-gif/

위 링크도 코드로 구현하는 애니메이션 같은데

내가 보기엔 살짝 설명이 부족 한 정도로 어렵다.












원래 항상 보이다가도 필요해서 찾으려면 난감한게 로딩바 같은 요소이다.

일하다 보면 개똥도 약에 쓰려면 없다는 표현이 딱인 상황을

종종 마주하게 됨.

-_-

어찌되었든 조금이라도 유용하게 읽히길 바라며....

 

 

 

 

난 이만

뿅!


 

저작자 표시 비영리 동일 조건 변경 허락
신고

COMMENT 0

오늘 작성할 컨텐츠는....에디트플러스 설치파일과

인증을 위한 키젠 사용방법이다.

 

 

 

 

 

 

 

 

 

에디트플러스

 

 

에디트플러스(editplus)

내가 사랑해 마지않는 툴 중에 하나.

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

 

 

 

웹쟁이라면 다들 한번이상은 사용 해 볼법한

대중적이고도 알찬 프로그램이다.

 

 

 

가볍고 빠른데다가 실시간 저장 등등

그 가벼움에 비해 무수히 많은 기능을 내포하고있는 멋진 프로그램.

 

 

 

사실 평가판으로 사용해도 무방하지만

그러면 실행 할 때마다

한번씩 평가하기 버튼을 눌러줘야하는 번거로움이......-_-

때문에 인증방법에 대한 글을 작성한다!!!!!

 

 

 

 

키젠

▲키젠의 모양새.

사용법은 매우 간단하다.

다른부분은 건드릴 필요 없이,

빨간 점으로 표기한 부분만 눈여겨보면 된다.

유저네임에 이름입력하고 나면 레지스트레이션 코드가 생성된다.

 

 

에디트플러스를 설치 하고 난 뒤, 위에서 적은

유저네임과 레지스트레이션 코드를 입력해주면

인증 끝!

(재 실행 한번 해야 함)

 

 

▲ 쨔쟌!!!!  위 인증절차를 거치고나면

실행할때 이런 깔끔한 화면을 마주할 수 있다.

(평가판 동의 누를 필요없이!)

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

 

 

 

 

파일은 아래에서다운 가능하다.

유용하게 쓰길~~~~~

 

 

 

ep3.30.exe

 

Keygen.exe

 

 

저작자 표시 비영리 동일 조건 변경 허락
신고

COMMENT 0

오늘 작성할 html/css글은 구글지도를 활용하여 웹페이지에 지도를 삽입하는 방법에 관한 글이다.


홈페이지를 만들다 보면...

회사소개 중에서도 약도 안내나 지점 안내 등 다양한 분야에서 지도를 활용할 일이 생기는데

그럴 때 사용하기 간편한 구글API를 소개 해 보겠다.


구글맵스

https://www.google.co.kr/maps/

구글맵스 접속 후 좌측 상단에 지명, 주소 등을 입력하여 원하는 좌표의 지도를 찾는다.




이곳이 궁금한가요?

원하는 곳에 마우스커서를 올린 상태에서 우클릭 > 이곳이 궁금한가요?를 선택.



좌표값구하기


좌측상단에 저런 정보가 뜨는데 아래 자그마한 숫자로 된 좌표값을 한번 눌러봐주자!!

그럼 화면이 한번 움찔하며 저 좌표의 위치를 보여주게되는데

본인이 첨 선택한 그 위치가 맞는지 살펴보자.

제대로 된 좌표가 맞는지 한번 확인해보는 과정이다.



별 이상이 없다면

저 좌표를 가지고 구글 맵을 만들어 넣을 거다.

빨간 게 Y좌표, 파란 게 X좌표인데 지도 상의 경도 위도로 이해하면 편하다.



구글맵 말풍선 넣기


<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no">

<meta charset="euc-kr">

<title>구글맵 API 활용하기</title>

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

<script>

function initialize() {


/*

http://openapi.map.naver.com/api/geocode.php?key=f32441ebcd3cc9de474f8081df1e54e3&encoding=euc-kr&coord=LatLng&query=서울특별시 강남구 강남대로 456

                위와같이 링크에서 뒤에 주소를 적으면 x,y 값을 구할수 있다.

*/

var Y_point = 35.87110100714382; // Y 좌표

var X_point = 128.60169690333006; // X 좌표


var zoomLevel = 16; // 지도의 확대 레벨 : 숫자가 클수록 확대됨


var markerTitle = "위즈소프트"; // 현재 위치 마커에 마우스를 올렸을때 나타나는 정보

var markerMaxWidth = 300; // 마커를 클릭했을때 나타나는 말풍선의 최대 크기


// 말풍선 내용

var contentString = '<div>' +

'<h2>위즈소프트</h2>'+

'<p>위즈소프트는 WEB Agency & SI 분야에서 10년 이상의 풍부한 경험을 보유한<br />' +

            '전문 인력으로 구성된 E-Business 전문 기업입니다.</p>' +

//'<a href="http://www.daegu.go.kr" target="_blank">http://www.daegu.go.kr</a>'+ //링크도 넣을 수 있음

'</div>';


var myLatlng = new google.maps.LatLng(Y_point, X_point);

var mapOptions = {

zoom: zoomLevel,

center: myLatlng,

mapTypeId: google.maps.MapTypeId.ROADMAP

}

var map = new google.maps.Map(document.getElementById('map_view'), mapOptions);


var marker = new google.maps.Marker({

position: myLatlng,

map: map,

title: markerTitle

});


var infowindow = new google.maps.InfoWindow(

{

content: contentString,

maxWidth: markerMaxWidth

}

);


google.maps.event.addListener(marker, 'click', function() {

infowindow.open(map, marker);

});

}

</script>

</head>


<body onload="initialize()">

<div id="map_view" style="width:500px; height:300px;"></div>

</body>

</html>


빨간색글자로 표시하게 소스코드.


아이프레임을 활용할 수도 있다.


아래 첨부된 샘플들을 활용하면 이해가 더 쉬울 것 같다.



iframe활용.zip


sample.html





네이버 지도 api도 상당히 쓰기 쉽고 보기도 좀 더 아름답지만...

계정당 받을 수 있는 api키 값 갯수가 제한되어있어

나의 경우엔 구글지도를 훨씬 많이 쓴다.


확대 축소도 가능하고 정확도도 좋은 편이라 약도로 쓰기엔 무리가 없었음.

무엇보다 키값 제한이 없는게 가장 큰 매리트

ㅋㅋㅋㅋㅋㅋㅋㅋ


이상 구글맵 API를 활용하여 약도넣는 방법이었다.










저작자 표시 비영리 동일 조건 변경 허락
신고

COMMENT 0

오늘 쓸 웹관련자료(html/css) 글은 코딩하기 좋은 폰트이야기다.


디자인적으로 봤을 때 아름답고 이쁜 폰트는 아니지만

글자가 차지하는 폭이 들쭉날쭉한 영문의 특성을 무시, 간격을 일정하게 맞춘 폰트다.

한 글자당 2byte를 차지한다고 해야하나?ㅋㅋ

비트스트림이라는 회사에서 개발한 Vera Sans Mono 폰트라는데

나도 최근에서야 첨 써보았다.





그러므로 코드를 주로 다루는 

개발자나 퍼블리셔들에게 유용한 글씨체가 되겠다.



아래 있는 샘플이미지를 보더라도 알수 있듯이

영문대문자 오 "O"

영문소문자 오"o"

숫자 영 "0" 

등이 전부 다르게 표기되고 

영문대문자 아이"I"

영문소문자 아이 "i"

도 마찬가지로 구분할 수 있게 

각각 다르게 표기된다.



코드를 다루는 사람이라면 다들 한번 쯤 겪어봤을.....문제;;

실제로 오와 영이 구분 안되서 빡친적도 몇번 있다.

삽질 몇시간씩 해본경험...다들 있잖아?

-_-



이 폰트를 쓰면 이런식으로 어이없는 빡침을 경험할 일이 없을거다.

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ



















다폰트(dafont)에서도 다운 받을 수 있다.

http://www.dafont.com/bitstream-vera-mono.font



저작자 표시 비영리 동일 조건 변경 허락
신고

COMMENT 0

오늘 쓸 html/css 관련글은 내가 자주쓰는 툴인 에디트플러스와 알FTP의

접속정보를 백업하는 방법에 관한 글이다.

PC를 포맷하거나 새로이 세팅해야할 일이 있을때

하나하나 계정정보를 등록하는건 너무나 귀찮고 힘든 일이므로

손쉽게 백업파일로 남겨두었다가 필요할 때 덮어쓰기만 하면 된다.

설명은 XP와 윈도우로 나눠서 하겠다!

 

 

 

 

1. 에디트플러스 3 접속정보 백업

 

OS : XP의 경우

C:\Documents and Settings\이름\Application Data\EditPlus 3

 

OS : 윈도우 7의 경우

C:\Users(또는 사용자)\이름\AppData\Roaming\EditPlus 3

 

EditPlus 3 폴더의 *.ini 파일을 전부 복사해서 보관.

 

 

 

2. 알 FTP 접속정보 백업

 

OS : XP 일때
C:\Documents and Settings\유저컴퓨터이름\Application Data\ESTsoft\ALFtp

 

 

OS : 윈도우7 일때
C:\Users(또는 사용자)\유저컴퓨터이름\AppData\Roaming\ESTsoft

 

ALFtp 폴더 안에 *.dat 파일을 전부 복사해서 보관.

 

 

참고로 Application Date / AppData 폴더가 안보인다면!

설정을 살짝 바꿔주면 된다.

XP 일때
도구모음 > 폴더옵션 > 보기 > 숨김파일,폴더 및 드라이브 표시 체크

윈도우7 일때 (도구라는 메뉴가 아예 안보인다면? 탐색기에서 Alt+E 누르면 메뉴가 생긴다)
도구모음 > 폴더옵션 > 보기 > 숨김파일,폴더 및 드라이브 표시 체크

 

 

 

이런 소소한 방법을 알아두면

세팅을 훨씬 빠르고 확실하게 할수있다.

킥킥.

유용하게 쓰길~~~~~ 

 

 

 

 

 

 

 

저작자 표시 비영리 동일 조건 변경 허락
신고

COMMENT 0

오늘 쓸 html/css글은 플래시위에 코드를 올리는, 즉 div를 비롯한 객체나 인라인요소들을 띄우는 방법이다.

 

 

 

 

자주 있는 일은 아니지만 간혹, 플래위에 버튼든 이미지든 무언가를 올려야 할때가 발생하기도 한다.

 

그때 내가 해결했던 방법이다.

 

일단 html 소스를 적어보겠다.

 

주석구분을 해두었으니 보기 어렵진 않을 듯...

 

 

<!--띄우기 -->


<div style="position:absolute;visibility: visible;border:1px solid red; left:20; top:20;z-index:1;">
<img src="http://img.naver.net/static/www/u/2013/0731/nmms_224940510.gif">
</div>


<!-- //띄우기 -->

 

<!-- 플래시 -->


<div style="border:1px solid blue;width:200px;height:200px;">
<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0' wmode='transparent' width='200' height='200'>
<param name='movie' value='플래시 경로'>
<param name='quality' value='high'>
<param name='wmode' value='transparent'>
<embed src='플래시 경로' quality='high' pluginspage='http://www.macromedia.com/go/getflashplayer' type='application/x-shockwave-flash' wmode='transparent' width='200' height='200'>
</embed>
</object>
</div>


<!-- //플래시 -->

 

샘플 : ONflash.html

 

포지션앱솔루트 position:absolute 를 써주면 어지간한건 다 띄워진다.

 

div위에 div를 올리는건 물론, 테이블위에 테이블, 스팬위에 스팬 띄우기도 다 된다.

 

단 너무 자주 남발하면 좋지는 않다.

 

완벽히 틀어짐 없이 짜여진 틀안에서 요소를 위해 absolute를 쓰는건 경험 상 큰 무리가 없었다.

 

사용할 때 z-index의 노출순위(?)조정만 잘해주면 OK.

 

첨부된 샘플에 따라 응용하길.

 

 


 

저작자 표시 비영리 동일 조건 변경 허락
신고

COMMENT 0

오늘 쓸 html/css 글은 파피콘 만들기이다.


파피콘(favicon)이란, 브라우저 탭에 보여지는 작은 이미지를 말한다.

브라우저아이콘이라고 하고~파비콘이라고도 하고~


바로 이런것!

만드는 방법은 생각보다 간단하다!





파피콘으로 쓸 16px * 16px 사이즈의 이미지를 준비한 뒤에~

http://favicon-generator.org/

요 사이트엘 들어가 이미지 변환을 한다.

그럼 확장자가 ico인 파일이 만들어지는데

요 파일을 적용할 웹FTP에 업로드 한 뒤에 

head부분에 링크태그를 넣어주면 끝!





링크태그는 아래와 같다.

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">

<link rel="icon" href="/favicon.ico" type="image/x-icon">


둘 중 입맞에 맞는 링크태그로 골라쓰면 되겠다!




저작자 표시 비영리 동일 조건 변경 허락
신고

COMMENT 0

에디트플러스의 경우 기본세팅 자체가 다중인스턴스가 가능했기 때문에  

모니터마다 개별적으로 창을 띄워 사용할 수 있었으나 울트라 에디트는 추가적으로 설정을 해줘야만 한다.

 

방법은 어렵지 않다.

아래 적힌 설정을 그대로 따라한 뒤 울트라에디트를 재실행 하면 된다.

난 센스있게 국문버전과 영문버전을 둘다 적어보겠다...ㅋㅋㅋㅋㅋ

그럼 이후부터 다중인스턴스(창 여러개 띄우기)가 가능해지니 참고하길!!!!

 

 

 

한글버전은

고급 > 설정 > 어플리케이션 배치 > 기타사항 > 다중인스턴스 허용 체크박스 클릭.

 

영문버전은

Advanced > configuration > Application Layout > Miscellaneous > Allow multipleinstances 체크박스 클릭

 

위 설정을 마치면 모니터마다 울트라에디터를 개별적으로 실행할 수 있어 작업이 한결 수월해진다.

이상 ultraedit의 다중인스턴스 설정 팁이었다.

 

 

 

신고

COMMENT 0