구글 블로거에서 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. 화면 전송을 끝내고자 할 때는, 탭 전송에서 화면 전송중인 크롬캐스트 디바이스를 클릭하거나, 크롬 브라우저를 종료하면 된다.
자세한 내용 보기

쉽게 설명한 파티클 필터(particle filter) 동작 원리와 예제

이미지
파티클 필터(particle filter)는 칼만 필터(kalman filter) 와 마찬가지로 노이즈가 있는 환경에서 측정된 데이터를 필터를 사용해 실제 위치를 추정하는 도구다. 파티클 필터(particle filter)는 보통 가우시안 분포가 아닌 측정 데이터를 다루기 위해 사용된다고 한다. 물론 가우시안 분포의 데이터에서 사용하지 말라는 건 아니다.  본 포스트에서는 파티클 필터(particle filter)의 어려운 수학적인 내용은 제하고, 쉽게 예를 들며 필터의 동작원리에 대해 알아보았다. 파티클 필터(particle filter)에 대해 검색해 보면 아래와 같은 그림을 많이 보게 된다. 아래 그림은 파티클 필터의 estimation cycle을 도식화한 것이다. <’Real-Time Tracking of Multiple Moving Objects Using Particle Filters and Probabilistic Data Association’ original scientific paper 中> 위 그림의 검은색 원들은 particle을 의미한다. 이 particle에는 보통 위치 데이터와 weight가 포함된다. 검은색 원이 큰 것이 있고 작은 것이 있는 이유는 weight가 크고 작음을 의마한다. typedef struct _particle_t {    int x;    int y;    float weight; }particle_t; 노이즈가 있는 환경에서 레이저 센서나 레이더등을 이용하여 물체의 위치를 측정할 때를 가정해 순서대로 이 필터가 동작하는 과정에 대해 알아 보겠다. (순서는 위 그림과 조금 다르다) 1. 초기 상태 측정 범위안에 랜덤 혹은 일정한 간경으로 particle을 뿌려 놓는다. 이 떄 particle...
자세한 내용 보기

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) {...
자세한 내용 보기

간단한 칼만 필터(Kalman Filter) 소스 코드와 사용 예제

이미지
칼만 필터(Kalman filter)는 노이즈가 포함된 측정치로 부터 실체 상태를 추정(推定, estimation)하는 도구다. 본 포스트의 칼만 필터 소스는 한 타겟의 위치를 추정하는 용도로 만들어 졌다.  위키피디아 페이지( https://en.wikipedia.org/wiki/Kalman_filter )와 “Human Target Tracking in Multistatic Ultra-Wideband Radar” 논문 등을 참조하여 칼만 필터의 공식을 구현하였다. F,H,Q,R matrix는 아래와 같은 값으로 정하여 사용하였다. 칼만 필터 c++ 소스는 아래와 같다.  #include <malloc.h> #include <Eigen/Dense> __declspec(align(16)) class CKalmanFilter { private: BOOL mFirst; Eigen::MatrixXd mX; Eigen::Matrix4d mP; Eigen::Matrix4d mF; Eigen::MatrixXd mH; Eigen::Matrix2d mR; // measurement noise covariance Eigen::Matrix4d mQ; // process noise covariance public: void* operator new(size_t i) { return _mm_malloc(i, 16); } void operator delete(void* p) { _mm_free(p); } CKalmanFilter(double process_var, double measure_var, double T) { ...
자세한 내용 보기