구글 블로거에서 css를 사용하여 블로그 상단에 드롭다운 메뉴 만들기

 이전 사용하던 메뉴에 문제가 있어서 다시 만들기로 했다.



1. 쓸 만한 디자인의 메뉴를 찾아보자.

http://cssmenumaker.com/css-menus 에서 쓸 만한 메뉴 디자인 css파일을 다운받을 수 있다.




2. 블로거 레이아웃의 가젯 추가에서 HTML/JavaScript 를 추가한다. 

메뉴에 보일 리스트들을 콘텐츠 창에 추가한다. 

위 1번에서 다운받은 메뉴 css가 몇 개의 서브 리스트를 지원하는지 확인하고 리스트를 구성해야 한다. 다운받은 파일내에 예제로 사용할 수 있는 index.html 파일이 있으므로 이를 참조하자.

<div id='cssmenu'>
<ul>
   <li class='active'><a href='#'><span>Home</span></a></li>
   <li class='has-sub'><a href='#'><span>Products</span></a>
      <ul>
         <li><a href='#'><span>Product 1</span></a></li>
         <li><a href='#'><span>Product 2</span></a></li>
         <li class='last'><a href='#'><span>Product 3</span></a></li>
      </ul>
   </li>
   <li class='has-sub'><a href='#'><span>About</span></a>
      <ul>
         <li><a href='#'><span>Company</span></a></li>
         <li class='last'><a href='#'><span>Contact</span></a></li>
      </ul>
   </li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>


만들어진 HTML/JavaScript 가젯을 원하는 위치에 놓자




3. menu의 css를 Blog 테마에 추가.

Blog 테마에 추가하는 방법은 두가지가 있다.

테마 디자이너의 메뉴 중 '고급' > 'CSS추가'에서 추가하는 방법과 테마 HTML 편집에서 추가하는 방법이 있다. 

테마 디자이너의 CSS추가에서 추가하는것이 편하므로 그 방법을 사용하자.

테마 디자이너는 Blogger 메뉴의 레이아웃 항목에서 진입할 수 있다.




 테마 디자이너의 고급 메뉴의 CSS추가 항에 다운받은 styles.css의 내용을 복사해 넣으면 Blog 테마에 CSS가 추가된다. css가 추가되면 바로 옆 미리보기에서 스타일 변경된 메뉴를 확인할 수 있다.





4. 아이콘 이미지를 사용한 메뉴


<img /> 태그를 사용하면 메뉴 항목에 아이콘 이미지를 사용할 수 있다.

예를 들어 메뉴의 Home을 글 대신 이미지를 사용하고 싶다면 다음 라인을 수정하면 된다.

수정 전

<li><a href="/"><span>Home</span></a></li>

수정 후

<li class='active'><a href='#'>
    <img width="20" height="15" 
    src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv43ZobAL8ngQl3R4p2Yeielpl_ABaCGYWNc25d8aJWG_NL9AW9Vp7x7PexxtSv5d4MaKjbKjVG9xbwyjhFDIisdWgdbQzfs8zpk726gNm6CG5hW8fGlav__rCizZ2nxGSYGBL-u8ASaR4/s113/face.jpg"/>
   </a></li>


src는 이미지의 위치 url을 사용하면 된다.


댓글

댓글 쓰기

이 블로그의 인기 게시물

간단한 cfar 알고리즘에 대해

이미지
Constant False Alarm Rate (CFAR)은 기본적으로 테스트하고자 하는 위치의 cell과 주변 cell의 관계를 보고 테스트 cell이 Target 인지 아닌지를 구분하는 알고리즘이다. 주변 cell과의 관계를 어떤 방식으로 비교하는가에 따라 여러가지 알고리즘이 존재한다. CA-CFAR, GO-CFAR, SO-CFAR, OS-CFAR, VI-CFAR, OSVI-CFAR등이 있다. 이 많은 알고리즘 중 간단하고 기본적인 CA-CFAR과 OS-CFAR에 대해 알아보자. CA-CFAR (Cell Average CFAR)   CA-CFAR의 원리는 위 그림과 같다. 좌우의 Reference Cell의 평균에 Scale Factor T를 곱하고, ADT (Average Decision Threshold)를 합하여 CUT가 타겟인지 아닌지를 구분한다. ADT는 신호의 white noise를 고려하기 위해 더해준다. Scale Factor T와 ADT는 아래와 같은 공식으로 사용할 수 있다. 사용하려는 시스템에 따라 공식은 달라질 수도 있다.   Pfa는 False Alarm 발생 확률을 나타내고, M과N는각 좌우의 Reference Cell의 개수를 나타낸다. OS-CFAR (Order Static CFAR)   OS-CFAR의 원리는 위 그림과 같다. 좌우의 reference cell중 K번째 큰 값의 cell을 Reference Cell의 대표 값으로 정해 CUT가 타겟인지 아닌지를 구분한다. 보통 전제 reference cell의 크기 순에서 (3*N)/4 번째 cell이 성능이 좋다고 알려져 있다. CFAR 사용 예 아래 사진은 위 두 cfar을 사용한 예다. 파란색은 신호이며, 붉은 색은 char을 사용해 만든 threshold이다. 이 threshold보다 큰 값의 신호가 있는 위치에 실제 Tar...
자세한 내용 보기

windows에서 간단하게 크롬캐스트(Chromecast)를 통해 윈도우 화면 미러링 방법

이미지
 Windows 10에서는 미라캐스트를 사용한 무선 디스플레이연결을 지원한다. 하지만, 만약 크롬캐스트(Chromecast)를 사용해 윈도우 화면을 미러링 하고자 할 때, 구글 크롬 브라우저를 사용하면 쉽고 편하게 할 수 있다. https://www.google.co.kr/intl/ko/chrome/ VLC에서도 비디오 화면을 미러링 할 수 있다고 하는데, 잘 동작하지 않고 윈도우 화면 전체를 미러링하지 않아 크롬 브라우저를 사용하고 있다. 크롬 캐스트 윈도우 화면 전송 방법 0. 크롬 캐스트 디바이스와 windows pc는 같은 네트웍에 연결되어 있어야 한다. (같은 공유기에 연결되어 있어야 한다.) 1. 크롬 브라우저의 우측 상단의 메뉴 > 전송을 클릭하면, 현재 사용가능한 크롬캐스트 디바이스 항목을 볼 수 있다. 2. 편의에 따라 탭 전송 아이콘에서 우측 버튼을 클릭하여 항상 표시되게 설정할 수도 있다. 3.  윈도우 화면 전체를 전송하고자 할 때는 탭 전송의 소스에서 '데스크톱 전송'을 선택하고, 바로 위의 크롬캐스트 디바이스를 클릭하면 된다. ** 소스는 미러링 중에는 변경되지 않는다. 먼저 소스를 선택하고 미러링해야 한다.  4. 화면 전송을 끝내고자 할 때는, 탭 전송에서 화면 전송중인 크롬캐스트 디바이스를 클릭하거나, 크롬 브라우저를 종료하면 된다.
자세한 내용 보기

base64 인코딩 디코딩 예제 c 소스

이미지
본 글은 base64 encoder/decoder예제 c 소스 코드를 싣고 있다. BASE64 BASE64는 일련의 데이터를 64종류" ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/ "의 문자만을 이용하여 표현하도록 하는 부호화 방식이다. Base64는 인터넷 이메일 프로토콜이나 http url등에서 사용된다.  부호화 과정은 아래와 같다. 문자 : Hello Hex 코드 : 0x48 0x65 0x6c 0x6c 0x6f 8bits bin 코드: 01001000 01100101 01101100 01101100 01101111 8비트 단위의 문자를 6비트 단위로 분리한다. 6bits bin 코드 : 010010  000110  010101  101100  011011  000110  1111  00  ‘=’ 6비트 2진 코드 값은 BASE64 코드 테이블의 인덱스이고 각 인덱스의 문자로 base64 부호화 한다. 마지막 모자라는 비트는 0으로 채우며, 4글자 단위로 부호화 하기 때문에 4글자가 안되면 ‘=’기호를 사용해 4글자를 맞춘다. Base64 코드 : aGVsbG8= Base64 Encoder source code Base64 인코더 소스는 아래와 같다. 위의 부호화 예대로 text데이터를 받아 6bit 단위로 나누어 base64 코드 테이블에 맞춰 부호화를 진행한다. static const char base64code_ascii[] = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/"; int text2base64_size(const char *text) {...
자세한 내용 보기

아두이노(arduino) 심박센서 (heart rate sensor) 심박수 측정 example code

이미지
하드 정리 중 예전에 만든 아두이노에서 심박센서를 사용하여 심박수 측정하는 소스 코드가 있어, 이를 블로그 글로 남긴다. 인터넷 쇼핑몰에서 쉽게 구할 수 있는 저렴함 센서가 사용 되었으며, 연결은 아래 그림과 같이 연결 되었다.      심박센서의 하트 부위에 손가락을 올려 놓고, 아날로그 A0값을 읽으면 심박의 움직임에 따라 A0값이 변하는 동작이 간단한 센서이다. 아래 그림의 왼쪽은 일정 시간 간격 마다 A0값을 읽어 시리얼 플로터로 본 심박에 따른 데이터이고, 오른쪽은 평균 필터를 사용해 노이즈를 제거한 후 시리얼 플로터로 본 데이터이다.   심박수는 수집된 데이터에서 threshold를 넘는 peak들의 시간 간격을 측정하여 계산한다.  peak위치를 찾는 방법은 여러 가지 방법이 있으나, 소스에 구현된 방법은 신호의 기울기가 +에서 0또는 -로 바뀌는 위치를 peak으로 선정하도록 하였다. 심장이 t시간동안 N회 뛰는 경우 심박수는 heart rate bpm = (N/t)*60 을 표현 할 수 있다.   threshold는 데이터를 보고 임의로 정했으며, 측정 데이터에 따라 자동으로 정하고 싶을 때는 cfar 같은 방법을 사용하면 된다.  소스는 아래와 같다. #define heartbit_adc_threshold      511 #define meanfilter_size             5 #define heartbit_tick_buffer_size   10 ...
자세한 내용 보기

python asyncio를 이용한 async socket server client example code

 본 포스트는 python asyncio 라이브러리를 사용한 async socket 서버와 클라이언트 예제 코드를 싣고 있다. 이전 non-blocking socket의 예제를 asyncio 라이브러리에 맞게 변형하였다.  python socket API 와 non-blocking socket server client example code 1. asyncio (Asynchronous I/O) asyncio는 async/await 구문을 사용해 multi-thread처럼 동시에 진행하는 코드를 작성하는 라이브러리다. 네트워크 및 웹 서버, DB 연결, 분산 작업 대기열을 제공하는 분산 프레임 워크의 기반으로 사용된다고 한다. (  https://docs.python.org/3.7/library/asyncio.html ) async socket server/client 구현에 필요한 asyncio 라이브러리 API는 예제 코드를 보면서, 설명하도록 하겠다. 2. Async socket client example code import asyncio async def pingpong_client():     try:         reader, writer = await asyncio.open_connection(host='localhost',port=8000)     except OSError:         print('connection fail')         return          for _ in range(10):         writer.write(b'ping')     ...
자세한 내용 보기