Peep

워드프레스 기초 홈페이지 제작(1)

워드프레스(wordpress) 란?

2003년에 만들어진 홈페이지를 제작, 관리하는 프로그램입니다.

웹 사이트를 만들고 관리하는 것 중, 전 세계의 1/4이 사용할 만큼 사랑 받고 있고

타 CMS(content management system) 툴과 압도적인 차이로 세계 1위라고 합니다.

CMS 툴이라고 하며 CMS는 Contents Management System의 약자입니다.

쉽게 설명하자면 개발자가 코드로 홈페이지를 제작하는 것이 아닌, 툴을 사용해서 홈페이지를 제작할 수 있는 시스템입니다.

티스토리 블로그도 CMS에 해당합니다.

사용하려는 툴의 장점을 알아보고 진행하도록 하겠습니다.

내가 사용하는 툴이 이렇구나 하고 간단히 슥~ 읽고 가면 되겠습니다.

1. 간단한 interface로 쉽게 홈페이지를 제작 할 수 있습니다.

- 어드민 페이지를 사용하기 쉽다는 뜻으로 생각하면 될 것 같습니다.

2. 반응형 웹을 쉽게 만들 수 있습니다.

- 반응형 웹은 pc, 태블릿pc, 모바일 등의 디스플레이에서 최적화된 홈페이지라는 뜻입니다.

  (냉장고 문에 붙어있는 디스플레이 일수도 있고, 네비게이션이 될 수도 있습니다.)

  여기서 한 번 짚고 넘어갔다가 나중에 다시 말씀 드리겠지만,

  워드프레스 = 반응형 웹 은 아닙니다.

  워드프레스에 있는 테마가 반응형 웹을 지원할 수 있다는 것으로 알고 가셔야 합니다.

3. 수 많은 테마와 플러그인 존재합니다.

- 내가 개발하지 않고 남이 개발한거 가져다가 사용할 수 있다는 뜻입니다.

  그것도 글로벌하게 만든 것을 사용할 수 있습니다.

  조합만 잘해도 홈페이지 만들 수 있다? 라고도 생각하면 좋을 것 같습니다.

  (슬라이드, 데이터 폼, 메뉴 바 등)

4. 저렴한 구축 비용입니다.

- 생각하기 나름입니다, 내가 제작하기 때문에 저렴한 구축 비용이라고 하는 건데...

  만들어진 테마 구매해서 제작한다고 해도, 어느정도 공부하지 않으면 불 가능 하기 때문입니다.   

5. 세계적으로 많이 쓰다보니까 사용자 포럼이 잘되어있습니다.

- 글로벌 서비스이다보니, 본인이 영어를 잘하면 잘 할 수록 도움이 많이 됩니다.

  그렇다고 국내 포럼이 없는 것이 아니니 잘 이용하면 도움이 많이 됩니다. 

- 도움 되는 사이트 링크 작성해 두겠습니다.

한국 워드프레스 사용자 모임 같은 경우는 사용자 게시판에 질문하면 운영진께서 답변을 해주십니다. 도움이 많이 됩니다.

워드프레스로 제작되어 운영되고 있는 홈페이지 참고 사이트 두 곳 링크

참고사이트를 보면, 사이트는 같은 툴을 사용한다고 해도 어떻게 만들기 나름입니다.

다음에는 웹 벤치마킹하는 방법에 대해 알아보도록 하겠습니다.

12byte를 초과하면 작성이 더는 안되게 해달라는 요구사항의 작업을 하였다.

코드

$(function(){ 

  // byte 체크 할 타겟 (input, textarea) 
  var $target = $('#name'); 

  // 값이 들어올때는 input, 커서가 들어오고 나갈때는 focus, focusout 
  $target.on('input focus focusout', function(){ 
  	bytesValidationChk($(this),12); // 12자까지 
  }); 

  // 체크 함수 
  function bytesValidationChk(target, maxByte) { 
	  // byte 체크 할 때 사용하는 함수들 선언 
    var returnVal = ''; 
    var currentLength = 0; 
    var codeByte = 0; 

    // input의 value 
    var targetVal = target.val(); 

    // input.length만큼 반복
    for(var i = 0; i < targetVal.length; i++){ 
      // 한글, 영문 등의 byte만큼 codeByte를 증가 
      var oneChar = escape(targetVal.charAt(i)); 

      // 한글 = 2byte 나머지 = 1byte 
      if(oneChar.length > 4) {
        codeByte += 2;
      }else {
        codeByte++;
      } 

      // length 체크 
      // codeByte 값이 내가 지정한 maxByte보다 작을 때 = currentLength 값을 1씩 증가 
      if(codeByte <= maxByte) {
        currentLength = i + 1;
      } 

    } 
  
    // codyByte가 내가 지정한 maxByte보다 커지면 
    if(codeByte >= maxByte){ 
      // currentLength만큼 targetVal를 잘라줘서 returnVal에 담아줌 
      returnVal = targetVal.substr(0, currentLength); // 한글로 12byte면 currentLength가 6임 

      // maxByte만큼 자른 returnVal를 target(input)에 value로 넣어줌 
      target.val(returnVal)	; 
    } 
  } // bytesValidationChk

});

여기서 문제가 된건....
ie8에서 input 이벤트가 적용되지 않는 것이었다.

(focus와 상관 없이 자판을 쳤을때 체크해서 복+붙 시에도 체크가 가능해야 했다)

따라서 key 이벤트를 당연히.. 넣어줬어야 했는데, 이렇게 되면 ctrl+a(전체선택)이 적용되지 않는다.
큰 문제는 아니지만, 누군가는 당연히 복+붙을 할터이니.. 이슈로 돌아올게 분명하다.

+ firefox 버전 61.0.1(2018.07.11 기준으로 최신)에서는 한글에 key 이벤트 적용이 안된다.
과거부터 있던 이슈라는데, 한글이 완성형 글자라서 그러느니 뭐라느니, 그래서 이때는 input태그를 필수로 사용했다.★

그래서 처음 해본게.
value값을 새로 넣는게 아니라 target.attr('maxlength')값에 접근해서 cuttrneLength값을 넣어주는 방법도 했는데,
이 방법은 복+붙 시에 완전히 적용되지 않더라...
(byte가 maxByte가 되면 maxlength 추가, 아니면 제거 형식)

그래서 그냥 ie8은 key이벤트를 추가하여.. ctrl+a를 포기하기로 했다. (이 이하는 아몰랑)
마우스로 드래그하면 적용이 되니까....(흑흑)

수정된 코드이다.

$(function(){

  var $linkBtnInput = $('.domain-link-btn-wrap').find('.link-input');

  // 링크 이벤트를 기본으로 선언...
  var linkEvent = 'input focus focusout';

  // 브라우저 property를 사용해서 버전을 return받고
  var isIE = function(){
    var myNav = navigator.userAgent.toLowerCase();
    return (myNav.indexOf('msie') != -1) ? parseInt(myNav.split('msie')[1]) : false;
  };
  
  // 비교하여 ie8이면 이벤트를 재 선언한다..
  if (isIE () == 8) linkEvent = 'input keyup focus focusout';

  // 아래는 위와 같다. 
  $linkBtnInput.on(linkEvent, function(){
  	bytesValidationChk($(this),12);
  });

  function bytesValidationChk(target,maxByte){
    var returnVal = '';
    var currentLength = 0;
    var codeByte = 0;
    var targetVal = target.val();
    
    for (var i = 0; i < targetVal.length; i++) {
      var oneChar = escape(targetVal.charAt(i));
      
      if(oneChar.length > 4) {
          codeByte += 2;
      }else{
          codeByte++;
      }

      if(codeByte <= maxByte){
          currentLength = i + 1;
      }
    }
    
    if(codeByte >= maxByte){
      returnVal = targetVal.substr(0,currentLength);
      target.val(returnVal);
    }
  }
  
});

더 좋은 방법을 알았으면 좋겠다 (헝헝 ㅠㅠ)

몇일 전 업무보던 중에 주석때문에 오류난 경험이 있어 적어두려 한다.
바.보.같.이...

html 태그를 오랜만에 작성하게 되어 주석 넣을 일이 생겼는데,
이때..

이런식으로 써버렸다.
이거 때문에 뒤에 숏코드가 적용되지 않는 에러가 생겼다.
곧 문제를 찾을 수 있었지만..

업무 중 intellij를 쓰는데 보통 단축키로(ctrl + /) 주석을 해왔어서 기억을 못한 이유도 있다.
세상이 발전할 수록 인간은 바보가 된다는 말이 기억난다.

그래서!! 또 이런 일이 생길까봐 다시한번 기억하자는 의미로 간단히 주석에 대해 정리했다!

HTML 

<!-- 내용 작성 --!>

<!-- 
	여러줄도 가능합니다.
--!>

CSS

/* 내용작성 */

/*
	여러줄도 가능합니다.
*/

JS

/*
	여러줄 주석입니다.
*/

// 한줄 주석입니다.

그 외 주석 태그

/*
	TODO : 리팩토링 작업이 필요할 때, (발전) 해야 할 작업에 대해 작성
*/

/*
	FIXME : 코드에 문제가 있어 차후 수정해야 할 때 이외에도 많지만 안써봤기 때문에 패스!
*/

회사에서 작업을 하고 언어별로 적용 된 것을 확인해보려고 했더니, 브라우저 언어를 따라가는 방식이더라~

그래서 검색도 해보고 설정도 만져보고 하다가 4가지 브라우저에 대한 확인 작업을 할 수 있었다.

※ 참고 : 포스팅하는 방식은 브라우저 언어 설정에 따라 표현되는 사이트만 해당되는 것이므로 것이므로 

사이트 방문 시 설정한 언어로 나오지 않는다면 그 사이트는 다른 방식을 사용하는 것입니다.(geo ip방식을 사용한다거나 뭐 ㅎㅎ..)

근데.. 브라우저 언어에 따라가는 것을 선호하지 않는 듯? 하다고 느낀 것이 변경 후에 여러 사이트를 확인 해봤는데 

국내 유명 포털 사이트들은 이 방식이 아니더라~ 

그럼에도 나는 작업을 했어야 했기 때문에 필요한 정보였듯이 누군가도 필요로 할 것이라 생각하고 공유! 한다!

1. 크롬

> 브라우저 오른쪽  옵션'버튼' 클릭 후 '설정'

> 스크롤해서 하단 '고급▼' 클릭

> 언어 항목에서 언어 옆 'V' 클릭

> '언어 추가' 클릭 후 팝업창 오픈

> 팝업창에서 '일본어' 검색 (본인이 변경하려는 언어 검색) 후 나오는 항목 체크박스 '체크' 후 '추가' 버튼 클릭 

> '일본어' 추가 된 것 확인 그 후 옆에 '옵션'  클릭 후 '위로이동' 체크 (맨 상단으로 이동)

> 일본어 '옵션'  에서 '이 언어로 Chrome 표시' 클릭 후 일본어에 마우스 올리면 보이는 '다시 시작' 클릭 

> google 사이트에서 확인 시 일본어로 뜨는 것이 확인 된다.

스크롤의 압박이 생길까봐, 파이어폭스와 오페라는 간단히 설명한다.

거의 비슷하기 때문에 크롬을 한번해보거나 보기만 해도 매우 쉽게 할 수 있을 것이다.

2. 파이어폭스

> 구글 옵션  버튼과 마찬가지로 파이어폭스도 비슷한 위치(오른쪽 상단)에 옵션이 있다. '옵션' 버튼이 클릭 후 '설정'

> 설정 페이지에서 검색창이 있는데 거기에 '언어' 검색 후 나오는 '언어' 항목에서 '선택'버튼 클릭, 팝업창 확인

> '추가할 언어 선택' 클릭하면 리스트가 나오는데 거기에서 변경할 언어 선택 후 활성화 된 '추가' 버튼 클릭

> 새로 추가 된 언어 확인 후 선택 한 후에 '위로 이동'버튼 클릭하여 최상단에 올려주고 확인 클릭

> 팝업창이 닫히면 google가서 확인!

3. 오페라

> 왼쪽에서 옵션 버튼 클릭 후 '설정'(alt+p) 클릭 

> 설정 페이지에서 왼쪽 서브 메뉴에서 '브라우저' 클릭

> 스크롤해서 내려가다가 '언어' 에서 '사용자 인터페이스 언어선택'에서 사용할 언어 선택 후 '다시시작'버튼 클릭 후 google에서 확인!

3.  Internet Explorer(인터넷익스플로러)

※ ie는 윈도우 os 언어를 변경해야 하므로 확인 후 다시 돌려놓지 않으면, 당황스러움을 겪게 될 것이다.

윈도우 재 시작시 변경된 언어로 나오는 불상사가 생기기 때문.

> 왼쪽 옵션(톱니바퀴모양) '버튼' 클릭 후 '인터넷 옵션' 클릭

(캡쳐 속 internet explorer 11설정 팝업창은 무시할 것)

> 팝업에서 '언어' 버튼 클릭 후 나오는 팝업창의 '언어 기본 설정 지정' 클릭

> 제어판 창이 오픈되면 ' 언어추가' 버튼 클릭

> 언어 추가 창에서 추가 할 언어 찾은 후에 '선택'하고 '추가'버튼 클릭

> 추가된 언어 확인가능

> 추가한 언어 선택 후 '위로 이동' 눌러서 최상단 올려줄 것 (빨간 네모 부분 읽어보면 가장 위에 있는 언어가 기본언어로 적용되는 부분 확인가능)

> 브라우저 ie 종료후에 새 창 띄워서 google 확인!

※ 이 작업 후에 다시 마지막 언어 기본 설정 변경 창에서 '한국어'를 최상단으로 올려줘야합니다. 

끗~~~~~~