choijming21 님의 블로그

내가 맡은 부분상세페이지(subPage)개인소개부분 레이아웃 및 수정개인소개부분 화살표 그림 클릭시 페이지 연결디자인 래퍼런스 참고하여 전체적인 방명록 CSS   # 개인소개부분  레이아웃 및 수정 (문제점과 해결방안)창 크기를 조절하면 개인소개부분의 위치가 바뀌는 문제점display: flex;            ->   부모 안에 있는 자식요소들의 정렬을 위해 사용Flex-direction: row;                ->  자식요소 수평정렬Justify-content: center;         -> 주축에서 가운데 정렬Align-items: center;                -> 교차점에서 가운데 정렬 이 네가지 코드를 사용하였더니 창크기가 달라져도 개인소개부분 위치가 정가운데..

Flex는 레이아웃 배치 전용 기능으로 고안되었다. 그래서 레이아웃을 만들 때 훨씬 강력하고 편리한 기능들이 많다.  flex는 부모 요소에서 display: flex; 를 적용하는게 시작이다. display: flex;: 가로방향으로 자식요소의 너비만큼 차지 display: block;: 세로방향으로 줄바꿈이 들어가 자식요소들이 한줄씩 차지 display: inline-flex;display: inline-block;: inline이 추가되면 자식요소들 크기만큼만 차지   flex-direction: row;: 자식요소를 가로 방향으로 배치 flex-direction: row-reverse;: 자식요소를 역순으로 가로 방향으로 배치 flex-direction: column;:자식요소를 세로 방향으로 배..

내부링크란?동일한 웹사이트나 도메인에 있는 이미지나 문서와 같은 다른 페이지나 리소스에 대한 웹 페이지의 하이퍼링크 유형이다.한마디로 말해서, 동일한 도메인에 있는 두 페이지를 연결하는 링크이다.     그럼, 내부링크를 태그를 사용해서 걸어보겠다!  먼저, 태그란? 태그는 현재 사이트에서 다른 웹 문서나 사이트를 연결하는 태그이다.링크가 있는 부분에 마우스 커서를 올려놓으면, 손가락 모양의 커서로 바뀌어서 표시된다.    태그 형태네이버로 이동 href에는 연결할 웹 문서의 경로나 사이트 링크를 걸어주면 된다.화면에 표시되는 "네이버 이동"을 클릭하면 href 속성값에 입력한 사이트로 이동하게 된다.   링크 태그 에 적용되는 속성속성속성값내용href웹 문서의 경로, 사이트 주소 값연결할 웹 문서 ..

CSS를 HTML에적용시키는 총 3가지 방법ⓐ linking style sheet    - 별도의 css파일을 생성한 다음 html문서에 연결하는 방식 ⓑ inline style sheet     - Html태그의 style 속성에 CSS 코드를 삽입하는 방식​ⓒ internal style sheet    - Html문서 내에서 태그 사이에 CSS코드를 삽입하는 방식​  1. linking style sheetlink를 사용하는 방식html 파일에 css링크를 달아주면 된다. (href="파일 경로") 2. inline style sheetLorem ipusm dolor.html 태그의 style 속성에 css 코드를 삽입하는 방식꾸미는 것에 한계가 있고, html 파일이 없으면 수저이 어렵다는 점 등..

★ Github에 처음 코드 업로드하기1. 초기화git init  2. 저장할 파일 지정하기git add . . (점)은 모든 파일이라는 뜻, 선택적으로 올리고 싶으면 add 뒤에 파일이름 붙여주면 된다. (예, git add index.html)  3. 상태 확인 (선택사항)git status  4. 히스토리 남기기git commit -m "메모" -m 은 메세지의 줄인말로 뒤에 "" 안에 주고 싶은 히스토리 이름을 주면 된다.  5. Github repository를 내 로컬 프로젝트에 연결git remote add origin 깃허브주소 깃허브주소는 Github에서 복사해와서 붙여야한다.  6. 잘 연결됐는지 확인 (선택사항)git remote -v 내가 연결한 주소값이 잘 뜨면 연결된 것이다.  ..

1. CODEKATA ⓐ 약수의 합 문제: 정수 n을 입력받아 n의 약수를 모두 더한 값을 리턴하는 함수, solution을 완성해주세요. - n은 0 이상 3000이하인 정수입니다. nreturn122856  입출력 예 #112의 약수는 1, 2, 3, 4, 6, 12입니다. 이를 모두 더하면 28입니다.입출력 예 #25의 약수는 1, 5입니다. 이를 모두 더하면 6입니다. 먼저, for구문 이란?가장 일반적인 for문의 형태는 다음과 같다. console.log(i)를 총 10번 반복하는 반복문이다.for(let i = 0; i for문 안의 구성이 각각 의미하는 바를 살펴보면,let i=0 : 변수 let i를 선언하고 0으로 할당 (반복문 초기값 설정)i : for문을 얼마나 돌릴 것인지 조건을 ..

1. CODEKATA ⓐ 자릿수 더하기 문제: 자연수 N이 주어지면, N의 각 자릿수의 합을 구해서 return 하는 solution 함수를 만들어 주세요.예를들어 N = 123이면 1 + 2 + 3 = 6을 return 하면 됩니다. - 자연수 N이 주어지면, N의 각 자릿수의 합을 구해서 return 하는 solution 함수를 만들어 주세요.예를들어 N = 123이면 1 + 2 + 3 = 6을 return 하면 됩니다. Nanswer123698724                                                                입출력 예 #1문제의 예시와 같습니다.입출력 예 #29+8+7 = 24이므로 24를 return하면 됩니다.... 풀이: 결과값을 저장할 변..

1. CODEKATA ⓐ 짝수와 홀수 문제: 정수 num이 짝수일 경우 "Even"을 반환하고 홀수인 경우 "Odd"를 반환하는 함수, solution을 완성해주세요.      - num은 int 범위의 정수입니다.- 0은 짝수입니다. 풀이: 위 함수는 입력된 정수 num을 2로 나눈 나머지를 검사하여 짝수인지 홀수인지를 판별한다. 짝수일 경우 "Even"을, 홀수일 경우 "Odd"로 나타나게 된다.   ⓑ 평균 구하기 문제: 정수를 담고 있는 배열 arr의 평균값을 return하는 함수, solution을 완성해보세요. - arr은 길이 1 이상, 100 이하인 배열입니다.- arr의 원소는 -10,000 이상 10,000 이하인 정수입니다.  풀이: 배열이 비어있는 경우 평균값이 의미가 없으므로 0을..

1. CODEKATA 문제  ⓐ 각도기 문제: 각에서 0도 초과 90도 미만은 예각, 90도는 직각, 90도 초과 180도 미만은 둔각 180도는 평각으로 분류합니다. 각 angle이 매개변수로 주어질 때 예각일 때 1, 직각일 때 2, 둔각일 때 3, 평각일 때 4를 return하도록 solution 함수를 완성해주세요. 예각 : 0 직각 : angle = 90둔각 : 90 평각 : angle = 180풀이: if 와 else if를 써서 풀어줄 수 있다. ★ 첫번째 tip: else와 else if의 차이점에 대해 알아보겠다. else는 마지막으로 실행될 조건이며, 이전의 모든 조건들이 만족되지 않을 때 실행된다. else if는 다른 조건을 추가적으로 체크하고, 그 조건이 만족되었을 때 실행된다.e..

1. 내가 React 트랙에 참여한 계기는 무엇인가요?      : 대학교 4년을 다니면서 물리치료사를 꿈꿔왔지만, 현실 장벽에 부딪혀 다른 직업을 찾아보던 도중 친언니의 추천으로 내일배움캠프를 알게 되었다. '개발자'라는 직업은 나에게는 생소한 직업이었지만 언제부턴가 알 수 없는 매력에 끌리게 되었다. 친언니가 작업하는 것을 옆에서 지켜보면 코드 짜는 것과 그 코드를 통해서 화면이 구성되는 것이 신기해보였다. 내가 직접 코드를 짜서 무언가 만들어지고 실행되면 얼마나 즐거울 것 같았다. 내가 정말 잘할 수 있는지는 아직 확신이 없지만 개발자라는 직업을 경험해 보고 싶어 트랙에 참여하게 되었다.   2. 내가 이해한 개발자는 어떤 역할을 하는 사람인가요? : 개발자는 보통 프론트엔드, 백엔드로 나뉜다. 프..