contentEditable에 placeholder 적용하기(흉내내기)

contentEditable에서 placeholder를 적용하려면..위의 코드와 같은 방식으로 작성했을때 과연 아래의 사진과 같은 결과가 나올까요?직접 해봤다면 원하는대로 적용이 되지않음을 알 수 있습니다.placeholder는 input이나 textarea 태그인 경우에만 사용할 수 있습니다.따라서 ContentEditable은 엘리먼트를 input처럼 편집할 수 있지만 placeholder 어트리뷰트는 적용할 수 없음을 알 수 있습니다. 그렇다면 placeholder를 사용할 수 있는 방법은 없는걸까요..?😭가능합니다!가상클래스를 이용한 방법으로 placeholder인것 처럼 동작할 수 있게 만들 수 있는데 방법은 아래와 같습니다.:empty : 자식, 텍스트가 없는 요소 선택:before : 의사..

• format_list_bulleted 프로젝트/개발괴발
• · 2024. 8. 6.
• textsms

프론트엔드 프로젝트 : 개발자 커뮤니티 - 시작

오늘 한 일프로젝트 주제 정하기✅ 결정 = 개발자 커뮤니티 & 챌린지 : 문서 편집기 직접 구현 (예전에 진행했던 노션 클로닝 복습)프로젝트 관련 대략적인 규칙✅ 회의는 어떻게 할까 : 김창준님의 특강 -> 애자일 방법론-> 매일 스크럼 : 15분 이내로 짧고 빠르게 종료 (절대 대충 X)-> 팀의 개발 시간 : 월~금요일 10시 ~ 19시로 정하되 매일 스크럼에서 어떤 태스크를 진행할 지 계획하고 당일 17:00 까지 마치도록 노력하기. 만약 끝마치지 못했다면 팀원이 함께 그 문제를 해결하도록 노력 🤟✅ 아토믹 디자인 사용하기9월 5일 10시까지 해야할 일 기술 스택 정해오기 -> 정당한 이유 필요(해보고 싶어서 선택했다는 안됨) 스토어는 어떤것 사용할 것인가? CSS는 어떤것을 사용할 것? 일정 정..

• format_list_bulleted 프로젝트/개발괴발
• · 2024. 8. 6.
• textsms

Vue로 영화 검색 페이지 만들기 회고(+ TS 사용 후기)

DemoGithub한 주 동안 무엇을 했는가?월요일, 화요일 : vue 강의 듣기수요일, 목요일, 금요일, 토요일, 일요일 : vue 강의를 들으며 영화 검색 페이지 제작 과제프로젝트 접근 순서1. 의욕만 앞선 ["일단 강의를 다 듣자!"] 결심-> 일단 강의를 먼저 듣기 시작했고 점점 조급해져오는 마음에 일단 구현 먼저 하고 필요할 때마다 강의를 보자는 생각을 함vite를 이용해 기초 세팅 먼저 하고 무대포로 일단 코드를 짜기 시작처음에 검색페이지를 만들고 하는것 까진 좋았으나......기본 요구사항에 존재하는클라이언트(브라우저)에서 API Key(7035c60c)가 노출되지 않아야 합니다! 항목은 무시한채 그대로 Network에서 고스란히 보여줘버리기!이 문제를 해결하기 위해선 서버가 필요하다는 것을..

• format_list_bulleted 프로젝트/기타 (프로젝트)
• · 2024. 8. 6.
• textsms

[23.06.27~23.07.06] 노션 클로닝 회고

이번 23.06.27~23.07.06 약 2주간 노션 클로닝 프로젝트를 진행했습니다.먼저,기본 요구사항바닐라 JS만을 이용해 노션을 클로닝화면 좌측에 Root Documents를 불러오는 API를 통해 루트 Documents를 렌더링Root Document를 클릭하면 오른쪽 편집기 영역에 해당 Document의 Content를 렌더링해당 Root Document에 하위 Document가 있는 경우, 해당 Document 아래에 트리 형태로 렌더링각 Document 우측 + 클릭시 클릭한 Document의 하위 Document로 새 Document 생성 & 편집 화면으로 이동Document Save API를 이용해 지속적으로 서버에 저장History API를 이용해 SPA 형태로 제작보너스 요구사항div와..

• format_list_bulleted 프로젝트/Vanilla JS 문서편집기
• · 2024. 8. 6.
• textsms