Definition of Seon

오늘 도전한 과제는 FAQ 아코디언 페이지다.질문 옆에 있는 + 버튼을 누르면 자세한 내용이 나온다. 시맨틱한 Html를 작성하기 위해 아이콘 부분은 img가 아닌 div로 태그를 정했다.백그라운드 이미지로만 해당 아이콘들을 넣었다. 자바스크립트 코드를 추가하여 플러스 버튼을 누르면 hidden을 사라지게 하여아코디언을 구현할 수 있었다. 이번에 새롭게 다루어본 css는 배경이미지와 배경색을 한 번에 넣는 것.먼저 배경이미지를 넣고 그 뒤에 no-repeat, 색상 이름을 쓰면 끝!그럼 배경이미지의 크기를 넘어가는 부분은 해당 색상이 보인다. 이번에도 모바일과 데스크톱이냐에 따라 다른 ui를 적용하여반응형디자인으로 개발을 완료했다.다 만들고보니 글씨가 조금 작은 것 같기도...? 지금 연달아 3개는 오직..

레시피 페이지 메인 오늘 반응형 디자인까지 추가한 레시피 페이지 메인 완성!깃허브 페이지로 볼 수 있게 해두었다. https://seon318.github.io/frontend-mentor-challenges/recipe-page-main/ Recipe pageSimple Omelette Recipe An easy and quick dish, perfect for any meal. This classic omelette combines beaten eggs cooked to perfection, optionally filled with your choice of cheese, vegetables, or meats.seon318.github.io @media (max-width: 560px) {} 560픽..

Recipe Page Main HTML과 CSS를 잘 활용하고 싶어서 어떤 프로젝트를 해볼까 찾다가Frontend Mentor라는 사이트에서 도전과제를 제공한다는 사실을 알았다.바로 가입하고 리포지토리 만들어서 첫 프로젝트를 해보았다.앞으로 이 사이트에서 여러 도전과제들을 수행하며 순수한 HTML, CSS에 더 익숙해져야지. 코드는 깃허브에 정리중.이번 프로젝트에서는 깃모지를 써보려고 한다. https://github.com/seon318/frontend-mentor-challenges GitHub - seon318/frontend-mentor-challenges: Challenges from Frontend MentorChallenges from Frontend Mentor. Contribute to ..

2024. 01. 15 ~ 2024. 04. 28까지 3달 넘게 진행한 프로젝트가 끝났다.4월 5일에 배포를 하고 그 뒤에 서비스를 운영하며 유지보수 기간도 가졌다.긴 프로젝트 기간 동안 어떤 일들이 있었는지 그때마다 기록했으면 좋았겠지만 아쉽게도 그러지 못했다.이게 첫 프로젝트라 그래서일까 기록의 중요성을 너무나 늦게 알아버렸다.그 당시에 기록은 못했지만 사후기록이라도 남겨봐야지. 첫 프로젝트를 시작한다고 의욕 넘치던 초반에 썼던 글...이때부터 계속 기록을 남겼어야했는데! https://jemarque.tistory.com/entry/%EC%B2%AB-%ED%8C%80-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%ED%8C%80-%ED%94%84%EB%A1%9C%EC%A0%9D..

오늘의 작업 디자인을 마치고 메인과 문답 시작 페이지를 완성했다. 원래 pc에 적합한 ui로 디자인했었으나 아무래도 서비스 특성상 모바일 기기로의 공유가 빠를 것 같다는 생각이 들었다. 나 이거 해봤는데 너도 해봐 하면서 공유하는 그런 느낌의 서비스. 인스타 같은 곳에 올리기에도 모바일에 최적화되는 편이 나을 것 같아서 디자인을 수정했다. 핸드폰 화면에 들어갈 정도의 좁은 영역을 사용하는 방향으로 바꾸었다. 어려웠던 점 1. tailwind가 아직 익숙하지 않다. css보다 분명 쉬운 부분도 있지만 문법을 정확히 몰라 계속 문서를 찾아보며 헤맸다. 특히 너비와 높이를 설정함에 있어서 어려움을 많이 겪었다. header와 footer를 포함해서 스크롤바가 생기지 않게 길이를 딱 맞추고 싶은데 그게 아무리 ..

팀프로젝트의 첫 단계, ui 설계를 위해 피그마를 배우기로 했다. udemy의 웹디자인 강의를 결제해두었는데 이제 정말 들을 때가 되었다. 기초 기능을 다루는 방법을 정리하며 강의를 들어야겠다. 1. 프레임 (단축키 f) - 화면 크기 정하기 (아이폰, 데스크탑 등등, 또는 개인설정 가능) - 프레임 안에 2개 이상의 도형을 하나의 그룹으로 만들기 위해서는 command+g 또는 shift 누르고 클릭 - 그룹을 해제하기 위해서는 shift+command+g - 프레임 안 오브젝트에 제약조건을 추가할 경우 프레임의 변화와 관계 없이 그대로 있음 2. 기본 도형 - 직사각형(R), 라인(L), 화살표(shift+L), 원(o), 다각형, 별, 펜툴(p) - shift를 누를 경우 정사각형, 8방향의 라인,..

리액트 강의를 거의 다 들었을 무렵부터 인프런과 홀라에 올라오는 팀프로젝트 게시물을 유심히 보기 시작했다. 개인프로젝트부터 하는게 순리인 것 같기도 하지만, 괜히 팀플로 더 멋진 결과물을 만들고 싶은 느낌. 인프런에 올라온 글을 보고 문의를 몇 번 했으나 매번 next.js나 typescript라는 조건 때문에 참여를 못했다. 그러나 이번에 올라온 글에는 언어가 명시되어 있지 않아 문의를 넣었다. 다행히 아직 언어를 정하기 전이어서 이미 합류해 계신 프론트엔드분과 협의하여 자바스크립트로 개발을 진행하기로 했다. 이 팀에서는 실력보다는 인성과 태도 부분에서의 3가지 요소를 보았고 그 부분은 모두 자신 있었다. 많은 시간을 투자해서 부족한 실력을 잘 메워야지. 이 팀은 디자이너가 없어서 ui 개발을 다같이 ..

개인 프로젝트를 시작하려고보니 클론코딩을 하지 않는 이상 디자인이 필수라고 느꼈다. 평소 디자인에는 관심이 많았는데 피그마를 이용해본 적은 없었다. 강의를 듣기보다는 일단 무작정 만져보기 시작! 피그마에 로그인하고 간단한 튜토리얼을 지나가면 이런 화면이 나온다. 인터넷을 찾다보니 unsplash 플러그인을 설치하는 걸 추천하는 글이 보였다. 이곳에 unsplash를 검색하면 무료 사진을 사용할 수 있는 플러그인이 설치된다. 원하는 이미지를 검색하면 바로 다운로드가 되어 아주 편할 것 같다. 개인 프로젝트로 쇼핑몰 만들기를 진행해볼 생각인데 중학생 때부터 좋아했던 펜을 소재로 사이트를 만들어보려고 한다. 자세한 이야기는 프로젝트 게시물로.. 좋아하는 쇼핑몰 여러곳을 참고해 메인페이지 디자인을 마쳤다. 쇼핑..