[css] 배경 이미지 고정하기

안녕하세요. 플입니다. 오늘은 배경 이미지를 고정해볼게요. 1. 배경 이미지 고정 배경 이미지가 고정된다는 말이 무슨 말이냐면 아마 위의 이미지처럼 스크롤을 내릴 때 이미지가 같이 내려오는 것이 아니라 그 자리에 고정된 채로 움직이지 않는 모습을 본 적이 있으실 거예요. 그런 효과를 주는 css를 넣어줄 것입니다. 글로는 조금 이해하기 어려우시다면 아래 링크에서 확인해주세요. 포스팅하고 있는 지금은 아직 완성된 페이지가 아니긴 하지만 예시로 올려둘게요. https://ssimplay.github.io/paintdrop/ paint drop 우당탕탕 좌충우돌 물감친구들의 신나는 일상이야기. 톡 떨어진 물감에서 태어난 물감찍이는 궁금한게 너무나 많다. 세상에는 모르는 것과 신기한 것들 투성이. 여기저기 안가..

coding/html + css · 2020. 4. 22. 07:30

[css] linear-gradient 반반무많이 2탄

안녕하세요. 플입니다. liner-gradient를 사용할 때 주의할 점이 있어서 2탄으로 돌아왔습니다. 1. liner-gradient https://ssimplay.tistory.com/239 [css] 배경색 반반 무많이 안녕하세요. 플입니다. 오늘은 배경색을 반씩 나눠서 두 가지 색으로 만들어볼게요. 1. 크기 정하기 이렇게 이미지가 색 경계에 걸쳐있을 때가 있어요. 코딩 안된다고 시안을 막 뜯어고치는 건 너무 슬프잖아요?.. ssimplay.tistory.com 배경색 반나누는 1탄은 링크로 남겨둘게요. 2. 그라데이션이 되는 이유 아 퍼센트를 조정하면 두가지색으로 나눌 수 있겠군! 하고 신나서 만들었는데 그라데이션이 된 경우가 있으신가요? div{ background:linear-gradien..

coding/html + css · 2020. 4. 20. 07:30

[css] 배경이미지 넣기

안녕하세요. 플입니다. 오늘은 css로 배경 이미지를 넣어보겠습니다. 1. 배경 이미지 우선 배경으로 사용할 이미지를 저장해줍니다. 저는 키캡 모양을 배경으로 사용할 것입니다. 이때 이미지에 배경 부분을 투명하게 하려면 png로 저장해주셔야 합니다. 2. background p{ background:url('../images/sub1_0.png') no-repeat center center; } background를 이용해 이미지를 배경으로 넣어줍니다. 먼저 url을 입력해 이미지를 불러옵니다. 맨 앞의 ..은 웹에 올렸을 때 해당 도메인이 써질 자리입니다. 뒤쪽 부분은 평소 이미지 주소를 적는 것처럼 입력해주시면 됩니다. 그리고 no-repeat를 이용해 반복이 없는 배경 이미지를 만듭니다. 마지막으로..

coding/html + css · 2019. 11. 6. 18:30