My Tech Blog (분류 전체보기)

✨사진에 프레임 추가하기 & 액자 만들기✨ 안녕하세요. 오늘은 가상요소로 사진에 대각선 프레임 추가하는 법, 모서리를 액자처럼 꾸미기(+ 응용 : 모서리를 테이프로 붙인 것처럼 꾸미기) 배워봐요.   📌 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. 투명한 바탕의 이미지를 준비해주세요. 투명한 배경 이미지 찾는 법 알려드릴게요. 포토샵으로 직접 배경을 제거하는 방법도 있지만 우리는 연습만 할꺼니까 구글에서 배경 없는 이미지를 가져와봅시다. 그냥 검색하면 실제로는 배경이 투명하지 않은 경우가 많아요. 구글에서 투명한 이미지 검색하는 법 구글 이미지검색 > 검색창 아래 [도구] 클릭 > [색상]에서 투명 클릭 실제로 배경이 투명한지 확인하기 위해서는 직접 이미지를 클릭해보세요. 아래처럼 배경에 회색 스케일의 바둑판..

좋아하는 그림    크리스틴 다트너 루이보스 고지 내가 먹어본 티 중에서 젤 맛있오. 다 먹구 캐모마일 오렌지만 남았다....ㅋㅋㅋㅋ 요즘 오설록에서도 티 세트 나와서 비슷한 맛을 저렴하게 즐길 수 있다....   다이소에서 산 화분ㅋㅋㅋㅋㅋㅋ일단 싹만 틔우고나중에 식물 좀 자라면 여기에 옮겨 심으려구...  마셸 액톤 블루투스 스피커하루 종일 피아노 음악 틀어놨오테일즈위버 reminiscence랑 second run 너므좋다..

- 계획은 지킬수 있는것만, 욕심부리지 말자 🥰- 인생에서 내가 바꿀수 있는 것과 바꿀 수 없는 것을 구별하는 지혜를 갖자- 가능하면 출근은 30분 일찍하자 💙🐬- 작은 일에 감사 하자블로그를 시작한지 벌써 2주가 지났어. 사람들은 밝고 즐거운 이야기를 좋아한다. 그리고 '저 친구는 잘 웃고, 명랑한 모습이 보기 좋아.' 라고 한다. 내가 하루라도 침울하고 차분한 모습을 보이면 '무슨 일 있어?' 이렇게 물어온다. 누구에게나 그런 날은 찾아오기 마련인데, 내가 그들과 즐거운 시간만을 함께해야 한다면, 그 사람들이 나의 침울한 모습을 낯설어 한다면, 그렇다면 즐겁지 않은 날 나의 이야기는 누가 들어 줄 수 있는 것인가? 일기를 쓴다는 것은 자기의 감정을 들여다보는 일이다. 매일 일기를 쓰는데 시간을 ..

✅ 노션 요금제구분요금주요기능무료요금제개인요금제무료무제한 텍스트 작성(2명 이상 사용시 블록 1,000개 제한), 파일업로드 5MB제한, 게스트 초대 10명 제한, 버전 기록 7일간 열람 가능유료요금제플러스 요금제매달 USD 10(연간 결제시 월 USD 8)[개인요금제] 기능 +무제한 파일 업로드 가능,게스트 초대 100명 제한,버전 기록 30일간 열람 가능비즈니스 요금제매달 멤버 1인당 USD 18(연간 결제시 월 USD 15)[플러스 요금제] 기능 +게스트 초대 250명 제한,버전 기록 90일간 열람 가능,고급 페이지 애널리틱스 기능엔터프라이즈요금제노션 영업팀에 별도 문의[비즈니스 요금제] 기능 + 버전 기록 무제한 열람 가능    학생/교육계 종사자는 [플러스 요금제] 무료로 사용 가능(단, 워크 ..

긴 영단어 또는 홈페이지 주소, 이메일주소 등이 입력되었을 때 주로 발생하는 문제로 영문은 단어단위로 입력되는것이 기본설정인데 단어를 떨어뜨리지 않으면서 페이지의 양쪽 끝을 맞추는 양쪽 정렬 기능이 함께 만나 이런 현상이 벌어진다. 해결법: 1. 벌어진 곳을 블록지정2. 마우스 우클릭> 문단모양> 줄나눔단위-한글:글자, 영어:글자 선택 위 해결법을 사용하면 영단어 사이에 줄바꿈이 됨.문제 해결 끝!  + 단축키 팁자간줄이기 Alt + Shift + N자간늘리기 Alt+ Shift + W