반응형

들어가는 말

예전부터 AWS EC2 프리티어를 잘 이용했었고, 무료 기간 1년이 끝나고서 기존 사용하던 서버를 라이트세일 서버로 이전했었다.

 

현 시점 기준으로 라이트세일 서버도 1년간 사용해봤기 때문에 얼마나 쉽고 간편한지 몸소 알고있기 떄문에 이번에 워드프레스로 새로 운영할 블로그도 라이트 세일로 구축하기로 했다.

 

따라서. 이 포스팅은 AWS 라이트세일을 이용하여 워드프레스 블로그 서버 구축을 위한 포스팅임을 알고있음 좋을 것 같다!

라이트세일 VS EC2

오케이 좋아! 설치형 블로그인 워드프레스 블로그를 만들려면, 호스팅 서버가 있던지, 본인 서버에 올리던지 대표적으로 EC2 도 있을텐데 왜 라이트세일이야?

 

사실 이 포스팅을 보기위해서는 라이트세일 키워드를 넣어서 검색하고 왔을것이고.. 라이트세일이 제일 좋아보여서 최종적으로 검색한것이기 때문에 지금 비교하는게 무의미하겠지만..! 나는 이런점이 좋았다!

가격이 저렴해!

  1. 나의 경우 작은 블로그를 운영할껀데 월 3.5달러~5달러 선이면 소형 블로그 운영하는데 문제없을 성능의 서버스펙을 갖출 수 있다!
  2. 커피한잔에 5~6000원 하는데… 한달에 커피 한잔 먹는다고치면 사실.. 거의 복지에 가까운 요금이지않나 생각된다..!
  3. 아 그리고. EC2와 비교되는점은 EC2는 가장 요금 대비 성능을 비교하면 비싸다. EC2에서 엔트리급 서버하나 1년 굴렸을 때 한달에 만얼마가 나갔던걸로 기억한다.
    1. 현재 온디멘드 기준. 가장 싼 a1.medium 스펙 이용시 시간당 0.0255 USD로 한달인 약 720시간을 돌릴 경우 18.36 달러가 나온다.. 현재 환율 기준 약 24,000원..
    2. 라이트세일과….꽤 격차가 크다..
    3. 사실 비싼이유가. 라이트세일과 정확히 동스펙은아니고 램이 1GB많긴한데. 반대로 말하면, 나는 EC2 가장 작은 스펙의 서버보다도 더 작은 스펙의 서버가 필요한데. 그 작은것들이 바로 라이트세일에 있는 것이다!
    4. 즉! 라이트세일 이름답게 개인과 같은 라이트 유저들을 위한 것이다!

설정이 편해!

  1. 기존 EC2하고 가장 비교되는 점이다. 기존 EC2 구축하는데있어서는 ㄹㅇ 서버만 덩그러니 받아가지고, 우분투위에 필요한거 패키지 관리자로 다 받고 구축하고 Config 바꾸고… 방화벽설정하고… 사실 귀찮은 부분이 많았다.
  2. 관련 업계에 종사하는 나도 귀찮은데… 전공자가아닌… 순수하게 블로그를 가지고 싶어서 들어온 비전공자는 얼마나 복잡하겠는가…
  3. 그래서 선택한게 라이트세일이다… 이미 청사진(Blueprint)가 있기 때문에 서버 만들때 “뭐 어떤 서버 만들껀데?” 를 물어보는데 거기서 WordPress 아이콘 한번 누르고 만들기를 누르면 블로그 구축이 되어 있는 상태로 서버를 생성해준다….. 확실히 이런 편리함은 EC2에 비해 좋다!

기존 사용하던 AWS 스택이라 편해!

  1. 너무 무책임하거나.. 혹은.. 한번도 AWS 서비스를 경험해보지 않은 사람들은 공감이 되지 않을수도있다….
  2. 하지만.. 학창시절부터 카페24, 가비아 등 여러 호스팅 업체를 이용해 봤는데.. AWS 가 가장 편하고 직관적인 것 같다.
  3. 부가적으로… 회사에서도 AWS 서비스들을 많이 쓰니까.. 이럴때 같이 해보면서 시야를 넓혀놓으면 업무에 도움도되고 얼마나 좋은가!

1. 인스턴스 생성

본격적으로 인스턴스를 생성해보자. 비전공자들은 그냥 “서버를 생성해보자” 정도로 이해하면 될 것 같다.

 

아래 라이트세일 페이지를 들어간 후 AWS 로그인을 해주자.

인스턴스 생성하기

나는 기존에 운영하던 서버가 있기때문에 인스턴스 탭에 서버가 하나 잡힌다. 무시하고 중앙 우측에 있는 주황색 “인스턴스 생성”버튼을 눌러주자.

인스턴스 이미지 선택

요부분이 아까 말했던 “쉽다!” 라는 요소다. 워드프래스 말고도 Nginx나 Django 등 다른 어플리케이션도 바로 이미지형태로 부어 서버 셋업을 할 수 잇다. 우리는 플랫폼은 “Linux/Unix” 를 선택해주고 블루프린트는 “앱+OS” 탭에 “WordPress”를 선택해주자.

요금제 및 인스턴스 이름 선택

요기서 요금제를 골라주면된다. 나는 AWS에 단 1달러 내는것도 부담돼!!!!!!!!!!하면 바로 3.5달러짜리 누르면 된다.

 

하지만..! 스토리지와…램이 1.5달러에 2배..! 1.5달러면.. 약 1900원…!!!! 요즘 …피카추 돈까스도 2500원 하더라…(나떈 500~700 했던 것 같은데…)

 

아무튼… 3.5 > 5달러짜리는 가격차에비해 성능차이가 꽤 나니…개인적으로는 5달러짜리를 추천한다…! 5>10 도 고려는해봤으나…5달러차이는…………..그렇다..5달러는 좀 크다..!(개인적으로)

 

그리고 인스턴스 확인란에 인스턴스 이름을 입력해주자.. 머 서버이름정도로 생각하면 되겠다. 나는..머 서버가 많진 않아서 WordPress 로 지었다.

 

나중에 서버 아이콘이랑 이름 바꾸는거 찾아봤는데… UI상에서 바꾸는 메뉴 바로 안나오던데.. 못바꾸는걸수도 있으니 신중하게 입력하기 바란다….(혹시 바꿀 수 있는사람 댓글로 방법 부탁한다)

그 다음 간단한게 서버 인스턴스의 이름을 정해주자. 그리고 인스턴스 생성 클릭!

방금 생성한 인스턴스로 워드프레스 서버가 생성되며 초기에는 대기중으로 초기화 과정을 거친다.

조금 기다리면 금방 실행중으로 바뀐다

반응형

2. 고정 IP 적용

그 다음 해야할 일은 바로 고정 IP 적용이다. 고정 IP적용을 하지 않으면 EIP 로 동작하는데, 서버를 껏다키면 IP주소가 새로 부여되기 때문에 IP가 바뀔때마다 도메인 연결을 다시 해줘야한다. 떄문에 IP가 유동적으로 바뀌지 않도록 고정 IP를 등록해줘야한다.

간단하게 고정 IP 이름을 입력해준다. 그냥 추천해주는대로 쓰는것도 나쁘지 않은 듯..

 

주의할점은. 고정 IP할당은 인스턴스 5개까지 무료지만 할당 해놓고 서버를 꺼놓으면 돈이 나간다. 왜냐면 IP도 AWS 입장에선 디지털 자원인데 점유하고 있는데 쓰질 않으면 회사 입장에선 손해이기 때문이다. 즉, 너가 운영할꺼면 공짜지만, 운영하지도 않는데 IP만 차지할 경우에는 IP 자리세를 받는 격..!

처음과 다르게 고정IP를 적용했기 때문에 고정핀이 생긴 것을 볼 수 있다!

3. 워드프레스 계정 확인

서버 접속

이제 워드프레스 블로그를 운영하려면 관리자 계정이 있어야하는데 이건 서버에서 직접 들어가 확인 할 수 있다. 연결 탭에서 SSH를 사용하여 연결 버튼을 눌러주자. 그럼 PuTTy 나 이런 터미널 없이 웹환경에서 서버로 터미널 연결을 할 수 있다. 예전엔 좀 불안정했던 것 같은데 이번에 써보니 꽤나 안정된 느낌.

이런식으로 비트나미 쉘이 나오면 서버 접속 성공

패스워드 확인

쉘에 아래 며령어를 입력해주자! 그럼 난수암호가 나오는데 이게 블로그 운영계정 비밀번호다!

cat bitnami_application_password

4. 워드프레스 블로그 접속

서버 접속 주소 확인

서버 인스턴스의 빨간 박스 부분을 보면 본인 서버의 public IP 를 확인 할 수 있다.

<http://PublicIpAddress/wp-login.php>

위 주소에서 PublicIpAddress 에 위에서 확인한 본인 IP 를 대입하자.

💡 http://10.100.100.100/wp-login.php

머 이런꼴로 될껀데 브라우저에서 본인 IP 주소에 맞는 URL을 치고 한번 들어가보자.

관리자 계정 로그인

 💡 초기 ID : user

초기 관리자 계정은 user다 비번은 아까 위에서 확인한 난수를 입력해주면 된다.

로그인하면 아래처럼 관리자화면에 접속할 수 있게 된다!

언어 변경

마지막으로 Setting > General > Site Language 를 한국어로 바꾸고 Save Changes 버튼을 누르면 끝!

5. 사이트 접속

이제 관리자 페이지를 나와서 본인 워드프레스 서버의 IP주소를 브라우저에서 쳐보자! 그럼 기본적으로 세팅된 블로그가 출력된다! 지금은 IP로 접근가능한데 다음 포스팅에서 도메인과 연결하는 방법을 알아보자

반응형
반응형

무선랜 증발 현상

 

나는 현재 ASUS TUF FA506IV 모델을 쓰고있다. 한 2년간 잘 쓰다가 요즘들어 WOL 기능을 이용하는데 네트워크가 자동으로 끊어지는 현상이 있어서 퇴근후 컴퓨터를 확인해보면.. 위 사진처럼 인터넷 연결이 끊어져있었다..

인터넷 아이콘을 눌러보면 위처럼... 아예 WIFI 무선랜 어댑터가 보이지 않았다.. 동시에 블루투스 어댑터도 없어졌다.. 참고로 WIFI와 블루투스 모듈 모두 리얼택 8822CE 한 장비에 모여있다. 즉.. 8822CE 어댑터와 통신이 이상하다는 얘기..! 

네트워크 목록에 들어가도 연결된 네트워크 목록들이 보이지 않는다..

어댑터 속성을 보면 "이 하드웨어 장치가 현재 컴퓨터에 연결되어 있지 않습니다" 라고 나온다..USB도 아니고 메인보드랑 직접 물려있는데 무슨소리야 ㅠㅠ

 

반응형

응급조치

이런 현상이 발생했을 땐 아주 일시적이라서 그냥 재부팅 2~5회 해보거나 혹은 무선랜 초기화를 진행하거나. 장치관리자에서 해당 무선랜 드라이버를 재설치하거나. 방법은 많았다. 걍 뭐 하지말고 몇번 재부팅해보면 돌아오곤한다.

 

발생 원인

간헐적 발생

처음엔..뭐야? 하고 재부팅하고 나니까 해결되기도 했다. 하지만 이증 상은 간헐적으로 하루에 한번? 아님 이틀에 한번씩 발생해 점점 미궁에 빠졌다. 장치관리자에서도 보면 지금은 정상적으로 위 어댑터가 찍히지만. 문제가 일어났을땐 장치관리자 어댑터 목록에도 안보이고 했다..

 

한달 반이라는 시간을 이 문제로 고생하면서 IT업 종사자답게 문제가 일어났을때 원인을 밝히기 위해 안해본 테스트가 없는것 같다. 가장 궁금한게 이게 랜덤한거냐..!? 아님 특정 행위를 할때 발생하는 거냐?! 궁금했는데 아직도 확실하게 밝혀내진 못했지만 경험상 아래 이유에 해당할 경우 발생확률이 가장 높았다.

 

1. 노트북의 전원 설정이 바뀌었을 때

벌써 한달전 일이라 구체적인 케이스가 딱! 생각나진 않지만, 전원 공급 프리셋이 바뀌었을때 아주 높은 확률로 어댑터가 없어졌다. 저 전원 관리 옵션을 내가 직접 바꾸는거 말고도 절전모드, 최대 절전모드가 될때 시스템이 자동으로 바꿔주기도하는데 이 시점에 어댑터 연결이 끊어졌던걸로 기억한다. 즉.. 가만히 하다가 왜 회사가서 WOL 할때 인터넷이 연결이 안되었을까 생각해보니. 절전모드로 연결될 시점에 이런 현상이 나타나는 것 같앗다.

 

그래서 나는 통신장교로 복무할 시절 야전에서 전원 공급이 불안정해지면 얼마나 많은 문제가 생기는지 익히 알고잇었기 때문에 전원 공급단에서 문제가 있는걸까 접지라인이 제대로 되어있는지도 확인해보고 ㅋㅋ 멀티탭에서 벽단자로 전기 선로를 바꿔보기도 해보고 ㅋㅋㅋ 진짜 온갖 테스트와 모니터링을 해봣지만, 전원 공급 자체에는 문제가 없었다. 

2. 게임 등 고성능 작업을 할 때

위에서 말했듯이 전원 관련 옵션이 바뀔때 높은 확률로 안된다고 햇는데..! 반대로 고성능 작업을 할때도 전원 프리셋이 고성능으로 바뀌기 마련이다. 이 케이스는 진짜 확률이 높았다. 왜 아냐면은.. 나는 퇴근하고 가끔 배틀필드1을 플레이하는데 배1 플레이 눌러놓고 로딩 기다리면서 유튜브 머 틀어놓을까 찾아보다가 딱 게임을보면!? 오프라인 모드라고 떠있는거다.

 

엥..?! 방금까지 인터넷하고 있었는데 겜키니까 무선랜이 끊겨!? 그래서 이 케이스가 기억이난다. 하지만 이것도 100%는 아니었다.한 80% 확률로 이 증상이 나타났고 위 1번과 종합해봤을때 분명..! 전원 옵션이 바뀔때 발생하는 것 같은데?

3. 7월 이후로 증상이 발생한다.

그리고 또 이상했던 것.. 2년 넘게 이런 문제가 없었다가.. 이번년도 7월 초부터 이런현상이 발생하기 시작했다는 것이다. 꼭 이런 케이스는 윈도우 업데이트가 한몫하는데.. 윈도우 업데이트 로그를 보니.. 이 시점 몇일전에 업데이트가 있긴 했다. 그래서 업데이트를 지워보기도 했으나.. 자동으로 다시 설치하더라... 맞다.. 평생 업데이트 안하면서 살 수도 없을 것 같고.. 윈도우 업뎃을 제거하느니.. 차라리 명확한 원인을 찾는게 나아보였다.

 

해결 방법

문제 원인에 전원이 연관된 것 같은데 그 이후로 유의미한 결과가 없었다. 지속해서 여러가지 키워드를 조합해서 구글에서 해외 커뮤니티 위주로 찾아보니 OS와 물리장치의 드라이버 호환성으로 발생하는 문제라고들 한다. 근데 생각해보니까 이전에도 내 PC에서 블루투스 연결이 되지않아서 결국은 윈도우 재설치 후 해결한적이 있었는데 이때도 같은 경우인 것 같다.. 블루투스+WIFI 같은 물리장비이기 때문에.. 이번엔 와이파이가 문제를 일으킨듯 하다.

 

이전 드라이버 설치

그러다가..! 어떤 해외 유저가 올린 구 버전의 드라이버를 한번 설치해보았는데..! 해결이 되었다..! 그 본문은 지금 검색해도 나오지가 않는데..! 다행히 그때 받았던 파일은 남아있다!

 

RTLWlanE_WindowsDriver_2023.56.0502.2017_DUA.L_저용량.7z
19.13MB

바로 2023.56.050 버전 파일!! 이거 설치하고 나는 해결되었다. 다른분들도 되실지는 모르겠지만.. 일단.. 드라이버 호환성 문제였다는 것.. 아마 특정 시점 윈도우 업데이트로인한 호환성 맞지않아 발생한 문제인 것 같다.

 

파일 업로드 용량이 20메가바이트 제한이 있어서 설치파일 내의 윈도우8.1 버전은 제외했다.. 윈7 32/64bit 윈10 32/64bit 은 포함되어있으니 잘 설치해서 해결되길 바란다.

 

[ASUS 노트북] WIFI 무선랜 어댑터 없어짐, 사라짐 해결하기 / Realtek 8822CE

반응형
반응형

현상

유튜브 초고화질 영상(4K등) 재생시 먼가 끊겨..!

나는 LG 27UP850 4K 모니터를 사용하고있다. 유튜브로 4K 영상을 볼 일이 없어서 한번도 4K로 재생을 시도해본적이 없었던것 같다. 근데.. 오늘.. 4K영상 볼일이 있어 재생을 해봤는데.. 먼가.. 끊기는 느낌..? 중간중간? 버퍼링은 아니고 ..먼가 프레임 몇개가 비는 느낌??

 

처음에 주사율이 문제인가 했지만..주사율도 60Hz로 정상.. 그럼뭘까? 4K 대역폭을 네트워크가 견디지 못하는걸까? 했지만 나는 500MB인터넷을 쓰고있고.. fast.com 에서 측정해도 모든게 정상..

혹시나 크롬 시스템 설정에 하드웨어 가속옵션이 안켜져있나?라고.. 의심을 해보았으나.. 이것도 활성화 되어있었다.. 그럼 뭘까..?

 

원인

GPU 가속이 실제로 작동하지 않음

2K 이상의 초고화질 영상을 재생 할 경우 AV1 혹은 VP9코덱을 통해 인코딩/디코딩이 진행되는데 대게 지포스 RTX 그래픽카드를 사용하는 노트북에서 해당 코덱사용시 GPU 가속이 안되는 문제가 있다고 한다.

 

 

해결방법

크롬 ANGLE hraphics backend 옵션 D3D11on12 활성화

아래 주소를 크롬창에 입력후 엔터

chrome://flags/#use-angle

위 창에서 ANGLE hraphics backend 옵션이 Default로 되어있을텐데 D3D11on12로 변경 후 Restart 진행하면 4K 영상이 부드럽게 나오는 것을 확인 할 수 있다.

 

반응형
반응형

TOC란?

Table of Contents로써 책 첫장에서 볼 수 있는 차례/목차와 같은 개념이다.
포스팅에 TOC를 적용한다는 것은, 해당 포스팅이 어떤 내용들이 있구나라는 목차를 대략 알 수 있으며, 추가적으로 해당 목차를 누르면 해당 문단으로 이동하거나, 스크롤을 내릴때 현재 어떤 내용을 보고 있는지 알려주기도 한다.
단, 마크다운으로 작성된 포스팅이어야한다.

https://extsdd.tistory.com/404

 

[거제/통영 여행 #8] 통영 신축 오션뷰 바라봄 펜션 - 가성비 최강 / 202호 원룸족욕

통영에서 숙소를 알아보다.. 대부분.. 가격이나 숙소질을 고려했을때 ..맘에 드는 곳이 없어서... 진짜 하루종일 뒤지다 겨우 타협본곳.. 바라봄 펜션..! 이름은 올드했지만 신축 펜션이었다. 우리

extsdd.tistory.com

내용만들으면 잘 이해가 안가는데 내가 작성했던 포스팅을 보면 직관적으로 알 수 있을 것이다. 위 포스팅을 눌러보자.

포스팅을 보면 우측에 목차가 나오는 것을 볼 수 있다. 스크롤도 내려보면 현재 위치에 따라 녹색바로 하이라이팅이 된다. 독자 입장에선 정보를 찾으러 포스트를 보러온 경우가 많은데, TOC가 적용되어 있으면 내가 보려는 목차로 바로 이동해서 볼수도 있고 해당 포스트가 어떤 내용을 담고 있는지도 대략적으로 알 수 있다.

1. Head 추가

스킨편집 이동



먼저 티스토리 관리자 화면 좌측에서 꾸미기>스킨 편집으로 들어가주자.

html 편집

html 편집을 눌러주자.

스크립트 태그 추가

태그 안에 아래 스크립트 태그를 추가하자. head 태그 안에 어디다 넣지..!? 고민 하는.. 비전공자 분들은 걍 바로 위에 적는 것을 추천한다.

<!-- TOC 추가 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.11.1/tocbot.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.11.1/tocbot.css">
<!-- TOC 끝 -->

2. div 추가

이제 toc가 추가될 공간을 추가해야한다.

위에서 추가했던태그를지나 밑으로 계속내리면태그가 시작되는데 body 태그 내부를 보면 content가 표시되는 영역이 있다. 일단 스킨마다 태그 구조가 다름으로 나랑 다를 수가 있지만. 대충 크롬 개발자 도구로 뒤져보면 어디다 넣어야할지 감이 올것이다. 걍 Content가 시작되는 곳쯤에 추가하면 된다. 나는 Square 스킨을 사용하고 있는데 이 스킨을 사용하는 사람들은 아마 위와같은 모습일 것이다.

아래에 아래 코드를 추가해주자.

<div class='toc'></div>

3. 스크립트 추가

요기서부터 좀 중요하다. 실제 content가 있는 영역을 인식해서 toc 영역에 목차를 뿌려주는데 코드를 보면 알겠지만 컨텐츠 태그 안에있는 h1~h3 태그를 자동으로 인식해서 띄어주는 것이다. 아마 다른 포스팅에서 toc 적용을 보고 그대로 따라서 추가하면 안되는 경우가 많은데 스킨마다 content 영역 클래스명이 다르기 때문이다.

일단 맨 아래로 내려보면 body 태그가 끝나는 태그를 볼 수 있는데 요기 바로 윗칸에 아래 코드를 추가해준다. 여기서 중요한점이 위 사진에서 형광녹색으로 하이라이팅한 document.querySelector와 아래 contentSelector 를 보면 .article 로 되어있는 걸 볼 수 있다. 이게 바로 content영역의 클래스 명이다. 나 같은 경우 클래스 명이 aticle인 태그를 찾아  태그 안에있는 h1~h3 태그 정보를 끌어와 띄어주는 것이다.

<script>
  var content = document.querySelector('.article')
  var headings = content.querySelectorAll('h1, h2, h3, h4, h5, h6, h7')
  var headingMap = {}

  Array.prototype.forEach.call(headings, function (heading) {
      var id = heading.id ? heading.id : heading.textContent.trim().toLowerCase()
                 .split(' ').join('-').replace(/[\!\@\#\$\%\^\&\*\(\):]/ig, '')
      headingMap[id] = !isNaN(headingMap[id]) ? ++headingMap[id] : 0
      if (headingMap[id]) {
        heading.id = id + '-' + headingMap[id]
      } else {
        heading.id = id
      }
    })

  tocbot.init({
    tocSelector: '.toc',
    contentSelector: '.article', 
    headingSelector:'h1, h2, h3',
    hasInnerContainers: false
  });

  $(document).ready(function(){
    $('.toc').addClass('toc-absolute');

    var toc_top = $('.toc').offset().top - 165;
    $(window).scroll(function() {
      if ($(this).scrollTop() >= toc_top) {
        $('.toc').addClass('toc-fixed');
        $('.toc').removeClass('toc-absolute');
      } else {
        $('.toc').addClass('toc-absolute');
        $('.toc').removeClass('toc-fixed');
      }
    });
  });

</script>

content 태그의 class 명을 모르는 경우?

나처럼 square 스킨을 쓰면 아마 위처럼 쓰면 되겠지만 다른 스킨을 사용하는 사람들은 자신의 content를 띄어주는 태그의 클래스명이 뭔지 알아내서 바꿔주면 된다. 아마 다른 포스팅보고 안된다고 한사람들은 아마 코드는 비슷할텐데 저기 나와있는 contentSelector 의 클래스명이 일치하지 않아서일 것이다.

나의 경우 content 영역이 article 클래스를 사용하고 있는데 아마 다른 스킨을 쓰는 사람들은 사용하는 클래스명이 이게 아닐 수도 있다. 하지만 ##_notice_rep_desc_## 을 검색해보고, 이 태그를 감싸고있는 상위 태그의 클래스명을 적어주면 된다. ##_notice_rep_desc_## 는 티스토리 블로그에서 사용하는 공통 치환자이기 때문에 스킨이 달라도 이 태그가 있을 가능성이 매우 높다.

4. CSS 추가

상단에서 CSS 탭으로 이동 후 아래 코드를 상단 적당한 공간에 추가해주자. @import 이런 구문들 밑이면 적당할 꺼같다.

/*
* TOC
*/
.toc-absolute {
  position: absolute;
  margin-top:165px;
}
.toc-fixed {
  position: fixed;
  top: 165px;
}

.toc {
  left: 1350px;
  width: 250px;
  padding: 10px;
  box-sizing: border-box;
}

.toc-list {
  margin-top: 10px !important;
  font-size: 0.9em;
}

.toc > .toc-list li {
  margin-bottom: 10px;
}

.toc > .toc-list li:last-child {
  margin-bottom: 0;
}

.toc > .toc-list li a {
  text-decoration: none;
}

그리고 마지막으로 적용을 눌러주자.

5. 적용 확인

자신의 포스팅중 마크다운으로 작성된(h1~h3 태그가 사용된 글)을 눌러보면 좌측에 TOC가 적용된 것을 확인 할 수 있다.

반응형
반응형

보통 나는 특별히 어디 여행갈때 들고 다니는 경우를 제외하면 이렇게 고정하고 쓴다. 그런데 최근에 문제가 발생했다.. 잠자려는데.. 절전모드가 되서 모니터랑 유선키보드 조명도 다 꺼졌는데 천장에 빛이 깜빡깜빡 거렸다..

그렇다.. 보통 사용할 때는 정적 으로 설정해놓았기 때문에 딱히 문제가 없는데 절전모드로 변경되면 이게 자동으로 브리딩 모드로 변하는 것이었다.. 불 다끈 방에 저 키보드가 깜빡깜빡 거리니 잠자는데 너무 방해가 됐다.

그래서 아ㅡㅡ 또 깜빡이네 하면서 노트북 화면을 덮거나 했었는데.. 이것도 한두번이지 매번 덮고.. 열고 하는게 귀찮아 어떻게 끄는지 찾아봤다.(인터넷에 검색해도 안나와 이것저것 해보다 겨우 찾아냈다..)

  1. ARMOURY CRATE 실행

보통 아수스 게이밍 쓰는 사람들은 기본적으로 ARMOURY CRATE 앱이 설치되어있을 것이다. 이 앱은 키보드 조명을 관리해주는 친구다. 없다면 각 노트북 기종에 맞게 ASUS 홈페이지가서 따로 설치하면 된다.

  1. 장치 > 조명 > 설정 클릭

위 사진처럼 좌측부터 장치 > 조명 > 설정을 눌러 설정메뉴에 진입한다.

  1. 절전 off 설정

드디어 찾았다... 이것저것 메뉴 다눌러봤는데도 없어서 못찾았는데.. 여깄었다.. ㅋㅋ 저거 절전 off 해두면 이제 절전모드때 키보드 백라이트가 점등되는 경우는 없다. 다만 아쉬운게, 절전모드 때 조명설정을 정적으로 따로 커스터마이징 할 수 있으면 좋으련만 그런 기능은 없어보였다.

반응형
반응형

최근들어 아이패드를 모니터로 사용하게 되었는데 USB로 아이패드랑 연결해놓으면 보통 충전이 되어야하는데... 충전이 안되는거다.. 그래서 ..모니터로 사용할 경우... 충전이 안되기 때문에 몇시간 사용하고 배터리가 0퍼가 되서 왜 충전이 안되는지 찾아보기로 헀다.

https://extsdd.tistory.com/226

 

[투몬SE] 윈도우 노트북 + 모니터 + 아이패드 프로 2세대 트리플 모니터 만들기 / 투몬(Twomon) SE / 듀

이번에 알아볼 내용은 기존에 노트북과 일반 모니터로 듀얼 디스플레이가 구성되어 있는 환경에서 아이패드 화면을 추가로 달아 트리플 모니터를 만드는 방법에 대해서 알아보자! 일단 먼저 아

extsdd.tistory.com

 

혹시 궁금할 사람들을 위해서 아이패드를 노트북 보조 모니터로 쓰는방법 링크를 남긴다.

딱 저렇게 위에 충전중이 아니라는 문구가 뜬다. 이유는 노트북 USB포트는 0.5A 규격인데 아이패드는 1A 부터 충전이 가능하다. 즉, 출력이 부족해 충전이 안됐던 것. 그럼 내 USB 포트의 전류량을 1A수준으로 올려주면 되는데 ASUS에서 만든 유틸을 통해 가능하다.

1. ASUS Ai Charger 설치

ASUS Ai Charger.zip
1.87MB

위 첨부파일 다운 후, Setup을 실행해 설치해하고 재부팅 해주자.

그리고 트레이 아이콘을 보면 Ai Charger가 설치된 것을 볼 수 있다. 저 서비스가 이제 우리 USB 포트의 출력을 1A로 끌어 올려준다. 이제 아이패드를 연결해보자!

2. 아이패드 연결

이제 아이패드를 USB로 연결할 경우 충전되는 것을 볼 수 있다. 앞으로 듀얼모니터로 써도 항상 100% 유지 가능!

반응형
반응형

이번에 알아볼 내용은 기존에 노트북과 일반 모니터로 듀얼 디스플레이가 구성되어 있는 환경에서 아이패드 화면을 추가로 달아 트리플 모니터를 만드는 방법에 대해서 알아보자!

일단 먼저 아이패드 2세대 12.9인치! 동생이 이번에 프로 4세대로 바꾼김에 남게된 아이패드를 쓰라고 줬다.아직 애플 제품은.. 써본적이 많이 없어서 이걸 어디다 써야하나 고민하덜 찰나, 어 이거 추가 모니터로 쓰면 되지않나??.. 생각이 들어 바로 찾아봤다.

투몬(Twomon) SE 앱 : \12,000

일단 내 노트북은 윈도우계열이다. 아마 맥 계열의 노트북은 사이드카 기능을 이용해 무료료 듀얼/트리플 환경을 구성할 수 있지만, 윈도우 사용자들은 써드파티 앱을 이용해야한다.

결론부터 말하자면 유료 앱이다. 가장 유명한게 투몬(Twomon) SE와 듀엣(duet) 앱이 있는데, 찾아본 결과 아이패드 프로의 고성능을 잘 뒷바침 해주는 앱이 투몬이라고 하길래 투몬으로 결정했다.

가격은 12,000원, 중고딩 때 였으면, 살까 말까 한두달 고민하다 몰래 엄빠 휴대폰 소액결제로 몰래 결제해서 안들키기만을 빌었을테지만, 어느새 돈을 버는 나는 모니터 하나 추가하는데 1.2만원은 충분히 지불할 수 있는 금액이 되었다.. ㅎㅎ 이런거 할려고 돈을 번다.

아이패드 듀얼 모니터앱이 뭐가있는지 찾고 결제 후 설치까지 5분도 안걸린 것 같다.

1. 투몬 SE 앱 설치

일단 본인 아이패드 앱스토어에서 투몬 SE를 설치한다. 가격은 아까 말했듯이 1.2만원이다.

2. 투몬 SE PC 앱 설치

투몬 공홈에가서 앱을 받아와야한다. 아래 링크를 들어가보자

http://www.easynlight.com/?f=en

 

이지앤라이트

투몬(Twomon),이지비(EasyBee), 이지캔버스(EasyCanvas)

www.easynlight.com

1. 상위 탭에 있는 PRODUCT 클릭!

2. Twomon SE 를 클릭!

1. PC Program Download 클릭

 

용량이 꽤 있는데 머 금방 받는다. 이제 설치를 할껀데, 아이패드랑 노트북이랑 USB로 연결을 해놓았다면 잠시 분리해둔다. 설치 시작할 때 아이패드가 연결되어있으면 설치가 진행되지 않는다.

다 동의해주고 넘어가자.

 

쭉쭉 기다리면 금방 설치가 된다.

3. PC - 아이패드 연동

오 설치가 완료되면 머 드라이버가 설치되었는지, 윈도우 메시지로 현대 연결된 기기가 없다고 나온다. 아이패드와 노트북을 USB로 연결해주고 아이패드 앱에서 투몬 앱을 실행해주자

참고로 데이터 대역폭이 모니터의 성능이라고 보면 되기때문에, 되도록이면 USB 3.0 포트를 지원하는 단자에 꼽도록 하자.

오 아이패드 화면에 머 이런게 뜬다. 신뢰한다고 해주자 그럼 연결 성공이다.

해상도 및 디스플레이 설정

바탕화면의 빈 곳을 오른쪽마우스 클릭 후 디스플레이 설정을 눌러보자.

그럼 이런 모니터들이 뜬다. 나의 경우 1번이 노트북 메인모니터고, 2번이 일반 모니터, 3번이 아이패드 모니터다. 만약 나처럼 트리플 구성이 아니면 보통은 2번이 아이패드일 것이다.

이 화면에서는 마우스를 어디쪽으로 보내야 다음 화면으로 넘어가는지 정할 수 있다. 나는 1번 주화면에서 아래로 내리면 3번으로 가도록 배치한 것이다. 저건 드래그로 이동시키면 된다.

여기서 누른 디스플레이는 저렇게 파랗게 표시되는데 그 모니터에 대한 설정을 아래에서 바꿀 수 있다.

아이패드의 해상도는 여기서 조절하면 된다. 물론 아이패드 모니터가 선탠된 상태에서 바꿔야한다. 놀라운건, 아이패드 최대 해상도가 2732x2048.. ㄷㄷ 노트북이랑 모니터도 씹어먹는 해상도다. 진짜 연결해보면 신세계다 ㅋㅋㅋㅋㅋㅋ 그런데 데이터 대역폭이나, 기계 성능에 영향을 미칠것으로 판단되서 중옵으로 설정해놨다. 게이밍 노트북이라 크게 버벅임은 없지만, 팬돌아가는 소리가 좀 커진 것 같기도 하다 ㅋㅋ

짜잔. 노트북 + 모니터 + 아이패드 프로로 트리플 모니터 구성 성공. 예전에 크롬캐스트 이딴거 썻을땐 ㄹㅇ 주사용 33hz에다가 버벅이고 난리나서 사실 쓸 수 없는 수준이었는데, 이건 유선 3.0 규격이라 그런지 불편함이 없을 정도다. 충분히 1.2만원 내고 쓸만한 앱이라고 생각된다.

이 아이패드 터치도 된다.. ㅋㅋ 손이랑 애플팬 둘다.. 윈도우 그림판에서도 팬으로 작업이 가능하다.. ㅋㅋ 신기했다.

오늘 포스팅 끝~

 

#노트북 #모니터 #아이패드 #아이패드프로 #듀얼모니터 #트리플모니터 #투몬 #Twomon #듀엣 #화면 #미러링 #서브모니터

반응형
반응형

 

  이번에는 티스토리 블로그에 스크롤을 내려도 항상 애드센스 광고가 화면에 떠서 고정되어있는 플로팅 배너를 만들어볼 것이다.

 꾸미기 -> 스킨 변경

 

  현재 사용하고 있는 Book Club 스킨의 모습이다. 순정과 다른점이 있다면 스킨 설정에서 사이드바 위치가 좌측이라는점? 이건 개인차니 편한곳에 하면된다. 나는 일단 사이드바가 좌측에 있는걸 선호해서 좌측으로 바꾸고 시작하겠다.

 

  글을 읽다보면 저 빨간 공간이 남아도는데 저기다 광고를 넣을 수 있지 않을까? 생각을 하다가 넣어보니까 별거 없더라. 그래서 그 방법을 공유하려고 한다!

1. 전체크기 늘이기

  일단 현재 티스토리 컨텐츠 박스의 가로크기를 늘려야한다. 자 사실 좌측 슬라이드 밑에 광고 하나 다는건 크기 변경이 필요없다. 이미 사이드바 영역이 있기때문에 거기 밑에 새로 다는건 뭐 어렵지 않으니까, 그런데 기존 크기를 유지한 상태에서 광고가 하나 더들어면 div가 자리가 없어 계단식으로 깨지게된다. 그게 아니면 사이드바나 글이 나오는 컨텐츠 영역을 줄여야 하는데 그럼 가독성이 너무 없어진다. 그러므로 Full Size상태의 크기를 늘려주자.

  자 먼저 관리자 페이지에서서 꾸미기 -> 스킨편집에 들어와서 1번 박스에 있는 html 편집을 눌러주자.

 

  1. CSS 버튼을 눌러주자!

  2. 그다음 Ctrl+F 키를 눌러 검색을 해주자.

  3. 검색어는 1080이다. 1080px인것을 모두 조회해 1400px로 바꿔줄 것이다.

 

 

  바꿔야할 부분은 저렇게 7군데다.(순정 스킨기준) 저 옆에 줄번호는 CSS 수정유무에 따라서 차이가 날 수 있다. 검색은 그냥 컨트롤+F눌러서 계속 검색하면 된다. 저 1080을 모두 1400px로 바꿔주자!

 

  바꾸면 이런 모습이 된다. 일단 저장을 하자..!

 

  처음에 비해 사이드 영역이 아주 넓어진것을 확인할 수 있다. 이제 저걸 조금 줄여서 우측에 광고를 넣을 자리를 만들꺼다.

2. 사이드영역 조정

 

  자 잘보면 너비를 조정함으로써 저 사이드영역을 구분해주는 친구가 깨진것을 볼 수 있다 저친구를 바로잡아주자.

.layout-aside-left #container .content-wrap:before {

  위 코드를 Ctrl+F를 이용해 CSS에서 찾아보자

 

 

  저 margin-left 를 -256px에서 -455px로 바꿔주자! 이 값을 바꾸고 뭐가 바뀌는지보고 향후에 자기가 조정할 사람은 조정하면된다. 여기서 나온 가이드는 최소 블로그답게 보여주기 위한 셋팅이다.

  자 이렇게 바꼈을 것이당

#container .content-wrap:before

  그 다음 위 코드를 한번 더 검색한다.

 

 

  저 두 퍼센테이지를 바꿔줄 것이다. 잘 보면 저 두 비율의 합이 100%이고 보면 위에 것이 글이 나오는 컨텐츠 영영의 비율, 아래가 사이드바의 비율일 것으로 추측할 수 있다. 이건 무슨 코드냐면, 반응형으로 동작했을때 어떻게 도식할껀지에 대한 퍼센테이지 이다. 이걸 각각 70%, 30% 로 조정해준다. 이게 가장 자연스러웠던 것 같다.

  모두 바꿨으면 적용을 누르자. 그리고 화면을 보면 아직 약간 이상할텐데 일단 계속 진행하면 된다.

3. 좌측 사이드바 너비 줄이기

#aside

 

  맨 위에 커서를 대고 위 코드를 검색한다. 아마 아주 많이 검색될텐데 가장 첫번째로 검색되는 것을 고치면된다.

 

  저 21.x %를 17%로 바꿔주자!

 

  그리고 적용하고 화면을 확인해보자

 

 

  뭔가 많이 좁아진 것을 알 수 있다. 그리고 가운데 수직선이 지나면서 화면이 깨져보이는데 이건 우측 슬라이드를 추가하면 괜찮아진다. 이제 우측 영역을 추가해보자!

4. 좌측 사이드바 광고 추가

 

 

 

  이번엔 HTML 영역으로 이동하자.

<footer id="footer">

 

  그리고 위 코드를 검색해주자.

  그럼 이렇게 조회가 될껀데 저 빨간 네모박스 태그 사이에 아래 태그를 추가하자.

<!-- 2020-07-18 플로팅 배너 시작-->
<s_sidebar_element>
	<div class="banner">
		<div id="chase" style="top:0px;">
			//여기에 애드센스 코드를 넣으세요!
		</div>
	</div>
</s_sidebar_element>
<!-- 2020-07-18 플로팅 배너 끝-->

 

  나는 저기 코드에 "일치하는 컨텐츠 광고" 를 넣었다.

 

  뭐 추가하면 이런모슥이 될 것이다. 안에 광고코드는 본인들꺼를 넣으면 된다.

5. 우측 사이드바 광고 추가

 

<div class="content-wrap">

 

  HTML에서 위 코드를 검색하자

 

  이런식으로 검색이 될껀데 우린 저 빨간 상자안에 있는 태그 사이에 코드를 넣을꺼다.

 

<!-- 오른쪽 사이드바 시작-->
<aside id="asideRight" class="asideRight">
	<div id="chaseRight" style="top:0px;">

			<div class="sidebar-1">
				//광고 1
			</div>

			<div class="sidebar-1">
				//광고 2
			</div>
						
			<div class="sidebar-1">
				//광고 3
			</div>

	</div>
</aside>
<!-- 오른쪽 사이드바 끝 -->

 

  이런식으로 복붙한다. 만약 길게 배너 하나만 붙일꺼면 광고 1 div 태그만 사용하고 나머지 광고2, 광고3 div 뭉텅이는 지우면된다. 나는 길쭉한 배터는 좌측에 있음으로, 작은 배너 여러개를 노출시킬 것이다.

6. 우측 슬라이드 CSS 추가

 

 

  CSS로 이동을 해주자. 그리고 맨 마지막줄로 내려가 아래 코드를 추가해주자

/** 오른쪽 배너 CSS **/
	@media (max-width: 1400px){
		#asideRight { display : none;}
	}
	
	#asideRight { 
	float: right;
	margin-left: 0;
	padding: 80px 20px;
	height:100%;
	width: 160px;
	}

 

 

머 이정도가 될 것이다. 한번 적용을 해보자!

 

7. 상단 고정 스크립트 삽입

</style>

html에서 위 코드를 검색하자

  저기 검색될텐데 저 style 끝 태그와 head 끝 태그 사이에 코드를 하나 넣어주자.

<!-- 2020-07-18 플로팅 배너 시작-->
<script type="text/javascript">
	$(window).scroll(function(event){
		if(jQuery(window).scrollTop() > jQuery(".banner").offset().top) {
			jQuery("#chase").css("position", "fixed");
	}
	else if((jQuery(window).scrollTop() < jQuery(".banner").offset().top)) {
		jQuery("#chase").css("position", "static");
	}
});
</script>
<!-- 2020-07-18 플로팅 배너 끝-->
	
	<!-- 2020-07-18 플로팅 배너 시작 : 오른쪽 배너-->
<script type="text/javascript">
	$(window).scroll(function(event){
		if(jQuery(window).scrollTop() > jQuery(".asideRight").offset().top) {
			jQuery("#chaseRight").css("position", "fixed");
	}
	else if((jQuery(window).scrollTop() < jQuery(".asideRight").offset().top)) {
		jQuery("#chaseRight").css("position", "static");
	}
});
</script>
<!-- 2020-07-18 플로팅 배너 끝 오른쪽 배너-->

  위코드가 이제 스크롤을 내려도 상단에 떠있게 하는 친구다

 

 

  그럼 대략 이런 모습으로 들어간다. 이것도 적용을 해보자!

8. 기타 마감작업

#content {

  CSS에서 위 코드를 검색해주자.

 

 

  이 친구가 보일텐데 값을 바꿔주자.

#content {
	float: left;
	width: 68%;
	padding: 72px 15px 0 60px;
	box-sizing: border-box;
}

  이코드는 화면이 뛰틀리는걸 잡아주는 설정이다. 이제 적용하고 확인!

9. 최종 검수

 

 

  자 이제 스크롤을 내려도 좌우로 광고가 따라붙게 된다 ㅎㅎ

 

 

  자 창크기를 줄이면 자동으로 우측 배너가 없어지게 된다. 거기서 더 줄이면 최종적으로 좌측 배너도 사라지게 되면서 반응형 웹이 만들어진다 ㅎㅎ

 

  궁금한게 있으면 댓글 남겨주세요

 

[HTML/CSS] 티스토리 스크롤내려도 항상 보이는 반응형 플로팅 애드센스 광고 배너 만들기 / 양쪽 사이드바 추가 방법 / Book Club 스킨 / 수익 극대화

 

#HTML #CSS #티스토리 #스크롤 #내려도 #항상 #보이게 #반응형 #플로팅 #애드센스 #광고 #배너 #만들기 #하는법 #방법 #양쪽 #사이드바 #모듈 #추가 #BookClub #스킨 #편집 #수익 #극대화

 

반응형

+ Recent posts