안녕하세요. 이번엔 HTML, CSS, JS 코드와 그 결과를 예쁘게 보여줄 수 있는 사이트 codepen과 어떻게 티스토리 블로그에 적용할 수 있는지를 알아보겠습니다. 코드 펜(Codepen)이란? HTML, CSS, JS를 직접 작성하고, 그 결과 화면을 바로 볼 수 있게 해주는 기능이 있는 사이트입니다. 많은 사람들이 자신이 꾸민 기능들의 결과 화면과 HTML, CSS, JS를 공유하는 사이트이기도 합니다. 티스토리 블로그에 코드와 그 결과 화면을 보여주려면, 코드를 따로 스샷찍고, 결과도 따로 스샷을 찍어 보여줘야합니다. 특히 HTML, CSS, JS를 모두 사용한다면 코드와 그 결과화면을 보여주기가 어렵습니다. Codepen을 사용하면 아래처럼 이 문제를 간단히 해결할 수 있습니다. Codepe..
가상 선택자(Pseudo selector)란? 보통 선택자는 HTML 태그, Class, Id 등 HTML 요소(element)를 직접적으로 선택하여 CSS를 통해 꾸며줍니다. (선택자 개념: [CSS] 선택자(Selectors)와 조합(Combinators)) 하지만, 가상 선택자는 HTML요소를 직접적으로 선택하지 않고, 요소의 상태에 따라 선택하여 꾸며주는 것을 의미합니다. 가상 선택자는 가상 클래스(Pseudo class) 라고도 합니다. 기본적인 형태는 다음과 같습니다. selector:pseudo-selector { property: value; } 예시) HTML div 요소 중, 첫 번째(상태)와 마지막(상태)에 있는 div요소를 초록색으로 바꾸기 See the Pen pseudo-sele..
flexbox란? box를 원하는 아무 곳에 놓을 때 사용하는 기능입니다. 매우 유연하게 사용할 수 있기 때문에 flex라는 이름이 붙여졌습니다. 특징: 1) 자식 element에 지정하지않고, 부모 element에 지정합니다. (부모가 자식을 제어) 2) 부모 element를 flex 컨테이너로 지정해야 합니다. 즉, 부모 element의 CSS를 dixplay: flex;로 지정해야 합니다. 기초 속성 justify-content: 수평(가로)축 위치 조절 속성 (main axis) align-items: 수직(세로) 축 위치 조절 속성. (속성을 변화하여 축 회전이 가능하다.) (cross axis) justify-content (빨간색 박스가 3개 있을 때) flex-start: 기본값(defau..
sshpass란? sshpass란 다른 컴퓨터에 바로 ssh 연결을 할 수 있고, 연결된 컴퓨터에서 명령어를 실행할 수 있는 기능을 말합니다. 즉, 다른 컴퓨터에 ssh연결을 한 뒤, 명령어까지 실행할 수 있는 기능입니다. sshpass는 ssh에서 파생된 기능입니다. ssh는 Secure Sheel Protocol의 약자로, 컴퓨터와 컴퓨터가 Public Network를 통해 서로 보안적으로 안전하게 통신하기 위한 프로토콜입니다. ssh는 데이터를 전송하거나, 원격 제어를 할때 많이 사용됩니다. 설치 apt-get install sshpass # 우분투 환경 yum --enablerepo=epel -y install sshpass # centos 환경 conda install -c conda-forge..
display 1) inline: width와 height를 가질 수 없다. 2) inline-block: width와 height를 가질수 있고, element가 옆으로 오게한다. 단점: margin, padding을 주지않아도 요소간의 빈 공간이 자동으로 생긴다. 반응형 디자인을 반영하지 않기 때문에, 창크기가 다르면, 요소들이 다르게 보일 수 있다. 3) block: width와 height를 가질 수 있고, element가 아래로 온다.(각 요소옆에 아무것도 안온다.) b c d 결과
드디어 애드센스에 합격하게 되었습니다. 애드센스 합격한뒤 바로 광고를 넣는 방법에 대해 알아보겠습니다. 애드센스란? 애드센스란 구글이 운영하는 광고 게재 사업입니다. 광고주가 구글에 비용을 지불하고 광고를 요청하면, 구글은 애드센스 승인을 받은 홈페이지에 광고를 개제합니다. 이용자는 애드센스가 있는 홈페이지를 둘러보다 광고를 보게되는 구조입니다. 그렇다면 왜 구글 애드센스가 다른 광고에 비해 수익이 높을까요?? 구글 애드센스는 이용자가 검색한 기록, 여러 홈페이지에서 머문 기간 등 수많은 데이터를 바탕으로 이용자가 원할 만한 광고를 원하는 위치에 띄우는 알고리즘이 매우 발달되어있기 때문입니다. 광고 수동 삽입 애드센스 홈페이지에서 광고를 클릭하고, 광고 단위 기준을 클릭한 뒤에 디스플레이 광고를 누르시면..
저는 애드센스 승인이 처음 나고, 자동 광고를 적용한 뒤, 사이트에 적용하였습니다. 하지만, 광고들의 위치가 너무 제각각이어서 블로그 보기가 어렵다고 판단되어 광고 위치를 수동으로 조절하고자 했습니다. 그런데 특정 위치의 광고가 사라지지가 않아 그 문제를 해결하는 방법에 대해 포스팅해보려 합니다. 특정 위치의 광고 사라지지 않음 저의 경우에는 위의 사진처럼 블로그 최상단에 애드센스 광고가 사라지지 않았습니다. 애드센스에서 자동 광고 해제해서 적용도 해보고, 적용 후 1시간을 기다리라고해서 1시간을 기다려보기도 했지만 사라지지 않았습니다. 특히, 이것저것 시도하는데 다른 것들은 잘 적용되어 광고 위치도 바뀌고 잘하지만, 유독 저 광고만 사라지지 않아 답답하였습니다. 해결 방법 해결 방법은 해당 링크에서 저..
일을 하거나, 독서를 하거나, 살아가면서 배우고 써먹으며 실력이 성장하게 된다. 배우고 써먹으며 유용하다고 느끼는 순간은 매일 존재한다. 유용하게 써먹고 그냥 넘어간다해도, 축적되고 실력이 쌓여 점점 해당 분야의 문제해결능력이 상승하게 된다. '짬'이 쌓이는 것이다. 하지만 유용하게 써먹은 그내용을 조금 더 일반화하고, 유용한 포인트가 어딘지 기록하고, 정리해두는 습관을 들인다면 단순히 '짬'이 쌓이는것을 넘어서서, '통찰력'이 생기게 된다. 단순히 문제해결 능력이 상승하는것이 아니라, 문제의 기저에있는 전체 흐름이 보이게 된다.
티스토리 블로그에는 코드블럭이라는 기능이 있습니다. 하지만, 티스토리에서 제공하는 코드블럭이 마음에 들지 않아 직접 Custom 해 봤습니다. 위와 같은 코드블럭 디자인을 Highlight.js를 이용해서 직접 만들어 보겠습니다. Highlight.js Highlight.js(https://highlightjs.org/) 는 189개의 프로그래밍 언어와 91가지 스타일을 지원합니다. (version 10.0.3 기준) sunburst 테마 적용 (HTML) 모두 소문자로 써서 티스토리 블로그 관리 페이지로 가셔서 좌측메뉴 > 꾸미기 > 스킨편집 을 클릭합니다. 그 후, html 편집을 누른 뒤, 사이 어디에나 위의 코드를 붙여넣어주시면 됩니다. sunburst 부분에 원하는 테마의 영어 이름을 '소문자'..
Jupyter notebook을 사용하다 보면 출력과 함께 경고(warning)가 발생하여 귀찮을 때가 있습니다. warning이 뜨지 않도록 하는 방법에 대해 알아보겠습니다. warnings 라이브러리를 사용하여 import warnings 경고를 무시 : warnings.filterwarnings(action='ignore') 경고 보이기 : warnings.filterwarnings(action='default') 코드 (경고 무시) import warnings warnings.filterwarnings(action='ignore') warnings 라이브러리에서 warnings.filterwarnings() 함수를 이용해 경고가 뜨지 않도록 할 수 있습니다. 위의 코드를 사용하면 경고가 뜨지 않습..
collections 라이브러리의 OrdeOrderedDict 클래스를 알아보겠습니다. python에서 딕셔너리는 key와 value의 쌍으로 이루어진 자료형입니다. ([Python] 딕셔너리: 키(key) 값(value) 바꾸기(swap) 참조) 하지만, 파이썬의 일반적인 딕셔너리는 키:값 쌍이 추가되는 순서를 기억하지 않습니다. 아래의 예시를 보겠습니다. OrderedDict 이란? OrderedDict은 삽입된 순서를 기억하는 딕셔너리 자료형입니다. 딕셔너리 자료형과 대부분 동일하며, 삽입된 순서 그대로 갖는다는 특징이 있습니다. di = dict() di['a'] = 1 di['c'] = 2 di['b'] = 3 print(di) from collections import OrderedDict o..
딕셔너리(dictionary) 자료형은 key와 value가 짝을 이루어 하나의 요소가 되는 자료형입니다. 딕셔너리 내부에서 key 값은 중복되지 않는 고윳값(unique value)이어야 합니다. 만약, 기존에 있는 key에 다른 value가 들어가면, 마지막에 수정된 key:value가 딕셔너리에 저장됩니다. 이번엔 딕셔너리에서 key와 value를 바꾸는(swap) 방법을 알아보겠습니다. 예시 딕셔너리 생성 먼저, dict 함수와 zip함수를 이용해 예제로 사용할 dictionary를 생성하였습니다. 간단히 코드를 설명하자면, zip함수는 동일한 개수의 요소 값을 갖는 시퀀스 자료형을 묶어주는 역할을 합니다. 위의 예제에선 zip함수의 요소인 'abcde'와 range(5)[0~4까지 정수]를 묶어..
