나공탐 (인프 과제) (5) 썸네일형 리스트형 나공탐 제작 5일차 (23.6.10) 5일차 진행 상황(2023. 6. 10) 학습 공간, 나공탐 정보 구현 완료 - details를 이용하여 거의 구현하였음... - 쉬운 태그들만 사용해서 만들었음. 새롭게 알게 된 점 - 문제점 - 나의 정보 항목은 삭제 하였다. 과제 제출 시간이 얼마 남지 않은 것도 맞지만 지금 내 수준에서 로그인 회원가입 창을 만들고, 그 데이터를 저장해두기 위한 것들을 코드로 짜려면 단순히 인터넷에서 긁어오는 것 밖에 안 될 것 같아서 이 기능은 나중에 기회가 되면 다시 도전해 보고 싶다. 느낀 점 어쨌든 완성!! 조금... 퀄리티가 떨어지지만 그래도 어찌됐든 나의 아이디어를 실현시켰다!! ㅎㅎ 사실 너무 단순하고, 이 블로그 이름처럼 무식하게 코드를 작성한 거라... 마지막 내 정보 쓸 때 개발자라고 하기 굉장히.. 나공탐 제작 4일차 (23.6.3) 4일차 진행 상황(2023.6.3) 유형 결과 (구현 완료) - 각 유형 별로 또 html페이지 만들어서 링크로 연결. - 기능 보단 디자인에 더욱 신경씀. (구리지만,,, 아무튼 쓴 거임...) 새롭게 배운 지식 - 이미지 가운데 정렬 아... 정말 이미지가 왜 이렇게 내 마음대로 안 되는지 정말 화가 날 뻔 했을 때... 위치를 지정할 수 있는 속성들을 찾았음... 근데 정말 미친듯이 찾다가 한 거라... 내가 생각해도 이게 왜 되지... 일 뿐인... 참고 링크 : https://www.freecodecamp.org/korean/news/how-to-center-an-image-in-css/ CSS로 이미지를 중앙 정렬하는 방법 많은 개발자들이 이미지 작업을 할 때 어려움을 느끼곤 합니다. 반응형 .. 나공탐 제작 3일차 (23.5.25) 3일차 진행 상황 (2023.5.25) ● 유형 검사 (구현 완료) - 스타일시트 따로 제작 >> 메인과 다르게 구분하여 잘 알아볼 수 있도록 하였음. - 테이블을 통해 테스트 기능 구현 (질문 부분 병합 + 보기 비율 일정히) - 왼쪽에 메모장 구현 후, 고정. - 결과를 details를 통해 알 수 있도록 함. ● 메인 메뉴 - 가이드 부분의 항목 버튼에 마우스를 갖다대면 진한 글씨 + 마우스 커서 모양 바뀔 수 있도록 구현. - 가이드 부분의 항목 버튼끼리 간격을 주어 가독성을 올림. ● 기타 스타일 - 모든 페이지에 항목을 누를 때 글씨가 진하게 나오도록 설정함. 새롭게 배운 지식 - 테이블 셀 병합 맨 위에 질문이 한줄로 나오고 그 밑에 보기들이 일정한 비율로 4개 나오도록 제작하기 위해 col.. 나공탐 제작 2일차 (23.5.24) 2일차 진행 상황 (2023.5.24) - 각 항목 별로 html페이지를 만들고 a태그를 이용하여 연결하였음. - 가이드 안내를 제대로 다시 작성 + 색 재설정 - 링크를 클릭할 때 글씨 색이 보라색으로 바뀌는 것을 막음. 밑줄 생기는 것도 없앰. (text-decoration : none;) - 가이드 안내 단순히 텍스트를 링크로 건 것이 아니라 버튼을 링크로 걸었음. 새롭게 배운 지식 - 링크 걸고 밑줄 없애는 것 수업시간에 배웠던 건데 어디서 배운지 몰라서 전공책 정독했음... - input으로 버튼을 만들 때는, value 안에 있는 텍스트를 꾸미지 못하는데(맞나?) 태그 자체를 button으로 사용함으로서 버튼과 안의 글씨 글꽃 및 색상까지 바꿀 수 있었다. 문제점 - header부분과 nav부.. 나공탐 제작 1일차(23.5.20) 제작 계기 : 글쎄다... 그냥 지금까지 배운 기능을 모두 구현할 수 있는 웹페이지를 고민했는데 딱 떠오르는 데 사용자 맞춤형 공부 방식 추천 서비스 였음 1일차 진행 상황 (2023.5.20) - 간단한 프로토타입을 그려보며, 웹 페이지의 구조와 어떤 기능에 어떤 태그를 적용할 건지 대략적으로 구상해보았음 - 각 웹페이지 구조화 - style.css 파일을 만들어서 html 로 불러올 수 있도록 함. - 가장 처음 화면에 간단한 소개 부분을 애니메이션으로 구현 - 나공탐에 대한 간략한 정보를 채팅 형식으로 제작함. - 앵커를 통해 사용자가 원하는 정보를 볼 수 있도록 하였음. - being creater AI 를 이용하여 내가 원하는 사진 추출하기 새롭게 배운 지식 - 애니메이션 기능 - 폰트 다운해서.. 이전 1 다음
