작성 규칙

1. 🟠 작성 상태
   ✅ 작성한 날짜를 기록함으로써 리마인드
   ✅ 작성한 프로젝트를 기록함으로써 프로젝트를 찾아볼 수 있음
   ✅ 작성 상태를 기술함으로써 수정된 이력 버전과 완성여부를 확인
2. 🖋 기능 설명
   ✅ 레퍼런스 링크
   ✅ 사용된 기술에 대해 스스로 설명
3. 🔨 프로젝트 적용
   ✅ 기획내용 작성, 작성한 계기를 기술
   ✅ 프로젝트에 사용한 코드를 한 줄씩 리뷰하는 것으로 코드 전체 이해 증명
   ✅ 코드를 설계한 내용과 왜 이렇게 작성했는지
   ✅ 완성 코드를 코드펜으로 보여주기

🟠 작성 상태

---

🟠 작성 날짜 : 0428, 2022

🟠 적용 프로젝트 : 인스타그램 UI 클론코딩

🟠 작성 상태 : 작성중

🖋 기능 설명

---

🖋 레퍼런스 링크

👁‍🗨 css-tricks REF

👁‍🗨 onfocus 기능 REF

👁‍🗨 input::placeholder CSS REF

👁‍🗨 w3school REF

🖋 기능에 대해 설명

▶ HTML input tag

• input tag 는 데이터를 입력할 수 있는 특정한 입력 필드 태그
• form 엘리멘트인 것이 가장 중요함

▶ placeholder

• input tag 의 속성 중 하나인 placeholder는 입력할 데이터를 설명하는 힌트 역할을 수행한다.
• placeholder="값을 넣어주세요" 와 같이 설정하면 input태그 내용을 넣는 부분에 표시된다.

▶ placeholder -> onfocus

• input tag 의 속성 중 하나인 onfocus는 placeholder와 함께 적용한다
• onfocus는 input tag를 클릭하여 커서가 깜빡이는 focus 상태를 의미한다
• onfocus="this.placeholder='change text'" 와 같은 형태로 입력하면, 포커스 상태에서의 placeholder 표시 문자열이 변경된다

🔨 프로젝트 적용

---

🔨 프로젝트 기획, 작성 계기

🔨 코드 리뷰

👁‍🗨 ver.1.0

🔨 완성 코드(CodePen)