동물권 단체 '케어'를 아시나요?

"내 생각엔 주둥이는 우리가 염색해서 검은색으로 두 마리는 그렇게 해보고...

위 대화는 자신들이 구조했었지만 바로 뒤에서 안락사 시켰던 투견들에 대해

뉴스타파가 취재에 들어가자, 긴급히 아무 개나 갖다가 주둥이를 염색해서 투견처럼 보이게 하자고 작당하고 있는 박소연('케어' 의 대표)님의 녹취내용입니다.

도대체 한국사회에서 믿을 수 있는 건 아무 것도 없는 것일까요? 사랑의 열매 같은 자선단체들도 보통 사람들의 소중한 정성을 모아서 자기들 술 값으로 써 버렸던 지난 사건들이 있었어서 더이상 자선단체라면 의심부터 하게 된 저인데요.

그 동안 강형욱씨의 "세상의 나쁜개는 없다"와 같은 정말 훌륭한 프로그램들을 보면서 세삼 사람과 마찬가지로 사랑받아야 될 동물들, 특히나 가장 가까이에 있는 개와 고양이들에 대한 애틋하고 아끼는 마음들이 들었었는데요.

'케어' 라는 이름이 낯설지가 않고 많은 뉴스들과 TV 프로그램 등을 통해 그 이름이 친근하고 학대 받는 동물들에 대한 사랑을 실천하고 있을 단체라고 믿어 의심치 않았었습니다.

조금 전까지만 해도요.

그런데 야동팔이로 수천억 벌어들인 '양진호'씨의 실체를 한국사회에 드러내준 뉴스타파가 다시 한번 경악할 만한 동물단체의 쇼맨쉽과 거짓 동정팔이를 고발해 줬네요.

동물권 단체라해서 수 많은 사람들에게 후원을 받아온 '케어' 가 구조한 동물들을 뒤에서 안락사 시킨다는 내용입니다. 꼭 영상 봐주시고 널리 공유 부탁드립니다.




[동물권 단체 케어 로고]

다운로드.png


시스템을 관리할 때 그 시작은 관리대상 시스템의 정보 확인이다.
각 시스템에 대한 상세 정보를 알아야 해당 시스템에 대한 펌웨어 업그레이드나 패치등을 처리할 수 있기 때문에 우
선 시스템의 정보를 확인하는 법 부터 알아보자

1. dmidecode 명령을 통해서 CPU, 메모리, BIOS 등의 정보를 확인 할 수 있다.

  • Bios 정보 확인
    dmidecode -t bios
    dmidecode_bios.png

  • System 정보 확인
    dmidecode -t system
    dmidecode_system.png

  • 프로세서 정보 확인
    dmidecode -t processor
    dmidecode_processor.png

  • Memory 정보 확인
    dmidecode -t memory
    dmidecode_memory.png

2. CPU 정보는 proc/cpuinfo 파일을 통하거나 lscpu 명령으로 확인할 수 있다.

  • lscpu 명령어 사용
    lscpu
    lscpu.png

  • proc 정보 조회
    cat /proc/cpuinfo
    proc_cpuinfo.png

3. free 명령을 통해서 시스템에 설치된 메모리의 전체 크기를 알 수 있다.

  • free 명령어 또는 메모리 정보를 통해 메모리 용량 확인이 가능하다
    free -m
    dmidecode_memory_size.png

4. 시스템에 마운트된 블록 디바이스의 정보는 df 명령을 통해서 확인할 수 있다.

  • sda 는 SCSI 방식의 디스크나 SAS, SATA와 같은 하드디스크 타입의 인터페이스를 사용하는 장치를 의미한다.

  • hda 는 IDE 기반의 디스크를 의미한다.

  • vda 는 가상 하이퍼바이저 기반의 디스크가 마운트되어 있다는 것을 의미한다.

  • df 명령어 또는 smartctl 명령어를 통해 디스크 정보를 확인할 수 있다
    df -h
    df_smartctl.png

5. 네트워크 카드 정보는 ethtool 명령을 통해서 확인할 수 있다.

ethtool 명령어중에서도 -g, -k, -i 옵션을 가장 많이 사용한다.

  • eth0 네트워크 nic 에 대한 네트워크 연결여부 확인
    ethtool eth0
    ethtool_eth0.png

6. ethtool 명령 중 -g 옵션으로 네트워크 카드에 설정된 Ring Buffer 의 최대 크기와 현재 크기를 확인할 수 있다.

7. ethtool 명령 중 -k 옵션으로 네트워크 카드의 부수적인 기능들을 확인할 수 있다.

  • eth0 네트워크 nic 에 대한 성능 최적화 옵션 확인
    ethtool -k eth0
    ethtool_eth0_param.png

8. ethtool 명령 중 -i 옵션으로 네트워크 카드가 사용 중인 커널 드라이버의 정보를 확인할 수 있다.

  • eth0 네트워크 nic 에 상세 정보 확인
    ethtool -i eth0
    ethtool_eth0_info.png

9. kernel 에 대한 상세 정보는 uname 명령어나 dmesg 명령어를 통해 확인 할 수 있다.

  • dmesg 명령어를 통한 kernel 정보확인
    dmesg
    dmesg_kernel.png

  • uname 명령어를 통한 kernel 정보확인
    uname -a
    uname_r_a.png

  • proc 내용 조회를 통한 kernel 정보확인
    proc
    proc_kernel_info.png

  • boot config 내용 조회를 통한 kernel debug 옵션 확인
    cat /boot/config-커널버전
    dmidecode_system_tracer.png


Byteball 코인은 steemit 사용자를 위한 특별한 Airdrop(공짜로 코인 뿌리기) 프로그램을 운영하고 있습니다. http://byteball.org

아무것도 요구하지 않습니다. 단지 steemit 에 계정만 있으면 그냥 byteball 코인을 줍니다.

대신 본인의 명성에 따라서 제공되는 coin 의 양은 달라지지만, 최소 10달러를 공짜로 받을 수 있습니다. 
  • 스팀 명성치가 30이 넘는 경우 10$ 가치만큼의 GBYTE 코인을 받습니다.
  • 스팀 명성치가 40이 넘는 경우 20$ 가치만큼의 GBYTE 코인을 받습니다.
  • 스팀 명성치가 50이 넘는 경우 40$ 가치만큼의 GBYTE 코인을 받습니다.
  • 스팀 명성치가 60이 넘는 경우 80$ 가치만큼의 GBYTE 코인을 받습니다.
  • 스팀 명성치가 70이 넘는 경우 160$ 가치만큼의 GBYTE 코인을 받습니다.

아주 상세하게 설명드리니 그대로 따라하시면 바이트볼 코인 가상화폐가 본인의 지갑에 들어옵니다. (영문이어서 상세 스크린 샷을 제공해 드립니다)

1. Byteball 지갑 프로그램을 다운로드 합니다.

Screen Shot 2018-08-10 at 1.46.57 AM.png

  • 다운로드 WALLET 를 누르신 후 본인의 OS(안드로이드, iOS, PC, Mac 등 다 있습니다) 에 맞는 지갑 프로그램을 다운로드 하세요.
    Screen Shot 2018-08-10 at 1.48.16 AM.png

2. 설치 후 채팅 화면 열기(Chat)

  • 설치가 완료되면 지갑이 생성되고 아래와 같이 홈화면에서 'Chat' 메뉴를 눌러 채팅 화면을 엽니다.Screen Shot 2018-08-10 at 1.49.54 AM.png

3. 채팅 화면에서 'Steem attestation(증명) bot' 을 클릭합니다.

  • 채팅 화면에서 'Bot Store' 를 선택한 후 목록 상에서 'Steem attestation bot' 메뉴를 클릭합니다.
    Screen Shot 2018-08-10 at 1.50.14 AM.png

4. AirDrop 제공화면이 열리고 여기에 본인의 바이트코인 주소를 채팅 메세지로 보냅니다.

  • 영문으로 된 설명문을 읽어보시고, 영문지시사항 대로 따라하시면 됩니다. (^^)
  • 스팀잇 보상을 위해 본인의 Byte 코인 지갑 주소를 알려달라고 하네요
  • 채팅 화면상에 (...) 버튼을 누른 후 젤 위의 'insert my address' 를 누르시면 본인의 현재 Byte 코인 지갑 주소가 자동으로 입력이 됩니다.
  • Screen Shot 2018-08-10 at 2.16.25 AM.png

5. 지갑 주소를 입력하면 링크 주소가 하나 출력되고 해당 링크를 클릭해 줍니다.

  • Byte 코인 지갑 주소를 입력하면, 본인의 steemit 계정 인증을 위한 링크가 출력됩니다.
  • 해당 링크를 클릭해서 본인의 steemit 계정과 암호를 입력해 줍니다.
  • Screen Shot 2018-08-10 at 2.22.33 AM.png

6. 본인의 Steemit 계정 정보를 공개(public) 할지 비밀(private) 로 할지 선택하고 'Request sign message' 링크를 클릭합니다.

  • steemit 계정 인증을 완료하면 본인의 steemit 계정 이름이 출력되고, 해당 정보를 공개로 할지 비밀로 할지 물어봅니다. 아무거나 선택하시면 됩니다.
  • 아무거나 선택하시면 마지막으로 Byte 코인을 받기 위한 사인 링크가 출력이 됩니다.
  • 해당 링크를 클릭하면 됩니다.
    Screen Shot 2018-08-10 at 2.28.17 AM.png

7. ByteBall 코인이 본인의 지갑으로 입금됩니다.

  • 아래와 같이 최종 Signed 메세지가 출력된 후 본인의 steemit 명성도에 해당하는 만큼의 ByteBall 코인이 본인이 ByteBall 지갑에 입금이 됩니다.
  • 입금은 transaction 처리속도 때문에 약 2분 정도 후에 본인의 지갑으로 입금이 완료 됩니다. 
    Screen Shot 2018-08-10 at 2.34.43 AM.png

여기에서 바로 ByteBall 코인 지갑을 받으신 후 무료로 airdrop 을 받으세요 : http://byteball.org


긴글 읽어 주셔서 감사합니다. 즐거운 암호화폐 생활 되세요.


Byteball Coin has special Airdrop program for the steemian.

You can get free ByteBall Coin(GBYTE) If you have any steemit account.

  • You will get 10$ worth GBYTE when you have over 30 steem reputation score.
  • You will get 20$ worth GBYTE when you have over 40 steem reputation score.
  • You will get 40$ worth GBYTE when you have over 50 steem reputation score.
  • You will get 80$ worth GBYTE when you have over 60 steem reputation score.
  • You will get 80$ worth GBYTE when you have over 70 steem reputation score.

How to ?

1. Download Byteball wallet program.

Screen Shot 2018-08-10 at 1.46.57 AM.png

  • Download that matched your device.
    Screen Shot 2018-08-10 at 1.48.16 AM.png

2. Install and open Chat view

  • After install the wallet program, you can see the chat view menu on the main home.
    Screen Shot 2018-08-10 at 1.49.54 AM.png

3. Add Steem attestation bot to your wallet

  • In the chat view, you can see the 'Steem attestation bot' menu on the Bot Store Tab.
    Screen Shot 2018-08-10 at 1.50.14 AM.png

4. Read instruction and send your address as chat message in the 'Steem attestation' chat.

  • You can see the instruction when you open the 'Steem attestation' chat.
  • After read the instruction, you can send your address as chat message by clicking (...) button.
  • And choose first 'insert my address' menu to send your address as chat message.
    Screen Shot 2018-08-10 at 2.16.25 AM.png

5. Verify your steemit account by click steemconnect link that provided in chat.

  • After sending your wallet address, You can see the steemconnect link on the message.
  • Please verify your steemit account by clicking that link.
    Screen Shot 2018-08-10 at 2.22.33 AM.png

6. Sign your steemit account by click 'Request sign message' link that provided in chat.

  • After verfiying your account, you can choose your account name's privacy. you can choose any.
  • After set the privacy for your account, you can sign your account again by clicking the sign link on the message.
    Screen Shot 2018-08-10 at 2.28.17 AM.png

7. You got ByteBall Coin.

  • That's all. You got the some amount of ByteBall Coin to your new wallet.
    Screen Shot 2018-08-10 at 2.34.43 AM.png

Thanks for reading. and Enjoy the cryptocurrency life.

"웹 기술로 앱 개발자 되기" 시리즈 입니다.

1차 목표는 html -> css -> javascript 순의 정리이고,
2차 목표는 es6 -> react -> graphql + mongodb -> react native 순의 정리입니다.

웹 개발자 또는 웹 기술을 통해 앱을 개발해 보고 싶은 분들에게 조금이라도 도움이 되었으면 하는 바램으로 차근차근 자세히 정리해 보도록 하겠습니다.

이번 포스트에서는 HTML 태그 중 내용을 담기위한 단락과 관련 태그들에 대해 알아 보도록 하겠습니다.
Screen Shot 2018-05-28 at 11.41.52 PM.png


HTML 단락

HTML 페이지를 생성하는 가장 큰 이유는 특정 내용을 담아서 되도록 많은 사람에게 그 내용을 전달하고자 함 입니다.
HTML 에서 이 내용을 포함하는 가장 대표적인 태그가 바로 <p> Paragraph 태그입니다.

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

최근에는 모바일에서의 웹 검색이 보편화 되어서 이 <p> 태그보다는 사용자 화면크기에 따라 컨텐츠의 배치를 조정하기 위해 편리한 <div> 태그가 아주 아주 많이 사용되긴 하지만, 문서의 내용인 단락을 HTML 에 담기 위한 태그로는 바로 이 <p> 태그가 원조 중에 원조라 할 수 있겠습니다.
Screen Shot 2018-05-28 at 11.40.23 PM.png

특히 <p> 태그와 관련해서 한가지 오해하기 쉬운 점은 이 <p> 태그가 라인을 띄우기 위한 태그라고 이해하고 있는 분들이 한국에는 매우 많다는 점입니다. (저도 처음에 html 을 홀로 배우던 시절 라인을 띄우기 위한 사용이 강조된 책으로 배워서 인지, paragraph 라는 원래 의미는 사라지고, 라인 띄위기 용도로만 알고
사용 하였었던 호랑이 담배피던 시절이 있었음을 고백합니다)

물론 <p> 태그는 이전 포스트에서 다뤘던 <h1>~<h6> 태그와 마찬가지로 브라우저가 태그 위치에 Margin 여백을 추가해 주기 때문에 컨텐츠를 어느 정도 간격을 갖게 랜더링 하고 싶은 경우에 사용이 가능하기는 합니다.

하지만 이렇게 Margin 여백을 부여하는 이유는 본래의 의미인 Paragraph, 즉 단락을 올바른 범위에서 구분하여 출력하기 위한 것이지 컨텐츠 끼리의 일정 공백을 만들기 위한 용도는 아니라는 것입니다.

뭐 정답은 없듯이 나는 그렇게 계속 사용할꺼야 라고 하시는 분도 계시겠지만, 라인 간의 일정 공백을 만드시기 위한 용도라면 <p> 태그의 사용보다는 style 을 부여해서 처리하실 것을 권해 드립니다. (css 관련 포스트 참조)

다시 한번 강조하지만 <p> 태그는 Paragragh 를 구분지어 출력하기 위한 태그입니다.

HTML 화면 출력에 대해

<p> 태그에 대해 보다 상세한 내용을 알아보기 전에 한가지 짚고 넘어갈 것이 있습니다.

한글이나 워드같은 워드프로세서에서는 문서의 내용을 입력할 때 의도적으로 문서의 내용을 보다 잘 정돈된 모습으로 보이고자 공백문자열을 아주 잘 활용을 합니다.

[공백으로 정돈 전]
순번 이름 나이
1번 홍길동 1
2번 남궁길동무 5
3번 김수한무거북이와두루미 200

[공백으로 정돈 후]
순번                          이름                                        나이
1번                         홍길동                          1
2번                         남궁길동무                       5
3번                         김수한무거북이와두루미             200

이런식으로 말이지요.

하지만 HTML 페이지는 사실 자신이 출력될 대상 화면의 크기에 대해 전혀 알지 못한채로 생성이 됩니다. 큰 화면을 가진 대형 모니터에서 출력이 되는 경우도 있고, 스마트폰 처럼 매우 작은 크기의 화면에서 출력이 되는 경우도 있겠죠.
그리고 이미 출력된 화면을 사용자가 언제든 키우거나 줄일수도 있구요.

그림으로 치자면 전체 캔버스의 크기를 미리 알 수가 없다는 것이지요. (워드프로세서는 A4 크기라는 것을 알수 있지만요).
그래서 HTML 문서는 문서내에 사용된 모든 중복된 공백 문자열을 단 하나의 공백으로 취급해서 출력을 하고 사용자가 입력한 라인바꿈 정보는 모두 무시하고 출력되도록 표준이 되어 있습니다. 오히려 화면마다 크기가 다른 공백문자나 라인바꿈의 출력간격이 달라져서 내용이 모두 어그러져 보이는 것 보다 공백의 중첩이나 라인바꿈 입력정보를 무시해서 내용의 출력이 보다 통일성을 가지도록 방향을 잡은 것이라고 할 수 있습니다.

<p>
This paragraph
contains a lot of lines
in the source code,
but the browser 
ignores it.
</p>

즉 위와같이 여러 줄로 의도적으로 나누어서 단락을 HTML 에 작성하더라도,
Screen Shot 2018-05-29 at 12.09.54 AM.png
브라우저는 모든 띄워진 라인을 무시하고 하나의 단락으로 출력해 버립니다.

<p>
This paragraph
contains         a lot of spaces
in the source         code,
but the        browser 
ignores it.
</p>

또한 위와 같이 의도적으로 단어들 사이에 공백문자를 줘서 여백을 주려해도
Screen Shot 2018-05-29 at 12.10.38 AM.png
브라우저는 마찬가지로 모든 중복된 공백을 무시하고 단 한칸의 공백으로 전환해서 출력을 해 버립니다.

https://codepen.io/pen/ 에서 위 두 코드를 직접 입력해 보고 결과를 확인해 보시기 바랍니다.

이런 이유로 HTML 을 접한지 얼마 되지 않은 분들은 공백과 라인바꿈이 무시되는 것 때문에 적잖이 당황을 해서 공백을 수 없이 더 추가해 보기도 하고, 라인바꿈을 마구 마구 추가해 보기도 하면서 괜한 시간낭비를 하게 되는 데요. 여러분은 이런 괜한 시간낭비를 하지 마시길 바래 봅니다.

종료 태그를 잊지 마세요

<p> 태그를 사용할 때 한가지 더 주의해야 할 점이 있는데요. 반드시 <p> 태그를 연 후에는 </p> 와 같이 종료 태그로 닫아주셔야 합니다.

이전 포스트에서도 설명드렸던 것 처럼, 브라우저 마다 종료되지 않은 태그가 사용되었을 경우에는 알아서 자체적(?) 으로 처리하기 때문에 출력에 일관성도 없게되고, 심한 경우에는 아예 해당 단락 자체가 출력이 되지 않고 화면에서 사라져 버리기도 하기 때문입니다.

그러니 반드시 <p> 태그가 열리면 </p> 태그로 닫아주시기를 다시한번 강조해서 말씀드립니다.

라인바꿈을 위한 <br>

<br> 태그를 기억하시나요? 이 포스트에서도 설명드렸던 것 처럼 브라우저는 사용자가 입력한 라인바꿈을 모두 무시하기 때문에 의도적으로 단락에서 라인바꿈을 하고자 하는 경우에 사용하는 태그가 바로 <br> 태그입니다.
여기서 br 은 영문으로 line break 을 뜻합니다.

<p>This is
a paragraph
with line breaks.</p> 
<p>This is<br>a paragraph<br>with line breaks.</p>

Screen Shot 2018-05-29 at 12.28.00 AM.png
사용자가 입력한 라인바꿈은 모두 무시되었지만, <br> 태그를 사용하면 라인바꿈을 화면에 출력할 수 가 있습니다.

라임 맞추기의 문제

하지만 여전히 공백이 무시되는 것은 해결하지 못했네요.
랩 가사를 화면에 옮기려면 라임을 맞춰주기 위해 공백이 꼭 필요한 데요 이럴때 어떻게 해야 할 까요?
아니 라임보다 소스 코드를 화면에 출력할 경우엔 더욱 공백을 무시하면 안되는데 말이죠.

<p>
  if(config.api && config.api.enabled) {
      var express = require('express');
  }
</p>

Screen Shot 2018-05-29 at 12.35.14 AM.png
제 보팅봇 소스 중 일부인데요. 이게 뭔가요? 아름다운 여백의 미는 어디로 가 버린 건나요 ㅠㅠ.

입력된 형식을 그대로 유지해 주는 <pre> 태그

저만 이런 필요를 느낀 것이 아니겠죠? 그래서 HTML 에서는 사용자가 입력한 공백, 라인바꿈, 탭 등등 브라우저가 원래는 무시해 버리는 이런 문자들을 사용자가 입력한 그대로 유지해서 출력해 주는 엘리먼트를 제공합니다.

바로 <pre> preformatted text 태그 입니다.

<pre>
  if(config.api && config.api.enabled) {
      var express = require('express');
  }
</pre>

Screen Shot 2018-05-29 at 12.38.45 AM.png
제 코드의 아름다운 여백미가 돌아왔습니다. 와우~


이번 포스트에서는 HTML 에 내용을 입력하는 대표 엘리먼트인 <p> 태그와 관련 엘리먼트들에 대해 알아보았습니다.

태그설명
<p>단락을 정의합니다. 단락 앞뒤로 여백이 추가됩니다.
<br>라인바꿈을 출력합니다.
<pre>HTML 에 입력된 공백과 라인바꿈 내용을 그대로 출력해 줍니다.

긴글 읽어주셔서 감사합니다.

  1. kaw 2018.06.30 07:21 신고

    html 글 써주시는 것을 하나씩 쭉 봤는데 너무 유익하고 이해가 잘 되고, 실전 경험이 많이 녹아 있으신 것 같아요. 많이 바쁘시겠지만 정기적으로 올려주시면 정말 정말 감사하겠습니다> < !! 진짜 최고입니다

+ Recent posts