아이프레임 라인 없애기


안녕하세요.
고코더 입니다. 


iframe은 나눠져 있는 페이지를 하나로 모으기 좋은 태그 입니다.
하지만 기본 아이프레임은 테두리 경계선과 스크롤이 기본으로 포함되어 있습니다.


 1. 홈페이지에 출간 페이지를 만들어 입력했지만 프레임 흔적이 나타납니다.
이 테두리와 스크롤등 자연스럽게 아이프레임이 페이지에 녹아들도록 변경해보겠습니다.


 2. 사용할 프레임 태그는 이렇습니다. 
<iframe src='주소" width="가로 가이즈" height="세로 사이즈" border="0" framespacing="0" marginheight="0" marginwidth="0" scrolling="no"  vspace="0">/iframe>


 3. 테두리를 지정하는 속성의 설정에 설명입니다.
border
- 경계선 두께
frameborder
- 프레임 경계선의 표시 설정
framespacing
- 프레임셋 프레임간의 간격
hspace/vspace
- 경계선과 인접하고 있는 텍스트 사이의 상하좌우 간격
marginheight
- 프레임의 상하 여백
marginwidth=
- 프레임의 좌우 여백을 설정


 4. 해당 태그를 적용해주면 이렇게 프레임이 자연스럽게 페이지에 노출이 됩니다.



페이지를 따로 개발해서 하나에 페이지에 조합하는 방법을 할때 꼭 테두리는 없애주세요.


마무리


고코더 출간 페이지 




댓글을 달아 주세요



사이트에서 JSON을 보기 편하게 


안녕하세요.
고코더 입니다.



JSON 데이터를 개발하다보면 띄워쓰기 없이 일그러져 있는 데이터를 보느라 눈이 아픕니다.

각 IDE마다. 브라우저에 JSON 뷰어 기능도 많지만 순수 데이터를 정렬할 수 있게 도와주는
사이트를 소개하려고 합니다.


 1. Json Parser Online  


처음 소개할 사이트는 JSON을 입력하면 인식하여 바로 보기 좋게 정렬해주는 사이트 입니다.
.fr 을 보니 프랑스 사이트네요. 그래서 정렬이 가장 이쁘나 싶습니다.
사이트로 접속해보면 왼쪽에는 json 데이터 입력창이 오른쪽은 정렬된 데이터를 확인 가능합니다.

JSON을 입력하면 즉시 오른쪽에 정렬 됩니다.

화면에 보여질 내용을 변경하는 옵션도 제공되니 간단하게 확인할때 가장 좋아 보입니다.



 2. Online JSON Viewer


이번에는 이쁜 느낌으로 정렬이 안되지만 데이터를 결과표로 확인이 가능합니다.

Viewer로 탭으로 이동하면 JSON 정렬이 보이고 해당 라인을 누르면 컬럼에 Name과 Value로 확인이 가능합니다.
저는 개인적으로 이런식에 데이터 보기가 필요해서 이사이트를 자주 사용하는 편입니다.



마무리

사이트마다 JSON 정렬도 특징이 있네요.







댓글을 달아 주세요


웹페이지를 하나의 파일로 저장된 MHTML


안녕하세요.
고코더 입니다.



 1. 오늘 우리가 알아볼 형식은
MHTML (Mine HTML) 이라고 합니다.
이 방식은 마이크로 소프트가 익스플로러 5을 도입했던 방법입니다.  예로 크롬에서 웹페이지를 저장하면 바로  mhtml 형식으로 하나에 페이지로 저장이 됩니다.
이미지가 모두 하나에 파이로 저장 되는 형식입니다.
-> 브라우저 - 현재 페이지 저장 / 크롬 / IE



 2. 다음번에 다시 웹페이지를 보고 싶으면 해당 파일만 열면 인터넷 없이도 보기가 가능합니다.

 3. 그래서 mhtml 코드를 확인하면 텍스트화된 이미지 정보까지 확인이 가능합니다. 파일 용량도 큰편입니다.

관리하기 쉽고 열어보기 편하지만 가끔 브라우저마다 결과 값이 달라보이는 경우도 있습니다.


마무리


필요할때 얼마든지 다시 열어보고 싶다면 mhtml 형식으로 웹페이지를 간직할 수 있습니다.





댓글을 달아 주세요


면접에서 웹소켓을 물어보면? 간단하게 알아보기


안녕하세요.
고코더 입니다.


 1. 웹소켓이란 단어를 많이 들어봤지만 설명하라고 하면 입이 떨어지지 않는 주제입니다.
우선 소켓은 네트워크에 가장 기초적인 개념입니다. 통신을 위해 두 지점을 말합니다. 통신의 통로입니다. 여기서 Web이란 단어를 합성해서 "웹소켓"으로 불립니다. 기본 적으로 웹소켓은 Stateful Protocol 방식입니다. 한번 연결된 네트워크 라인 통신을 통해 데이터를 양측에 주고 받을 수 있습니다.  즉 기본 request, response 방법이 아닌 연결을 유지한채 정보를 주고 받는 방법입니다.
HTML5에서는 이런 웹소켓 방식을 2009년 부터 공식 지원하고 있습니다. 

1
websocket = new WebSocket(URL);
cs



 2. 웹소켓 장점
1. 80혹은 443 포트를 이용한 데이터를 교류 합니다. 그렇기 때문에 금융권에서는 이런 방화벽 오픈에 대해 민감하기 때문에 쉽게 사용할 수 있습니다. 
2. 정보를 서버와 실시간 교류 할 수 있기에 즉각적인 변화를 감지해야 하는 서비스에 좋습니다.(채팅, 주식,코인 거래소 등등)

 3. 웹소켓 단점 
1. 개발이 복잡하니다. 레퍼런스가 ajax 비해 많이 부족합니다. 완성도 높게 개발하지 않으면 유지보수가 어렵습니다.
2. 트래픽이 많이 발생합니다. 그래서 특별한 경우가 아닌 경우에는 서버 부하와 관리 때문에 도입에 대한 의견을 나누다 제외 되는 경우가 많습니다.
3. 최신 브라우저가 아니면 작동 되지 앖습니다. 2009년 부터 지원하고 있기에 ie8 같은 오래된 익스플로러에서는 작동되지 않습니다. (저희 부모님은 아직도 xp ie8을 사용중이시죠)

íµì ì ëí ì´ë¯¸ì§ ê²ìê²°ê³¼

 4. 최근 동향은 Ajax로 필요할때마다 시간마다 불러오는 Polling 방식에서 WebSocket으로 서비스를 고도화 하고 있습니다. 그래서 많은 취업 공고에 websocket에 개발자를 구하고 있으니 먼저 공부하고 간단하게 면접자에게 설명할 수 있도록 이론을 쌓아보시길 바랍니다.


마무리


최적 실시간 환경이 아닌 서비스에서는 웹소켓 보다 기존 ajax 방식이 아직 더 좋습니다.








댓글을 달아 주세요


formaction 예제


안녕하세요.
고코더 입니다.


 1. form을 전송하는 방법은 웹프로그래밍 언어에 기본 입니다.
필요한 데이터를 로직을 처리하는 소스르 넘기는 과정입니다.
그런데 html5부터는 formaction 속성을 이용해 폼 주소를 input 박스에서 수정이 가능합니다.

 2. 소스를 함께 살펴보겠습니다. 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
    <link rel='stylesheet' href='/stylesheets/style.css'/>
</head>
<body>
 
<form action="/board/update" method="post">
    <table border="1">
        <tr>
            <td colspan="2">
                <button type="submit">폼 전송</button>
                <button type="submit" formaction="/board/delete">폼 전송2</button>
                <a href="/board/list">목록</a>
            </td>
        </tr>
    </table>
</form>
</body>
cs


 3. formaction 속성이 없다면 post를 가로채서
스크립트를 작성하여 조건절을 걸었지만
html5에 편리한 기능 때문에 각각 다른 폼으로 전송이 가능합니다. 


 4. "폼 전송" 은 기존에 action 주소로 이동하고


 5. "폼 전송2" 는 formaction  주소로 이동합니다.


복잡한 스크립트 없이 form 전송을
동적으로 할 수 있습니다.


마무리


하지만 html5 브라우저가 아닌 옛날 익스플로러 사용하는 유저도 많으니
그림에 떡이네요.






댓글을 달아 주세요


html5 입력 유효성 확인 


안녕하세요.
고코더 입니다.


 1. HTML5에 새로운 기능들은 개발자에 피로를 많이 덜어줍니다.
그 중에 하나가 바로 required 속성입니다.
input이 비어있으면 자동으로 필수값으로 값을 넣으라고 해주는 유효성 체크 항목 입니다.

 2. 가끔 브라우저에서 이런 메세지 창을 보신적이 있죠?
required 속성을 입력한 input은 자동으로
이렇게 메세지 창을 띄워서 입력을 받도록 강제해줍니다.



 3. 사용법은 간단합니다. 그저 input 태그안에
required만 붙혀주면 됩니다.
<input type="text" name="title" id="title" required/>
그리고 해당 속성은 해당 input은 필수 값이라는걸 알려주는 태그임을 강조하는 역할도 합니다.


마무리


물런 최신 브라우저를 써야 작동하는 기능이라 
결국은 일부 유저를 위해 스크립트 유효성 체크를 해줘야 하겠죠.





댓글을 달아 주세요


style 태그 중복 선언


안녕하세요.
고코더 입니다.


 1. 많은 분들은 이미 알고 계시겠지만
최근에 코딩하다 알게 된 사실인데요.
HTML에 요소에 style 태그를 선언해서
CSS 속성을 입력할 수 있습니다.

Q. 그런데 이 style태그를 두 번 입력한다면
브라우저는 어떻게 해석할까?
A. 정답은 처음 style 태그만 입력 받는다

 2. 한번 실험을 해보겠습니다.
아래처럼 태그를 입력했습니다.


 3. 그리고 결과는 당연히 빨간색으로 글자가 표현됩니다.



 4. 그럼 같은 속성만 무시되는 거 아니냐고 하실 텐데요
이번에는 뒤에 스타일 속성에 display를 none으로 해보겠습니다.


 5. 결과는 역시 빨간색 글자만 나오네요.
(앞에 이미지 복붙 아니고 결과 값 캡쳐했습니다.!)


알고 있던 분들은 뭐 이런 걸 가지고 
하시겠지만 저는 어제 코딩하다 처음 알았네요.
재밌는 HTML에 세계 입니다.


마무리


혹시 style 태그가 안 먹힌다면
이미 선언했는지 한번 체크해보세요.




댓글을 달아 주세요


DIV로 안내 페이지 만들기


안녕하세요.
고코더 입니다. 


오늘은 DIV를 화면 가운데 중앙에 위치 하게
하는 방법을 알아보겠습니다.

1. 제가 만든 모니터 체크 사이트에서 사용한 HTML 입니다.
안내 페이지로 반응형으로 DIV를 화면 가운데로 노출하였습니다.



 2. HTML을 웹에서 실행 해보세요.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<html>
<head>
    <style type="text/css">
        .layer {
            position: absolute;
            text-align: center;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            font-size: 50px;
        }
        .layer .content {
            display: inline-block;
            vertical-align: middle
        }
        .layer .blank {
            display: inline-block;
            width: 0;
            height: 100%;
            vertical-align: middle
        }
    </style>
</head>
 
<body>
 
    <div class="layer">
        <span class="content">div를 화면 가운데 놓기 gocoder.net</span>
        <span class="blank"></span>
    </div>
 
</body>
</html>
cs
 3. 결과 모습입니다. 
간단한 안내 페이지로 활용할때 좋은 방법입니다.




마무리


사람들은 HTML 형식에서도
신뢰를 얻습니다.





댓글을 달아 주세요


Font Awesome 아이콘 리스트 웹사이트 확인


안녕하세요.
고코더 입니다. 


웹 아이콘으로 가장 많이 사용 되는
Font Awesome 제 블로그에도 홈페이지에서도 사용중입니다.
반응형 웹부터 일반 홈페이지까지
필요한 아이콘을 바로 가져다 쓰는게 가능합니다.

오늘은 이 편리한 아이콘 버전별로
어떤 icon들이 있는지 확인하는 방법을 알아보려고 합니다.

1. 제 블로그의 Font Awesome 버전은 4.7.0 입니다. 


블로그를 꾸미다 보니 해당 버전의 어떤 아이콘들이 존재하는지
확인하는 방법을 찾다가 첫번째는

 2. 소스를 열어보면 이렇게 준비된 아이콘들의 이름을 볼 수 있습니다.
하지만 개발자는 효율적으로 일해야겠죠 


 3. 해당 4.7.0버전의 아이콘 리스트는 아래에서 확인 가능합니다. 


 4. 해당 주소에서 버전만 기입하면 아이콘을 확인 가능합니다.

자주 사용하는 3버전과 5버전에 주소를 보면
확실히 이해가 가능합니다. 

해당 사이트에서 미리 아이콘을 확인하고 적용해보세요.


마무리


이거 없었으면 아이콘 어떻게 했을려나



댓글을 달아 주세요



이미지맵 코드 생성 사이트



안녕하세요.
고코더 입니다.


이미지맵을 작성할때 머리가 비상한 분이면
이미지의 좌표를 바로 분석하고 코드를 기입하겠지만

보통은 프로그램이나 사이트의 도움을 받아 
작성을 하는게 보통입니다.

그런데 프로그램은 귀찮고
사용해본 결과 이사이트가 가장
손쉽게 사용이 가능합니다.

▼ 이미지맵스는 "익스플로어"에서만 작동이 됩니다.
(크롬에서 작동이 안되요!!!)
이미지 URL을 입력하고
start Mapping을 입력 합니다. 


▼해당 이미지가 맞다면
click to continue 를 클릭해주세요.


▼새로 생긴 창에서 마우스 오른쪽 버튼을 누르면
사이트 기능이 뜹니다. 
우린 가장 많이 사용하는 네모 "create rect"를 클릭해보겠습니다. 


▼그리고 나타난 범위를 원하는 크기만큼 늘립니다. 


▼ 그 다음 옵션을 입력 합니다.
Map URL : href 값 링크 값 입니다.
그리고 나머지는 이미지 옵션 값


▼ Eventes는 이미지 이벤트를  만들수 있습니다.
Target : _blank 로 해보겠습니다. 


▼ 다시 이미지에서 마우스 오른쪽 버튼을 클릭해
Get Code를 선택해보겠습니다. 



▼ HTML Code를 선택하면


▼ 이렇게 HTML Code가 나옵니다.


▼ 저는 이렇게 홈페이지 위젯에 코드를 넣어서
반반 링크를 다르게 했습니다.


이미지맵이 필요한분은 해당 사이트에서
만들어 보세요.


마무리


하나의 이미지에 여러개 링크를 달때 
이미지맵 참 유용합니다.


댓글을 달아 주세요