국내 주요 유통사 뷰어 스타일 표현성 비교 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)를 설명할게요. 이전 글에서도 몇번 설명한 적이 있는데 전체적으로 다시 정리하겠습니다. 

설정

트랙백

댓글


티스토리 툴바