프론트엔드 스쿨
-
[멋쟁이사자처럼] 프론트엔드 스쿨 7기 - 11일차 기록 및 복습Front-end 개발 2023. 7. 17. 01:02
목차 1. 과제 풀이 2. Grid 1. 과제 풀이 : Table 표 만들기 - thead, tbody, tfoot 은 없어도 브라우저가 해석을 위해 생성하지만 시멘틱 마크업을 위해 사용한다. - 공백을 위해서는 을 쓰지 않고 CSS를 사용한다. - (th 초기값) th 는 이미 bold,background-color 가 초기값으로 들어가 있음 - table 꾸며줄 때 border-collapse: collapse; table-layout: fixed; 속성이 중요 - 접근성을 위해 scope="row" or "col" 와 colgroup 을 사용함 - caption 초기값으로 가운데 정렬이 들어가 있음 - 으로 공백 채워주기 - id & headers 사용해서 접근성 향상 - 로 HTML에서 스타일 지..
-
[멋쟁이사자처럼] 실습 - foxFront-end 개발 2023. 7. 15. 21:13
목차 1. 실습 내용 2. 주요 태그 및 속성 3. 코드 1. 실습 내용 CSS 특강 내용을 바탕으로 아래 사항들을 고려하여 의도한 디자인으로 프론트엔드를 개발한다. (1) 개발순서의 첫번째 : 큰 덩어리 레이아웃(Layout) 부터 짜는 것이다. (배경으로 구역을 파악하라) (2) CSS 기본 속성 초기화 (3) 컨테이닝 블록 : 직계 부모 요소가 제공하는 컨텐츠 영역 (4) 속성의 초기값(Initail Value) 피그마 링크를 참조하여 HTML/CSS 코드를 작성하라 2. 주요 태그 및 속성 2-1. , margin: 50px auto; 2-2. , background-image: url(); background-size: cover; background-repeat: no-repeat; 2-3. ..
-
[멋쟁이사자처럼] 회고 5조 - 스프린트 회고Front-end 개발 2023. 7. 15. 15:17
목차 1. 회고조 활동 2. 사전 미션 3. 넉두리 운영진에 의해서 구성된 회고조에서 요구되는 활동과 사전 미션이 토요일 오후에 주어졌다. 활동내용과 스프린트 회고 사전 미션은 멋쟁이사자처럼 운영진이 생성해준 노션 페이지에 기록한다. 노션 페이지는 회고조 이름인 '오류해결'을 정할 때 마법 처럼 오류를 해결하는 개발자 컵셉트대로 꾸몄다. 아래와 같은 항목을 시키는 것으로 봤을 때, 대충 회고조가 어떤 역할을 하는 활동인지 알것 같다. 내 생각을 미리 정리해서 회의에 참여하면 회의가 효율적으로 끝날 것 같으니 정리해본다. 1. 회고조 활동 1-1. 회고조 목표 & 소개 더보기 - 회고조 목표: 우린 답을 찾을 것이다. 늘 그랬듯이 💯 - 회고조 소개: FES7 에서 발생한 요류를 해결하기 위해 뭉친 모임🧙..
-
[멋쟁이사자처럼] 프론트엔드 스쿨 7기 - 선배 특강 (오전)Front-end 개발 2023. 7. 14. 09:04
목차 1. 멋사에 들어오기 전 선배의 이야기 2. 멋사에서 얻어 갈 수 있는것 3. 이것만큼은 꼭 챙기기! 4. 이것만큼은 절대 하지 말기! 5. 해주고 싶은 말 6. 꿀팁 7. QnA 1. 멋사 들어오기 전 선배의 이야기 (5기) - 현제 나이? 27살 -> 25살 - 의공학 출신의 졸업 후 멋사 지원 (C언어, 파이썬 조금 해봄) - 스팸 메일도 확인하고 기대했던 합격 2. 멋사에서 얻어 갈 수 있는것 - 소프트웨어 스킬 - 협업 경험 3. 이것만큼은 꼭 챙기기! 3-1. 꼭, 회고조 활동 열심히 하기! 3-2. Live Share (Extenstion) : 페어 프로그래밍 (길게 20분 정도, 네비게이터 프로그래머) 3-3. AI와 친해지기 (ChatGPT3/4) : 복잡하지 않게 직접적이고 간단하..
-
[멋쟁이사자처럼] 실습 - 버튼 만들기Front-end 개발 2023. 7. 13. 22:06
목차 1. 주제 2. 핵심 태그 및 속성 3. 코드 1. 주제: 버튼 만들기 - 제한시간 15분 - 추가시간을 받고 총 30분 안에도 못함... (수강생 88명 중 50명은 했음) - 따라서, 나의 수준에서는 복습 및 백지 코딩 수행이 필수임 (1) 일단 button 에 가상 상태 클래스 (:hover, :active, :disabled) 를 적용해서 버튼 4개 만들기 (2) CSS 변수 적용해서 유지보수 용이한 형태로 CSS 수정하기 2. 핵심 태그 및 속성 (1) :enabled, :disabled, :hover, :active (2) :root (CSS 전역 변수 선택자) (3) @font-face (4) border (5) box-shadow: inset 3. 코드 Button Button Yes..
-
[멋쟁이사자처럼] 실습 - 수능표 만들기 (table)Front-end 개발 2023. 7. 13. 15:52
목차 1. 주제 2. 사용된 주요 태그와 속성들 3. 코드 1. 주제: 수능표 만들기 html/css 의 를 활용해서 수능표 만들기를 해본다. 단순히 아래 수능성적표를 만들면 된다. 2. 사용된 주요 태그와 속성들 (1) - border-collapse: clollapse; - table-layout: fixed; (2) - caption-side: bottom; (3) (4) (5) , - rowspan="2" - colspan="2" (6) 3. 코드 2023 학년도 대학수능능력시험 성적통지표 구분 한국사 영역 국어 영역 수학 영역 영어 영역 탐구영역 제 2 외국어 /한문 영역 선택과목 화문과 작문 확률과 통계 생활과 윤리 지구과학1 독일어 표준점수 131 137 53 64 백분위 93 95 75 9..
-
[멋쟁이사자처럼] 실습 - Flexbox FroggyFront-end 개발 2023. 7. 13. 00:01
멋쟁이사자처럼 프론트엔드 스쿨에서 Flex 를 배우고 많이 해매고 있는 참이다. 주어진 시간에 실습을 완료하지 못하고 수업을 듣고 있는 형편... 선생님께서는 우리에게 flex 관련 속성들을 학습할 수 있는 게임을 추천해 주셨다. 오늘은 Flexbox Froggy 를 다 풀어서 게시글을 올린다. Level 1 ~ Level 24 한번 더 빨리 풀어서 flex 에 더 친숙해져야겠다. 다른 HTML/CSS 는 나오지 않고 flex 관련된 내용에 집중할 수 있다. flex 를 알고 사용하면 풀이가 너무 쉬우니 따로 남기지는 않겠다. 따로 헷갈렸던 정렬 속성 들에 대해서 잘 정리된 사이트와 이미지를 공유한다. flex 정렬 속성 중, justify-content 의 space-beween / space-arou..
-
[멋쟁이사자처럼] 프론트엔드 스쿨 7기 - 상세 훈련과정Front-end 개발 2023. 6. 27. 17:46
목차 1. 일정표 2. 주요 학습 내용 멋쟁이사자처럼 프론트엔드 스쿨 7길에 지원하고 약 1개월이 지났다. 나는 1, 2차 평가를 통과하여 최종 합격하고, 드디어 6월 23일 멋쟁이사자처럼의 HRD-Net 행정등록이 완료됬다. * 위 훈련과정은 테킷 홈페이지에서 사전 선발된 사람을 대상으로 진행된다. 내가 지원하면서 가장 궁금했던 사항이었고 이제야 볼 수 있게된, 테킷 프론트엔드 스쿨의 4개월 상세 교육과정을 공유한다. 첨부파일로 붙여 놓은 계획서는 일(日) 단위 오전/오후로 시간구분이 되어 상세한 일정이 계획되어 있다. 교육과정이 변동될 수 있지만, '제주코딩 베이스캠프'에서 강의를 진행한다면 참고하기 충분할 것이다. 1. 일정표 ( 2023.07.03 ~ 2023.11.10 ) 2. 주요 학습 내용 ..
-
[멋쟁이사자처럼] 테킷 프론트엔드 스쿨 7기 지원 - 2차 과제 수행Front-end 개발 2023. 6. 8. 17:02
멋쟁이사자처럼에서 진행하는 프론트엔드 스쿨은 제주코딩베이스캠프과 함께한다. *제주코딩베이스캠프 : 제주에서 가장 큰 ICT 교육 행사로 카카오, 구름, 제주산학융합원 등 기업 및 지자체와 함께 진행하고 있는 무료 캠프. 다양한 교육 플랫폼에서 50여개의 동영상 강좌를 제공하고 있음 멋쟁이사자처럼에서 제공한 강의도 제주코딩베이스캠프의 강의다. 2차 영상 과제 및 기초 프로그래밍 테스트 진행 시 필수적으로 제공된 3개의 유튜브 강의들 수강해야 한다. 이번에는 각각의 JavaScript 강의를 보고 과제를 수행 기록을 남겨본다. (06.08.목 ~ 06.12.월) 1. 제주코딩베이스캠프 JavaScript 요약 강의 수강 및 요약 1-0. 기초 프로그래밍 테스트 정보 테스트 목적: 예비 훈련생의 지식 수준 판..
-
[멋쟁이사자처럼] 테킷 프론트엔드 스쿨 7기 지원 - 2차 과제 안내Front-end 개발 2023. 6. 8. 15:22
프론트엔드 스쿨 7기 1차 서류 전형에 합격했다! 이제 2차 과제를 준비해야 하는데 영상 과제와 기초 프로그래밍 테스트 총 2가지 구성되어 있다. 1. 영상 과제 제출 기한 : 2023.06.12(월) 15시까지 제출 방법 : 파일 이름 형식과 용량(300MB 이하 zip 파일)을 준수하여 지정된 구글 폼에 제출 영상 과제 질문 3가지 항목에 대한 답변 (3분) 질문 1. 프론트엔드 스쿨 지원 동기를 포함하여 자기 소개를 해주세요. (약 1분) 질문 2. 프론트엔드 스쿨 과정을 수강하게 될 경우 어떤 점이 가장 기대되는지, 과정이 종료된 후에 나는 어떤 모습으로 성장해 있을지 구체적으로 이야기해주세요. (약 1분) 질문 3. 아래 강의들을 수강하면서 무엇을 새롭게 배웠고 어떤 부분에서 흥미를 느꼈는지, ..
-
[멋쟁이사자처럼] 테킷 프론트엔드 스쿨 7기 지원 - 1차 자소서 (합격)Front-end 개발 2023. 5. 27. 20:32
처음 개발을 시작하거나, 경쟁률로 인해 떨어질 수도 있는 프론트엔드 교육을 신청하는데 막연하고 불안한 사람들을 위해 지원 서류를 공유합니다. 비록 같은 성과 과정을 겪지는 않았기 때문에 직접적인 도움이 될 수 없을지도 모릅니다. 하지만 제가 어떤 포인트에 맞춰 자기소개서를 작성했는지는 보시면 자소서 작성에 도움이 될 것이라 생각합니다. 개발자들 화이팅! 👍 합격 문자 합격 문자 합격 이메일 나의 제출 답변 질문 1. 프론트엔드 개발에 관심을 가지게 된 계기와 프론트엔드 개발자가 되기 위해 노력했던 시도를 구체적으로 기술해주시고 그 시도를 통해 얻은 결과물과 깨달은 점을 설명해주세요. (최대 500자) > 강력한 의지가 드러나는 배경 > 꾸준하고 다양한 시도들과 이를 통해 얻은 결과물 또는 깨달은 점 1...
-
[멋쟁이사자처럼] 테킷 프론트엔드 스쿨 7기 지원 - 자기소개서 항목Front-end 개발 2023. 5. 18. 03:45
자기소개 질문 항목 질문 1. 프론트엔드 개발에 관심을 가지게 된 계기와 프론트엔드 개발자가 되기 위해 노력했던 시도를 구체적으로 기술해주시고 그 시도를 통해 얻은 결과물과 깨달은 점을 설명해주세요. 질문 2. 팀의 목표를 달성하는 과정에서 갈등이 생겼을 때 어떤 식으로 문제를 해결했는지 구체적으로 작성해주세요. (문제가 발생한 상황과 이를 해결하기 위해 기울인 노력과 방법, 나만의 노하우 등을 구체적으로 작성해주세요) 질문 3. 프론트엔드 스쿨은 4개월 동안 전일제로 진행되는 몰입된 교육 과정입니다. 4개월 동안 효과적인 학습을 진행하기 위한 학업 계획과 취업 계획을 구체적으로 작성해주세요. (일일, 주간, 월간으로 세분화하여 학업 계획(주말 계획 포함)과 단계적인 취업계획을 작성해주세요) 기타 정보 ..
-
[멋쟁이사자처럼] 테킷 프론트엔드 스쿨 7기 지원 - 사전 설명회Front-end 개발 2023. 5. 17. 17:33
멋쟁이사자처럼 사전설명회 참여 https://www.youtube.com/watch?v=Iz1dXetcHzk [주요 Q&A] 1. 4개월이 몰입하기 좋음 (80일 정도) 2. 다양한 수업 리소스가 있음 - 줌 온라인 교육, 디스코드, 노션 워크스페이스(교안 확인) 사용 - 멘토링 지원, 수준별 특강, 이력서 특강 - 자율 스터디 (회고조, 주말 스터디), 알고리즘 수업 등 있음 3. 영상 과제: 보는사람에게 정성(자막, 화면전환)도 중요 하지만 내용(자세, 마음가짐)이 중요하다. - 제시하는 항목에 충실히 답변하면 합격함 - 프론트엔드 개발자가 되기 위해 무얼 어떻게 했는지 적어라, 어떤 결과까지 만들었다. 를 넣으면 좋음 - 성장의지, 협업능력, 문제해결능력, 커뮤니케이션 내용을 녹여서 자소서를 써라...