자기소개 페이지 만들기

자기소개 페이지를 좀 더 쉽게 만들기 위해 커서의 @콘텍스트를 이용하여 텍스트 형식으로 정리되어 있는 자기소개서를 커서에게 주어 작업시키도록 하겠습니다. 먼저 실습용 자기소개서 파일을 커서 읽기 좋도록 텍스트 파일을 준비합니다. 줄바꿈이나 형식이 엉망이여도 상관이 없으니 Ctrl+A -> Ctrl+C로 복사하고 븥여넣기 하여 만듭니다. 

 

• 자기소개서 텍스트 파일: bit.ly/3Hj4Dnz

커서로 빈 폴더를 열고 폴더에 자기소개서 파일을 두세요.

 

그런 다음 커서 채팅방을 열고 @콘텍스트를 이용해서 이렇게 이야기합니다.

현재 폴더에 있는 @자기소개서실습용.txt 파일의 내용을 파악하고, 이 내용을 바탕으로 자기소개서 페이지를 만들고 싶어, HTML, CSS, 자바스크립트 기술로만 자기소개 페이지를 만들어줄래?

 

 

 

커서의 설명을 보면 index.html 파일을 열면 자기소개서 페이지가 나타날 거라고 하네요. 파일을 웹 브라우저로 열어서 확인합니다.

 

결과를 보면 썩 마음에 들지는 않지만 잘 정리해준 것 같습니다. 이 상태에서 조금 더 부탁해서 형태를 다듬어보겠습니다.

 

다른 웹 사이트에서 찾은 페이지 중 하나를 참고하여 자기소개서 페이지 형식으로 꾸며달라고 하겠습니다. @콘텍스트를 이용해서 링크를 참조하여 요청합니다.

 

• 자기소개 참고 홈페이지: brittanychiang.com

https://brittanychiang.com과 같은 스타일로 최대한 비슷하게 해서 자기소개서 페이지가 매력적으로 보이도록 꾸며줘.

 

 

파일을 다시 열어보면 비슷한 스타일로 자기소개서 페이지가 만들어졌네요.

 

앞에서 본 자기소개서 페이지와 내용은 같지만 느낌이 완전히 달려졌습니다. 이렇게 페이지를 만들어 제공하면 서류 검토를 하는 사람에게 깊은 인상을 주기 좋을 것입니다.

 

마지막으로 프로필 사진을 적절한 위치에 넣어달라고 하겠습니다. 파일을 하나 준비해서 커서로 연 폴더에 넣은 다음 @컨텍스트로 파일을 가리키며 적당한 위치에 잘 보이도록 넣어달라고 요청하겠습니다.

 

• 실습용 프로필 이미지: bit.ly/3JeWrFr

 

 

@P.png 파일은 자기소개 페이지에 넣을 내 프로필 사진이야. 적당한 위치에 이 사진을 배치시켜줘. 어우러지게 디자인도 다듬어 주고.

 

 

결과를 보면 프로필 이미지도 잘 추가가 되었습니다. 제대로 자기소개 페이지가 만들어졌음을 알 수 있습니다.