본문 바로가기

SKIN & CSS74

인용 서식 꾸미기 아래와 같이 말풍선 모양을 만들어서 인용문을 보기 좋게 꾸미는 코드다. See the Pen Quote Box by Mario Rodriguez (@mariordev) on CodePen. 이 블로그에도 적용해 본다. " 배워 때에 맞추어 익히니 또한 기쁘지 아니한가! 뜻을 같이 하는 벗이 먼 곳에서 찾아오니 또한 즐겁지 아니한가! 남들이 알아주지 않아도 노여워하지 않으니 또한 군자가 아니겠는가? " 공자 수정한 인용 서식을 블로그 관리에서 서식에 등록해 두고 쓰면 편하다. 예전에 만든 서식도 있다. 或曰, “以德報怨, 何如?” 子曰, “何以報德? 以直報怨, 以德報德.”누군가 물었다. "원한을 덕으로 갚으면 어떠합니까?" 공자께서 말씀하셨다. "덕은 무엇으로 갚으려느냐? 원한은 올곧음으로 갚고, 덕은 덕.. 2024. 1. 31.
티스토리 블로그 프로필 카드 바꾸기 언제부터인가 티스토리에 블로그를 소개하는 공간이 나타난다. 찾아보니 모바일 화면에 있던 것을 이제 피씨 화면에도 보여주는 것이라고 한다. 그런데 이게 살짝 눈에 거슬린다.약간 구글스러운 걸 좋아해서 이대로도 괜찮지만 이것이 눈에 거슬려서 없애는 사람이 있다는 사실을 알았다. 없애는 방법을 찾다가 보니 이걸 꾸며서 남겨두고 싶다. 그래서 아래와 같이 바꿔서 남겨두려고 한다.관리/꾸미기/스킨편집/ CSS에서 적당한 곳에 아래를 넣어준다.div[data-tistory-react-app="Namecard"] { display: block; } .tt_box_namecard{ border-radius: 20px; border: 1px solid #ddd ; margin-bottom: 20px; }만약에 아예 보이.. 2024. 1. 23.
티스토리 북클럽 스킨 다듬기 모든 것이 귀찮다면 아래 파일을 받아서 압축을 풀어서 관리/꾸미기/스킨변경에서 스킨 보관함에 올려서 적용하면 된다.아래 블로그에서 적용된 모습을 볼 수 있다. MATH_DIC design.tistory.com 티스토리는 무료인 스킨도 아주 좋다. 그렇지만 다른 블로그와 조금은 다른 모양을 보여주고 싶기도 하다. 개인적으로는 $\LaTeX$ 수식을 넣을 수 있어야 하기 때문에 스킨을 손 보는 걸 즐긴다. 지금 쓰는 스킨도 왓에버(whatever)를 손 봐서 만들었다.요즘 조금 한가한 때라 북 클럽(book club)을 고쳐보았다. 적용된 블로그는 맨 아래 링크해 놓는다. 저마다 스스로 고쳐서 개성이 뚜렷한 스킨을 만들어 보기를 기대하면서 몇 가지 설명을 덧붙여 볼 계획이다.스킨은 우리말로 살결이다. 스킨 .. 2024. 1. 22.
256 색상표 심심해서 찾았다. 요즘은 모니터 성능이 좋아서 256색이 아니라도 잘 보여주지만 옛날엔 256도 다 구별하지 못하던 때도 있었다. 색의 이름은 빨강, 녹색, 파랑(R, G, B)이 섞인 정도를 숫자로 나타낸다. 256색은 R, G, B에 3의 배수만 넣어서 만든다. 예는 #fff, #369와 같다. 각 자리는 0부터 F까지 16가지 구별이 있다. 여기서 3의 배수는 0, 3, 6, 9, c, f 여섯이다. 따라서 세자리 이름으로 나타낼 수 있는 색은 아래와 같이 $6^3=256$이다. 요즘은 #32ccff와 같이 여섯 자리 이름을 더 많이 사용한다. 따라서 색상 이름으로만 따지면 $16^6= 16777216$가지 색이 있다. 이것을 다 구분하여 표시할 수 있는 모니터는 없을 것이다. 있다고 해도 너무 비.. 2024. 1. 20.
블로그 스킨 분위기를 쉽게 바꿀 수 있게 하려면 블로그 살결을 다듬다 보면 기분에 따라 분위기를 쉽게 바꿀 수 있게 하고 싶다. 그래서 시도해 보았다. 이 블로그는 왓에버(whatever) 스킨을 다듬어서 쓰고 있다. :root 가상 클래스는 전역 CSS 변수를 쉽게 정의할 수 있다. CSS 파일 맨 앞에 아래와 같이 변수를 정의했다. :root { --font_01: 'KNPSKkomi-Regular00'; --font_02: 'MaplestoryOTFLight'; --color_01: #fffbf7; --color_02: #EBE3D5; --color_03: #B0A695; --color_04: #776B5D; --color_link: #2F58CD; --color_font: #333333; } 형식은 아래와 같다. --변수 이름: 변수 변수를 불.. 2024. 1. 15.
이미지 태그 그동안 블로그에 그림을 넣을 때 항상 파일로 첨부를 했다. 그런데 복사하여 붙여넣기를 해도 된다는 걸 알았다. 옛날엔 HTML 태그인 img로 넣기도 했다. 태그로 불러들이면 저작권 위반을 피할 수 있을까 싶은데 그렇지 않은 모양이다. 불펌은 하지 말아야 할 일이다. 비교를 해보자. 아무런 차이가 없다. 이제 굳이 HTML 공부를 하지 않아도 되는 시대가 되었나 보다. 1. 파일로 올리기 2. 복사하여 붙여넣기 3. img 태그로 불러들이기 아래와 같은 형식으로 정렬한다. 가로로 가운데 정렬은 스타일로 한다. https://developer.mozilla.org/ko/docs/Web/HTML/Element/img : 이미지 삽입 요소 - HTML: Hypertext Markup Language | MDN.. 2024. 1. 13.
박스에 그림자가 넣기 박스에 넣는 테두리는 간결한 것을 좋아한다. 하지만 때로는 박스에 그림자를 넣어 돋보이게 하고 싶을 때도 있다. 박스에 그림자를 만드는 생성기도 여러 가지가 있으므로 골라서 쓰면 된다. 그것도 귀찮을 때는 아예 진열되어 있는 곳에서 바로 복사해서 가져다 쓰면 좋다. https://getcssscan.com/css-box-shadow-examples CSS Scan - The fastest and easiest way to check and copy CSS Goodbye to "Inspect Element" — Visualize the CSS of any element you hover over, instantly, and copy its entire rules with a single click. get.. 2023. 7. 1.
CSS_글꼴을 변수로 바꾸기 스킨을 손볼 때 같은 작업을 반복하는 일이 매우 번거롭다. 같은 부분을 찾아서 한꺼번에 바꾸는 방법은 지난 글에 있다. https://noneo.tistory.com/725 티스토리 스킨 편집하기 티스토리는 네이버보다 블로그 스킨을 자유롭게 편집할 수 있다. 기본으로 제공하는 스킨을 조금만 손보면 색다른 분위기를 만들 수 있다. 다른 블로그와 똑같은 스킨에 개성을 넣어보자. 글꼴 noneo.tistory.com 이번에는 한꺼번에 바꿀 수 있도록 css를 고쳐보자. 예를 들면 글꼴이나 배경색 따위를 변수로 바꿔서 저장하면 한꺼번에 바꿀 수 있다. 형식은 아래와 같다. :root { --변수이름: 변수; } ## 변수를 지정한다. var(--변수이름); ## 변수를 불러들인다. :root { --font_0.. 2023. 6. 13.
새로운 본문 글꼴 이제까지 바탕 글꼴로 Noto Serif KR을 쓰다가 오늘 새로운 글꼴로 바꿨다. 본문 글꼴로는 고딕보다 궁체스러운 삐침이 있는 세리프꼴을 좋아하지만 날마다 보다 보니 식상하다. 기분 전환을 위해 살짝 가벼운 손글씨 느낌을 주는 글꼴로 바꿨다. 이름은 국립공원꼬미체이다. 이렇게 손글씨처럼 꾸며진 글꼴은 제목처럼 짧은 글은 보기 좋지만 글자가 많은 긴 글이면 아무래도 가독성이 떨어져 본문 글꼴로 쓰기는 꺼려진다. 하지만 크기를 조금 키우고 행간을 넓게 하니 괜찮다. 심각한 내용을 다루는 블로그가 아니라 쓱 훑어보면 되는 글이 대부분이라 당분간 '국립공원 꼬미'를 유지할 작정이다. 이 블로그처럼 글을 길게 쓰지 않고 이미지를 많이 올리는 블로그에 맞을 듯하다. 웹폰트는 아래 눈누에서 가져올 수 있다. 윈도.. 2023. 6. 12.
티스토리 스킨 편집하기 티스토리는 네이버보다 블로그 스킨을 자유롭게 편집할 수 있다. 기본으로 제공하는 스킨을 조금만 손보면 색다른 분위기를 만들 수 있다. 다른 블로그와 똑같은 스킨에 개성을 넣어보자. 글꼴이나 색을 바꾸면 좋은데 이게 생각보다 귀찮다. 색을 한꺼번에 바꾸는 방법을 적는다. 혹시 잘못될 수 있으므로 반드시 스킨을 저장해 두고 시작하자. 1. 관리화면에서 스킨편집을 누른다. 2. html편집을 누른다. 3. CSS를 누른다. 4. ctrl+F를 누르면 아래와 같은 화면이 나온다. 6. 찾고 싶은 내용을 쓰고 엔터를 치면 위와 같이 모두 찾아서 표시해 준다. 7. 이제 입력폼 앞에 있는 '>'를 누르면 아래에 입력폼이 하나 더 생긴다. CSS에서 색은 주로 #555와 같이 표현된다. 위와 같이 처리하면 #555인.. 2023. 6. 3.
한자(漢字)도 글꼴을 정해야 보기 좋다. 이 블로그는 논어를 올리려고 개설하였다. 그래서 한자를 넣은 글이 많다. 한자를 쓰는 블로그가 많지는 않지만 도움이 될까 싶어 적는다. 한자를 쓰는 블로그를 보면 대체로 궁서체를 쓰고 있는 듯하다. 아마도 편집기에서 바로 선택할 수 있는 글꼴이기 때문일 것이다. 그런데 궁서는 가독성이 떨어진다. 한자 글꼴은 많지 않아 선택의 폭이 넓지 않다.신영복체가 마음에 들어서 적용했지만 대체로 운영체제에 내려받지 않았을 것이다. 그래서 구글 폰트인 Noto Serif TC를 웹폰트로 보여주도록 설정하였다. 1. Malgun Gothic子曰 君子不重則不威 學則不固 主忠信 無友不如己者 過則勿憚改자왈 군자부중즉불위 학즉불고 주충신 무우불여기자 과즉물탄개2. GungSeo, serif子曰 君子不重則不威 學則不固 主忠信 無.. 2023. 1. 23.
글꼴의 종류 글꼴에 따라 블로그 분위기가 달라지므로 블로그 스킨을 만들 때 어떤 글꼴을 고를까를 고민해야 한다. 글꼴 모임 글꼴 보기 Serif: 글꼴을 꾸미는 삐침(serif)이 있다. Noto Serif KR Times New Roman Georgia Garamond Sans-serif: 삐침이 없다. 'sans'는 프랑스어로 '없이'라는 뜻이다. Noto Sans KR Arial Verdana Helvetica Monospace: 모든 글자가 같은 폭을 가져서 기계적인 느낌이 든다. Courier New Lucida Console Monaco Cursive: 손글씨를 닮은 글꼴. Brush Script MT Lucida Handwriting Fantasy: 장식이 많은 재밌는 글꼴. Copperplate Pap.. 2023. 1. 19.
반응형

티스토리툴바