잉크스케이프 등 프로그램에서 그라디언트(그레이디언트)를 다루어 CSS로 어떻게 만드는지 궁금했다. 참고로 티스토리 블로그 글과 스킨에 CSS를 적용할 수 있다. 나는 블로그 글에만 적용했다. 그런데 이 글 배경에 아래와 같이 그라디언트 배경이 안 보인다면 배경이 없어진 것이다. 왜냐하면 글을 수정하면 그라디언트를 적은 CSS가 없어졌기 때문이다.
수동이 아닌 자동으로 CSS 그라디언트를 만드는 곳은 https://cssgradient.io/에서 만들 수 있다. 나도 거기에서 만들었 다. CSS 그라디언트를 배워 직접 만들 수도 있으나 인터넷에 자동으로 만들어주는 사이트가 많으니 나는 그런 곳을 이용한다. 그라디언트 외에 테두리, 그림자 등도 자동으로 만들어 주는 사이트를 이용하곤 한다. 그 사이트는 영문으로 선형(linear)과 원형(Radial) 그라디언트를 만들 수 있다. 삽입할 소스가 아래와 같다고 가정한다.
background: rgb(255,255,255);
background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(253,29,241,0.348243521041229) 50%, rgba(255,255,255,1) 100%);
그라디언트를 배경 요소에 적용한다면 아래와 같이 한다. <style>와 body { }를 적은 후 { 다음에 위 소스를 넣고 마지막으로 } </style>로 닫으면 된다.
참고로 적용은 body 요소에만 된다. 블로그에서 보면 그 글을 볼 때만 적용된다. 그 글을 벗어나면 적용되지 않는다. 아래를 비롯한 티스토리에 동영상 배경에 대한 글을 여러 번 적었는데 그때도 글에서 정의했으므로 글을 벗어나면 적용되지 않는다.
유튜브로 동영상 배경 만들기
이 글에서 유튜브 동영상 배경에 대해 적고자 한다. 이 글에서 설명할 것 예전에 이 블로그에서 헤더 부분을 YTPlayer 스크립트를 사용해서 유튜브 동영상 배경을 나오게 구현했다. 며칠동안 유튜
min-blog.tistory.com
스킨 편집에서 CSS를 적용한 것이 아니라 글에 CSS를 적용했다. 그래서 글을 벗어나면 적용되지 않는다. 만약 블로그 전체에 적용하고 싶다면 스킨 편집에서 적용해야 한다.
소스 전체
<style>
body {
background: rgb(255,255,255);
background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(253,29,241,0.348243521041229) 50%, rgba(255,255,255,1) 100%);
}
</style>
소스 적용 그림
HTML 페이지에 상단에 아래 소스를 넣어야 하지만 티스토리 글에는 <head>, <body> 등이 없다. 그래서 나는 아래 그림처럼 글 상단에 위 소스를 넣는다.
소스가 사라진다
글을 수정할 때 자주 태그가 사라진다. 그러니 수정 시 사라지는지 확인해야 한다. 태그가 자주 없어지므로 태그가 포함된 글인 경우 수정을 자제한다.
반드시 HTML에서 완료해야 한다. 기본 모드에서 완료하면 삽입한 것이 사라질 확률이 높다.
티스토리 블로그에서 HTML, CSS, 스크립트를 제한이 없으므로 인터넷을 서핑하다 보는 멋진 사이트처럼 만들 수 있다. 이 글에서 적은 그라디언트는 네이버 블로그 등에서 할 수 없으니 하지 말았으면 한다.
'블로그 > HTML. CSS. 스크립트' 카테고리의 다른 글
| 다른 방식으로 유튜브를 동영상 배경으로 사용 (0) | 2021.04.12 |
|---|---|
| 티스토리에 추가된 치환자 적용 (0) | 2019.08.30 |
| 애니메이션 카테고리 (0) | 2019.07.01 |
| HTML5에서 취소선 태그 (0) | 2019.04.17 |
| 글에 유튜브동영상배경 넣기 (2) | 2018.03.06 |
| 티스토리, 관리자댓글에 특정문구 추가 (0) | 2018.02.27 |
| 티스토리 글,댓글,방명록에 자동링크 (3) | 2017.06.29 |
| css:before를 티스토리에서 사용했다. (0) | 2017.05.25 |
