My Tech Blog (전체 글)

​ 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

✅ 문제훈제오리구이를 시작하는 시각과 오븐구이를 하는 데 필요한 시간이 분단위로 주어졌을 때, 오븐구이가 끝나는 시각을 계산하는 프로그램 만들기 ​📥 입력 첫째 줄에는 현재 시각이 나온다. 현재 시각은 시 A (0 ≤ A ≤ 23) 와 분 B (0 ≤ B ≤ 59)가 정수로 빈칸을 사이에 두고 순서대로 주어진다. 두 번째 줄에는 요리하는 데 필요한 시간 C (0 ≤ C ≤ 1,000)가 분 단위로 주어진다. ​📥 출력 첫째 줄에 종료되는 시각의 시와 분을 공백을 사이에 두고 출력한다. (단, 시는 0부터 23까지의 정수, 분은 0부터 59까지의 정수이다. 디지털 시계는 23시 59분에서 1분이 지나면 0시 0분이 된다.) ​ 💡 풀이 시계 돌리기 문제. 현재 시간에 오븐구이 만드는데 필요한 시간을 더해서..

✅ 문제 입력한 시간 기준으로 45분 전은 몇시 몇 분인지 출력하는 프로그램 짜기 ​📥 입력 첫째 줄에 두 정수 H와 M이 주어진다. (0 ≤ H ≤ 23, 0 ≤ M ≤ 59) 그리고 이것은 현재 상근이가 설정한 알람 시간 H시 M분을 의미한다. ​ 입력 시간은 24시간 표현을 사용한다. 24시간 표현에서 ​하루의 시작은 0:0(자정)이고, 끝은 23:59(다음날 자정 1분 전)이다. 시간을 나타낼 때, 불필요한 0은 사용하지 않는다. ​📥 출력 첫째 줄에 상근이가 창영이의 방법을 사용할 때, 설정해야 하는 알람 시간을 출력한다. ​ 💡 풀이 ​Scanner 로 입력받아서 연산하는 법과 BufferedReader 로 입력받아서 연산하는 방법 두 가지로 문제를 해결하였다. 알고리즘 접근법 ​ 1. 입력받..