본문 바로가기

CSS

블로그 스킨 분위기를 쉽게 바꿀 수 있게 하려면 블로그 살결을 다듬다 보면 기분에 따라 분위기를 쉽게 바꿀 수 있게 하고 싶다. 그래서 시도해 보았다. 이 블로그는 왓에버(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; } 형식은 아래와 같다. --변수 이름: 변수 변수를 불.. 더보기
티스토리 제목에 번호 붙이기 HTML은 HyperText Markup Language를 간단하게 적은 것이다. 굳이 우리말로 옮기면 쯤 된다. 종종 잊어버리는데 Markup언어이므로 태그를 잘 활용하면 논문처럼 상당히 체계적인 글을 쓸 수 있다. 글을 입력할 때 그림과 같이 제목과 본문을 따로 설정해 줄 수 있다. 여기서 제목 1, 2, 3을 택하면 자동으로 제목(heading)을 나타내는 h 태그를 입력해 준다. 조심할 점은 티스토리 스킨은 대부분 글 제목에 을 이미 배정되어 있어서 제목 1은 , 제목 2는 을 달아 준다. 스킨에 이미 h 태그에 꾸미기를 해둔 대로 나온다. 이렇게 글 안에 작은 제목을 구별해 두면 검색 로봇이 글을 더 잘 파악할 수 있어서 검색이 잘 되게 만들 수 있다고 한다. 이제 한 발 더 나아가 제목에 자동.. 더보기
코드펜 화면 티스토리 글 안으로 가져오기 인터넷으로 불가능한 일은 없다. 시에스에스를 공부하다가 코드펜을 알았다. 에이치티엠엘, 시에스에스, 자바스크립트를 실행해 볼 수 있는 사이트이다. 공부에 큰 도움이 된다. 여러 블로그에 코드펜 화면이 그대로 옮겨져 있음을 확인하고 방법을 찾아보았다. 생각대로 아주 잘 정리해 놓은 글이 있다. 티스토리에 코드펜 CodePen 소스 코드 올리는 방법 티스토리에 CodePen을 활용하여 소스 코드 올리는 방법입니다. 이 글은 티스토리 글쓰기가 예전 버전이 아닌 신규 버전 즉 아래 사진과 같은 글쓰기 버전을 위해서 작성하였습니다. 코드를 티스토 yjshin.tistory.com 그냥 따라하기만 하면 된다. 아무 것도 손대지 않고 테마를 라이트로 했더니 흰색으로 들어왔다. 높이를 조절하면 스크롤 막대가 보이지 않.. 더보기
선형 변환과 CSS 시에스에스에서 변환(transform) 함수로 요소를 회전, 닮음, 비틀림, 평행 이동할 수 있다. 여기에도 당연히 수학이 들어 있다. 좌표를 다른 좌표로 옮기는 선형 변환이 바로 그것이다. $$T: R^n \to R^n$$ 데카르트 좌표(Cartesian coordinates) 수학 교과서와 조금 다르게 방향을 정한다. 수학 교과서는 $y$축의 양의 방향이 위쪽이지만 여기선 아래쪽이다. 시계 방향이 양의 방향이 된다. 오히려 일상 생활에서 생각하는 각과 같아지는 셈이니 수학을 잘 모르면 오히려 이해하기 쉽다고 해야 할까? 수학은 모든 자연수 $n$을 생각할 수 있지만 시에스에스에선 2차원과 3차원만 가능하다. 선형 변환을 표현하는 기본은 정사각 행렬이다. 2차 행렬로 모든 변환을 나타낼 수 있지만 웹 .. 더보기