[WordPress] 워드프레스 플러그인 수동 설치/업데이트

ftp 서버로 WordPress가 설치된 디렉토리의 권한을 주기 어려운 경우, 혹은 ssh에 딸린 sftp 외에 ftp 운영을 하고 싶지 않은 경우, 수동으로 플러그인을 설치해주어야 한다.

WordPress plugin을 manual로 설치하려면, wordpress plugin 페이지에서 해당 플러그인의 zip 파일을 받아서 자신의 WordPress 디렉토리에서 wp-content/plugins/ 아래로 복사한 후 압축을 해제하면 된다.

예를 들어, akismet을 수동으로 설치하고 싶다면, https://ko.wordpress.org/plugins/akismet/ 에 접속해서 다운로드 버튼을 눌러 최신 akismet.4.1.6.zip 과 같은 파일을 받아 sftp등으로 wp-content/plugins/ 아래에 업로드 한 후, 쉘에서 압축을 unzip 등으로 풀어주면 된다. 플러그인 zip 파일의 경우 풀면 해당 플러그인 디렉토리 명으로 압축이 해제된다.

이후 관리자 페이지에 접속한 후, 플러그인을 보면 압축을 푼 플러그인이 보인다. 활성화를 눌러 주면 된다.

 

[HTML5&CSS] Dark theme 만들기

다크 테마를 만들기 위해 색상을 다뤄보자.

테마 내의 새로운 HTML element를 몇 개 알고 넘어가자.

  • pre (preformatted): HTML 파일 내에 whitespace를 포함하여 적힌 그대로 보여준다. 일반적으로 monospace font, 즉 고정폭 폰트로 보여준다.
  • abbr (abbreviation): acronym이나 abbreviation을 나타낸다. acronym element는 deprecated되었다. 그렇지만, 하위 호환성을 위해 포함된다.

새로운 CSS background properties도 몇 개 알고 넘어가자.

  • background-image: element의 배경 이미지. url()에 이미지 URL을 넣는다.
  • background-repeat: 배경 이미지를 어떻게 반복할지. 다음 값들을 사용할 수 있다.
    • repeat: 모든 공간을 덮을만큼 반복한다. 잘릴 수 있다.
    • space: 잘림 없이 가능한만큼 반복한다. 비율이 유지되고, 첫번째와 마지막 이미지 사이의 가장자리를 잡기 위한 여백이 공간을 채우기 위해서 바뀐다.
    • round: 이미지가 늘어나거나 줄어들어서 공간을 채운다.
    • no-repeat: 이미지가 반복되지 않는다.

색상 반전시키기

반대 색상을 찾기 위해서 https://www.colortools.net을 이용하자. Opposite Color Tool을 이용하면 반대 색상을 쉽게 얻을 수 있다. 반전시킨 색상을 각 element에 적용한다.

 

HSL function 사용하기

HSL function은 세가지 값으로 색을 만든다. Hue, Saturation, Lightness.

  • H는 색상(Hue)를 나타낸다. 색상환(color wheel)에서 각도를 나타낸다. degree로 나타내던가 또는 radian으로 지정한다. 단위 없이 쓰면 degree이고, 0이 pure red, 120이 pure green, 240이 pure blue이다.
  • S는 채도(Saturation)을 나타낸다. 100% saturation은 완전히 짙은 색, 0%는 완전히 흐린 색, 회색이다. 50%가 “normal” color이다.
  • L은 밝기(lightness)를 나타낸다. 100%는 하얀색, 0%는 검정색이 된다.

따라서 색상을 180 degree 돌리면 반대색이 된다. 회색을 반전시키고 싶을 때는 밝기를 뒤집으면 된다. 회색을 얻고 싶으면 채도를 0으로 바꾸면 된다. 여기서 grayscale을 바꾸고 싶으면 밝기를 바꾸면 된다.

 

CSS Invert Filter

filter: invert() 를 사용해서 뒤집을 수도 있다.

 

[HTML5&CSS] Form styling하기

label을 styling하기 위해서 font와 text의 크기를 조절한다.

textboxes나 textareas는 일반적으로 그 크기를 바꾸고, border를 제거한다. 또 예시 입력값인 placeholder를 추가해서 어떤 값을 입력하면 되는지를 도와주도록 한다.

 

button을 styling하기 위해서 일반적으로 배경색과 크기를 바꾼다. button의 box 바깥이 흉하므로 좀 손본다.

 

Select boxes를 styling하기 위해서는 일반적으로 text box처럼 보이게 만들고, 오른쪽의 아래 화살표를 styling한다.

 

form validation을 위해서 HTML은 required attribute를 제공한다. 입력이 꼭 필요한 field는 required attribute를 사용한다. CSS에서 이를 select하기 위해서 :valid 와 :invalid pseudo selector를 사용할 수 있다.

[HTML5&CSS] Form Elements

다음 form을 구성하는 HTML elements에 대해서 알아보자.

  • form
  • input
  • label
  • textarea
  • fieldset
  • select
  • button

 

form element는 다른 input이나 button elements들을 담는 element이다. form에는 action과 method, 두가지 attributes를 넘겨야 한다. action attribute는 그 form의 data를 어디로 submit할지를 정한다. method attribute는 그 form의 data를 get으로 보낼지, post로 보낼지를 정한다. 일반적으로 get method는 query string으로 표현되므로 unsecured data를 다룰 때 사용되고, post는 secure data를 다룰 때, 또는 많은 양의 data를 다룰 때 사용된다. 다음과 같은 형식이다.

input element는 text input field, radio buttons, checkboxes를 만든다. type과 name attribute가 필요하다. type attribute는 입력의 type을 정한다. name attribute는 form을 submit할 때 구분할 unique name을 정한다. form data는 key-value pairs로 구성되는데, 이 때 키가 되는 것이 name이고, 해당하는 값이 value가 된다.

text type의 예제는 다음과 같다. maxlength attribute로 최대 길이를 정할 수 있다.

E-mail의 입력에는 email type을 사용할 수 있다.

password의 입력에는 password type을 사용할 수 있다.

checkboxes를 사용할 때는 checkbox type을 사용한다. name에 unique한 값을 주고, 각 checkbox의 value에도 unique한 값을 준다.

radio buttons를 사용할 때는 radio type을 사용한다. 모든 name에 같은 값을 주고, 각 button의 value에 unique한 값을 준다.

 

label element는 input elements들과 연관된 text를 줄 때 사용한다. 예를 들면 위에서 “이름 :” 같은 것들. 스크린리더를 사용하는 사람들에게 도움이 된다. label element는 input의 id attribute와 연관되는 for attribute를 가진다.

 

textarea element는 여러 줄의 text 입력을 위해 사용한다. rows와 cols attributes로 size를 지정할 수 있다.

 

fieldset element는 여러 form 내의 elements들을 그룹짓고 싶을 때 사용한다.

 

select element는 select boxes를 만든다. 매우 긴 list의 옵션 중 하나를 선택할 때 쓴다. select element 안에 option element의 list를 넣어서 만든다.

 

button element는 form을 submit할 때 사용한다. type attribute로 세가지 값을 사용할 수 있다. 첫번째로 아무 행동도 안하는 것, 두번째로 “reset”, 이걸 누르면 form 값들이 모두 리셋된다. 마지막으로 “submit”, 클릭하면 submit한다.

[Web] 웹 개발 시 유용한 사이트

웹 개발 시 유용한 사이트들을 정리한다.

 

어린이날 선언문 전문

5월 5일, 어린이날을 맞아 읽어보는 어린이날 선언문 전문

 

어린이날 선언문

어른에게 드리는 글

  1. 어린이를 내려다보지 마시고 치어다 보아주시오
  2. 어린이를 늘 갓가히 하사 자조 이야기하여 주시오
  3. 어린이에게 경어를 쓰시되 늘 보드럽게하여 주시오
  4. 이발이나 목욕, 의복 가튼 것을 때마춰 하도록 하여 주시오
  5. 잠자는 것과 운동하는 것을 충분히 하게 하여 주시오
  6. 산보와 원족 가튼 것을 각금각금 식혀주시오
  7. 어린이를 책망하실 때에는 쉽게 성만 내지 마시고 자세자세히 타일러 주시오
  8. 어린이들이 서로 모히어 질겁게 놀만한 노리터나 기관 가튼 것을 지어주시오
  9. 대우주의 뇌신경의 말초는 늙은이에게도 잇지 아니하고 절믄이이게도 잇지 아니하고 오즉 어린이 그들에게만 잇는 것을 늘 생각하야 주시오

어린 동무들에게

  1. 돗는 해와 지는해를 반드시 보기로 합시다
  2. 어른에게는 물론이고 당신들끼리도 서로 존대하기로 합시다
  3. 뒷간이나 담벽에 글씨를 쓰거나 그림 가튼 것을 그리지 말기로 합시다
  4. 길가에서 떼를 지어 놀거나 류리 가튼 것을 버리지 말기로 합시다
  5. 꼿이나 풀을 꺽지 말고 동물을 사랑하기로 합시다
  6. 뎐차나 긔차에서는 어른에게 자리를 사양하기로 합시다
  7. 입은 꼭 다물고 몸은 바르게 가지기로 합시다

 

아래는 내맘대로 풀어쓴 글.

어른에게 드리는 글

  1. 어린이를 내려다보지 마시고 쳐다봐주세요
  2. 어린이를 늘 가까이 하시고 자주 이야기 해주세요
  3. 어린이에게 높임말을 쓰시고 늘 부드럽게 대해 주세요
  4. 이발이나 목욕, 옷을 입히는 것을 때 맞춰 해주세요
  5. 잠자는 것과 운동하는 것을 충분히 하게 해주세요
  6. 산책이나 소풍을 가끔씩 시켜 주세요
  7. 어린이를 나무라실 때는 쉽게 화내지 마시고 자세히 타일러 주세요
  8. 어린이들이 서로 모여 즐겁게 놀만한 놀이터나 기관 같은 것을 지어 주세요
  9. 대우주의 뇌신경의 말초는 노인이나 청년이 아닌 오직 어린이에게만 있다고 생각해 주세요.

어린이들에게

  1. 돋는 해와 지는 해를 반드시 보기로 해요.
  2. 어른들께는 물론이고 어린이들끼리도 서로 존댓말을 해요.
  3. 화장실이나 담벼락에 글씨를 쓰거나 그림 같은 것을 그리지 않기로 해요
  4. 길가에서 떼를 지어 놀거나 유리 같은 것을 버리지 않기로 해요
  5. 꽃이나 풀을 꺾지 말고 동물을 사랑하기로 해요
  6. 버스나 지하철에서는 어른에게 자리를 양보하기로 해요
  7. 입은 꼭 다물고 몸을 바르게 하기로 해요