첫 번째로 스킨(디자인) 바꿔넣기.
그래도 다음이 반응형 웹 디자인을 무료로 배포해서 다행이다.
두 번째로 이 무료 스킨 개같이 뜯어고치기. 정말 개같은 부분은 어렵고 CSS까지 파고 들어야함으로 넘어가더라도
단순한 부분은 HTML과 CSS파일을 계속해서 수정.
정말 구글 디버그 콘솔이 있어서 다행임. 계속 보면서 수정이 가능함.
대체 왜 검색바를 우측 저 상단에다가 쳐박았는지 도저히 모르겠음. 이를 사이드바 옆으로 끌어 내릴려고 했는데 CSS에 임베디드 되어 있는지 끌어 내리면 이상하게 화면 상단으로 가서 박히길래 포기.
최소한 모바일 검색만큼을 해결을 해야 했음. 모바일 검색이 화면 맨 위까지 올려서 우측 상단 버튼을 누른 뒤에 화면 맨 아래까지 내려야했는데 이건 도저히 아니라서 어떻게든 맨 아래에서 위쪽으로 끌어 올림.
블로그 글쓰기 버튼과 관리자 로그인 버튼은 대체 왜 없앤질 모르겠음. 아마 메뉴바인지 뭔지 만든다고 없앤것 같은데 그냥 이전 스킨에서 긁어서 블로그 아래다가 박아버림.
새 디자인으로 오면서 본문 글 양쪽 표기 폭이 엄청 줄어들고 오른쪽 메뉴가 쓸데없이 양옆으로 그만큼 길어진것 같은데 이거 수정은 나중에 할때 하더라도 지금은 포기. 대체 모바일이면 몰라도 1080p 표기에 왜 이렇게 폭을 줄여놨는지 모르겠음. 한 줄에 글자수가 줄은건지 아니면 디자인 변경때문에 그렇게 보이는지 모르겠네.
반응형 스킨이라 기존에 광고 픽셀 계산해서 넣어놨던 광고 표시가 모바일에서 제대로 되지 않음. 당연히 모바일에 맞게 화면이 줄어들다 보니 표 형식으로 12년전에 구글 광고 계산해서 넣어놨던게 글 위쪽 상단에 쌍으로 전부 들어가지 않음.
정보를 제공하는 컨텐츠 프로바이더라는 나름대로의 자부심이 있어서 광고는 상단에 배치하고 더 이상 귀찮게 하지 않겠다라는게 12년전인가의 생각이였는데 지금도 별반 다르진 않다. 그래서 사용자 현 페이지뷰 모바일인지 PC인지 확인하고 PC면 그대로 위에 2개 몰아넣고 모바일이면 위아래 한개씩 표기하도록 코드 작성.
근데 모바일인지 피시인지 구별하려는거 코드 검색하면서 생각해보니깐 이렇게 복잡하고 외부 스크립트 가져와야하는 위험까지 있는데다가 로딩리소스 잡아먹을게 뻔한데 그냥 화면폭 크기 얻어오는 함수 가져다가 그걸로 폭 판단해서 모바일인지 컴퓨터인지 파악하면 되겠다는 생각이 났다. 어차피 파이널 목표가 구글애드 한 폭에 2개 우겨넣을수 있냐 없냐 구분인데 문제없을듯.
대충 오늘도 갓스택오버플로우 지성의 힘을 빌어 한건 해결하고 갑니다. 근데 J쿼리와 자바가 그냥 같은 언어인지는 몰랐는데 검색하면서 알게 되었다. 무슨 달러표시가 앞에 붙길래 html에서 동작하는 별개의 것들인줄 알았음. 쿼리라길래 DB쪽 특수언어인줄로만 알았다. 어쨌든 여기서는 윈도우 폭 얻어서 썼다.
여기까지 오니 또 이제는 javascript로 html을 변경하는 걸 검색해서 알아야만 하는 상황이 되었다. 정말 끝이 없군요.
구글 광고를 hidden해도 구글 광고 최대 개수 넘어서 정책에 걸리나 찾아봤는데 지금 보니 옛날의 그 컨텐츠당 광고 개수 제한이 걍 없어진걸로 보인다. 아 그래 다음에서 구글 애드 플러그인 제공하는걸 봤는데 이상하게 삽입 스위치가 5개가 넘더라니.
검색결과 자바스크립트를 통해 html을 실시간으로 수정하는건 끔직하게 어려워보인다. 그래서 단순 속성 변경을 통한 show hidden block 적용을 하기로 했다. 그래서 이제 DOM 레벨로 내려오게 되었다. DOM이 튀어나오길래 뭔가 했더니 Document Object model이란다. 즉 HTML, XHTML, XML이고 DOM element는 HTML, CSS등이라고 한다. 아 그래 여기서 Dynamic HTML인 DHTML이 나오는거였군. 항상 스태틱 HTML만 기준으로 생각하고 특이한걸 특수하게 생각하다 자바스크립트를 접하니 바로 연결이 안되었는지 여기서 연결이 되는구만.
클래스와 ID 차이점 - 클래스는 여러 html object에 적용하는 반면 id는 그 single html object를 집어서 적용한다. 그렇다면 클래스에 정보지정이 필요할테니 바로 그게 CSS였구만.
그럼 사전 준비는 끝났다. 픽셀값 얻어온 다음 판별해서 id를 통해 style의 display 속성을 변경시키면 된다.
보여주는건 block 가리는건 hide이다.
이러다 보니 HTML IDE를 깔았다. 실시간으로 html 수정 결과를 보여주는거 찾으니 비쥬얼 스투디오랑 딴걸 찾았는데 비쥬얼은 무거워서 싫고 brackets를 깔았다. 아니 근데 몇줄만 쓸 건데 깔 필요가 있었나?
뭐 어쨌든 넘어가서
클릭(진짜 버튼임)
이정도면 대충 준비 끝난듯
https://www.w3schools.com/jsref/event_onclick.asp 이곳의 도움을 받았다.
갓구글의 힘을 빌어 화면 크기 줄일때 짤리는 최저 폭이(그냥 기본 폭하고 길이가 같았다) 631인것을 확인
내 샘숭폰의 경우 폭이 384로 나온다
그리고 킹갓 구글의 콘솔에서는 테이블이 망가지기 직전 길이가 1064라고 하니 값은 넉넉잡고 1100으로 한다.
이제 광고 계획을 세워야 한다.
PC는 2011년에 만들었던 광고 그대로 두고 모바일의 경우 새로 만든다.
아니 근데 이제는 광고 코드가 알아서 화면에 맞추네
세상이 바꿨구나!!
멀티플렉스 광고는 또 뭐냐!! 신기술이다!!
이건 모바일 하단에 붙여야겠다.
다 되어따!
다 하니 재밌다.
원래 코드란게 시작할 땐 이게 어디서 막히거나 중간에 프로젝트가 폐기될지 몰라 스트레스를 받아도 중간 가시성이 나오는 부분이나 끝이 보장이 되면 재밌어지는 법이다.
기존 PC버젼은 화면폭 1100이상에서 상단 작은 박스 광고 2개로 유지하고 화면폭 1100이하 모바일로 추정되는 브라우져는 상단 박스 2개 광고 지워지도록 하고 상단에 모바일 자동크기 광고 한개와 하단 멀티플렉스 광고가 나오도록 추가했다.
끝났다!
근데 놀라운 점은 오늘 아침에
구글한테서 메일이 날라왔다는 점이다.
들어가보니 번호대가 옛날글이던데 옛날글 크롤링도 하긴 하나 보다.
어쨌든 끝났다. 거의 처음으로 html 자바 건들이는건데 잘 끝나서 다행이다.
아래는 그 예이다.
당신의 화면크기는
님의 브라우져 표시크기는
요 웹페이지 문서의 크기는
