728x90

수성비전자방입니다. 제 블로그에는 종종 코드블럭을 이용한 글이 올라옵니다. 저는 티스토리의 코드블럭 기능을 사용하지 않고 있습니다. 오늘 제가 사용하는 Color Scripter를 소개해 드리겠습니다.

 

Color Scripter 주소는 아래와 같습니다.

https://colorscripter.com/

 

소스 코드 작성

처음 접속하면 위와 같은 화면이 뜹니다.

 

소스 코드를 작성하면 위와 같이 자동으로 언어를 감지합니다.

 

언어 감지가 마음에 안 든다면 수동으로 언어를 선택할 수도 있습니다.

 

저는 코드블럭을 사용할 때 어두운 배경색을 좋아합니다. 스타일패키지 중 서브라임 블랙을 적용하면 됩니다.

 

어두운 배경색으로 적용되었습니다.

 

배경을 선택할 수도 있는 것 같은데 저는 잘 안 쓰는 기능입니다. 스타일패키지로 충분해서...

 

세부설정도 변경할 수 있습니다.

 

소스코드 복사(HTML로 복사)

*오른쪽 아래를 보시면 '클립보드에 복사' 기능이 있습니다. 클립보드에 복사는 Adobe Flash를 이용하는 기능이므로 사용하실 수 없습니다. HTML로 복사를 이용하시기 바랍니다.

 

HTML로 복사를 클릭하시면 가운데 창이 뜹니다. 가운데 창에 있는 소스코드를 복사하신 후, 티스토리 글쓰기의 HTML모드 같은 곳에 붙여넣기 하시면 글 본문에 코드블럭이 들어가게 됩니다.

 

1
2
3
4
5
#include <stdio.h>
 
int main(void){
    printf("Hello, world!"\n);
}
cs

이렇게 말이죠.

 

*공유하기 기능은 소스코드를 URL로 공유하는 기능입니다. 이 글의 주제와 거리가 멀어서 소개하지 않겠습니다.

 

확장스토어 및 소셜 로그인

소스코드 작성 화면 위쪽을 보시면 확장스토어 버튼이 있는 것을 보실 수 있습니다(세부설정 버튼 옆에). 확장스토어에서 언어팩, 스타일패키지 등을 설치하실 수 있습니다.

*언어팩 만들기, 스타일패키지 만들기는 로그인해야 이용 가능합니다.

 

페이스북 로그인, 구글 로그인이 가능합니다.

 

저의 글을 읽어 주셔서 감사합니다.

소스코드를 작성할 때에는 색깔별로 알록달록하게 보이는 것이 시각적인 만족감을 주는 것 같습니다. 시각적인 만족감을 받기 위해 코드블럭을 찾게 됩니다. 여러분도 자신에게 맞는 코드블럭 찾으셔서 이용하시기 바랍니다.

다음에 만나요!

 

댓글을 달아 주세요

728x90

수성비전자방입니다. 요즘 유튜브 많이 이용하시죠? 유튜브에서 채널들을 구독하다 보면 이 채널들을 카테고리를 나누어 관리하고 싶을 때가 있습니다. 그래서 오늘은 PocketTube를 소개해 드리려고 합니다. PocketTube는 크로미움 웹브라우저 확장 또는 안드로이드 앱을 설치해서 사용하실 수 있으며, 둘 사이 서로 동기화가 가능합니다.

 

PC에서 포켓튜브 확장 설치하기

화질 왜 이러냐-_-.

1. 확장 스토어에서 PocketTube를 설치해 줍니다.

1-1. 크롬 웹스토어에서 설치(https://chrome.google.com/webstore/detail/pockettube-youtube-subscr/kdmnjgijlmjgmimahnillepgcgeemffb)

1-2. Microsoft Edge 추가 기능에서 설치(https://microsoftedge.microsoft.com/addons/detail/pockettube-youtube-subsc/klfeohnijmogpjoeenglhonjfiacajpp?hl=ko)

저는 Edge를 사용하는 관계로 Microsoft Edge 추가 기능에서 설치했습니다.

 

2. 그러면 이런 창이 뜨는데 확장 추가를 클릭합니다.

 

3. 설치가 완료되면 사용 방법을 알려주는 영상이 뜹니다. 영어로 나오긴 하는데 알아서 해석하세요.

 

4. 이제 유튜브에 접속하면 왼쪽에 SUBSCRIPTION GROUPS가 추가된 것을 보실 수 있습니다.

 

5. Group name에 원하는 이름을 입력하시고, +를 눌러 그룹을 추가하세요.

 

참고로 이제 새로고침하거나 유튜브 재접속하시면 그룹을 추가할 수 있는 텍스트 상자가 사라집니다.

6. SUBSCRIPTION GROUPS를 눌러 새로운 그룹을 추가하거나, 구독한 채널을 그룹에 등록할 수 있습니다.

*. v, ^를 눌러 구독 그룹 목록의 위치를 이동시킬 수 있습니다.(ex. v를 누르면 구독 그룹 목록이 구독 채널 목록 아래로 내려감.)

 

SUBSCRIPTION GROUPS를 눌렀을 때 나오는 화면입니다.

*새로운 그룹을 만드려면 CREATE NEW GROUP을 클릭합니다.

 

7. CHANNELS 탭으로 들어왔습니다. 여기에서 구독한 채널들의 그룹을 설정해 줄 수 있습니다.

 

8. 쪽지(?) 모양 그림을 클릭하고 원하는 그룹에 체크하신 뒤 체크 표시를 클릭해서 저장합니다.

수정하려면 그룹명을 클릭합니다.

 

PATREON은 PATRON의 오타인 것 같네요. 후원하면 기능이 늘어난다고 합니다.(저는 안 했습니다.)

 

9. 'SUBSCRIPTION GROUPS' 옆에 있는 점 세 개 버튼을 클릭하면 그룹을 정렬할 수 있습니다.

Custom을 클릭하면 그룹을 드래그해서 순서를 마음대로 조절할 수 있습니다.

 

10. 그룹명을 클릭하면 이렇게 해당 그룹의 채널 목록이 나옵니다.

 

11. 그룹명 오른쪽의 유튜브 아이콘을 클릭하면 해당 그룹의 영상들을 보여줍니다.

 

12. 웹 브라우저에 있는 포켓튜브 확장 아이콘을 클릭하면 설정을 바꿀 수 있는 창이 뜹니다. 확장 창 왼쪽 아래의 버튼은 후원 버튼인데, 스크린샷을 찍을 때에는 이미지가 깨졌지만 현재 업데이트로 개선된 상황입니다.

*. 맨 밑의 lock position in the custom sort view를 체크하시면 custom 정렬된 그룹 목록의 순서가 고정됩니다.

 

13. 확장 창의 BACKUP 탭으로 들어가시면 그룹 목록을 백업하실 수 있습니다.

13-1. EXPORT를 클릭하시면 그룹 목록을 *.json 파일로 받으실 수 있습니다.

13-2. IMPORT를 클릭하시면 *.json 파일을 올려서 그룹 목록을 복원할 수 있습니다.

13-3. 구글 드라이브 동기화 칸에 있는 ENABLE을 클릭하시면 구글 로그인 후 동기화가 가능합니다.

 

13-1. 궁금하실까봐 백업한 *.json 파일을 보여드립니다.

 

13-2. IMPORT를 누르면 나타나는 화면입니다. 파일 선택 클릭 후 *.json 파일을 올리시면 됩니다.

 

13-3. 그렇지만 구글 동기화가 가장 편하죠! 특히 두 개 이상의 기기에서 사용하려면 구글 동기화를 하시는 것이 좋습니다.

구글에 로그인 하시고,

 

허용 누르시면 됩니다.

 

그리고 (한참) 기다리시면 구글 동기화가 진행됩니다. DATA HAS BEEN SYNCED라는 문구가 뜹니다.(이 문구 뜨기까지 시간이 오래 걸립니다...)

*. 참고로 그 옆의 조그만 화살표 버튼은 로그아웃입니다.

 

안드로이드에서 포켓튜브 앱 설치하기

Play 스토어에서 PocketTube를 설치합니다.

https://play.google.com/store/apps/details?id=com.youtubesubscriptionmanager 

 

구글 계정으로 로그인 합니다.

 

허용을 눌러줍니다.

 

그러면 이렇게 PC에서 만든 그룹들이 동기화 되는 것을 보실 수 있습니다.

이 그룹을 누르면 해당하는 채널 목록이 나오고, 채널을 누르면 유튜브 앱으로 연결됩니다.

 

저의 글을 읽어 주셔서 감사합니다.

오늘은 포켓튜브(PocketTube) 사용법을 알아보았습니다. 확장 프로그램은 업데이트가 자주 이루어지고 있습니다. 그만큼 전망이 좋다는 거겠죠? 이 확장/앱 잘 활용하셔서 유튜브를 편리하게 이용하시면 좋겠습니다.

 

댓글을 달아 주세요

728x90

수성비전자방입니다. 구글은 네이버/다음과 달리 검색 후 선택한 검색 결과가 바로 그 탭에서 접속됩니다. 구글에서도 네이버/다음처럼 선택한 검색 결과가 새 탭으로 열리도록 설정해 보겠습니다.

 

설정 방법

1. 구글(https://www.google.com)에 접속합니다.

2. 오른쪽 아래 설정을 클릭합니다.

3. 검색 설정으로 들어갑니다.

 

4. 검색 결과 탭에서 진행합니다.

5. 선택한 검색결과를 새 브라우처 창에서 열기를 체크합니다.

6. 저장합니다.

 

잘 적용되었는지 확인해 볼까요?

구글에서 아무거나 검색하고 아무거나 클릭해 보았습니다.

 

선택한 검색 결과가 새 탭에서 열렸습니다!

 

저의 글을 읽어 주셔서 감사합니다.

자신에게 맞는 방식이 있을 것입니다. 취향에 맞게 설정하시기 바랍니다.

다음에 만나요!

댓글을 달아 주세요

728x90

수성비전자방입니다. 오늘은 제가 사용하는 KT 공유기에서 포트포워딩하는 방법을 알려드리겠습니다. 포트포워딩을 하려고 하시는 분들은 외부 네트워크에서 기기에 연결하기 위함이겠죠?

 

아마도 대표적인 예시는 서버...(아래의 글들은 제가 만든 서버의 목록입니다.^^)

라즈베리파이3 B+로 홈페이지 서버 만들기(Node.js 이용)

마인크래프트 자바에디션 바닐라 서버 여는 법

 

공인 IP와 사설 IP

IP 주소는 공인 IP와 사설 IP로 나눌 수 있습니다.

공인 IP는 전세계에서 고유한 IP입니다. 그래서 다른 PC의 공인 IP를 알면 그 PC에 접속할 수 있습니다. 다만, 모든 PC와 스마트폰, IoT 기기 등에 공인 IP가 부여되면 IP 주소가 고갈되겠죠?

 

그래서 공유기를 사용하는 경우 그 공유기에 연결된 기기들은 사설 IP가 부여됩니다. 이 경우 같은 공유기로 연결된 네트워크 안에서는 사설 IP를 입력하여 서로의 기기에 접속할 수 있지만, 그 공유기에 연결되지 않은 친구 PC에서 공유기에 연결된 제 기기에 접속할 때에는 사설 IP를 입력하면 접속이 안 됩니다.

 

사설 IP의 범위는 아래와 같습니다.

A: 10.0.0.0~10.255.255.255

B: 172.16.0.0~172.31.255.255

C: 192.168.0.0~192.168.255.255

위의 범위에 해당하는 IP를 갖고 있다면 사설 IP를 부여받으신 것이고, 그 외의 IP를 갖고 있다면 공인 IP를 부여받으신 것입니다.

 

그렇다면 외부 네트워크에서, 사설 IP를 부여받은 제 서버에 접속하려면 어떻게 해야 할까요? 그럴 때 하는 것이 바로 포트포워딩입니다. 포트포워딩을 하고 나면 외부 네트워크에서도 공인IP:포트번호를 입력하여 접속할 수 있습니다. 지금부터 KT 공유기에서 포트포워딩 하는 방법을 알려드리겠습니다.

 

KT 공유기(Giga Wifi Home) 포트포워딩

Windows를 기준으로 설명 드리겠습니다.

 

1. 명령 프롬프트를 실행합니다.

 

2. ipconfig 명령을 실행합니다.

유선랜을 연결하신 분은 이더넷 어댑터 이더넷을 주목합니다.

무선랜을 연결하신 분은 무선 LAN 어댑터 Wi-Fi를 주목합니다.

버추얼박스를 설치하신 분들께서는 VirtualBox Host-Only Network와 혼동하지 않도록 주의하시기 바랍니다.

이제 게이트웨이 주소를 확인하시기 바랍니다.

 

3. 웹브라우저에서 게이트웨이 주소로 접속합니다. 그러면 공유기 설정 페이지가 나옵니다.

처음 접속하시는 것이라면 아이디와 비밀번호는 아래와 같습니다.

ID: ktuser

비밀번호: homehub

ID와 비밀번호가 이미 입력되어 있어서 필요없을 것 같지만, 이어서 비밀번호 변경을 해야 하므로 알고 있어야 합니다.

아이디와 비밀번호를 잊어먹으셔서 계정 초기화를 하셨다면 비밀번호는 공유기 비밀번호로 변경됩니다. 아마도 공유기 뒷면에 적혀 있겠죠?

 

4. ID와 비밀번호를 바꾸랍니다. 확인합니다.

 

5. 변경해 줍니다.

 

6. 바꾼 ID와 비밀번호로 로그인합니다.

 

7. 드디어 로그인했습니다. 여기서 공인 IP와 DNS 등을 확인하실 수 있습니다.

 

이 사진에 있는 포트 번호와 설명은 예시입니다.

8. 사이드바에 있는 장치설정을 클릭합니다.

9. 트래픽 관리를 클릭합니다.

10. 상단에 있는 포트 포워딩 설정을 클릭합니다.

11. 빈칸을 채워 보겠습니다.

*소스 IP 주소, 소스 포트: 비워 두셔도 됩니다.

*외부 포트: 외부에서 접속할 때 입력할 포트입니다.

*내부 IP 주소: 서버로 사용할 기기의 사설 IP를 입력합니다.

*내부 포트: 서버로 사용할 기기에서 열어 둔 포트를 입력합니다.

*설명: 말 그대로 해당 포트포워딩에 대한 설명이니 마음대로 입력하세요.

(Tip1: 외부 포트는 내부 포트와 동일하게 설정하셔도 됩니다.)

(Tip2: 사용할 수 있는 포트의 범위는 0~65535라고 하네요.)

12. 다 작성하셨으면 추가를 클릭합니다. 3초 정도 기다리시면 아래의 목록에 나타나며, 적용됩니다. 그러면 포트포워딩이 완료되었으므로 외부에서 공인IP:포트번호를 입력하여 접속할 수 있습니다.

 

이해 못하신 분들을 위한 추가 그림

상황1)

 

 

상황2)

외부 포트와 내부 포트가 다른 경우

 

저의 글을 읽어 주셔서 감사합니다.

질문 있으시면 댓글 남겨 주세요. 제가 아는 부분에 한해서 답변 드리겠습니다.

다음에 만나요!

댓글을 달아 주세요

728x90

수성비전자방입니다. 최근 수성비전자방의 스킨을 수정했습니다. 이번에 공감 버튼 쪽을 좀 건드려 보았는데요,

 

원래 이렇게 생긴 것을

 

이렇게 저만의 버튼을 넣었습니다. 오늘은 이렇게 나만의 버튼을 추가하는 방법을 알아보겠습니다.

 

이 방법은 특수합니다. 원래 티스토리 공감, 구독 버튼이 치환자가 따로 제공되지 않고 본문 치환자로 퉁쳐지는데요. 그렇기 때문에 공감 버튼과 구독 버튼 사이에 자신만의 버튼을 넣기가 까다롭습니다.

그래서 저는 자바스크립트를 사용할 건데요, HTML DOM을 사용하겠습니다. 그 전에 먼저 예제 파일을 제공해 드리겠습니다. 연습하실 분들은 사용하시기 바랍니다.

 

예제 파일.zip
0.00MB

 

첨부파일을 압축해제 해주세요. 그러면 파일이 두 개 있을 것입니다. 그 중 index.html 파일을 소스코드 편집기로 실행하세요.

(실제 티스토리 스킨 수정하실 때에는 블로그관리→스킨 편집→HTML 편집으로 들어가시거나 스킨을 내려받아 압축해제 하신 후 skin.html을 소스코드 편집기로 실행하시면 되는 것 아시죠?)

 

그러면 소스코드가 보일텐데 </body> 바로 위에

 

1
2
3
<script type="text/javascript>
 
</script>
cs

 

를 입력하여 <script type="text/javascript>와 </script> 사이에 자바스크립트를 작성하겠습니다.

 

HTML DOM

DOM은 Document Object Model의 약자입니다. HTML DOM를 사용하면 자바스크립트를 이용해 본문을 수정할 수 있습니다. 이 글에서 설명하는 것이 대부분 HTML DOM이라고 생각하시면 되겠습니다.

 

createElement
1
2
3
4
5
var button = document.createElement("a");
button.textContent = "구글 웹 접속";
button.className = "mybutton";
button.href = "https://www.google.com";
button.target = "_blank";
cs

 

createElement를 이용하여 HTML 요소를 만들 수 있습니다.  하나하나 알아보겠습니다.

 

var button = document.createElement("a");

우선 변수를 만듭니다. 변수 이름은 마음대로 하셔도 됩니다. 저는 button으로 해 보겠습니다.

괄호 안에는 태그 이름을 넣습니다. div를 입력하시면 div 요소가 생성되고, 저처럼 a를 입력하시면 a 요소(하이퍼링크)가 생성됩니다.

 

button.textContent = "구글 웹 접속";

지금부터 제가 빨간색으로 쓰는 것은 전부 다 위에서 선언한 변수 이름으로 합니다.

큰따옴표 안에는 웹페이지에서 표시할 텍스트(본문)를 넣습니다.

 

button.className = "mybutton";

class 이름을 적습니다.

 

button.href = "https://www.google.com";

제가 a 요소를 만들었기에 가능한 부분입니다. 웹 주소를 입력합니다.

 

button.target="_blank";

역시 제가 a 요소를 만들었기에 가능한 부분입니다. 이것을 붙이면 하이퍼링크를 클릭했을 때 새탭으로 열리게 합니다.

 

이렇게 스크립트를 작성하면 결과적으로 아래와 같은 HTML을 작성한 것과 동일한 효과가 발생됩니다.(물론, 아직 변수 상태이기 때문에 화면에 출력되지는 않습니다.)

 

1
<a class="google" href="https://www.google.com" target="_blank">구글 웹 접속</a>
cs

 

이제 실제로 이것을 화면에 출력해 보겠습니다.

 

querySelector

화면에 출력하기 위해 querySelector를 출력하겠습니다. querySelector는 아래와 같이 사용합니다.

 

document.querySelector("tag또는ID또는class");

 

괄호 안에 CSS에서처럼

tag를 입력할 때는 그냥 입력하시면 되고(ex. document.querySelector("p"); ),

ID를 입력하실 때는 앞에 #을 붙이시고(ex. document.querySelector("#identification"); ),

class를 입력하실 때는 앞에 .을 붙이시면 됩니다(ex. document.querySelector(".classroom"); ).

 

실제 티스토리 공감 버튼도 그렇고, 제가 첨부해 드린 예제 파일도 그렇고 공감 버튼은 <div class="container_postbtn #post_button_group">와 </div> 사이에 들어 있습니다.(여기서 말하는 '실제 티스토리'는 2020년 12월 8일 기준으로 개발자 도구를 이용하여 확인했습니다.)

class 이름 사이에 공백이 들어 있는데 이는 container_postbtn라는 이름과 #post_button_group라는 이름을 둘 다 가진 것이라고 합니다.(사실 이 부분은 자세히 알아보지 못했습니다. 죄송합니다.)

저는 container_postbtn에 주목하겠습니다. 아래와 같이 소스코드를 작성하시면 됩니다.

 

document.querySelector(".container_postbtn").append(button);

 

이렇게 하면 자바스크립트로 작성한('코딩한'인가?) 내용이 웹페이지에서 출력됩니다.

 

방금 만든 하이퍼링크가 공감 버튼과 구독 버튼 사이에 쏙 들어갔습니다. 왜 그런 걸까요? (로딩 속도 차이인가?)

아! 그리고 아직 버튼 모양이 아니라서 실망하신 분들이 있을 수 있는데 그건 마지막으로 설명해 드릴 CSS를 사용하여 버튼 모양으로 만들면 됩니다.

 

버튼을 2개 이상 만들고 싶을 때

자신만의 버튼을 2개 이상 만드셔도 됩니다. 우선 소스코드를 보여드리겠습니다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var button = document.createElement("a");
button.textContent = "구글 웹 접속";
button.className = "mybutton";
button.href = "https://www.google.com";
button.target = "_blank";
 
var green = document.createElement("a");
green.textContent = "네이버 접속";
green.className = "mybutton";
green.href = "https://www.naver.com";
green.target = "_blank";
 
document.querySelector(".container_postbtn").append(button);
document.querySelector(".container_postbtn").append(green);
cs

 

변수를 각각 만드시고, document.querySelector도 각각 입력하시면 됩니다.(물론 변수 이름은 바꿔서.)

className은 굳이 다르게 하실 필요는 없습니다.

 

CSS

버튼에 스타일을 지정하기 위해서는 CSS가 필요합니다. 원래 티스토리 스킨 수정할 때 블로그관리→스킨 편집→HTML 편집 으로 들어가 보면 CSS를 편집할 수 있는 탭이 따로 있습니다. 스킨을 내려받아서 수정하시는 경우 또는 제가 첨부해 드린 예제 파일을 사용하시는 경우 style.css 파일이 있을 겁니다. 거기서 수정하시면 됩니다.

 

1
2
3
4
5
6
7
8
.container_postbtn .mybutton {
    float: left;
    padding: 0 9px;
    border-radius: 30px; 
    border: 1px solid #959595;
    border-color: rgba(185,185,185,0.5); 
}
 
cs

 

이 소스 코드를 CSS 파일 소스코드에서 어디에 작성하시든 상관은 없습니다.(맨 아래 작성하셔도 됩니다.) 이번에도 하나하나 알아보겠습니다.

 

.container_postbtn .mybutton

'container_postbtn'이라는 class 안에 있는 'mybutton'이라는 class에 적용한다는 뜻입니다.

 

중괄호 안에 있는 것은 티스토리 공감 버튼의 스타일을 그대로 가져온 것입니다.(개발자 도구에서 확인할 수 있습니다.) 이 중 몇 가지만 알아보자면

 

border-radius: 30px;

이건 버튼을 둥글게 만듭니다.

 

border-color: rgba(185,185,185,0.5);

이건 버튼 테두리 색상입니다.

 

완성

위 사진은 예제 파일을 이용하여 만들었을 때의 결과입니다.

혹시나 하는 마음으로 완성 파일도 첨부해 드리겠습니다.

 

완성 파일.zip
0.00MB

 

저의 글을 읽어 주셔서 감사합니다.

이렇게 티스토리 공감 버튼 뒤에 나만의 버튼 추가하기에 대해 알아보았습니다.

글에 오류가 있거나 질문이 있으시다면 댓글 달아주세요.

다음에 만나요!

 

댓글을 달아 주세요

728x90

수성비전자방입니다. 연말이네요. 거리두기 친구들을 만나지 못해 속상하십니까?

그렇다면 화상통화를 하는 것은 어떠십니까?

이 글에서는 Google Meet를 알아보겠습니다. Google Meet를 이용하시면 웹브라우저에서 화상통화를 하실 수 있습니다.(저는 Microsoft Edge를 사용했습니다.)

구글 고기

 

*일부 사진은 모자이크 처리가 되어 있으니 감안하고 보시기 바랍니다.

 

  1. https://meet.google.com 으로 접속합니다.

  2. 초록색 네모 버튼 새 회의를 클릭합니다.

 

3. 원하는 것 선택

 

4. 웹브라우저에서 카메라, 마이크를 사용하는 것을 동의하시고, 본인 상태를 확인하신 후 지금 참여하기를 클릭합니다.

 

5. 이런 창이 뜹니다. 저 주소를 공유하시면 됩니다.

 

여기까지 주최자가 할 일이구요, 참가자는 어떻게 해야 할까요?

 

이제 상대방은 https://meet.google.com 첫 화면에서 코드 또는 링크 입력에 회의 URL의 뒷부분을 - 없이 입력하시면 됩니다.

 

그리고 나서 주최자와 마찬가지로 카메라, 마이크 사용을 동의하시면 되는데 그 다음 참여 요청을 해야 합니다.

 

6. 주최자가 수락해 줍니다.

 

7. 그러면 상대방이 보이죠?(저는 혼자서 컴퓨터 두 대를 켜고 왔다갔다 했으므로 사람이 없습니다.ㅋㅋ)

 

이제 여러 가지 기능을 살펴보겠습니다.

 

오른쪽 위에서 타일로 보기를 누를 경우

 

이렇게 모든 참가자의 화면을 볼 수 있으며, 참가자를 음소거하는 것도 가능합니다.

(타일로 보기는 참가자도 개인적으로 조작 가능합니다.)

 

오른쪽 아래 점 세 개를 눌러 보면 여러 가지가 있네요.

 

[화이트보드]

새 화이트보드 시작을 눌러 볼까요?

 

참가자에게 수정을 허용할지 보게만 할지를 결정하세요.

 

이렇게 화이트보드를 공유할 수 있습니다.

 

다만, 수신자에게 바로 화면이 뜨는 것은 아니고,

 

채팅창에서 하이퍼링크를 클릭해야 합니다.

 

여러 가지 기능이 있습니다. 화이트보드를 삭제하려면 오른쪽 위 점 세 개 누르시고 삭제하시기 바랍니다.

 

[발표(=화면 공유)]

화면 공유를 하시려면 발표 시작을 클릭하시면 됩니다. 화이트보드와 달리 공유 즉시 수신자의 화면에 나타납니다.

 

<내 전체화면>

디스플레이 설정을 확장으로 바꿔 보았습니다. 그러면 저렇게 두 모니터 중 하나만 선택해서 화면을 공유할 수 있습니다.

 

그런데 나는 왜 이 모니터만 캡쳐한 걸까?

그러면 주최자 화면에는 위의 이미지처럼 나타나고,

 

수신자의 화면에는 이렇게 나옵니다.

 

화면 공유를 수신하는 경우에도 타일로 보기가 가능합니다.

 

<창>

창만 따로 선택해서 공유하실 수도 있습니다.

메모장을 열어서 공유해 보았습니다.

 

수신자 화면입니다. 참고로 화면 공유하는 사람이 창을 움직여도 그 창이 계속해서 공유됩니다.

흔들림 없는 편안함

 

<탭>

도대체 무슨 탭을 공유한다는 건가 싶으시겠지만 여기서 말하는 웹브라우저 탭입니다.

웹브라우저를 공유하는 것입니다.

급하게 새 탭을 열었습니다. 새 탭을 공유해 보겠습니다.

 

수신자의 화면입니다. 엣지의 새 탭이 그대로 공유되고 있군요.

 

[레이아웃 변경]

 

[배경 변경]

지금부터 보여드리는 사진은 배경 변경의 효과를 보여드리기 위해 모자이크 처리를 하지 않았습니다. 또한 제 방에는 크로마키 설비가 없었음을 알려드립니다. 참고하시기 바랍니다.

가끔 제 머리카락과 손이 사라집니다.(빛을 받으면 사라지는 것 같음.)

 

이건 배경을 흐리게 한 것입니다. 배경을 다른 것으로 바꾸는 것보다 나은 것 같습니다.

 

[설정]

설정입니다.

 

[참고 - 모바일]

모바일(안드로이드, iOS)은 앱이 따로 있는 것 같더군요. 참고하시기 바랍니다.

 

오늘 준비한 글은 여기까지입니다.

제 글에 오류가 있다면 댓글로 알려주시기 바랍니다.

다음에 만나요!

 

 

댓글을 달아 주세요

728x90

안녕하십니까? 수성비입니다. 오늘은 한국교육과정평가원 누리집에서 교육과정 보는 법과 수능 기출 보는 법을 알아보겠습니다.

 

우선 한국교육과정평가원의 누리집 주소는 www.kice.re.kr/ 입니다.

 

[교육과정 보는 법]

교육과정에 대해서는 국가교육과정 정보센터(NCIC)에서 알아보실 수 있습니다.

ncic.kice.re.kr/ 로 바로 접속하셔도 좋고, 아니면 아래와 같이 메뉴를 통해 들어가셔도 좋습니다.

메뉴를 통해 접속하는 법을 보시려면 아래의 '더보기'를 클릭하세요.

 

더보기

 

한국교육과정평가원 누리집에서 주요사업국가교육과정 정보센터(NCIC)로 들어갑니다.

 

국가교육과정 정보센터(NCIC) 바로가기를 클릭합니다.

 

위 이미지에서 제가 v표시한 우리나라 교육과정을 클릭하면 우리나라 교육과정을 보실 수 있습니다.

 

목록에서 바로 클릭하셔도 되지만 전체 교육과정 보기를 클릭하시면

 

이렇게 한꺼번에 보실 수 있습니다.

 

[수능 기출, 모평 기출 보는 법]

평가원 누리집(www.kice.re.kr/) 첫 화면에서 자료마당을 보시면 기출문제 관련 화면으로 진입할 수 있는 메뉴가 있습니다. 이 글에서는 대학수학능력시험 · 모의평가를 보도록 하겠습니다.

 

그러면 대학수학능력시험, 수능(2004학년도 이전), 수능 모의평가 별로 나누어 파일을 제공하는 모습을 보실 수 있습니다.

 

그리고 하나 더 알려드리자면,

수능 모의평가 목록에서 2022학년도 대학수학능력시험 예시문항도 보실 수 있습니다. 수능 체제가 변경되다 보니 이렇게 예시문항을 제공하는 것으로 보입니다. 한 번 검색해 보세요.

 

오늘 준비한 글은 여기까지입니다. 저의 글을 읽어 주셔서 감사합니다. 다음에 만나요!

 

▶수성비의 글을 공유하는 올바른 방법(이용 안내)

https://toopyo.tistory.com/entry/ssbguide

▶수성비 전자방을 네이버 이웃으로 추가하세요!

(카테고리 밑에 있습니다.)

▼이 글이 도움이 되셨다면 공감을 눌러주세요.

 

 

댓글을 달아 주세요

728x90
안녕하십니까? 수성비입니다. 여러분은 다음 계정과 카카오계정 연결이 가능하다는 것을 아시나요? 이유는 모르겠지만 만 15세 이상부터 가능합니다. 그래서 만 15세가 되기를 기다리다가 잊어버렸네요.. 그래서 지금 연결했습니다.

저는 모바일로 진행했습니다. 먼저 다음 홈에서 메뉴를 눌러주세요.(웹도 가능함.) 그 다음 여러분의 프로필 옆(메일, 카페, 채널 위에) '연결하기'를 누릅니다.

카카오계정으로 로그인!

로그인하시구요~.

문제 없다면 연결될 것입니다.^^

카톡이 오니 뿌듯하네요.

간단하죠?
다음에 만나요!
이 글이 도움이 되셨다면 아래의 공감을 눌러주세요.^^

댓글을 달아 주세요

728x90

안녕하십니까? 수성비입니다. 오랜만이네요! 오늘은 몇 주 전부터 예고한 티스토리에 네이버 이웃커넥트 설치하기입니다. 사실 중간고사 끝나자마자 올리려고 했는데 하필 그 때 포토업로더 오류가 일어났네요. 오늘은 괜찮습니다! 잘 되네요.^^

 

1. 일단 여러분의 네이버 누리사랑방으로 들어가 주세요.

*누리사랑방은 blog를 의미하는 우리말입니다.

2. 관리로 들어갑니다.

 

3. 이웃 그룹 관리로 들어갑니다.

그런데 1~3을 간단히 줄일 수 있다는 사실!

http://blog.naver.com 에서 이웃 관리 들어가시면 됩니다.^^(다만 적절한 사진을 찍지 못해서 사진을 찍어둔 방법으로 알려드렸습니다. 중요한 건 이웃 관리로 가야 한다는 것.)

 

4. 이웃커넥트 설치하기로 들어갑니다.


 

5. 다른 블로그로 퍼가기를 누릅니다.

6. 위젯 종류를 선택합니다.

7. 위젯을 사용할 블로그 주소(티스토리 주소)를 입력하고 대표블로그로 사용하는 것에 체크합니다.

*여기서 주소 뒤에 rss 붙여야 한다는 분들 계신데 제가 두 가지 다 해봤을 때 rss 있는것과 없는 것의 차이를 잘 모르겠네요.

8. 위젯 스타일부터 디자인까지 여러분 취향에 따라 설정합니다.

9. 퍼가기를 합니다.

 

10. 이 위젯코드는 복사해서 메모장에 붙여넣고 저장해 두시는 것이 좋습니다.

(잃어버리면 재발급 해야 함.)

 

11. 이제 여러분의 티스토리 관리자로 들어갑니다. 관리자가 개편된 관계로 사진이 약간 흐트러지는 점 양해 부탁드립니다.

12. (위 사진①)플러그인으로 들어갑니다.

13. (위 사진②)배너 출력을 활성화합니다.

 

14. (위 사진①)사이드바로 들어갑니다.

15. (위 사진②)HTML 배너출력을 추가합니다.

 

16. 위 사진에서 네모 표시한 줄 4개 단추를 드래그해서 위치를 조정합니다.

이 때 알툴바 등의 우클릭 제한 해제 기능을 해제하시기 바랍니다!

17. 편집을 누릅니다.

 

18. 이름을 입력합니다.(위 사진에서 파란색으로 지운 것은 사진과 제가 적용한 것이 불일치해서 여러분의 혼란을 줄이기 위한 것으로 이름은 여러분 마음대로 지으셔도 됩니다.)

19. HTML 소스를 입력합니다. 아까 복사한 이웃커넥트 위젯코드를 그대로 붙여넣으셔도 되고, 가운데 정렬하고 싶으시면

<center>

이웃커넥트 위젯코드

</center>

이렇게 넣어주시면 됩니다. 개인적으로 가운데 정렬이 예쁘다고 생각합니다.

 

20. 변경사항 저장합니다.

 

21. 이웃커넥트가 적용된 것을 보실 수 있습니다.

 

그런데 여기 문제가 있습니다! 인터넷에서 보면 다른 분들은 티스토리에서 쓴 글이 이웃새글에 뜨던데 저는 안 그러네요.. 엄마께 이웃 추가를 부탁드렸는데 제 글이 안 뜹니다. 그래도 네이버에서 티스토리로 연결되긴 하지만.. 업데이트순으로 이웃을 보다 보면 티스토리는 제일 아래로 내려가게 되서 말이죠... rss로 등록해도 마찬가지입니다. 해결 방법 아시는 분을 댓글 달아주세요..

티스토리 사용자끼리는 링크 기능을 사용하는 것이 좋을 것 같다는 생각이 듭니다.

(스킨에다가 링크 기능을 넣어야 겠네요...)

(정정합니다. 문제 없습니다.)

 

다음에 만나요!

 

댓글을 달아 주세요

728x90

안녕하십니까? 수성비입니다. 원래 오늘은 네이버 이웃 커넥트에 대한 글을 쓰려고 했는데 티스토리가 개편되어 그 글부터 쓰려고 합니다.

티스토리 관리자로 들어가면 위와 같이 뜹니다. 이건 넘겨 가면서 보시면 되니 제가 직접 확인한 것으로 설명해 드리겠습니다.

우선 관리자가 바뀌었습니다. 주소가 바뀌었는데

http://자신이설정한주소.tistory.com/manage 로 접속하셔야 합니다.(admin→manage)

아니면 그냥 마우스로 클릭해서 들어가셔도 되구요.

 

[누리사랑방에 메뉴를 추가/삭제하고 순서를 바꾸실 수 있습니다.]

저는 Flatinum 스킨을 수정해서 쓰고 있는데 메뉴를 지원하지 않네요. 메뉴 기능을 쓰려면 스킨 HTML에

[##_blog_menu_##]

위와 같은 치환자가 있어야 합니다. 개편 전에 Flatinum에 메뉴 치환자를 넣어 봤는데 흐트러지더라구요.

 

[계정 단위의 관리 기능이 명확하게 분리되었습니다.]

블로그관리는 계속 보고 있으니 계정 관리를 보여 드리겠습니다. 이전에는 로그인 기기 관리 같은 거 명확하지 않아서 불편했는데 이제 명확하게 분리되니 쓰기 편할 것 같습니다.

 

[활동 피드백을 한 알림창에서 확인할 수 있습니다.]

오른쪽 위 프로필사진을 누르면 알림창이 뜨는데 저는 아직 알림이 없네요..

티스토리에서 제공한 사진을 보여드리겠습니다. 티스토리 모바일 앱처럼 나오는 것이 보기 좋아 보이네요.(모바일 앱에서는 저게 편하거든요.^^)

 

[고정된 콘텐츠는 페이지 기능으로 만들 수 있습니다.]

일단 저는 당장 쓸 건 아니구요. 나중에 필요하면 그 때 쓰기로 하죠. Flatinum 스킨에 사진 기능도 안 쓰는데...

일단 그것보다 위 사진에서 파란색으로 표시한 콘텐츠 부분이 마음에 듭니다. 글 관리, 페이지 관리, 공지 관리, 서식 관리가 나뉘어 있어서 관리하기 편합니다.

 

[카테고리 관리]

우선 콘텐츠카테고리 관리로 들어갑니다.

카테고리 추가입니다. 큼직큼직 해서 좋네요.^^

카테고리 이름 입력하시면 됩니다.

③~④이게 정말 마음에 듭니다. 주제 선택을 여기서 바로 할 수 있어서 편합니다. 이전에는 주제 선택은 따로 해야 했어서 불편했는데 이렇게 한꺼번에 할 수 있어서 좋습니다.

확인하시면 카테고리 추가 완료!

티스토리 운영 오래 하신 분들은 아시겠죠? 필수적으로 해야 하는 저장입니다.


 

원래 각 카테고리 왼쪽의 줄 4개 부분을 드래그하면 카테고리가 옮겨져야 하는데 잘 안 되더라구요.. 카테고리를 다른 카테고리에 소속되게 하려면 품을(?) 카테고리에서 '추가'를 눌러 추가하셔야 합니다.(위 사진이 잘못되었네요.. 수정이 아니라 추가입니다.)

 

[꾸미기 설정]

이것저것 손볼 것이 많습니다. 특히 저는 기본 화면에서 표시할 글 개수, 댓글 보이게 하기 등을 설정했네요.^^

 

[이 밖에 변경/종료된 기능]

1. 인터넷 익스플로러(이하 'IE') 10 미만 브라우저 지원 종료→IE를 업데이트하거나 크롬, 파이어폭스, 오페라를 쓰라네요. 저는 지금 IE 11을 쓰고 있습니다. 방문자 여러분들은 엣지를 쓰셔도 됩니다.(그냥 Windows 10을 쓰는 게 편합니다.)

2. 키워드 표시 방법 변경: 이건 저도 잘 모르겠어요. 티스토리에서 알려드립니다.(http://notice.tistory.com/2399)를 참고해 주세요.

3. 카테고리 스타일 종료: 저는 이미 예쁜 스킨을 쓰고 있어서..ㅎㅎ 상관이 없네요.

4. 종료된 플러그인: 유입 경로, 방문자 통계, 검색어 통계, CCL 표시, 내 모바일 티스토리 QR 코드

대신 플러그인을 활성화하지 않아도 기본 표시되거나 설정 메뉴에서 쉽게 설정할 수 있도록 개선되었다고 하네요.

5. 티스토리 메일(@tistory.com) 기능 종료: 어차피 저는 안 쓰던 기능이라 상관이 없네요.

 

[앞으로 있을 변화에 대해서]

1. 플래시 제거: 이제 엣지로도 글을 쓸 수 있게 될까요? 현재 플래시 때문에 엣지를 못 쓰거든요.. 플래시가 제거되면 스마트폰으로도 PC처럼 글을 쓸 수 있게 될지도 모르죠.

2. 에디터 개편: 어떤 개편이든 상관 없는데 HTML 기능만은 유지해 주셨으면 합니다.

아! 하나 더. 사진 여러 개 올리면 중간 중간 줄바꿈(<br>) 넣어주셨으면 좋겠어요.

3. 앱 개편: 이거 진짜 필요합니다. 출시된 지 얼마나 됐는데 아직도 1.2.5라니... 플래시 제거와 함께 모바일 앱 기능이 늘어났으면 좋겠네요.

4. 티스토리 홈 개편: 지금도 예쁜데 더 좋아지시겠다면 말리지는 않죠. 다만 사용자들의 누리사랑방 스킨은 지금 그대로 두는 것이 좋을 것 같습니다. 그런 거 바뀌면 스킨 수정하느라 힘들거든요.

 

다음에 만나요!





 

댓글을 달아 주세요