My Tech Blog (CSS)

✨사진에 다양한 필터 적용하기✨ 안녕하세요. 오늘은 vscode로 html/css 만을 이용해서 사진에 필터를 적용하는 법을 배워봐요. 대각선, 흐림, 회색조, 세피아 네 가지로 연출해보는 다양한 사진 꾸미기!! 지금부터 시작해 볼까요 📌 1. 대각선을 활용한 빗금무늬 필터 사진에 대각선 필터를 적용해주면, 아날로그 느낌을 연출 할 수 있습니다. 또 카피라이팅 할 때 문구를 배치하기 위한 배경으로 사용하기도 좋아요. 가상요소인 ::before로 대각선을 만들고, 사진 위에 포갠 디자인입니다. ☑️ HTML 코드 ☑️ CSS 코드 📌 2. 도트 필터 점 무늬 필터로 화질이 낮은 사진에도 재미있는 효과를 줄 수 있어요. ☑️ HTML 코드 ☑️ CSS 코드 📌 3. 흑백사진 만들기(grayscale) gra..

✨사진에 프레임 추가하기 & 액자 만들기✨ 안녕하세요. 오늘은 가상요소로 사진에 대각선 프레임 추가하는 법, 모서리를 액자처럼 꾸미기(+ 응용 : 모서리를 테이프로 붙인 것처럼 꾸미기) 배워봐요.   📌 1. 대각선 프레임 만들기 사진에 입체감을 줄 수 있는 대각선 프레임 디자인이예요. 의사요소 또는 가상요소라고도 부르는 ::after이용해서 만들어볼게요. 준비 되셨나요?   ☑️  요소를 둘러싼 테두리에 이미지를 지정하는 border-imageborder-image-source: repeating-linear-gradient( 45deg, /* 45도 회전, 대각선의 기울어진 각도 */ #ea987e 0px, #ea987a 2px, /* 선 굵기와 색깔 지정 */..

​ CSS 처음 배우시는 분들께 가상요소는 다소 어려운 개념입니다. 중급자들 과정에서 배우는 것이 적당하지만, CSS에서 자주 사용되는 트렌드이기 때문에 간단한 개념과 활용법 정도는 알아두시는게 좋습니다. 📌1. 가상요소 ::before과 ::after CSS로 선택한 대상 HTML요소 앞이나 뒤에 새로운 요소를 추가 할 수 있는 선택자입니다. 가상요소는 페이지 안에 실제로 존재하는 것은 아니지만, 기존 태그 요소의 앞이나 뒤쪽에 새로운 요소가 '있는 것처럼' 사용 할 수 있어서 자주 사용됩니다. 특히 실무에서 고급 CSS 작성 기법으로 활용도가 높고, 자바스트립트로만 구현할 수 있는 HTML요소의 이동 효과를 CSS로 비슷하게 만들어 볼 수 있다는 점에서 아주 유용하게 쓰입니다. 간단히 아이콘을 추가..

✨사진에 음영 추가하기✨ 안녕하세요. 오늘은 사진에 세 가지 방법으로 사진을 꾸미는 법을 배워봅시다. 단색 음영, 줄무늬 음영, 점 모양 음영 추가하는 법 알려드릴게요. 포토샵이나 일러스트를 사용하지 않아도 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. 투명한 바탕의 이미지를 준비해주세요. 투명한 배경 이미지 찾는 법 알려드릴게요. 포토샵으로 직접 배경을 제거하는 방법도 있지만 우리는 연습만 할꺼니까 구글에서 배경 없는 이미지를 가져와봅시다. 그냥 검색하면 실제로는 배경이 투명하지 않은 경우가 많아요. 구글에서 투명한 이미지 검색하는 법 구글 이미지검색 > 검색창 아래 [도구] 클릭 > [색상]에서 투명 클릭 실제로 배경이 투명한지 확인하기 위해서는 직접 이미지를 클릭해보세요. 아래처럼 배경에 회색 스케일의 바둑판..