My Tech Blog (그림자)

✨사진에 음영 추가하기✨ 안녕하세요. 오늘은 사진에 세 가지 방법으로 사진을 꾸미는 법을 배워봅시다. 단색 음영, 줄무늬 음영, 점 모양 음영 추가하는 법 알려드릴게요. 포토샵이나 일러스트를 사용하지 않아도 HTML과 CSS만으로 작업 할거니까 Vscode에서 따라해주세요. 📌 STEP 1. 단색 음영 추가하기 ☑️ HTML ☑️ CSS img { box-shadow: offset-x offset-y blur-radius color; } img { box-shadow: 20px 20px 0 #efcfd6; } 📌 STEP 2. 줄무늬 음영 배치하기 가상요소 선택자 ::before을 활용하면 자연스럽고 재미있는 느낌을 주는 대각선 줄무늬를 디자인할 수 있어요. ☑️ HTML 이번에는 이미지 태그를 div ..

✨피사체에 그림자 추가하기✨ 안녕하세요. 오늘은 피사체에 그림자를 추가해서 역동적인 이미지를 만드는 법을 알려드릴게요. 포토샵이나 일러스트를 사용하지 않아도 HTML과 CSS만으로 작업 할거니까 Vscode에서 따라해주세요. 📌 STEP 1. 투명한 바탕의 이미지를 준비해주세요. 투명한 배경 이미지 찾는 법 알려드릴게요. 포토샵으로 직접 배경을 제거하는 방법도 있지만 우리는 연습만 할꺼니까 구글에서 배경 없는 이미지를 가져와봅시다. 그냥 검색하면 실제로는 배경이 투명하지 않은 경우가 많아요. 구글에서 투명한 이미지 검색하는 법 구글 이미지검색 > 검색창 아래 [도구] 클릭 > [색상]에서 투명 클릭 실제로 배경이 투명한지 확인하기 위해서는 직접 이미지를 클릭해보세요. 아래처럼 배경에 회색 스케일의 바둑판..