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

간단한 칼만 필터(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) { ...
자세한 내용 보기

안드로이드(android) 전체 화면 시계 앱(clock app) 예제 코드

이미지
본 글은 안드로이드 전체 화면 시계 앱 예제 소스를 싣고 있다. 폰에서 기본으로 제공하는 시계app에는 초까지 나오지 않아 초가 나오는 시계를 만들기로 했다. 원하는 스타일은 아래처럼 검은 바탕에 날짜와 시간만 나오는 것이다.   먼저 android studio에서 새 프로젝트를 생성한다.    Activity는 Empty Activity를 사용했다.   팔레트에 있는 TextClock을 넣어서 빌드한 후 실행해보면 초는 안나오고 오전/오후, 시간 그리고 분이 나온다.   TextClock는 사용하지 말고, Calender에서 시간을 받아온후 TextView를 통해 시간을 보여주기로 방향을 전환했다. Activity_main에 날자를 보여줄 TextView와 시간을 보여줄 TextView두개를 만든다. 그리고 배경은 검은색으로 설정한다.   Runnable을 사용하여 Thread 내부에서 Calendar에서 받아온 시간을 TextView에 업데이트 하도록 코드를 구성했다. 안드로이드 앱 실행 중 화면이 꺼지지 않도록 아래 코드도 추가했다. getWindow().addFlags(WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON) ; MainActivity.java package com.example.r.myclock; import android.graphics.Color; import android.graphics.Point; import an...
자세한 내용 보기

mkfs.fat Device or resource busy 에러 해결법

이미지
 리눅스에서 SD 카드를 포맷할 때 아래와 같이 "Device or resource busy"에러를 출력하며 포맷이 되지 않는 경우가 있다. mkfs.fat: unable to open /dev/mmcblk0p1: Device or resource busy 해결법을 찾아보았다. 이 문제의 원인은  1. 파티션 dev path 가 맞지 않거나,  2. umount가 완전히 이루어 지지 않았거나,  3. mbr파티션에 문제가 있어 발생한다고 한다.  파티션에 문제가 있는 경우 fdisk를 사용하면 문제를 해결할 수 있다. umount에 문제가 있는 경우, umount할 때 -l 옵션이 사용되는 경우 umount 명령이 끝나도 커널 내부에서 리소스가 계속 사용될 가능성이 있다고 한다.  # umount -l /mnt/mmc umount2("/mnt/mmc",MNT_DETACH); 이런 경우 일정 시간 후 다시 시도하면 에러 없이 포맷이 되는 경우가 있다. 또, umount 가 되지 않을 때 "lsof" , "fuser" 명령어를 사용하여 어떤 프로세스가 mmc를 사용하고 있는지도 확인 가능하다. * lsof에서 사용 내역이 없다고 나와도, fuser에서 나올수 있다.  lsof, fuser 명령에서도 mmc를 사용하는 프로세스가 없는 경우에도 "Device or resource busy"에러가 발생할 경우, umount에 -lf 옵션을 두어 강제로 언마운트 후 SD 카드를 포맷하면 "Device or resource busy"에러가 나타나지 않을 확률이 높아진다. # umount -lf /mnt/mmc umount2("/mnt/mmc",MNT_DETACH | MNT_FORCE); * fat32에서는 "-f","...
자세한 내용 보기