전체 글

WHAT Frontenc Mentor? https://www.frontendmentor.io/challenges?sort=difficulty%7Casc CHALLENGE TITLE : Recipe page FOCUS ON This HTML & CSS-only challenge will be perfect for anyone starting to build responsive projects. 반응형 페이지를 만드는 데에 도움이 된다고 하네요. 프론트엔드를 추천해준 분에게 1차 완성본에 대한 피드백을 받아봤는데, 생각보다 내 코드에 수정할 부분이 많았다. 많은 걸 깨달았던 좋은 피드백 시간 👍 피드백에서 알 수 있었던 내용 height 값을 임의로 지정하는 것은 나쁜 습관! ( 유연성을 해침 ) 상속을 고..

WHAT Frontenc Mentor? https://www.frontendmentor.io/challenges?sort=difficulty%7Casc CHALLENGE TITLE : Product Preview Card Component FOCUS ON This HTML & CSS-only challenge will be perfect for anyone starting to build responsive projects. 반응형 페이지를 만드는 데에 도움이 된다고 하네요. WHAT TO DO? - 상품 이미지에 hover 시, 자연스럽게 확대되는 것을 추가해서 구현해봤다. transition 을 처음 이용해봤는데, 제대로 이해하고 쓴 것 같지는 않지만 그래도 정상적으로 동작하게 만들었다는게 스스로 신..

문제 설명 정수 n과 문자열 control이 주어집니다. control은 'w', 'a', 's', 'd'의 4개의 문자로 이루어져 있으며, control의 앞에서부터 순서대로 문자에 따라 n의 값을 바꿉니다. "w" : n이 1 커집니다. "s" : n이 1 작아집니다. "d" : n이 10 커집니다. "a" : n이 10 작아집니다. 위 규칙에 따라 n을 바꿨을 때 가장 마지막에 나오는 n의 값을 return하는 solution 함수를 완성해 주세요. 제한 사항 -100,000 ≤ n ≤ 100,000 1 ≤ control의 길이 ≤ 100,000 control은 알파벳 소문자 "w", "a", "s", "d"로 이루어진 문자열입니다. 입출력 예 n control result 0 "wsdawsdass..

WHAT Frontenc Mentor? https://www.frontendmentor.io/challenges?sort=difficulty%7Casc CHALLENGE TITLE : Recipe page FOCUS ON This challenge will help you focus on writing semantic HTML. Ensure you think through what HTML elements are most appropriate for each piece of content. 각 요소에 가장 적합한 시맨틱 태그가 무엇일지 고민하면서 제작해보라고 한다. WHAT TO DO? - li 태그와 텍스트 사이의 간격을 늘리고 싶어서, 약간 얌체같은 방법을 선택해서 간격을 늘려보았다. 목표 설정 - ..

**이미 지난 주차의 위클리 페이퍼이지만 블로그 이사로 인해서 새롭게 올리게 되었습니다.**내용은 유사하지만, 조금 더 보완해서 게시했습니다! - 시맨틱 태그를 사용하면 좋은 점을 설명해 주세요.- position의 속성들과 각각의 특징을 설명해 주세요. Semantic tag란?: 의미론적(semantic) 태그라는 뜻으로,이를 이용하면 HTML에서 각각의 태그 안에 있는 내용이 어떤 목적으로 구현되었는지를 나타낼 수 있고,사용할 때는 콘텐츠의 의미와 기능에 따라 적합한 태그를 선택해야한다. 시맨틱 태그의 종류1) header로고 및 제목이 포함된 페이지의 최상단 콘텐츠 2) main메인 콘텐츠의 전체를 감싸는 태그 3) footer저작권, 연락처, 사업자 정보, 소셜 미디어 계정 정보 등이 포함된 하..

개발 블로그이니 보여지는 것보다 내용의 알참이 중요한 것은 알지만 깔끔하고 예쁘게 올리고 싶다. 그래서 게시글에 이미지가 사용되지 않는 내용 중심의 포스팅에 사용할 대표 이미지를 한 두 개씩 만들어나갈 생각이다.처음 카테고리에 글을 게시할 때만 만들어두면 그 이후에는 서식에 넣어두고 계속 쓸 테니까!내가 만든 이미지로 썸네일을 걸어두니까 뿌듯하다. 글을 꾸준히 써서, 양질의 개발 블로그가 되도록 노력하겠습니다. 혹시라도 퍼갈 사람은 퍼가도 되지만, 출처만 잘 남겨주시와요 👍👍👍 (링크 걸어죠) 💟 코드잇 위클리 페이퍼  트러블 슈팅  알고리즘 공부

WHAT Frontenc Mentor? https://www.frontendmentor.io/challenges?sort=difficulty%7Casc CHALLENGE TITLE : Recipe page FOCUS ON This challenge will help you focus on writing semantic HTML. Ensure you think through what HTML elements are most appropriate for each piece of content. 각 요소에 가장 적합한 시맨틱 태그가 무엇일지 고민하면서 제작해보라고 한다. WHAT TO DO? - list-style-image 속성을 이용하여 시안에서 주어진 dot 이미지로 바꿔주었다. - 태그의 역시, 원하는..

**지난 주차의 위클리 페이퍼이지만 블로그 이사로 인해서 새롭게 올리게 되었습니다.**내용은 유사하지만, 조금 더 보완해서 게시했습니다! - CSS의 Cascading에 대해 설명해주세요  Cascading이란?: 계단식으로 내려오는 형태의 폭포를 의미CSS에서는 여러 CSS규칙이 적용될 때 '순서'에 따라 합쳐지는 것을 의미한다.상위 요소의 스타일이 하위 요소로 내려오며 상속되는 특징을 계단식으로 내려오는 폭포에 빗대어 사용하는 것 같다. 상위 요소(우선 순위)를 결정 짓는 기준 3가지1. 스타일 시트의 종류어떤 스타일 시트의 스타일이냐에 따라 더 높은 우선순위를 가진다. [ 프로그래머가 작성한 stylesheet ] > [ user agent stylesheet (웹에서 제공하는 기본 스타일) ] 2..

문제 설명 내가 원하는 동작 - 공유 버튼 클릭시, 이 뜬다. - 안에 있는 '링크 복사' 버튼을 클릭시, 클립보드에 복사하는 함수에 복사되길 원하는 링크 주소를 매개변수로 넘겨 실행한다. 실제 동작 - 공유 버튼 클릭시, 가 바로 동작한다 (그것도 연속 두 번이나) - 안에 있는 '링크 복사' 버튼을 클릭해도 복사되지 않는다. 모달에 있는 복사하기 버튼을 클릭했을 때 복사가 되어야하는데, 모달창이 뜨는 버튼을 누를 때 동작함 // handleCopyClipBoard : 클립보드에 복사하는 함수 // sharedFolderModal.jsx 링크 복사 원인과 해결법 콜백 함수로 넘겨주는 함수는 함수의 이름만 작성해야함 - 에서 매개변수와 같이 넘겨주었기 때문에 모달 파일이 불러와질 때 같이 호출이 되어버린..

프로젝트 시작 전의 나를 이야기해보자면☑️  리액트 강의를 듣고는 있지만 이해 안됨 (스스로 구현 못함) ☑️  git 잘 쓸 줄 모름 (origin, upstream이 뭔지 pull과 push를 어찌하는지) ☑️  CSS 기술 중에서 쓸 줄 아는 것이 기본적인 CSS 하나 뿐이었음 위와 같이 기초적인 지식이 너무나도 부족했고,리액트에 대한 이해가 간절했던 상태 😂 운이 좋게도 정말 좋은 팀원을 만나 프로젝트 기간 내내 모르는 것을 마구마구 물어보면서 참여했던 것 같다. 질문을 하고 많은 이야기들을 나누면서 어느 순간부터 리액트에 대한 이해가 조금씩 되기 시작했고, 스스로 구현하고 해결하는 게 재미있어지기 시작했다. 최대한 내가 맡은 부분을 스스로 구현하고 싶어 학습 시간 중의 많은 부분을 코드를 짜는..