CSS8 블로그 스킨 분위기를 쉽게 바꿀 수 있게 하려면 블로그 살결을 다듬다 보면 기분에 따라 분위기를 쉽게 바꿀 수 있게 하고 싶다. 그래서 시도해 보았다. 이 블로그는 왓에버(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은 HyperText Markup Language를 간단하게 적은 것이다. 굳이 우리말로 옮기면 쯤 된다. 종종 잊어버리는데 Markup언어이므로 태그를 잘 활용하면 논문처럼 상당히 체계적인 글을 쓸 수 있다. 글을 입력할 때 그림과 같이 제목과 본문을 따로 설정해 줄 수 있다. 여기서 제목 1, 2, 3을 택하면 자동으로 제목(heading)을 나타내는 h 태그를 입력해 준다. 조심할 점은 티스토리 스킨은 대부분 글 제목에 을 이미 배정되어 있어서 제목 1은 , 제목 2는 을 달아 준다. 스킨에 이미 h 태그에 꾸미기를 해둔 대로 나온다. 이렇게 글 안에 작은 제목을 구별해 두면 검색 로봇이 글을 더 잘 파악할 수 있어서 검색이 잘 되게 만들 수 있다고 한다. 이제 한 발 더 나아가 제목에 자동.. 2023. 1. 12. 코드펜 화면 티스토리 글 안으로 가져오기 인터넷으로 불가능한 일은 없다. 시에스에스를 공부하다가 코드펜을 알았다. 에이치티엠엘, 시에스에스, 자바스크립트를 실행해 볼 수 있는 사이트이다. 공부에 큰 도움이 된다. 여러 블로그에 코드펜 화면이 그대로 옮겨져 있음을 확인하고 방법을 찾아보았다. 생각대로 아주 잘 정리해 놓은 글이 있다. 티스토리에 코드펜 CodePen 소스 코드 올리는 방법 티스토리에 CodePen을 활용하여 소스 코드 올리는 방법입니다. 이 글은 티스토리 글쓰기가 예전 버전이 아닌 신규 버전 즉 아래 사진과 같은 글쓰기 버전을 위해서 작성하였습니다. 코드를 티스토 yjshin.tistory.com 그냥 따라하기만 하면 된다. 아무 것도 손대지 않고 테마를 라이트로 했더니 흰색으로 들어왔다. 높이를 조절하면 스크롤 막대가 보이지 않.. 2020. 12. 3. 선형 변환과 CSS 시에스에스에서 변환(transform) 함수로 요소를 회전, 닮음, 비틀림, 평행 이동할 수 있다. 여기에도 당연히 수학이 들어 있다. 좌표를 다른 좌표로 옮기는 선형 변환이 바로 그것이다. $$T: R^n \to R^n$$ 데카르트 좌표(Cartesian coordinates) 수학 교과서와 조금 다르게 방향을 정한다. 수학 교과서는 $y$축의 양의 방향이 위쪽이지만 여기선 아래쪽이다. 시계 방향이 양의 방향이 된다. 오히려 일상 생활에서 생각하는 각과 같아지는 셈이니 수학을 잘 모르면 오히려 이해하기 쉽다고 해야 할까? 수학은 모든 자연수 $n$을 생각할 수 있지만 시에스에스에선 2차원과 3차원만 가능하다. 선형 변환을 표현하는 기본은 정사각 행렬이다. 2차 행렬로 모든 변환을 나타낼 수 있지만 웹 .. 2020. 11. 21. 씨에스에스로 그림자 넣기(CSS Shadow Effects) 씨에스에스로 글자와 상자에 그림자를 넣을 수 있다. (CSS Shadow Effects) www.w3schools.com/css/css3_shadows.asp CSS Shadow Effects CSS Shadow Effects With CSS you can create shadow effects! Hover over me! CSS Shadow Effects With CSS you can add shadow to text and to elements. In these chapters you will learn about the following properties: CSS Text Shadow The CSS text-shadow property www.w3schools.com 1. 글자에 넣기: text-.. 2020. 11. 14. CSS 속성 바뀌지 않게 하는 구문 어떤 요소에 속성을 여러 차례 부여하면 어떻게 될까? 맨 마지막에 부여한 속성으로 보인다. .article p {color: #ccc;} .article p {color: #333;} 위와 같이 정해주면 .article p에는 #333색이 적용된다. 블로그 스킨을 만들거나 고칠 때 style.css를 보면 워낙 다양한 스타일이 정의되어 있다. 그러다 보니 앞에서 정의한 줄을 모르고 똑같은 요소에 속성을 다시 부여하는 일이 생길 수 있다. 한 번 부여한 속성이 실수로 바뀌지 않도록 하고 싶다면 속성에 !important를 붙인다. .article p {color: #ccc !important;} .article p {color: #333;} 위와 같이 쓰면 색이 #ccc로 고정되고 바뀌지 않는다. 그런데 .. 2020. 11. 7. 티스토리 레터 스킨 바꾸기 화려함보다 간단함을 좋아한다. 스킨도 마찬가지다. 티스토리에서 제공하는 스킨 가운데 간단함이 돋보이는 편지(letter)를 하나씩 바꿔 나가려고 한다. 1. 영어로 된 부분을 한글로 바꾼다. admin -> 관리자; about me -> 이 블로그는; TAG -> 꼬리표 삭제 -> 지우기; 수정 -> 고치기; 확인 -> 남기기; 태그 -> 꼬리표; 인기 포스트 -> 인기글 2. 색을 무채색으로 바꾼다. 이것은 스킨 옵션에서 선택하여 쉽게 바꿀 수 있다. 3. 이미지를 바꾼다. 이것은 손으로 그렸다. 4. 수식 입력을 가능하게 한다. 요소 안에 아래와 같이 넣어 주면 라텍($\LaTeX$)으로 수식을 넣을 수 있다. $$x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}$$ 5. 글꼴을 바꾼다. 고.. 2020. 11. 3. HTML과 CSS란 무엇인가? 티스토리 스킨을 고치거나 만들기 위해서는 먼저 에이치티엠엘(HTML)과 시에스에스(CSS)를 알아야 한다. 티스토리 관리자 화면에서 스킨 편집으로 들어가서 html 편집 단추를 누르면 skin.html과 style.css를 편집할 수 있다. 모두 영어로 쓰인 파일이 열린다. 이 파일을 편집하려면 프로그래밍 언어를 알아야 한다. 아래를 여행하면 거의 모든 걸 알 수 있다. 가끔씩 시간이 날 때마다 한두 가지 올려 보려 한다. HTML https://www.w3schools.com/html/ HTML Tutorial HTML Tutorial HTML is the standard markup language for Web pages. With HTML you can create your own Website... 2020. 11. 1. 이전 1 다음 반응형
