Sketch2Code - 그림을 HTML로 변환 시켜주는 사이트

IT_활용/사이트활용 2020. 1. 1. 18:37


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

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


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


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


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

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


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


마무리

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


저작자표시비영리변경금지

'IT_활용 > 사이트활용' 카테고리의 다른 글

유튜브 영상 다운로드 - URL 변경으로 쉽고 간단한 방법 / youtu10.com  (0) 2020.01.18
사이트 - 연도별 건설사 순위를 알 수 있는 홈페이지  (0) 2020.01.09
Sketch2Code - 그림을 HTML로 변환 시켜주는 사이트  (0) 2020.01.01
SBS 온에어 - PIP 모드로 다른 작업하면서 OnAir 영상 보기  (0) 2019.11.16
SBS 사이트 - 라이브 채팅 닉네임 변경하기  (0) 2019.11.16
네이버 지도 - 미세먼지 현황 지역별로 자세히 보기  (0) 2019.11.16
Tag HTML, Sketch2Code, 그림, 사이트
트랙백 0개 , 댓글 0개가 달렸습니다

댓글을 달아 주세요

에디터플러스 - HTML 태그 자동으로 닫게 하는 옵션

IT_Developers/IDE 2019. 10. 8. 23:50

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




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


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

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

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


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

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

마무리

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





저작자표시비영리변경금지

'IT_Developers > IDE' 카테고리의 다른 글

이클립스 - SVN 수정 파일 원상복구 / Revert  (0) 2019.10.10
에디터플러스 - 문서 탭창 위쪽에 고정하기 / EditPlus  (0) 2019.10.09
에디터플러스 - HTML 태그 자동으로 닫게 하는 옵션  (0) 2019.10.08
에디터플러스 - 기본 브라우저 크롬으로 변경하기 / 타브라우저 가능  (0) 2019.10.08
에디터플러스 - 현재 소스 브라우저에서 바로 열어서 확인하기  (0) 2019.10.08
에디터플러스 - 전체 소스 특정 문자열 찾아 모두 바꾸기 / EditPlus  (0) 2019.10.08
Tag HTML, 에디터플러스, 옵션, 환경설정
트랙백 0개 , 댓글 0개가 달렸습니다

댓글을 달아 주세요

MHT - 오프라인에서 볼 수 있는 MHTML 이란?

IT_Developers/HTML 2019. 9. 26. 23:13

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

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



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



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

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

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

마무리

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





저작자표시비영리변경금지

'IT_Developers > HTML' 카테고리의 다른 글

HTML - 테두리 없는 iframe 만들기  (0) 2019.10.28
JSON 정렬 - 제이슨 정리 사이트 2곳 / 가독성 있게 정렬, 데이터 보기 쉽게 정렬  (0) 2019.10.14
MHT - 오프라인에서 볼 수 있는 MHTML 이란?  (0) 2019.09.26
WebSocket - 웹소켓 이란?  (0) 2019.09.17
HTML5 - input 태그의 formaction 속성  (0) 2019.08.05
HTML - required 필수 항목 값을 확인해주는 속성  (1) 2019.08.01
Tag HTML, MHTML, 저장형식
트랙백 0개 , 댓글 0개가 달렸습니다

댓글을 달아 주세요

HTML - required 필수 항목 값을 확인해주는 속성

IT_Developers/HTML 2019. 8. 1. 16:55
html5 입력 유효성 확인 

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


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

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



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

마무리

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





저작자표시비영리변경금지

'IT_Developers > HTML' 카테고리의 다른 글

WebSocket - 웹소켓 이란?  (0) 2019.09.17
HTML5 - input 태그의 formaction 속성  (0) 2019.08.05
HTML - required 필수 항목 값을 확인해주는 속성  (1) 2019.08.01
HTML - style 태그를 두번 선언하면 어떻게 될까?  (4) 2019.07.04
HTML - Div를 화면 중앙 가운데 반응형 노출  (1) 2019.06.21
CSS - Font Awesome 버전별 아이콘 확인하기  (1) 2019.06.11
Tag HTML, html5, Required, 유효성
트랙백 0개 , 댓글 1개가 달렸습니다

댓글을 달아 주세요

알PDF - PDF 파일 무료 변환 / HWP, WORD, EXCEL, PPT, JPG, EPUB, HTML, RTF

IT_활용/프로그램 2019. 7. 19. 22:34
PDF 파일, 워드, 한글, 엑셀, 파워포인트, 이미지, 전자책파일, HTML, RTF로 변환하는 프로그램

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


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


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


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


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

파일변환결과물.zip





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


마무리

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





저작자표시비영리변경금지

'IT_활용 > 프로그램' 카테고리의 다른 글

알툴즈 - 업데이트 창이 계속 안뜨게 하는 확실한 방법 / 배치파일  (0) 2019.07.21
그림판 - 그리기 도구 사용법 (2) / 브러시 사용방법  (0) 2019.07.20
알PDF - PDF 파일 무료 변환 / HWP, WORD, EXCEL, PPT, JPG, EPUB, HTML, RTF  (0) 2019.07.19
알PDF 뷰어 - 설치방법 및 다운로드 / 첨부파일  (0) 2019.07.19
셧다운8 - 컴퓨터를 시간에 맞쳐 자동 종료 프로그램 / 첨부파일  (0) 2019.07.19
꿀뷰 - 가장 빠르고 가벼운 이미지 뷰어 설치 / honeyview / 첨부파일  (0) 2019.07.19
Tag epub, Excel, HTML, hwp, jpg, ppt, RTF, WORD, 변환, 알pdf, 파일 변환
트랙백 0개 , 댓글 0개가 달렸습니다

댓글을 달아 주세요

HTML - style 태그를 두번 선언하면 어떻게 될까?

IT_Developers/HTML 2019. 7. 4. 09:54
style 태그 중복 선언

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


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

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

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


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



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


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


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

마무리

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




저작자표시비영리변경금지

'IT_Developers > HTML' 카테고리의 다른 글

HTML5 - input 태그의 formaction 속성  (0) 2019.08.05
HTML - required 필수 항목 값을 확인해주는 속성  (1) 2019.08.01
HTML - style 태그를 두번 선언하면 어떻게 될까?  (4) 2019.07.04
HTML - Div를 화면 중앙 가운데 반응형 노출  (1) 2019.06.21
CSS - Font Awesome 버전별 아이콘 확인하기  (1) 2019.06.11
HTML - image maps 이미지맵 만들기 사이트 / image-maps.com  (0) 2019.03.24
Tag HTML, input, Style, 스타일, 태그
트랙백 0개 , 댓글 4개가 달렸습니다

댓글을 달아 주세요

HTML - Div를 화면 중앙 가운데 반응형 노출

IT_Developers/HTML 2019. 6. 21. 16:41
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 형식에서도
신뢰를 얻습니다.





저작자표시비영리변경금지

'IT_Developers > HTML' 카테고리의 다른 글

HTML - required 필수 항목 값을 확인해주는 속성  (1) 2019.08.01
HTML - style 태그를 두번 선언하면 어떻게 될까?  (4) 2019.07.04
HTML - Div를 화면 중앙 가운데 반응형 노출  (1) 2019.06.21
CSS - Font Awesome 버전별 아이콘 확인하기  (1) 2019.06.11
HTML - image maps 이미지맵 만들기 사이트 / image-maps.com  (0) 2019.03.24
폰트- kopubdotum.css CDN URL 오류  (0) 2019.03.21
Tag div, HTML, 가운데정렬
트랙백 0개 , 댓글 1개가 달렸습니다

댓글을 달아 주세요

CSS - 책 제목 처럼 왼쪽에 색 기둥 만들기

IT_Developers/CSS 2019. 6. 20. 22:35
왼쪽에 색상 있는 제목 형식

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


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

● 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 엄청 재밌네


저작자표시비영리변경금지

'IT_Developers > CSS' 카테고리의 다른 글

무료 폰트 - "남한산성"과 "칼의노래"를 집필한 / "김훈체" / 첨부파일 있음  (0) 2019.06.25
무료 폰트 - "토지"를 집필한 고박경리 작가 / 박경리체 / 첨부파일 있음  (2) 2019.06.25
무료 폰트 - 윤태호 작가에 "미생체" 다운로드 받기 / 첨부파일  (2) 2019.06.24
CSS - li 점 대신 다른 모양으로 / list-style-type , list-style-image  (0) 2019.06.21
CSS - 책 제목 처럼 왼쪽에 색 기둥 만들기  (2) 2019.06.20
Tag CSS, HTML, 디자인
트랙백 0개 , 댓글 2개가 달렸습니다

댓글을 달아 주세요

티스토리 - 방문자 현황 노출 하지 않게 하기

블로그_활용/블로그 2019. 6. 17. 11:02
TISTORYT 방문자 수 감추기

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


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


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

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


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


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

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


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

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



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


마무리

1만명 일 방문자 도전!





저작자표시비영리변경금지

'블로그_활용 > 블로그' 카테고리의 다른 글

네이버 블로그 - URL 미리보기 안보이게 붙혀넣기  (0) 2019.06.18
티스토리 꿀팁 - 글 수정 쉽게 접근하기  (2) 2019.06.18
티스토리 - 방문자 현황 노출 하지 않게 하기  (2) 2019.06.17
티스토리 - 분할 압축하여 블로그에 파일 첨부하기  (3) 2019.06.16
티스토리 - 네이버 검색 유입 대안 / 블로그로 유입하기  (6) 2019.06.13
티스토리 - 방명록 쉽게 접속하기 /guestbook URL  (0) 2019.06.11
Tag HTML, 방문자, 스킨편집, 티스토리
트랙백 0개 , 댓글 2개가 달렸습니다

댓글을 달아 주세요

jQuery UI - 이미지 드래그, 리사이징 / resizable() draggable()

IT_Developers/Javascript 2019. 6. 11. 18:31
제이쿼리 이미지 드래그 드랍, 사이즈 조절

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


jQuery UI를 쓸때 가장 많이 활용하게 되는
기능이 두가지가 있습니다.
바로 이미지 드래그와 리사이징 입니다. 

레이어 팝업을 만들거나
사용자에게 크기를 조절하게 
편의를 제공 하는 기능은 많이 씁니다.

그래서 이번 시간에
제이쿼리를 이용해 드래그와 리사이징을 동시에 배워보겠습니다.

● 1. 아래 소스를 웹사이트에서 실행해보세요.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
<head>    
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
    <script>
        $( document ).ready(function() {
            $('#GoCoderImg1').resizable();        
            $('#GoCoderImg2').draggable();        
        });
    </script>
</head>
<body>
    <img src="https://t1.daumcdn.net/cfile/tistory/234774445960F69422" id="GoCoderImg1">
    <img src="https://t1.daumcdn.net/cfile/tistory/234774445960F69422" id="GoCoderImg2">
</body>
</html>
cs

gocoder_resizable_draggable.html


● 2. 하나는 사이즈 조절이 가능하고
다른 하나는 드래그 드랍으로 이동이 가능 합니다. 


마무리

jQuery 덕분에 많은게 가능해졌네요


저작자표시비영리변경금지

'IT_Developers > Javascript' 카테고리의 다른 글

jQuery - Div등 요소의 크기 조절, 사이즈 가져오기 / width(), hegiht();  (1) 2019.06.19
JavaScript - setTimeout(), setInterval() 차이점 예제  (1) 2019.06.17
jQuery UI - 이미지 드래그, 리사이징 / resizable() draggable()  (0) 2019.06.11
jQuery UI - Div 강조하기 / effect highlight  (0) 2019.06.03
JavaScript - 사파리에서 body, HTML에 클릭(click) 이벤트가 바인딩 되지 않는다.  (0) 2019.05.22
jQuery - 가볍고,간단한 깔끔한 화면 한쪽 팝업 / jGrowl  (0) 2019.05.21
Tag CSS, draggable(), HTML, JQuery, resizable(), UI, 제이쿼리
트랙백 0개 , 댓글 0개가 달렸습니다

댓글을 달아 주세요

출간

개발자 라면 연재

티스토리툴바