무료로 사용할 수 있는 전자책 글꼴 Guide v0.5

이전 내용은 이곳에서 확인하시기 바랍니다.

http://epubguide.net/245


전자책에 무료로 쓸 수 있는 글꼴을 모았습니다.

글꼴의 저작권(라이선스), 제작처, 받을 수 있는 경로, 그리고 글꼴파일이 지원하는 언어(한중일, 한글 고어, 기본 특수문자 세트 등), 글자 크기별 모양 등을 한번에 확인할 수 있습니다. 


v0.5 전자책 파일 받기 https://goo.gl/qa3kBF

v0.4 전자책 파일 받기 https://goo.gl/HkLunK

v0.3 전자책 파일 받기 https://goo.gl/fDTuqZ



❖ 판올림 내용


- 글꼴을 간략히 확인할 수 있는 목차 페이지를 추가했습니다.(아래 이미지 참조)

- 목차 페이지에서 글꼴을 확인 후, 글꼴 이름을 선택하면 상세 설명 페이지로 이동합니다(단, 내부링크 지원하는 뷰어에 한함)





아직 본문 디자인은 편집중이고, 무료로 사용 가능한 글꼴 중 일부만 작업이 되었습니다. 시간 나는 대로 업데이트하고 있습니다. 글꼴에 대해 추가로 확인하고 싶은 내용이 있거나 더 추가하고 싶은 무료 글꼴이 있으면 언제든 댓글이나 이메일로 남겨 주십시오. 확인하는 대로 추가하겠습니다.

설정

트랙백

댓글

Sigil 0.9.9 버전 공개

Sigil 사용 설명서 2017.12.23 13:23



Sigil이 오랜만에 업데이트를 했네요.

0.9.9 버전입니다. 드디어 1에 가까워졌어요. 0.7.x 버전에서 사라질뻔 했던 위기도 있었지만 무사히 위기를 넘기고 지금은 EPUB제작에 없어서는 안될 가장 중요한 편집기로 자리잡았네요.


0.9.9버전의 변화 간단히 정리해 드립니다. 자세한 내용인 위에  업데이트 공지 링크를 클릭하세요.


버그 수정 : 파이선 3.5 버전 개선(업데이트) 및 일부 버그(OSX에서 Symbol 사라지는 버그?) 수정

                 몇가지 강제 종료 버그 수정

                 책찾아보기에서 아이콘 사라지는 문제, 이미지 끌어넣기 관련 몇가지 오류

                 ...

                 (버그 개선사항이 엄청 많은데 제가 경험하지 못한 것들이라 자세한 내용은 모르겠네요. 영어 해석도 어려운데 경험하지 못한건 해석 해도 뭔소리인지 모를때가 많아서...업데이트 공지 확인을 권해드립니다)



새로운 기능

    - Add SIGIL_DISABLE_CURSOR_BLINK environment variable to disable text cursor to aid Accessibility on OSX(OSX에서 커서가 깜빡이는 것과 관련한 환경변수를 추가했습니다. 써봐야 정확한 기능을 알 수 있을 것 같습니다.)

    - Better use semantic information (guide types and Landmarks) to allow the user finer control of index generation(인덱스 생성 작업을 보다 세밀하게 할 수 있도록 보다 나은 semantic 정보를 사용할 수 있게 개선)

    - Attempt to improve Metadata Editor placeholder text to help beginners(초보자가 쉽게 사용할 수 있도록 메타데이터의 설명을 개선하는 작업을 시작합니다.)

    - Preview Window Title bar will now show height and width of the Preview Window(미리보가 창에서 해상도를 표시합니다. 이 기능은 아주 유용하겠네요)

    - Allow users to limit/disable clipboard history saving via General Preferences(사용자가 클립보드 히스토리의 갯수를 설정할 수 있습니다. 확인해 보니 0~20까지 설정할 수 있네요. 잘 활용하면 아주 편리하겠어요.)

    - Convert br tags in header text to linebreaks for toc/ncx/nav generation routines(제목 태그(h1~h6)에서 br 태그 써도 제목 생성할 때 공백을 넣지 않으면 붙어서 나왔는데 공백이 들어가네요. 약간 불편했는데 개선이 됐어요.)

    - Support spell checking of words with numbers controlled by Preference settings(한국어 사전이 없어 이 부분은 별 의미가 없습니다)

    - Add two additional Quick Lauch Icons for Plugins(플러그인 바로가기 아이콘이 3개에서 5개로 늘었습니다. 갯수 조절이 안되는게 아쉽긴 하지만 3개 꽉 채우고 더 추가하지 못해 아쉬웠는데  유용하게 쓸 수 있겠네요.)



자세한 내용은 업데이트 공지 확인하시기 바랍니다. 다운로드 링크도 업데이트 공지에서 확인할 수 있습니다. 

 

설정

트랙백

댓글

무료로 사용할 수 있는 전자책 글꼴 Guide v0.4


전자책에 무료로 쓸 수 있는 글꼴을 모았습니다.

글꼴의 저작권(라이선스), 제작처, 받을 수 있는 경로, 그리고 글꼴파일이 지원하는 언어(한중일, 한글 고어, 기본 특수문자 세트 등), 글자 크기별 모양 등을 한번에 확인할 수 있습니다. 




판올림 내용


- 본문 스타일을 적용했습니다.

- 저작권, 무료폰트, 이 책을 보는 방법 등 설명이 수정/추가 됐습니다.

- 코펍 폰트가 추가됐습니다.

- 목차 업데이트를 했습니다. 뷰어의 목차 기능을 이용해 원하는 글꼴을 찾을 수 있습니다.

- 본문 예제에 기울임, 진하게 스타일을 추가했습니다.

- 포함된 글꼴

   * 구글 노토  Sans, Serif 한글(KR)

   * 네이버 나눔 글꼴

   * NHN고도 글꼴

   * KCC 김훈체, 은영체

   * 코펍 서체

   * 서체는 계속 추가됩니다.


아직 본문 디자인은 하나도 하지 않은 상태고, 무료로 사용 가능한 글꼴 중 일부만 작업이 되었습니다. 시간 나는 대로 업데이트하고 있습니다. 글꼴에 대해 추가로 확인하고 싶은 내용이 있거나 더 추가하고 싶은 무료 글꼴이 있으면 언제든 댓글이나 이메일로 남겨주십시요. 확인하는 대로 추가하겠습니다.



* 글꼴파일 그룹 제작처의 라이선스 전문과 라이선스를 확인할 수 있는 경로, 글꼴 파일을 받을 수 있는 경로를 표시합니다.


* 글꼴 파일이 지원하는 언어 및 특수문자를 글꼴 디자인으로 확인할 수 있습니다. 만약 글꼴파일이 지원하지 않는 언어가 있다면 아래 [나눔명조]의 '한글 고어'처럼 글자가 깨지거나 [나눔 펜]의 한자 처럼 아무것도 나타나지 않을 수 있습니다. 이는 내용이 없는 것이 아니고 글꼴파일이 지원하지 않아 표시되지 않는 것입니다. 





* 글꼴의 글자 크기별, 꾸밈별 모양을 확인할 수 있습니다. 글자 크기는 스타일을 적용하지 않은 1em을 기준으로 합니다. 글꼴에 따라 1em의 글자 크기가 커보이거나 작아보일 수 있지만 이는 모두 1em입니다. 글자의 특성에 따라 같은 1em이라도 글자 크기가 달라보일 수 있습니다. 



(캘리버에서 캡쳐한 화면)



* 글꼴은 가장 많이 사용되는 Regular, Medium 등의 대표 글꼴 하나만 사용했습니다. 아래 글꼴 스타일은 기본 글꼴에 글자 꾸밈 태그를 적용한 것입니다. 위 이미지처럼 캘리버 같은 일부 뷰어에서 이런 스타일이 제대로 표현되지 않을 수 있습니다.

국내 유통사의 표현성에 대한 내용은 이곳을 참고하시기 바랍니다 : http://epubguide.net/241

(iBooks에서 캡쳐한 화면)



* 본문에서 글꼴이 어떻게 보이는지를 확인할 수 있습니다. 본문 편집시 많이 사용하는 윗첨자 형태의 설명이나 괄호 설명을 참고할 수 있게 스타일을 추가했습니다. 글꼴에 따라 본문 느낌이 달라져 본문 편집을 위한 원하는 글꼴을 찾을 때 참고할 수 있습니다. 



설정

트랙백

댓글

분노유발 심리학

책 제목 : 분노유발 심리학

포인트 : 작은 부분에서 색다른 편집이 필요했던 책.


제목과 내용이 재미있는 책입니다. 분노유발자를 아홉가지 '또라이'로 분류해 대처하는 방법이 담긴 책이에요.


'또라이'라는 단어가 좀 과격하다 싶을 수 있는데, 책머리에 왜 '또라이'라는 단어를 선택했는지 설명이 나옵니다. 그리고 책을 보면 왜 '또라이'인지 알게 되고요.


어려운 스타일은 없었지만 처음 시도해 본 재미있는 편집이 몇가지 있습니다.


가장 고민을 많이 했던게 목차였네요 ㅡ.ㅡ;;

종이책 목차가 이렇게 되어 있습니다. 

[차례]라는 글자 아래로 청록색 선이 있고, 선의 반대쪽 끝에는 이미지가 있어요. [차례]의 아랫쪽, 이미지의 중간에 선이 오도록 하는게 포인트라 이 부분을 살려봤습니다. 


전자책에서는 이렇게 보입니다. 페이지가 없는 전자책이다 보니 종이책에서 2페이지로 구분된걸 한페이지에 몰아넣었습니다. 딱 한번 들어가는데 공을 들여야 하나 싶은 생각도 들었지만, 이 포인트를 살려야겠다는 생각이 들더라구요.



화면이 큰 PC나 태블릿에서 본 화면입니다. 본문, 제목 스타일은 어렵지 않게 작업할 수 있습니다.




스마트폰처럼 작은 화면에서 보면 이렇게 보입니다. 제목 상단 이미지를 본문 크기에 맞췄는데 큰 화면에서 보면 제목과 비교해 너무 커져서 화면 폭의 40%로 맞췄습니다. 




이 책의 재미있는 스타일이 나옵니다. 소제목 아래에 선이 있는데 청록색과 검정색이 겹쳐지는 점선느낌입니다. 한가지 색의 선이나 점선이라면 border를 썼을거예요. 그런데 이런 선은 이미지로 들어가야합니다. 

저는 이 이미지를 썼습니다. 이 이미지를 배경으로 넣었어요.

배경으로 이미지를 넣으면 문장 길이에 맞춰 줄이 조절됩니다. 

문장 길이에 딱 맞추기 위해 display속성을 추가했어요.



여기 쓰인 선은 위에 쓰인 선과 모양이 다릅니다. 

display 속성을 없애고, 좌우에 여백을 줘서 아랫쪽 회색 글상자보다 안쪽으로 들어가도록 했지요.


대화문에 사람 이름을 다른 색으로, 내어쓰기, 이런건 설명 안드려도 쉽게 할 수 있을거예요^^


이 책에서 독특했던 부분이 또 있습니다. 영문 병기 글자가 위쪽이나 아랫쪽이 아닌, 글자 가운데 정렬을 했더라구요. 그래서 영문 병기 표기가 글자의 중간에 배치되도록 상하 정렬을 맞췄습니다. 


종이책에서는 이렇게 보입니다.



어렵고 까다로운 스타일은 없었는데 배경이미지로 밑줄을 넣고, 영문 병기를 글자 가운데로 맞춘건 처음이라 소개해 봤습니다.


'Tip&Tech > 이렇게 만들었어요' 카테고리의 다른 글

분노유발 심리학  (0) 2017.11.08
일개미 자서전  (0) 2017.11.03

설정

트랙백

댓글

일개미 자서전

제작 기간 : 2일

포인트 : 편집자가 신경을 많이 쓴 장 제목을 최대한 살리자.


이 책은 시간이 오래 걸릴 것 같지 않았는데 생각보다 오래 걸렸습니다. 이미지가 많이 들어있기도 했고, 인디자인에서 편집한 이미지라 원본 이미지를 쓰지 못하고 PDF에서 편집된 최종 이미지를 추출하는데 시간이 좀 걸렸지요. 그런데 가장 시간이 많이 걸린건 제목입니다. 4개 파트로 구성되어 있고, 각 파트별로 10 ~ 14개의 챕터로 나눠진 책입니다. 챕터가 40개 조금 넘게 구분되어 있습니다.


전자책 샘플 이미지 세번째 그림에 육각형 글머리 기호가 있고, 제목은 1줄 혹은 2줄로 세로로 늘어서 있는 장 제목 스타일이 있습니다. PDF(종이책)에는 이렇게 편지돼 있습니다.



본문에는 다른 포인트가 없어 이 부분을 살리다 보니 손이 만히 가서 편집하는 시간이 오래 걸렸습니다. 2일 중 1일은 40개의 제목을 넣는데 보냈네요.


아래는 편집이 끝난 '일개미 자서전' 캡쳐 화면입니다.



전자책 샘플 이미지



* 스마트폰에서는 제목과 본문 줄간격이 너무 벌어지면 보기 좋지 않아 종이책 보다 줄간격을 조금 벌렸다. 스마트폰을 통해 전자책을 보는 사람이 70% 정도 되기 때문에 PC나 태블릿 보다 스마트폰에 디자인을 맞췄다.  



'Tip&Tech > 이렇게 만들었어요' 카테고리의 다른 글

분노유발 심리학  (0) 2017.11.08
일개미 자서전  (0) 2017.11.03

설정

트랙백

댓글

테이블(table) 안쪽 여백(padding)과 가운데 정렬하기

오랜만에 스타일 팁 올립니다.


어떤 분이 테이블 안쪽 여백과 테이블 가운데 정렬 방법을 물으셨어요.


테이블(table) 태그는 기본 속성(attribute)을 몇개 갖고 있습니다.


글자 영렬(align), 테두리 모양(border), 배경색(bgcolor), 폭(width)...


전자책 만들 때 이런 속성은 사용하지 마세요!!!!!


태그 기본 속성을 사용해도 별 문제는 없습니다. 그런데 W3C에서도, IDPF에서도 스타일 편집은 CSS로, 그것도 외부 CSS로 하도록 하는 추세입니다. 


만들어 놓은거라 써도 상관은 없는데 앞으로는 이런거 전부 없앨거야~


그래서 이런 속성들 대부분은 HTML5에서 지원을 하지 않습니다.


그럼 이런건 어떻게 해야할까요? 

아래 표를 보세요. 위쪽 표는 테두리 색과 border-collapse 만 적용했습니다. 확인이 편하게 하려고 적용한 속성이고 이 두 속성을 제외하면 아무 스타일도 적용하지 않았을 때 테이블이 이런 모습으로 보여요.


이런 테이블을 아래쪽 표처럼 안쪽 여백을 주고, 테이블 자체를 가운데 정렬하려면 어떻게 해야할까요?

 


안쪽 여백이니 padding,가운데 정렬이니 text-align : center;를 주면 되겠지요?

그런데 이게 안먹힙니다.


여기서 2가지 문제가 생겨요. padding을 어디에 줘야 하는지, 그리고 text-align으로 가운데 정렬이 되지 않을 때 어떻게 가운데 정렬을 하는지.


먼저 스타일 코드를 보세요.


table, tr, td {

border : 1px solid #FF0000;

border-collapse: collapse;

}


.cell_padding {

padding : 1em;

}


.table_center {

display : table;

margin-left : auto;

margin-right : auto;

}


<table class="table_center">

<tbody>

<tr>

<td class="cell_padding">

안쪽 여백, 테이블 가운데 정렬

</td>

<td class="cell_padding">

안쪽 여백, 테이블 가운데 정렬

</td>

</tr>

<tr>

<td class="cell_padding">

안쪽 여백, 테이블 가운데 정렬

</td>

<td class="cell_padding">

안쪽 여백, 테이블 가운데 정렬

</td>

</tr>

</tbody>

</table>


1. padding은 셀(td)에 적용한다.


테이블에서 글자가 들어가는 곳은 tr 태그 안쪽입니다. table, td는 테이블의 구조를 만드는 태그고, td가 텍스트가 들어가는 셀을 만드는 태그예요. 그러니 텍스트가 들어가는 셀에 여백을 주고 싶다면 td 태그에 스타일을 적용해야겠지요.


2. 테이블을 가운데 정렬하기


테이블이나 div같은 상자를 가운데정렬 할때는 text-align 속성이 제대로 적용되지 않습니다.

적용할 방법이 없는건 아닌데 그럼 코드가 복잡해져요.

이럴 때 margin-left : auto; margin-right : auto;를 사용해 보세요.


div 박스일때는 display : table; 혹은 display : box; 속성도 같이 지정해야 합니다.

여기서는 display :table;이 없어도 되지만, 확실히 해주기 위해 추가했어요.


끝으로... 테이블을 오른쪽 정렬 하고싶다면?

.table_center {

display : table;

margin-left : auto;

}


이렇게 스타일을 바꿔보세요. 그럼 가운데 있던 테이블으 오른쪽으로 정렬됩니다.





설정

트랙백

댓글

국내 주요 유통사 뷰어 스타일 표현성 비교 https://goo.gl/QqqfKD

Tip&Tech 2017.09.28 09:52

국내 주요 유통사 뷰어 스타일 표현성 비교 https://goo.gl/QqqfKD


* 이 표는 2017년 9월 27일자 기준입니다. 이후 업데이트 등을 통해 수정될 수도 있으니 세부 사항은 반드시 위 링크로 들어가 확인을 해주세요.


CSS 속성을 제대로 지정한 것 같은데 뷰어에서 이상하게 보인 경험 있으시지요?

다른 뷰어에서는 잘 보이는데 특정 뷰어에서만 이상하게 나와 고생한 적도 있을거예요.


유통사 뷰어별로 문제가 있는 스타일을 정리하고 있습니다.

뷰어에서 표현이 되지 않는건데 CSS 스타일 수정하느라 쓸데없는 시간낭비 하지 마시고,

특정 유통사 뷰어에서만 이상하게 나오는 스타일이 있으면 알려주세요.

테스트를 해보고 해결 방법을 찾거나, 뷰어의 표현성 문제인지 확인해 드릴게요.

설정

트랙백

댓글

제작비가 부담되는 분들은 전자책 제작 지원사업을 신청해보세요.

참고 Site 2017.09.27 09:34

http://www.kpipa.or.kr/info/newsView.do?board_id=1&article_id=70977&pageInfo.page=&search_cond=&search_text=&list_no=1060


2017년 텍스트형 전자책 제작 지원(3사업 공고

 

 

한국출판문화산업진흥원은 <텍스트형 전자책 제작 지원사업을 아래와 같이 공고하오니

많은 참여 바랍니다.

 

1. 사업목적

  o 우수 콘텐츠의 전자책 제작지원으로 전자출판산업 경쟁력 강화 및 양질의 전자책 확충


2. 지원대상

  o 추천기관 도서 및 일반 도서

  ※ 추천기관 도서는 우선 선정 고려 대상임.

  ※ 추천기관 도서 확인 :독서인(https://www.readin.or.kr/home/index.do - (독서인+) - 추천도서

 

3. 지원사항

  o 지원내용

   - 총 240종 내외종당 30만원 이내 실비 지원(초과 금액은 출판사 부담)

   - EPUB, PDF 등 형식

 

  o 제외대상

   - 국고로 전자책 제작 지원금을 이미 받아 제작된 도서

   - 전자책으로 제작되어 기 유통되고 있는 도서

   - 저작권자와의 배타적발행권 설정 계약이 명확하지 않은 도서

   - 학습교재류정기간행물학회지 등

   - 시리즈 중 일부 콘텐츠로 한 콘텐츠로서의 완결성이 없는 경우

 

4. 신청개요

  o 신청기간 2017. 9. 11() ~ 10. 12()

 

  o 신청방법 온라인 접수

   * 전자책 바로센터 회원가입 후 사업 신청 가능(출판사등록필증 첨부)

  - 한국출판문화산업진흥원 홈페이지(http://www.kpipa.or.kr/main/main.do)

        로그인 후 전자책 바로센터 텍스트형 전자책 제작지원’ 온라인 신청

         * 신청구분 : ‘2017년 3차’ 선택

     * ‘전자책 바로센터’ 회원가입 시 익일 승인 처리 후 사업 신청 가능함.

  - 20권까지 신청 가능

   신청도서 정보 입력 시 도서명저자 및 역자명 등’ 내용을 정확히 입력

   - 저자 및 역자와의 계약서가 외국어본인 경우 중요사항 체크(밑줄후 첨부

     (중요사항 저자·역자 명계약기간이차적 저작물에 대한 명시 등)

      ※ 국문 번역본이 있을 시 원본과 함께 국문 번역본 제출 요망

 

  o 신청 준비서류(파일첨부)

      ① 저작권자(저자·역자)와의 전송권 또는 2차적 저작물에 대한 배타적 발행권 내용이 포함된

          계약서 1부      

      ② 일반’ 도서의 경우신청 도서 1(우편 접수)

         * ‘추천기관‘ 도서인 경우신청 도서 우편 발송 필요 없음.

 

  선정 후 절차

     전자책 제작 완료 후 서류 제출

① 전자책 제작 내역 공문(텍스트형 전자책 제작 내역서)

② 출판사 통장 사본

③ 제작사의 세금계산서 사본(출판사가 전자책을 자체 제작한 경우는 첨부 불필요)

 * '① 전자책 제작 내역 공문'은 선정된 출판사에 한하여 추후 발송함.

   - 판권란 또는 앞()표지 중에 택일하여 진흥원의 전자책 제작 지원 사실을 표기

     (이 전자책은 한국출판문화산업진흥원 ‘2017년 텍스트형 전자책 제작 지원’ 선정작입니다.

    제작 후 1개월 이내 유통 완료

 

  o 도서 제출처

    - 주소 : (54866) 전라북도 전주시 덕진구 중동로 63, 한국출판문화산업진흥원 2

전자출판팀 <텍스트형 전자책 제작지원담당자

    - 우편 제출 시, 마감일자 소인까지 유효


  o 선정 결과 발표 : 2017년 11월 중 발표(예정)

   

5. 선정 기본방침

  o 콘텐츠 우수성이 검증된 추천기관 도서 우선 선정 고려

  o 전자책 산업 육성 차원에서 가급적 많은 출판사에 선정기회 부여

 

6. 유의사항

  

  신청서 작성 전필히 해당 사업의 사업안내(첨부파일)’내용 확인을 부탁드립니다. 

  선정 결과 공고 및 지원금 지급 이후라도 명백한 선정 취소 사유가 밝혀질 경우 선정 취소 및

     지원금 환수 등 적절한 제재 조치를 취할 수 있습니다.

  신청하는 전자책에 대해 저작권자와 전송권 또는 배타적발행권 설정 계약을 체결하여야 하며,

     이로 인해 발생되는 문제에 모든 책임이 출판사에 있습니다.

 

 7. 기타사항

   접수도서는 반환하지 않으며 선정결과 발표 이후 국민책나눔센터를 통하여 소외계층 등에

       기증될 예정입니다. 

 

 

    ※ 문의 : 전자출판팀 백창헌 주임(☎ 063-219-2755), 김솔 주임(☎ 063-219-2759)

 

 

 

 

한국출판문화산업진흥원장

설정

트랙백

댓글

아두이노 스마트카를 리모컨으로 조정한다.

아두이노를 사놓고 뭘 어찌 해야 할지 모르는 분들이 계실 것 같아요.

저도 장난감 삼아 아두이노 스마트카 킷을 구입했는데, 조립을 다 해놓고 한참 멍하니 있었습니다.

무엇부터 시작을 해야 할 지 모르겠더라구요.


아두이노 스마트카는 전혀 스마트하지 않았습니다.

조립을 끝낸 스마트카는 두뇌는 있지만 백지상태로 텅 비어있어요.

두뇌에 무언가를 채워 넣어야 하는데 저처럼 프로그래밍을 전문으로 하지 않던 사람들한테는 막막하기만 할 뿐입니다.


그래도 하나씩 연구해 가며 코딩을 하다 보니 모터가 돌아가고, 바퀴가 돌고 방향을 전환하는 것 까지 성공을 했네요.


저같은 생초보가 아두이노를 갖고 놀기 위해 해야할 일들을 하나씩 정리해 볼까 해요.


그 첫번째로 스마트카 소스를 정리해 봤습니다.

아두이노 스마트카 킷을 사놓고 뭘 해야하나 생각하신 분들은 이 코드를 활용해 보세요.

코드를 이해 못해도 괜찮아요. 아두이노 스마트카가 움직이는걸 보면 코드를 이해하고 싶은 욕구가 마구 생길테니까요^^



집에 있는 TV 리모컨으로 스마트카를 조종하는 코드입니다.

리모컨은 어떤거든 상관 없지만, 리모컨의 IR 신호는 직접 찾아야되요.

IR 신호를 찾는 방법은 나중에...ㅜ.ㅜ


깡통 스마트카를 조립해 놓고 멍하게 계셨던 분이라면 아래 코드를 참고해서 깡통을 스마트하게 만들어보세요^^


/* TV 리모컨의 IR 신호를 먼저 확인하세요. 이 신호는 제 리모컨이니 갖고 계신 리모컨의 신호를 확인해 그에 맞는 값을 넣어야 합니다. 


0xFF629D; // 전진

0xFF6897; // 후진

0xFFE21D; // 좌회전

0xFFA857; // 우회전

0xFFAA55; // 정지

 */

 

 

#include <IRremote.h>

 

 

int IRControl = 11;

IRrecv irrecv(IRControl);

decode_results results;


/*스마트카 조종을 위해 변수를 만듧니다. 제 리모컨은 입력받는 숫자가 아두이노의 int범위를 넘어가더라구요. 그래서 리모컨 값에서 0xFF0000을 빼는 걸로 조정을 했습니다.*/


const int irForward = 0xFF629D - 0xFF0000; // 전진  25245

const int irBack = 0xFF6897 - 0xFF0000; // 후진  26775

const int irLeft = 0xFFE21D - 0xFF0000; // 좌회전 57885

const int irRight = 0xFFA857 - 0xFF0000; // 우회전 43095

const int irStop = 0xFFAA55 - 0xFF0000; // 정지 43605

 

/*아두이노와 모터를 연결한 핀 번호입니다. 이 값도 모두 다를거예요. 숫자를 바꾸거나, 모터를 동일한 핀에 연결하세요.*/


int rightForward = 6;  //오른쪽 전진

int rightBack = 9; //오른쪽 후진

 

int leftForward = 5; //왼쪽 전진

int leftBack = 10; //왼쪽 후진



void setup() {

 

  Serial.begin(9600);

 

/*리모컨의 값을 입력받습니다.*/


  irrecv.enableIRIn();

 

/*모더를 구동시키는 함수?*/

/*자동차 조종은 왼쪽 바퀴 하나, 오른쪽 바퀴 하나 이렇게 2개로 합니다. 앞으로 가려면 왼쪽 바퀴와 오른쪽 바퀴를 앞쪽으로, 왼쪽으로 돌려면 왼쪽 바퀴를 멈추고 오른쪽 바퀴를 앞쪽으로 돌리면 되요. 그래서 컨트롤은 총 4개가 필요합니다. 왼쪽 바퀴 앞, 뒤 오른쪽 바퀴 앞, 뒤 이렇게 4개 조합이면 앞, 뒤, 왼쪽, 오른쪽 조종이 가능합니다. */


  pinMode(rightForward,OUTPUT);

  pinMode(rightBack,OUTPUT);

 

  pinMode(leftForward,OUTPUT);

  pinMode(leftBack,OUTPUT);

}

 

/*명령을 실행시키는 영역*/

void loop() {

 

/*리모컨 값(irrecev)에 따라 명령을 수행합니다. 

리모컨의 전진버튼(0xFF629D)을 눌렀다면 먼저 이 값에서 0xFF0000을 빼 value에 저장합니다.

리모컨에서 입력받은 값이 너무 커서 이 과정을 추가한거예요. 리모컨에서 받는 값이 크지 않다면 이렇게 하지 않아도 됩니다.


그럼 value에 0x629D가 저장됩니다. 0x629D는 위에서 선언한 irForward와 같은 값이에요.


switch(value) = switch(0x629D) = switch(irForward)가 됩니다. 


그럼 case irForward가 실행이 되는거에요.


그럼 스마트카는 모든 바퀴를 멈춥니다.

바퀴를 멈추는 이유는, 명령을 명확하게 전달하기 위해서예요. 앞으로 전진하려면 왼쪽 바퀴와 오른쪽 바퀴가 앞으로 돌아야하는데, 아두이노가 뒤로 가는 상황에서 양쪽 바퀴를 앞으로 돌게 하면 명령에 충돌이 생기네요. 아두이노가 양쪽 바퀴를 앞으로, 양쪽 바퀴를 뒤로 라는 서로 충돌하는 명령을 내려 오류가 나더라구요.


딜레이가 0.05초기 때문에 멈추는게 거의 느껴지지 않아요.


바퀴를 멈춘 후에 startForward();라는 명령을 실행합니다.

startForward();는 아래쪽을 봐주세요.


*/


  if (irrecv.decode(&results)) {

   unsigned int value = results.value - 0xFF0000 ;

   Serial.println(value);

   switch(value) {

   

      case irForward:

          stopAll();

          delay(50);

          startForward();

         break;

        

      case irBack:

          stopAll();

          delay(50);

          startBack();

         break;

        

      case irLeft:

         stopAll();

         delay(50);

         startLeft();

         break;

        

      case irRight:

          stopAll();

          delay(50);

           startRight();

          break;

               

      case irStop:

           stopAll();

      break;  

   }

   irrecv.resume(); // Receive the next value

 }

}



/*아두이노 컨트롤 명령을 하나씩 객체로 만들어놨습니다.

앞으로 가는 명령인 startForward()는 오른쪽, 왼쪽 바퀴를 앞으로 95 속도로 구르게 만들었어요.

아두이노는 모터가 돌아가는 속도를 조절할 수 있습니다. 0부터 255까지 가능한데, 싸구려라 그런지 제 아두이노는 95 밑으로는 바퀴가 구르지 않더라구요. 255는 속도가 너무 빨라 가장 느린 속도로 설정했습니다. 속도를 조절하고 싶다면 255보다 작은 범위에서 조절하면 되요.

*/

 

/*앞으로 가는 명령*/

void startForward()  {

  analogWrite(rightForward, 95);

  analogWrite(leftForward, 95);

  analogWrite(rightBack, 0);

  analogWrite(leftBack, 0);

}

 

/*뒤로 가는 명령*/

void startBack()  {

  analogWrite(rightForward, 0);

  analogWrite(leftForward, 0);

  analogWrite(rightBack, 95);

  analogWrite(leftBack, 95);

}

 


/*회전 명령은 2종류입니다. 

왼쪽으로 회전을 한다면

-작게 도는 명령은 왼쪽 바퀴가 뒤로, 오른쪽 바퀴가 앞으로 돌아요. 그럼 스마트카가 제자리에서 360도 회전을 합니다.


- 크게 도는 명령은 왼쪽 바퀴가 멈추고 오른쪽 바퀴만 앞으로 돌아요. 그럼 왼쪽 바퀴를 축으로 해서 오른쪽 바퀴가 원을 그리며 회전을 합니다. 


회전 방법을 바꾸고 싶으면 위쪽 case 코드의 startLeft()를 startLeftsmall()로 수정하면 되요. 아니면 리모컨 신호를 2개 더 받아서 큰 회전, 작은 회전을 추가할 수도 있습니다.

*/



/*왼쪽으로 작게 도는 명령*/

void startLeftsmall()  {

  analogWrite(rightForward, 95);

  analogWrite(leftForward, 0);

  analogWrite(rightBack, 0);

  analogWrite(leftBack, 95);

}

 

/*오른쪽으로 작게 도는 명령*/

void startRightsmall()  {

  analogWrite(rightForward, 0);

  analogWrite(leftForward, 95);

  analogWrite(rightBack, 95);

  analogWrite(leftBack, 0);

}

 

/*왼쪽으로 크게 도는 명령*/

void startLeft()  {

  analogWrite(rightForward, 95);

  analogWrite(leftForward, 0);

  analogWrite(rightBack, 0);

  analogWrite(leftBack, 0);

}

 

/*오른쪽으로 크게 도는 명령*/

void startRight()  {

  analogWrite(rightForward, 0);

  analogWrite(leftForward, 95);

  analogWrite(rightBack, 0);

  analogWrite(leftBack, 0);

}

 

/*정지 명령*/

void stopAll()  {

  analogWrite(rightForward, 0);

  analogWrite(leftForward, 0);

 

  analogWrite(rightBack, 0);

  analogWrite(leftBack, 0);

}


설정

트랙백

댓글

모르는 사람이 의외로 많은 CSS 문법 (2)

앞의 글에서 선택자 만드는 규칙을 알려드렸습니다.


1. 태그 선택자 : HTML 태그를 스타일 선택자로 사용

2. 클래스 선택자 : .classname 으로 사용자가 필요한 스타일 선택자 생성

3. ID 선택자 : HTML요소에 고유한 성격을 부여하는 ID를 선택자로 활용


여기에 추가로, 


1. 활용할 수 있는 HTML 태그가 있으면 적극 활용하고

2. 예약어(태그, 속성 등에 쓰이는 단어)는 가급적 선택자로 사용하지 말아야 한다.


는 주의사항까지 정리해 드렸습니다.

긴 글을 쓴 것 같은데 이 몇줄로 간단히 요약이 되네요 ㅜ.ㅜ


이번 글에서는 특수 선택자를 간단히 정리해 보겠습니다.

특수 선택자란 태그, 클래스, ID 선택자와는 달리 특수한 목적을 위해 사용하는 선택자를 의미합니다. 특수 선택자라는 용어는 뜻이 명확히 규정되어 있지 않아 제가 설명드리는 범위와 다른 설명에서 사용하는 범위가 다를 수 있습니다. 여기에서 얘기하는 '특수 선택자'는 태그, 클래스, ID를 제외한 특수한 목적으로 지정된 선택자를 의미합니다.


1. @page Rule


전자책 스타일에서 간혹 보이는 선택자입니다. 참고로 @가 붙으면 선택자라고 하지 않고 Rule이라고 합니다. @font-family Rule, @page Rule 하는 식으로요.


@page는 인쇄를 위한 규칙입니다. HTML은 '가변형 화면' 즉 폭과 높이가 바뀌는 화면에 내용을 표현하기 위한 언어입니다. 그런데 화면을 인쇄하려면 A4, B5처럼 정해진 크기에 맞춰야하지요. 지금 보고 계신 이 내용을 A4용지 프린터로 인쇄하면 어떻게 나올가요? 보이는 그대로 나올까요?(궁금하면 해보세요 ^^)


@page는 인쇄를 할 때 여백을 지정하기 위한 규칙입니다. 그래서 인쇄에 필요한 페이지 사이즈(size), 상하좌우 여백(margin) 등 제한적인 속성만 사용할 수 있어요. 


전자책 전체 페이지의 마진을 줄 때 사용할 수 있지만, 그리 권해드리고 싶은 속성은 아닙니다. page-break처럼 인쇄를 목적으로 만든 규칙이라 다양한 화면에서 보는 전자책에 어울리지는 않습니다. 그래도 마진은 문제 없이 지정되니 '쓰면 안된다' 정도는 아니에요.


@page에 대한 자세한 설명은 이 글을 참고하세요.

https://developer.mozilla.org/ko/docs/Web/CSS/@page


2. * 전체 선택자


앞에 곱하기(*) 기호는 오타가 아닙니다. 이 선택자가 * 예요.


* {

margin : 0;

padding : 0;

font-family : '명조';

font-size : 1.2em;

...

}


전체 선택자로 문서 전체에 영향을 주는 스타일을 지정할 수 있습니다.

만약 책의 모든 글씨체를 '명조'로, 글자 크기를 1.2em으로 지정하고 싶다면 위 스타일을 넣어보세요.

모든 CSS 선택자에 '명조'를 지정하지 않아도 알아서 명조가 지정이 될거예요.


책 전체에 적용해야 하는 기본 설정이 있다면 전체 선택자를 사용할 수 있습니다. @page 속성 대신 여백을 줄 때 주로 사용해요. 그리고 줄간격, 문단간격을 없애려고 모든 선택자에 margin : 0; padding : 0;을 추가하는 수고도 덜 수 있습니다.


3. Pseudo-class 선택자(가상 클래스 선택자)


가상 클래스 선택자는 특정 항목이 특수한 상태일 때만 속성을 부여하는 선택자입니다.

예를 들어, 링크를 생각해 보세요.


링크 텍스트 : 파란색 밑줄

링크 클릭상태 : 빨간색 밑줄

클릭했던 링크 : 갈색 밑줄


링크 속성에는 이렇게 3가지 스타일이 있습니다.

이 스타일을 변경하려면 a 태그 스타일을 수정해 주면 되요.

a {

color : #000000;

text-decoration : none;

}


이러면 밑줄이 사라지고 글자 색은 검정색이 됩니다. 


문제는, 링크를 클릭한 상태에서도, 링크를 다녀와도 항상 밑줄 없는 검정색이라는거예요.

각 상태별로 다른 스타일(예를 들어 링크를 클릭하고 있을 때 노란 바탕색)을 주고 싶으면?


이럴 때 가상 클래스 선택자를 사용할 수 있습니다.


a:link {

/*링크가 걸린 텍스트의 스타일*/

}


a:visited {

/*방문했던 링크 텍스트의 스타일*/

}


a:hover {

/*링크 위에 마우스를 올렸을 때 스타일. 터치 모니터에서는 효과를 나타내기 어려움*/

}


a:active {

/*링크를 누르고 있는 상태에서 텍스트의 스타일*/

}


이 외에도 다양한 가상 클래스 선택자가 있습니다.


p::first-letter {

color : red; /*문단의 첫 글자만 빨간색으로*/

}


p::first-line {

color : red; /*문단의 첫번째 줄만 빨간색*/

}


p::before, p::after {

content :("!!경고!!");/*문단의 앞뒤에 !!경고!! 문구 자동 삽입*/

}


가상 클래스는 종류가 다양해서 제가 자주 쓰는 몇가지만 여기에 소개합니다. 

이 중에 ::before, ::after는 정말 활용도가 높습니다.

더 자세히 알고싶다면 이곳을 참고하세요.

https://www.w3schools.com/css/css_pseudo_classes.asp


오늘은 여기까지.

다음 글에는 복합선택자(Combinator)를 설명할게요. 이전 글에서도 몇번 설명한 적이 있는데 전체적으로 다시 정리하겠습니다. 

설정

트랙백

댓글


티스토리 툴바