로마장군의 블로그

[SSL] [letsencrypt] [certbot] 와일드카드 인증서 발급하기

1. 환경

ubuntu 20.x

nginx

2. 설치

apt-get install letsencrypt -y

3. 인증서 발급

; example.com 도메인에 대해 와일드카드 인증서를 발급받는다.

certbot certonly --manual -d *.example.com -d example.com --preferred-challenges dns

; 메일주소 입력

; 동의 Y

; 동의 Y ...

; TXT 삽입문구 : DNS 설정에 추가

; TXT 삽입문구 : DNS 설정에 추가 (TXT가 2개임)

; 잠시 시간 대기 후 Enter [이때 Enter 치기 전에 네임서버에서 DNS 정보를 변경해야 함]

; 발급 완료

; 발급위치 : /etc/letsencrypt/live/

4. 인증서 설치

; 가상호스트별로 된 설정파일에 SSL 설정을 추가한다.

vim /etc/nginx/site-enabled/www.example.com

server {

listen 80;

listen [::]:80;

# SSL configuration

listen 443 ssl;

listen [::]:443 ssl;

ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;

ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;

5. nginx 재시작

service nginx restart

; 실행이 안되면 웹로그 등을 열어본다.

[javascript] [aniView] 애니매이션 구현하기

// URL :
https://jjcosgrove.github.io/jquery-aniview/

// 라이브러리 삽입
< script src="https://unpkg.com/jquery-aniview/dist/jquery.aniview.js">< / script >

// 또는 CORS 대응코드
< script src="https://unpkg.com/jquery-aniview@1.0.3/dist/jquery.aniview.js" integrity="sha384-uvboBeyPkVGldyoicVJST1JEAbxI2W0lG2fFOyGvahZrC4jWiv0vmryxw9NXIEn6" crossorigin="anonymous">< /script >

// 실행
$('.aniview').AniView();

// 옵션과 함께 실행
var options = {
animateClass: 'animated',
animateThreshold: 100,
scrollPollInterval: 50
}
$('.aniview').AniView(options);

// 태그에 적용하기 (v3)
< div class="aniview" data-av-animation="slideInRight">< /div>

// 태그에 적용하기 (v4)
< div class="aniview" data-av-animation="animate__jackInTheBox">< /div>

[javascript] [aos] 애니매이션 효과 적용하기

// 라이브러리 삽입
< link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
< script src="https://unpkg.com/aos@next/dist/aos.js">< /script>

// 실행
AOS.init();

/* 위쪽으로 페이드 효과 */
< div data-aos="fade-up">< /div>

/* 아래쪽으로 페이드 효과 */
< div data-aos="fade-down">< /div>

/* 오른쪽으로 페이드 효과 */
< div data-aos="fade-right">< /div>

/* 왼쪽으로 페이드 효과 */
< div data-aos="fade-left">< /div>

/* 왼쪽으로 플립 효과 */
< div data-aos="flip-left">< /div>

/* 오른쪽으로 플립 효과 */
< div data-aos="flip-right">< /div>

/* 위쪽으로 플립 효과 */
< div data-aos="flip-up">< /div>

/* 아래쪽으로 플립 효과 */
< div data-aos="flip-down">< /div>

/* 줌 효과 */
< div data-aos="zoom-in">< /div>

[엑셀] 표시형식에 조건문 넣기

셀의 값은 다음과 같다.

원하는 것 : 값이 1 이상인 경우에 "day 1"로 표시될 것.

표시형식 넣기 :

사용자지정 표시형식에서

[>0]"day" ##;

여러 조건의 순차적 지정도 가능하다.

[>=90]"수";[>=80]"우";"기타";

[jquery-ui] [bootstrap] datepicker와 input-group 사이의 z-index 문제

.input-group과 date-picker 사이에 z-index 이슈가 있음

date-picker가 input-group보다 아래에 위치하는 문제.

해결책은 .ui-datepicker에 z-index를 지정하면 된다.

	$('.input-date').datepicker({
        beforeShow: function(){
            setTimeout(function(){
                $('.ui-datepicker').css('z-index', 100);
            }, 0);
        }
    });

[CSS] 개발중에 알림, 오류, 디버그 등을 표출하는 디자인

.todo { position:relative; border:1px solid #8e2225; background:#fcf1f1; padding:10px 10px 5px 15px; font-size:13px; line-height:18px; font-family:'Arial','맑은고딕'; margin:25px 0 15px; }
.todo::before { position:absolute; display:block; content:'TODO'; top:-12px; left:5px; background:#8e2225; z-index:2; color:#fff; font-size:12px; line-height:18px; padding:0 6px; }

오늘의 할일은 ......

[CSS] <li>의 marker와 텍스트 간격 조절하기

<ul>
    <li>리스트 : 현재의 SQL문에 조건 추가 (상태처리값에 따른 구분 필요함)</li>
    <li>삭제 : 개별삭제, 선택삭제, 전체삭제</li>
    <li>견적요청 작성 : 페이지 이동 UI</li>
</ul>

<style>
    ul { padding-left:15px; list-style-position:outside; }
    li { list-style-type:disc; padding-left:-5px; }
</style>

padding-left:-5px; 이 li의 marker와 텍스트 사이의 간격을 줄여준다.

단 이때 list-style-position:outside; 로 디자인되어야 한다.