본문 바로가기

SKIN & CSS74

불여우 브라우저에 있는 특별한 기능 구글 크롬을 주로 쓰다가 뭔가 모르게 질리는 느낌이라 요즘은 불여우(firefox)를 쓰고 있다. 아주 우연히 페이지에서 보고 싶은 부분만 따로 선택해서 소스를 볼 수 있는 기능이 있음을 알게 되었다. 블로그 스킨을 만들 때 아주 유용하게 쓸 수 있다. www.mozilla.org/ko/firefox/new/ Firefox 최신 버전 다운로드 빠른 페이지 로딩, 작은 메모리 사용 및 다양한 기능을 갖춘 새로운 Firefox가 여기 있습니다. www.mozilla.org 2020. 12. 1.
시에스에스(CSS) 다각형 애니메이션 시에스에스로만 애니메이션을 만들 수 있다. 크게 써 먹을 곳을 찾지는 못했지만 신기해서 옮겨 놓는다. 점점 자바스크립트가 시에스에스 안으로 들어 오는 느낌이다. div { width: 300px; height: 300px; background: repeating-linear-gradient(red, orange 50px); clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%); animation: 4s poly infinite alternate ease-in-out; margin: 10px auto; } @keyframes poly { from { clip-path: polygon(50% 0%, .. 2020. 12. 1.
표 꾸미기 예전에 시에스에스(CSS)가 나오기 전에는 에이치티엠엘(HTML)에서 표를 많이 사용했지만 요즘은 그렇게 많이 쓰지는 않는다. 하지만 블로그에 글을 쓸 때 아주 가끔은 표를 써야 할 경우가 있다. 아무래도 표로 정리하면 보기가 훨씬 편하기 때문이다. 표(table)를 만드는 기본 태그 fhead, tbody, tfoot는 반드시 써야 할 태그는 아님. 티스토리는 자동으로 표를 만들어 주는 기능이 있으므로 태그를 따로 신경 쓰지 않아도 된다. 하지만 기본으로 제공하는 표를 바꿔서 조금 더 예쁘게 꾸미고 싶다면 아래와 같이 바꿀 수 있다. 새로 꾸밀 표에 아이디를 부여한다. id="table_01"로 붙여 주었다. 엑셀에 있는 표와 비슷한 느낌으로 만들기 Company Contact Country Alfre.. 2020. 11. 29.
선형 변환과 CSS 시에스에스에서 변환(transform) 함수로 요소를 회전, 닮음, 비틀림, 평행 이동할 수 있다. 여기에도 당연히 수학이 들어 있다. 좌표를 다른 좌표로 옮기는 선형 변환이 바로 그것이다. $$T: R^n \to R^n$$ 데카르트 좌표(Cartesian coordinates) 수학 교과서와 조금 다르게 방향을 정한다. 수학 교과서는 $y$축의 양의 방향이 위쪽이지만 여기선 아래쪽이다. 시계 방향이 양의 방향이 된다. 오히려 일상 생활에서 생각하는 각과 같아지는 셈이니 수학을 잘 모르면 오히려 이해하기 쉽다고 해야 할까? 수학은 모든 자연수 $n$을 생각할 수 있지만 시에스에스에선 2차원과 3차원만 가능하다. 선형 변환을 표현하는 기본은 정사각 행렬이다. 2차 행렬로 모든 변환을 나타낼 수 있지만 웹 .. 2020. 11. 21.
메타 태그 HTML meta tag 정의와 사용 HTML 문서에서 태그는 메타[1]데이터를 정의할 때 쓴다. 메타테이터는 데이터에 대한 정보를 담은 데이터이다. 태그는 항상 요소 안에 적는다. 보통 특성에 대한 설명, 페이지에 대한 기술, 열쇳말, 저자, 뷰포트(웹페이지에서 보이는 영역) 설정을 담는다. 메타태그는 웹페이지에 나타나지 않고 오로지 기계가 분석할 수 있다. 기계는 브라우저(내용을 보여주는 방식, 페이지를 새로 고침하는 방식), 검색 엔진(열쇠말) 그리고 다른 웹서비스를 이른다. 속성 속성 값 설명 charset character_set HTML 문서를 위한 문자 인코딩을 지정 content text http-equiv 또는 이름 속성과 연관된 값을 지정 http-equiv content-security-policy conte.. 2020. 11. 15.
씨에스에스로 그림자 넣기(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의 포지셔닝을 사용해 position: fixed 와 같이 고정해 두곤 한다. 헤더 부분은 대부분 상호(브랜드)를 포함하고 네비게이션을 포함하기에 고정된 헤더에 높이가 긴 콘텐츠를 포함하고 있는 경우 오히려 사이트의 사용자경험을 떨어뜨리는 요인이 되기도 한다. 이는 모바일과 같은 뷰포트가 작은 기기들에서는 더욱 그러하다. 기존의 단순히 고정된 형태의 헤더 디자인을 제공하는 것 보다는 사용자의 스크롤 방향에 따라 헤더부분을 보여주거나 감춤으로써, 사용자의 의도에 맞는 디자인을 .. 2020. 11. 12.
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.
미끄러져 나오는 메뉴 날마다 조금씩 블로그 살결을 바꾸고 있다. 오늘은 옆에서 미끄러져 나오는 메뉴 만들기를 소개한다. 수업 시간에 쓸 목적으로 만든 블로그라 목록이 많다. 사이드바가 길어지는 것이 맘에 들지 않아 카테고리만 따로 뗴어내 감춰두고 필요할 때 보이게 하고 싶어졌다. 찾아보니 자바스크립트(javascript)나 제이쿼리(jquery)로 만든 것이 많다. 아무래도 씨에스에스(CSS)로만 만든 것이 맘에 들어서 골랐다. 먼저 skin.html파일 윗부분에 아래와 같은 태그를 넣고 style.css파일에 이어지는 코드를 넣어서 완성하였다. 나름대로 보기 좋다. ≡ /* ---------------------------------------------- */ /* menu*/ /* ---------------------.. 2020. 11. 1.
스킨 편집할 때 좋은 프로그램 괄호 brackets 티스토리 블로그 살결(skin)을 만지작거린다. 크게 아는 것은 없지만 남이 만든 것을 해석할 줄은 안다. 티스토리에서 새로 내 놓은 스킨 '포스터'를 짜집기 해 보았다. 스킨을 손보는 일은 생각보다 아주 번거롭다. 번거로움을 상당히 줄여줄 프로그램을 소개한다. brackets을 내려받아 실행하면 별다른 설명 없이 쉽게 따라할 수 있다. 프로그램 이름을 괄호(brackets)로 붙인 것이 재밌다. brackets.io/ A modern, open source code editor that understands web design Brackets is a lightweight, yet powerful, modern text editor. We blend visual tools into the editor .. 2020. 11. 1.
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.
반응형

티스토리툴바