에디터플러스에서 HTML 바로 보기


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


HTML을 간단하게 연습하고 싶을때 에디터플러스를 사용하면 편리하게 연습이 가능합니다. 이 프로그램을 사용하면 가장 빠르고 쉽게 테스트 할 수 있습니다. 

 1. 에디터플러스를 실행 후에 단축키 Ctrl + Shift + B를 클릭합니다. 



 2. 그럼 자동으로 가장 필요한 HTML 태그가 자동으로 완성 됩니다. HTML부터 메타 태그 그리고 타이틀, 헤드, 바디까지 기본적인 틀이 제공 되었습니다. 여기서 Ctrl + B를 클릭합니다. 저장하지 않아도 됩니다. 


 3. 에디터플러스에서 HTML을 확인 가능합니다. 바로 HTML을 확인 가능하기에 간단한 연습에서는 최적인듯 합니다. 




마무리


HTML 연습은 에디터플러스로 


댓글을 달아 주세요



손으로 그린 스케치를 HTML 템플릿으로 변경하는 온라인 사이트


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


 1. 현업에서는 HTML 모양을 손으로 그리는 경우가 많습니다. 원하는 모습에 템플릿을 코딩 전에 손으로 직접 그려보면서 컨펌하는 경우인데요.
이런 손그림을 도형으로 변경하는 사이트를 소개합니다. MS에서 운영하는 사이트 입니다. 


 2. 접속시에 샘플 파일을 제공해주는데요. 그림판으로 제가 직접 그린 이미지를 업로드해서 사용해보겠습니다. 


 3. 제가 그린 이미지는 이런 모양입니다. 인식을 좀 더 쉽게 해주기 위해 그림판으로 그렸습니다. 인풋 박스 3개에 버튼 한개 입니다. 

 4. 제가 만든 이미지가 HTML로 변경 되었습니다. 텍스트 입력 상자 하나를 까먹었나보네요. HTML을 만들어준다는 의미보다 기본적인 틀을 확인해준다는 의미가 깊은거 같습니다. 


 5. 생성된 HTML은 부트스트랩을 이용해서 간단하고 심플하게 생성되었습니다. 



마무리


손으로 그렸을 경우 완벽하게 사용 가능한 HTML을 만들어주는 그런 사이트는 아닙니다. 


댓글을 달아 주세요


editplus HTML 태그 꺽쇠를 자동으로 완성




에디터 플러스는 태그를 자동으로 닫아주지 않습니다. 개발 툴 로써의 기능도 좋지만 메모장으로도 쓰는 분이 많기에
해당 옵션을 사용하지 않는거 같습니다.


 1. 예를 들면 <html>을 써야 한다면 이처럼 닫는 태그까지 직접 써야 합니다.
그런데 이런 옵션을 좋아하는 개발자가도 많습니다. 

 2. 도구에서 기본설정을 클릭합니다. 이 기본설정이 가장 많은 옵션을 변경 할 수 있습니다.

 3. 그리고 일반에서 HTML 태그 자동으로 닫기를 체크 합니다.  닫기 태그 도움을 줄 옵션입니다.


 4. 이제 꺽쇠를 < 시작하면 자동으로 <>을 완성하고

 5. 꺽쇠 중간에서 코드를 작성하게 해줍니다.


마무리


해당 옵션을 사용하면 쉬프트를 자주 누르지 않아서 새끼 손가락이 안아퍼서 좋습니다.





댓글을 달아 주세요


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


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



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



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

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

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


마무리


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





댓글을 달아 주세요


html5 입력 유효성 확인 


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


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

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



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


마무리


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





댓글을 달아 주세요


PDF 파일, 워드, 한글, 엑셀, 파워포인트, 이미지, 전자책파일, HTML, RTF로 변환하는 프로그램


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


 1.이전 시간에 알PDF뷰어를 다운로드 하여 설치 하였습니다.
이 프로그램에 장점은 많은 기능을 제공하고 있습니다.
특히 PDF 파일을 다양한 형식으로 변환이 가능합니다.


 2. PDF를 실행시키면
상단 부분에 파일을 변환 가능한 형식들이 보입니다.


 3. 엄청 많은 방식으로 변환이 가능 합니다.
필요한 모든 변환이 다 있습니다.


 4. 샘플 PDF를 모든 방식으로 변환해보았습니다.

파일변환결과물.zip





 5. 첨부파일에 내용입니다. 결과물은 생각보다. 훌륭합니다. 확인해보세요.



마무리


PDF를 다른 파일로 변환이 필요할때는
무료로 알PDF뷰어를 사용하시면 됩니다. 





댓글을 달아 주세요


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 형식에서도
신뢰를 얻습니다.





댓글을 달아 주세요


왼쪽에 색상 있는 제목 형식


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


가끔 블로그나 홈페이지를 보다보면
책의 소제목처럼 왼쪽에 네모 박스에 
색이 입혀진 디자인을 볼 수 있습니다.

1. 오늘은 이 모양과 같은 CSS를 만들어 보겠습니다. 



 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
<!doctype html>
<html lang="en">
<head>
<style type="text/css">
    
    .div_gocoder_point_1 p {
        padding: 0px 5px 0px;
        border-bottom: 0px solid #000;
        border-left: 10px solid #000;
        color: #000;
    }
    .div_gocoder_point_2 p {
        padding: 0px 5px 0px;
        border-bottom: 1px solid #000;
        border-left: 10px solid #000;
        color: #000;
    }
 
</style>
</head>
<body>
    <div class="div_gocoder_point_1">
        <p>
            안녕하세요. 고코더 입니다.
        </p>
    </div>
 
    <div class="div_gocoder_point_2">
        <p>
            안녕하세요. 고코더 입니다.
        </p>
    </div>
</body>
</html>
 
cs
 3. 결과물은 이렇습니다. 
많이 보는 방식의 제목 스타일입니다.



마무리


CSS 엄청 재밌네


댓글을 달아 주세요


TISTORYT 방문자 수 감추기


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


블로그를 개설하면 기본적으로
셋팅 되는 부분중에 하나가
바로 메인 화면에 방문자 현황입니다.


기본적으로 블로그라면 노출되고 있지만
사실 자신의 방문자를 보여줄 필요가 없는 경우도 존재합니다.

오늘은 그래서 방문자 현황을 감추는 방법을 소개할려고 합니다.


1. 우선 자신의 블로그 관리자에서
HTML 편집으로 이동 합니다. 


 2. 그리고 아래 문자를 찾아보세요
[##_count_today_##] : 오늘 방문자 수 
[##_count_yesterday_##] : 어제 방문자 수
[##_count_total_##] : 전체 방문자 수

 3. 각 블로그의 스킨마다 모습은 다르지만
해당 코드는 다 동일 합니다. 
저같은 경우는 이렇게 방문자 통계들이 나타나고 있습니다.


 4. 이제 여기서 주석 처리를 합니다.
주석 처리 하는 방법은
<!-- : 이걸 앞으로
-->  : 이걸 뒤로 채워주면 됩니다.

 5. 주석 처리한 모습입니다.
색깔이 연한 갈색으로 변했으면 성공입니다.
(에디터 기능이므로 색이 안변해도 코드만 잘 입력하면
가려집니다)



 6. 적용 후에 모습은 아래와 같습니다. 
방문자 통계 글씨도 없애고 싶으면 해당 부분도 주석 처리를 하면 됩니다!



마무리


1만명 일 방문자 도전!





댓글을 달아 주세요