0xFF

오늘은 3일동안 공부해본 선택자를 게임을 통해 익혀봤습니다. http://flukeout.github.io CSS Diner A fun game to help you learn and practice CSS selectors. flukeout.github.io 사이트에 들어가시면 테이블 위에 놓인 물건과 CSS 에디터, HTML 에디터, 그리고 오른쪽에는 도움말을 보실 수 있습니다. 우리가 해야 할 것은 테이블 위 물건 중에서 움직이는 것 만을 CSS 선택자로 선택해주는 것입니다. 지금까지 공부한 부모-자식, 부모-자손 선택자 등을 이용하려면 먼저 태그들의 상하관계를 파악해야 하는데 그러려면 이렇게 궁금한 대상에 마우스 커서를 올려보면 파악할 수 있습니다. 총 32단계나 되는데 이 글에서 다 설명하는건 ..

또 선택자입니다.. 오늘은 Pseudo(가상) 선택자에 대해 정리하겠습니다. 가상 선택자는 요소에서 일어날 수 있는 이벤트를 선택하는 선택자입니다. 아마 아직 일어나지 않은 이벤트를 선택하는 것이라 가상이라는 말이 붙었지 않나 합니다. 예를 들면 마우스를 올려뒀을 때, 클릭했을 때, 포커스 되었을 때 등이 이벤트가 되는 것이고, 지정한 이벤트가 발생했을 때 HTML 태그의 어떤 속성을 바꿔줄지를 CSS를 통해 지정해주는 것입니다. 제가 하도 설명하는걸 못해서 이해되셨을지 모르겠네요..... 이해 부탁드립니다 ㅠㅠ 1. pseudo 클래스의 종류 혹시나 해서 한번 더 정리하지만(사실은 제가 헷갈려서) 클래스는 특정한 하나의 요소가 아니라 모든 태그가 공통적으로 가지고 있을 수 있는 구분자?를 말합니다. 아..

1일차에선 셀렉터, 프로퍼티, 밸류의 세 가지로 이루어진 CSS 기본 문법까지 설명했는데요이번 글에선 선택자의 종류에 대해 좀 더 상세하게 설명해 보겠습니다. CSS에서는 선택자를 통해 변경하고자 하는 대상을 정확히 선택해 주어야 하기에, 선택자는 CSS에서 가장 중요한 부분이라고 할 수 있겠습니다.각 선택자의 이름은 한국어로도 있지만, 보통 개발시에는 구글에서 영어로 검색을 하는 경우가 대부분이므로 영어 이름으로 작성해 봤습니다.1. Tag 선택자태그 선택자는 한 HTML 문서에서 등장하는 특정 태그를 꾸며주고 싶을 때 사용합니다. HTML CSS JavaScript 위와 같은 HTML 문서 내의 모든 태그의 색상 속성을 red로 바꿔주고 싶다면 전 글에서 설명한 기본 문법인Selector { Prop..

오늘부터 생활코딩 CSS 강의를 보며 매일매일 정리하고, 조금씩 따라해보기로 했습니다. 며칠 하다 쭉 미루지 않았으면 좋겠네요 ㅋㅋ 생활코딩 CSS 강의는 유튜브에서 무료로 보실 수 있습니다. 바로가기 1. 왜 만들었나? 우리가 잘 아는 HTML은 웹 문서의 레이아웃을 정의하기 위한 마크업 언어입니다. 예를 들면 페이지의 여백이나 요소 간의 간격, 글자의 크기나 줄 간격 등을 지정해줄 수 있습니다. 다만 HTML은 레이아웃의 표현에 충실하다 보니 디자인과 관련한 태그는 부족했고, 웹의 발전에 따라 단순 정보 전달뿐 아니라 예쁘게 페이지를 디자인 할 필요성도 증가하게 되었습니다. 그런 욕구에 따라, 글자의 색을 지정하는 등 디자인과 관련한 태그가 HTML에 추가되기 시작했습니다. 예를 들어 왼쪽과 같은 태..

이제 Hello World 를 빌드해 보겠습니다. 예제 hello_world 프로젝트 디렉터리를 적절한 곳(저는 홈)에 복사하겠습니다. cp ~/ESP8266_RTOS_SDK/examples/get-started/hello_world ~/espproject 코드가 존재하는 디렉토리에서 make menuconfig 를 입력하시면 설정 구성 화면이 나옵니다. ESP 모듈이 연결된 시리얼포트와 플래시 메모리 크기만 변경해 주도록 하겠습니다. Serial flasher config 메뉴로 이동하셔서 Default serial port 를 자신의 시리얼 포트로 변경해줍니다. 시리얼 변환모듈은 하나만 연결해 두신 분이 많을 것이므로, /dev/ttyUSB0 으로 입력하시면 됩니다. 경로명을 정확히 알고 싶으신 분은..

매일 수시로 사용하는 터미널을 조금 더 재미있게 만들어 주는 Neo둥근모라는 글꼴입니다. 90년대 컴퓨터 BBS 게시판이나 지하철 전광판에 많이 사용되던 둥근모꼴이라는 폰트를 수정해 현재 OS 환경에서 사용할 수 있게 변형한 글꼴이라고 합니다. i, I, O, 0, | 등의 가독성이 기존 코딩용 폰트보단 다소 떨어지지만 그래도 충분히 사용할 만한 폰트인 것 같습니다. Neo둥근모 프로젝트 소개: https://dalgona.github.io/neodgm/ 폰트 다운로드 페이지: https://github.com/Dalgona/neodgm/releases Neo둥근모 프로젝트 Neo둥근모 프로젝트 Neo둥근모는 90년대에 퍼블릭 도메인으로 공개된 비트맵 한글 글꼴 둥근모꼴을 트루타입 형식으로 변환하고, 여..

우분투 리눅스에 TTL 와이파이 모듈로 익숙한 ESP8266의 개발환경을 구축해 보겠습니다. 보통 검색하면 아두이노 IDE에 붙여 쓰는 방법을 소개하는데, 본 글은 제조사 공식 SDK를 이용한 방법입니다. 아트멜 스튜디오같이 설치 프로그램 한번만 실행해주면 알아서 되는 게 아니고 툴킷을 받아 이클립스에 붙여주는 것이라 다소 복잡하더라고요. 제조사 공식 원문(링크)을 기반으로 설명합니다. ESP8266 소개 ESP8266 마이크로 컨트롤러는 Tensilica L106 32비트 RISC 프로세서를 탑재하고 있으며 최고 160MHz 클럭 속도와 초저전력 구동이 가능합니다. 실시간 운영 체제 (RTOS)와 Wi-Fi 스택은 약 80%의 프로세싱 파워를 유저 애플리케이션과 개발에 사용할 수 있습니다. Espres..

Let's Encrypt 를 통해 무료로 SSL 인증서를 발급받고, 아파치 웹서버에 발급받은 인증서를 연동하는 방법을 알아보겠습니다. 모든 설명은 제 서버 환경인 우분투에 아파치 서버를 기준으로 합니다. 1. certbot 설치 루트 권한으로 실행하세요 $ sudo apt-get update $ sudo apt-get install software-properties-common $ sudo add-apt-repository universe $ sudo add-apt-repository ppa:certbot/certbot $ sudo apt-get update 먼저 certbot이 업로드되어 있는 certbot ppa(저장소)를 등록해 줍니다. 이후 다음 명령어로 certbot을 설치합니다. $ sudo..

최근 원웹과 스타링크 프로젝트의 진행 과정을 관심갖고 찾아보고 있다. 스페이스X의 스타링크 프로젝트는 지난 5월 24일에 이어 지난 11일에 2차 발사를 했는데 벌써 우리나라에도 많은 분들이 목격하신 듯 하다. 그래도 데모 서비스를 시작하려면 400기 정도는 올라가야 한다고 했는데 이런 글들을 보니 아직 120기(로켓 하나에 60기)밖에 올라가지 않았는데도 위성이 올라갔다는 사실이 확 와닿는다. 위성 인터넷 하면 실제 유저 입장에선 기존 인터넷과 별 차이가 없을지 몰라도 뭔가 직접 위성과 직접 통신이 이루어진다는 것이 흥미롭게 느껴진다. 또, 최근 생겨나고 있는 Lacuna Space나 Fossasat, AstroCast와 같은 위성 기반 무료 또는 저가 IoT 서비스들도 위성 발사 및 서비스 시작까지 ..

※ 실제 위성 노드 구축 방법을 다룬 하편을 올렸습니다. (https://hellocomputer.tistory.com/32) 암호화폐 쪽에 관심있으신 분이라면 한번쯤 블록스트림이라는 업체를 들어보셨을 것입니다. 블록스트림은 비트코인 블록체인을 활용해 다양한 서비스를 개발 및 제공하는 업체입니다. 공동체에 의해 운영되는 비트코인을 한 기업이 상업적으로 이용하는 것이 옳은지에 대해서 논란의 여지가 있는 곳이긴 합니다만, 이 회사가 제공하는 서비스 중 'Blockstream Satellite' 라는 상당히 독특한 서비스가 있어 소개해 드리고자 합니다. 이름에서 짐작하실 수 있듯 위성을 통해 비트코인 블록체인에 접근할 수 있도록 하는 서비스인데, 구체적인 원리는 비트코인 네트워크에서 새로 생성되는 블록 데이터..