PC Geek's

반응형 스킨을 만들거나 편집할 때 필요한 것 중 하나. https://www.google.com/search?q=css+media css media - Google 검색 The @media rule is used in media queries to apply different styles for different media types/devices. Media queries can be used to check many things, such as:. www.google.com

구글 크롬 등 웹브라우저의 개발자모드(크롬은 F12)를 이용하는 팁입니다. 링크합니다. https://natehate.tistory.com/5 티스토리 스킨 편집 쉽게하는 팁 (F12의 마법) 웹 디버깅 툴 F12 [ devtools ] 기본적으로 웹 디자인을 디테일하게 수정하거나 할 때 자주 사용하는 기능이다. 티스토리 스킨 편집 때도 비슷하게 활용할 수 있어서 소개하려고 한다. 바로 devtools natehate.tistory.com 웹페이지를 불러온 다음, 소스에서 원하는 부분을 찾고, 그 부분의 정보를 분석해준 곳을 보고 정보를 찾아 style.css 에 원하는 코드를 넣어주는 것. * 어떤 경우에는 우선순위에서 밀려 반영안될 수 있는데, 그때는 !important 달아보기.

꽤 전에 만들어진 내용도 많고, 사이트 레이아웃도 구식입니다.쿠키만들고 사용하기 팁은 요즘은 사이트나 블로그에서 공지를 띄우고 동의받는 부분도 덧붙어야 할 것 같고.. 그렇네요. 하지만 내용이 풍부한 팁사이트입니다.https://www.thesitewizard.com/

본받을 만한 티스토리 블로그 하나. 블로그 코딩도 잘 됐고, 레이아웃도 좋고, 내 블로그처럼 잡다하지 않다. 딱 용도에 마춘 블로그.티스토리 스킨 팁과 반응형 스킨이 많이 올라와 있다. 티에디션 홈화면이 웹브라우저에서 느낌표뜨는 게 마음에 안 들어 홈화면부터 싹 반응형으로 만들려고 하는데, 딱 내 스타일인 스킨은 없지만 참고가 많이 될 것 같다. 좋은 사이트. 글 중 하나: https://apost.kr/27티스토리 스킨 파일은 구성이 딱 정해져 있다고 한다.스킨의 root 폴더, 즉 자기 블로그 주소의 루트에 들어갈 수 있는 파일은 index.html, skin.html, style.css뿐이라고 한다. 어? index.html 을 넣을 수 있네?그리고 나머지 모든 파일은 /images 폴더에 들어간다..

파이어폭스도 있고, 크롬도 있습니다.이 부분 표시는 주요 웹브라우저가 다를 수 있기 때문에, 어떤 브라우저에서는 ok하고 딱히 표시안해주지만, 어떤 웹브라우저는 고치라며 주소줄 왼쪽에 표시해줍니다. 되도록 엄격한 쪽을 따라주는 게 좋습니다. 예를 들어, 모질라 파이어폭스에서는, https://support.mozilla.org/ko/kb/mixed-content-blocking-firefox https://support.mozilla.org/ko/kb/how-do-i-tell-if-my-connection-is-secure 이런 자물쇠표시고, 노랑느낌표나 빨강사선이 나오지 않아야 합니다. 만약 티스토리블로그를 하면서 그런 걸 본다면, 스킨이 옛날것이라 그럴 가능성과 스킨 파일을 고치면서, 티에디션 소스코..

사이트가 매우 깔끔합니다.그리고 본문을 보여주는 방식도 특이합니다. (경제연구소의 2단, 3단 선택가능한 본문화면과 스크롤버튼이 생각나는 화면입니다) http://webberstudy.com/ 왼쪽 차례에서 클릭했을 때 주소창은 각각의 문서 주소군요.

IT교육입니다. 회원가입이 필요하며 FAQ맨 앞에는 무료라고 적혀 있군요. 회원가입할 때 전화번호를 입력하며 SMS인증문자를 받습니다. 수강신청을 하면 강의 동영상을 볼 수 있으며, 영상 재생은 Adobe Flash Player를 이용합니다. 그래서 크롬/크로뮴계열 웹브라우저로 보는 게 좋겠네요. 스마트폰에서 앱으로 볼 수도 있습니다. https://tacademy.skplanet.com/ 요즘 온라인 강좌 목록입니다.https://tacademy.skplanet.com/live/player/listOnline.action 인공지능/딥러닝강화학습2 policy gradient딥러닝을 위한 TensorFlow 2.0기계번역 입문자연어 언어모데 'BERT'강화 학습 입문하기딥러닝과 케라스(Keras)Scik..

검색해본 결과 방법은 두 가지입니다.1) 티에디션/테터데스크에 반응형 CSS를 이식한다.2) 대문을 반응형으로 만들어주는 스킨을 사용한다. 구글 검색: 티에디션 반응형그 중 하나 https://weseelist.tistory.com/31 어떤 스킨. 이건 저는 아직 설치해보지 않았습니다.https://blog.readiz.com/ ( www.readiz.com 에서 blog치면 나옴)저 블로그 주인분이 배포하는 FastBoot 라는 스킨https://fastboot.tistory.com/ 다른 분이 연재한 패스트부트 스킨 1.6.2기준 설치와 튜닝https://dsst0607.tistory.com/77그 외 일반적인 티스토리 블로깅 팁(서식 템플릿 만들어쓰기 등)이 여러 가지 있습니다. 읽을거리가 많으니..

인터넷 웹사이트의 웹페이지에서 표를 영역지정해 복사한 것을리브레오피스 Calc에 붙여넣기한 다음 수정하고그것을 티스토리 블로그 편집기에 붙여넣을 때, 잘 안 될 때가 있다.(잘 될 때도 많다) 아래 이야기는 방법을 찾은 것은 아니고, 그냥 적어둔다. 모 사이트의 표를 리브레오피스에 붙여놓고 편집 이것을 티스토리에 붙여넣으면, 편집창에는 제대로 표시된다. 그런데 미리보기하면 이렇다. 레이아웃 깨짐. w3schools.com 의 연습화면에 테이블 코드만 붙여놓고 프리뷰하면 잘 나온다. https://www.w3schools.com/tags/att_colgroup_width.asp 결국 티스토리 출력 화면의 CSS, 그 중에서도 스킨에 숨어 있는 것이 뭔가 하는 것 같은데..colgroup과 style을 싹 ..

며칠 해보고 적는 소감이다. 따라서 매우 초보적인 이야기다. 앞으로 공부해가며 개선해갈 것이다. 7~8인치 태블릿, 10인치내외 태블릿이 있으면 좋다.없을 경우, 웹브라우저의 모바일 뷰를 활용한다. 네이버는 모바일창이 있고, 다른 브라우저도 그런 식으로 쓸 수 있는 게 있다고 알고 있다. 화면을 보여주거나, 서버쪽에 모바일 단말기인 척 인자를 보내는. 티스토리의 경우, 기본 모바일 웹페이지가 있다. 활성화하든 안 하든 간에 일단은 접속이 된다. 예를 들어, pcgeeks.tistory.com/123456789 웹페이지의 모바일버전은pcgeeks.tistory.com/m/123456789 웹페이지다. 이 둘을 같이 열어놓고 비교해가며 고쳐가는 것도 방법이다. 둘 다 열어놓은 다음에 화면폭을 줄였다 늘였다하..

태그의 항목, 그 외 태그의 본래 속성을 다르게 바꿀 때. 줄대신 옆으로 나열되게. 예를 들어 이 블로그의 태그목록.https://www.google.com/search?q=display%3Ainlinedisplay 속성과 visibility 속성 https://aboooks.tistory.com/85https://mainia.tistory.com/3295?category=591853 CSS Layout - display: inline-block https://www.w3schools.com/css/css_inline-block.aspCSS display Property https://www.w3schools.com/cssref/pr_class_display.aspCSS: Cascading Style S..

언제나 그렇듯, 스킨을 고쳐가며 적고 적어가며 알게된 내용. font-stretch 속성은 장평, 즉 "A"나 "가"같은 글자의 가로폭을 늘였다 줄였다 한다. 하지만, 모든 글꼴에 대해 적용되지 않는다. 글꼴 파일에 정의된 폭이 있을 때만 적용되므로, 특정 웹폰트를 임베딩할 때처럼 결과가 분명할 때만 사용할 것. 출처: https://www.w3schools.com/cssref/css3_pr_font-stretch.asp(매우 유용한 곳이지만, 열어놓고 방치해두면 웹페이지가 가끔 cpu를 잡아먹는 사이트 중 하나. 오래 켜놓지는 말 것)https://developer.mozilla.org/en-US/docs/Web/CSS/font-stretch width, min-width, max-width 는 글자 ..

박스-쉐도우(box-shadow): 박스에 그림자나 비대칭두께 선, 장식을 넣을 때.그라데이션(계조)넣기 됨. https://developer.mozilla.org/ko/docs/Web/CSS/box-shadowhttps://www.google.com/search?q=box-shadow :visited selectorhttps://www.w3schools.com/cssref/sel_visited.asphttps://www.google.com/search?q=css+%3Avisited 질문)id (#)와 class(.)의 차이는?예를 들어, id는 매크로, class는 서브루틴이란 식으로 이해해도 되나?단순히 그런 건 아님. https://thrillfighter.tistory.com/487style > ..

엘리멘트 자리와 패딩, 마진을 지정할 때 DIV가 먹히지 않으면 table로 둘러치면 먹히는 경우가 있음. CSS Tableshttps://www.w3schools.com/css/css_table.asp width, height borderborder-collapse, border-spacing padding text-align, vertical-align color background-color empty-cellstable-layout 배경이미지https://aboooks.tistory.com/162background-imagebackround-repeatbackground-positionbackground-size (쓸만한 게 있다) background (위의 백그라운드관련 여러 속성을 한 번에 지..

블로그 스킨을 반응형으로 바꾼 김에 그렇게 해보았습니다. 관리자 화면, 꾸미기 > 모바일 항목으로 들어가서, 티스토리 모바일웹 자동 연결을 "사용하지 않습니다." 선택. PC용 웹주소 https://pcgeeks.tistory.com/13526모바일 웹주소 https://pcgeeks.tistory.com/m/13526 저 설정을 꺼도 모바일 웹주소에 접속할 수 있습니다. 그래서 저건 모바일 단말기에서 접속했을 때 티스토리 서버가 모바일 주소로 리다이렉션해줄지를 정해주는 옵션같습니다. 티스토리는 모바일웹 연결로 보여주는 기본 스킨이 몇 가지 장점이 있습니다. 1) 플러그인 중에 모바일에서만 동작하는 것이 있습니다.2) PC화면용으로 골라 놓은 기본 스킨에서는 제공하지 않고, 모바일에서만 보여주는 편리한 ..

.area_view blockquote 항목을 style.css 에서 찾아 적당히 고쳐주면 됩니다.예를 들어, 백그라운드 색을 정해주면 이렇게 보입니다. 그 외, 인용박스의 배경이미지라든가, 인용부호로 쓸 만한 특수문자를 추가할 수도 있습니다.

1. 각주 말풍선 몇 년 전에 쓴 글이 둘 있고, 그때 코코넛냠냠님의 도움말을 더해 스킨에 어울리게 한 것이 지금 이 블로그 각주다. 과거글 참고https://pcgeeks.tistory.com/12164https://pcgeeks.tistory.com/10368 지금 이 블로그에 적용한 코드는 이렇다: skin.html ( 사이에) ※ 일부 스킨에서는 동작하지 않거나 레이아웃이 깨져 추가로 손봐야 할 수 있음. 이것이 기본이다. 티스토리 블로그의 각주 배경이미지는 포스트잇같이 생긴 풍선말칸인데, 이것은 세로로 계속 늘어나며 가로로는 배경이미지폭으로 정해져 있다. 그래서, 각주말풍선폭을 화면대비 %로 하거나 지정된 크기보다 넓히면 배경이미지가 반복해 패턴식으로 깔리거나 깨지는 식으로 깔끔하지 않게 됨. ..

대화면에서 검색창을 원하는 만큼 늘이는 부분은 아직 하지 못했다. 중화면과 소화면에서는 딱히 손볼 게 없다. 검색 돋보기를 클릭하면 나오는 창에 보이는 기본값은 placeholder 라는 속성으로 지정돼 있다.placeholder는 HTML5에 생긴 것이라고. 활용법 참고: https://www.codingfactory.net/10755 이 스킨에서 기본값은 'Search' 인데, 그걸 '검색어 입력'으로 바꿨다. skin.html

카테고리나 사용자 링크목록에 쓰기구글검색: css box expandw3schools.com How TO - Collapse/ Create A Collapsible/ Animated Collapsible (Slide Down)/ Add Iconshttps://www.w3schools.com/howto/howto_js_collapsible.asphttps://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_collapsible여기서 시작. 카테고리 링크를 수동으로 추가하는 것은 쉽다. 이전에도 알고 있었던 방법. 저것은 보다 편하게 한 것으로, 저 스크립트를 변용하면 사용자가 html을 추가해주는 배너에 임의로 접히고 펼쳐지는 목록을 편하게 만들 수 있다.하지..

1. 블로그 첫페이지 로딩이 된 다음 왼쪽에- 그림을 넣을 때는 스킨 편집화면으로 가서 글목록갯수메뉴 바로 밑에 보이는 그림파일 업로드.- 단순히 색을 바꿀 때는 아마 이거. 나중에 확인해볼 것. style.css 카테고리와 메뉴를 호출하면 그 바탕화면색은, skin.html 2. 글 본문 글자 크기와 글자색 만약 이렇게 했는데 바뀌지 않는 글자가 있다면(특히 몇 년 전, 옛날 스킨, 옛날 편집기로 적은 과거글), 그 위에 있는 .area_view 에도 설정을 넣어준다. 3. 본문 글자 크기를 키웠기 때문에,본문 하단에 카테고리의 다른 글 보기 플러그인이 표시해주는 글자 크기도 키웁니다.테두리선색을 바꾸고, 여백을 넣고, 그러면서 글씨를 키웠으니 테이블도 키우고, 레이아웃이 깨지지 않게 몇 가지 고쳐준 ..

skin.html 파일과 style.css 파일을 편집하기 전에 주의: 1. 고치기 전에 스킨과 스타일 파일 편집창을 열어 ctrl-a 로 전체선택해 ctrl-c 로 복사한 다음, 윈도우 메모장을 열어 붙여넣기할 것. 그래서 skin.2019-10-22-1.txt 라는 식으로 저장할 것. 고치다 스킨이 깨졌는데 뭐때문인지 모르면 그걸로 원상복구한 다음 재시도. 다 고친 다음에도 그날의 완성본 파일을 같은 방식으로 다른 이름으로 백업. 2. 편집은 티스토리의 편집화면에서 해도 무방하지만, 은근히 불편하고 단축키가 다르게 먹기도 하기 때문에, 자기 컴퓨터에서 손에 익숙한 편집기에 붙여넣어 거기서 고친 다음에 티스토리에 붙여넣기하고 적용하는 것도 괜찮음. 1. 블로그를 깔끔하게 보이기 위해 본문 퍼블리시 일시..

아래와 같은 식입니다. 노랑색 동그라미친 X표 버튼은 원래 없었죠. 기본 스킨에선 오른쪽에만 있습니다. 내비게이션 화면이 닫혀 있을 땐 그 자리가 내비게이션 화면을 여는 버튼입니다. 그래서 더블클릭하면 열었다 닫았다가 됩니다. 화면을 연 다음 닫을 때 커서를 움직일 필요가 없습니다. skin.html에 한 줄 추가해주면 됩니다. 클래스를 새로 만들진 않았고 그냥 자리만 옮겨주었습니다.style.css는 건드리지 않았습니다. 해당하는 부분: 그런데 이렇게 하면, 화면폭이 줄어들 때 반응형 화면에서 보이는 엘레멘트와 새로 집어넣은 X표가 겹치가 됩니다. 그래서 그 부분을 X표의 오른쪽으로 조금 밀어 고쳐줍니다.하지만 여기까지 해놓고 보니 화면폭을 바꿀 때 예쁘지가 않고, 됐다 안됐다 해서, 완성은 아니고 일..

반응형 #2 스킨은 기본적으로 1262픽셀, 738픽셀을 기준으로 화면 레이아웃이 바뀐다.이것은 css파일에서 간단히, 입맛대로 고쳐줄 수 있다. 조금 생각해야 할 것은, 1262픽셀 이상에서는 이렇게 표시되는 내비게이션 화면이, 738-1262픽셀 사이에서는 이렇게 두 줄로 표시된다. 카테코리열 하나, 나머지를 다 집어넣은 열 하나.아래 그림에선 두 열 사이가 많이 비는데, 이건 내가 스킨을 고치면서 아직 최적화가 덜 돼서 그렇다. 그런데 기본 모습도 꽤 비어 있다. 이 부분을 최적화시켜주는 게 다음 과제. 738픽셀 아래에서는 이렇게, 카테고리열만 한 줄로 표시된다.커스텀 링크가 모조리 사라지는 게 문제다.1) 가로 720픽셀이하가 아니라면 2열로 표시되도록 해주는 게 좋을 것 같다.2) 화면에서 사..

지금 플래시를 꺼놔서 그런가, 티스토리 옛글쓰기 편집기에서 임시저장버튼과 기능은 동작하지 않는 듯. .가. .카테고리 다른글보기 플러그인 하단에, 같은 카테고리글목록으로 가기, 최신글목록으로 가기 추가. 카테고리 다른 글보기 플러그인의 제목에 걸린 링크 자체가 그거지만 모르는 사람이 많은 것 같아서. 나도 이 링크를 추가했을 때는 그게 그건지 모르고 했다. 또한 페이지 레이아웃의 맨 상단에 글제목 위에 걸린 카테고리 이름을 클릭해도 같은 곳으로 간다. 하지만 스크롤업해 그걸 클릭할 걸 생각하면 글을 다 읽은 다음에 보이는 것도 편할 것 같아서. .나. .티스토리 블로그의 좋은 점이 본문 아래 주석을 표시하는 기능이 있다.이 주석을 적당히 고쳐주려면 style.css 파일에 body DIV.footnote..

CSS파일을 고칠 때 알아둘 상식: 글꼴. 조금 찾아본 것을 버리기 아까워 메모해 둔다.일일이 고치는 귀찮은 짓을 하지 않기 위해. 반응형 디자인을 할 때 헤매지 않기 위해. ★ 서체의 종류와 스타일 http://webberstudy.com/html-css/css-1/font-style/: 글꼴에 관한 기본 설명이 눈에 잘 들어온다. ★ CSS 단위별 폰트사이즈(px,pt,em,%) http://jsunnylab.tistory.com/24: 반응형에는 em이 좋다고. 그리고 이렇게 여러 종류가 있는 이유를 간략하게 정리한 블로그.글자크기 비교표가 아주 유용하다.디자인 원리 자체는 전문 사이트에서 좀 더 읽어야 한다. ★ 당신은 모를 수도 있는 CSS의 7가지 단위 https://webdesign.tuts..

먼저 글 하나 링크. 잘 된 설명과 예제다.Styling Underlines on the Web BY JOHN D. JAMESON ON OCTOBER 10, 2016기본은 이 사이트 https://www.w3schools.com/css/css_link.asp CSS는 영문에 어울리게 되어 있기 때문에 텍스트 아래에 밑줄이 나올 때, 한글은 밑줄이 붙어버린다. 그래서 밑줄을 좀 띄어 주면 보기가 좋아진다. 그리고 밑줄이 붙었을 때만 띄우면 레이아웃이 깨지니까, 텍스트 전체적으로 다 밑줄을 조금 띄워 디자인 통일성을 유지하도록 CSS를 조정해주어야 한다.예를 들어 이런 식이다..article u {border-bottom: 1px solid; padding-bottom: 2px; text-decoration..

Daylogs/HTML/CSS word-wrap, word-break 줄바꿈 속성 차이 - 꿀벌개발일지 블로그CSS 줄바꿈속성 (LineBreak Property) - White-space, Word-wrap [WEBDIR] word-wrap: break-all; 이 유용한 경우가,본문에 URL링크를 넣었는데 링크가 너무 길어 웹페이지 레이아웃을 깨버린 경우.신경쓰면 링크는 남기고 보이는 부분은 ...으로 처리할 수도 있고, 다른 방법을 쓸 수도 있지만, 티스토리 본문인 경우에는 그건 귀찮으니까, 본문 css속성에 저걸 넣으면 됨. word-break가 유용한 경우는 제목란.제목란 줄바꿈은 직접 손대줄 수도 있겠지만, 가장 편한 방법은 word-break: keep-all; 띄어쓰기 단위로 잘라준다. 제..

티스토리 본문 하단 각주에 관해서는 예전에 짧게 적은 게 있으니 그걸로 갈음한다. 이번에는 본문에 풍선으로 뜨는 각주창을 어떻게 해보는 이야기를 적어 간다. 하려는 이유는, 본문 글꼴 크기에 비해 각주 풍선 글꼴 크기가 너무 작아서. 먼저 코코넛냠냠님 블로그 링크. http://nanite.tistory.com/12 티스토리 각주 풍선 글꼴의 글자색은 본문 글자색을 따라간다고 하는데, 그 글자색을 바꿔준 것. 티스토리 각주 풍선 표시는 외부 파일에 저장된 자바스크립트. 그래서 그 파일을 손대진 못하니, 본문에 같은 이름으로 함수를 넣어 오버라이드, 우선적으로 실행하도록 한 것이라고. 이걸 이용하면 글자색 뿐 아니라, 글꼴의 크기도 바꿀 수 있다고 한다. 코딩은 전혀 따라갈 실력이 못 되어, 흉내내보았다...

1.티스토리는 각주를 쓸 수 있는데 이걸 좀 폼나게 꾸미거나, 레이아웃을 조금 바꿔주고 싶을 때.티스토리 관리자 화면에서 CSS수정화면으로 들어가, 바꿔주면 된다. footnotes 라는 class가 있는데, 이게 각주의 DIV 태그와 OL 태그에 붙어 있다.DIV태그에만 적용해주려면 BODY DIV.footnotes {뭐라구뭐라구} 해주면 된다. OL태그도 마찬가지고. 둘 다 적용해줄 것 같으면 그냥 body .footnotes { } 쓰면 된다. 그림을 넣고 싶다면, 예를 들어body DIV.footnotes { background: url('그림주소') no-repeat;background-position: left top;margin-top:30px;padding-top: 20px; }이런 식으로..

별 것 아닌 메모입니다. 아, 제가 잘 모르고 적는다는 뜻입니다. 대강의 이야기http://chomae02.tistory.com/23 2.소스가 너무 길면 압축해서 전송하란 말도 있는데,그게 되는군요.. ^^; HTML파일 하나로 속에 자바스크립트가 많이 들어간간단한 게임이나 계산표같은 걸 만들 때 쓰면 괜찮겠다고 생각해봤습니다. 아래는 구글 검색 첫 페이지에 뜨는 링크 몇 개. http://pupustory.tistory.com/257 http://dev.azki.org/entry/apache2-moddeflate-gzip http://qnrdlqkrwhdgns.canxan.com/jpboard/post/491 http://aruljohn.com/gziptest.php http://www.taeyo.p..