2023년부터 로그 기록 2023년부터 로그 기록

목차 1. 회고 스프린트 목적 2. 회고 스프린트 3. 회고조 공유 4. 요약 오늘은 정규수업을 오후 4시까지 끝내고 자습 대신 스프린트 회고를 하는 시간이다. 나는 잘 몰랐지만 유명한 사람이 강사로 등장한 것 같았다. 이전 기수부터 스프린트 회고와 이력서 작성 특강을 맡고 있다고 한다. 이런 특강을 들을 수 있는 기회는 내 인생에서 흔치 않기에, 수업 내용에서 나온 내용들을 최대한 빠뜨리지 않고 받아 적었다. 1. 회고 스프린트 목적 1-1. 우아한테크코스 메이커준 (임동준) - 배달의민족 우아한테크코스 임동준님 - 주니어 개발자들에게 도움을 주고 있다. - 개발자와 교육의 삶을 살고 있다. 1-2. 개발자로서 성장을 잘하기 위해 무엇이 필요할까요? - 탄탄한 기초, 도전, 꾸준함, 구글링, 창의력, ..

목차 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에서 스타일 지..

목차 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. ..

목차 1. 회고조 활동 2. 사전 미션 3. 넉두리 운영진에 의해서 구성된 회고조에서 요구되는 활동과 사전 미션이 토요일 오후에 주어졌다. 활동내용과 스프린트 회고 사전 미션은 멋쟁이사자처럼 운영진이 생성해준 노션 페이지에 기록한다. 노션 페이지는 회고조 이름인 '오류해결'을 정할 때 마법 처럼 오류를 해결하는 개발자 컵셉트대로 꾸몄다. 아래와 같은 항목을 시키는 것으로 봤을 때, 대충 회고조가 어떤 역할을 하는 활동인지 알것 같다. 내 생각을 미리 정리해서 회의에 참여하면 회의가 효율적으로 끝날 것 같으니 정리해본다. 1. 회고조 활동 1-1. 회고조 목표 & 소개 더보기 - 회고조 목표: 우린 답을 찾을 것이다. 늘 그랬듯이 💯 - 회고조 소개: FES7 에서 발생한 요류를 해결하기 위해 뭉친 모임🧙..

목차 1. 강사 소개 2. CSS는 흥미롭다 3. 과제 1. 강사 소개 1-1. 이종찬 대표님 (Veamcamp) 1-2. 역사 - 중학생부터 웹페이지 만드는데 관심이 많았다. - PC 통신 전화선으로 인터넷하던 시절 - 웹 사이트 외주 제작으로 20대를 보냄 - 신촌 SBS 강의 시작 - 책 지필 제안이 왔지만 여기엔 재능이 없었다. - 유튜브를 시작했다 (좋댓구 부탁..) 2. CSS는 흥미롭다 : CSS 기초 2-1. CSS 기초값 Initial Value 이해하기 처음 웹 페이지를 작업 하려고 할 때는 큰 틀(main box) Layout 을 잡고 부터 만든다. 최소한의 마크업을 만들고, CSS 바로 진행한다. 영어 원문으로 용어들 어떻게 되어 있는지 알아둘 필요가 있다. 배경을 넣고 영역을 확인..

목차 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..

멋쟁이사자처럼 프론트엔드 스쿨에서 Flex 를 배우고 많이 해매고 있는 참이다. 주어진 시간에 실습을 완료하지 못하고 수업을 듣고 있는 형편... 선생님께서는 우리에게 flex 관련 속성들을 학습할 수 있는 게임을 추천해 주셨다. 오늘은 Flexbox Froggy 를 다 풀어서 게시글을 올린다. Level 1 ~ Level 24 한번 더 빨리 풀어서 flex 에 더 친숙해져야겠다. 다른 HTML/CSS 는 나오지 않고 flex 관련된 내용에 집중할 수 있다. flex 를 알고 사용하면 풀이가 너무 쉬우니 따로 남기지는 않겠다. 따로 헷갈렸던 정렬 속성 들에 대해서 잘 정리된 사이트와 이미지를 공유한다. flex 정렬 속성 중, justify-content 의 space-beween / space-arou..

목차 1. flex 복습 2. 실습 Card2 3. 버튼 4. 피그마 5. 디자인 요소 살펴보기 6. 벡터와 비트맵 7. 피그마 실습 1. flex 복습 flex-grow 는 글자수의 길이에 영향을 미쳐 정확한 비율 맞추기가 어렵다. 이때 부모에 flex-basis:0 을 주면 균등하게 flex-grow 를 줄 수 있다. 2. 실습 Card2 - validator.w3.org 에서 마크업 검사 실행 - button:enable {cursor:pointer} / button:disabled {} - display: flex 속성이 있을 경우, 너비값 고정없이 유연하게 처리하기 때문에 text-overflow 가 안먹힐 수 있다. (width 고정값을 주던지, 넘치는 요소 컨테이너를 만들어 그곳에서 over..

목차 1. Web Layout Histroy 2. Sections 3. float 4. flex 6. Web Accessibility 1. 웹 레이아웃 히스토리 - 레이아웃 도구가 아예 없던 시절에는 텍스트의 정렬만 가능했다. - 은 데이터의 본 목적과 다르게 배치를 위해 사용됨 다양한 브라우저에서 깨지지 않기 위해 뉴스 레터에서 Table 을 쓰는 이유 - 을 사용하여 레이아웃 구성 - 로 레이아웃 구성 (div, Box Model, Float, Position 등을 이용하여 레이아웃) (HTML5 나왔지만, 구번전의 Explorer 대응을 위해 div 로 작성됨(Not Symentic)) - 시맨틱한 마크업 (Flex, Grid) 을 이용한 레이아웃 구성 - 시맨틱 마크업의 이점 (1) SEO (검색..

목차 1. 과제 내용 2. 문제 풀이 3. 코드 1. 과제 내용 멋쟁이사자처럼 프론트엔드 스쿨 7기 첫번째 주 HTML/CSS 강의가 끝났다. 이번주는 HTML/CSS 입문과 Git/Github 기초를 배웠다. 강의 계획서와 달리 HTML/CSS 는 3주간 배울 것으로 예상된다. 학습의 연속성과 복습을 위해서 멋쟁이사자처럼에서는 매주 과제를 내주는 것 같다. 과제는 필수와 일반으로 나뉘는데, 이번주는 일반 과제이다. 필수과제의 경우 채용을 고려중인 기업에 공개되는 것 같다. 이번주 과제는 아래와 같다. 1-1. 과제명 - 박스 꾸미기 1-2. 상세 내용: - 오늘 배운 것들을 활용하여 박스를 만들어보세요! - 사이즈, 컬러는 자유롭게 해주세요. 정확한 컬러나, 폰트가 일치하지 않아도 됩니다. - 7/10..

목차 1. 인트로 2. CSS 텍스트 관련 속성 3. GitHub 저장소에 신규 코드 폴더 업로드 1. 인트로 - CLI git 에서 애먹는 사람들이 많음 - 점심이나 저녁 추천메뉴를 커밋하면서 연습하는 방법이 있음 2. CSS 텍스트 관련 속성 2-1. Color - 컬러보드를 통해서 색상 변경과 투명도(transparent) 변경이 가능함 - 투명도는 알파값 2-2. currentColor - color 상속 - 요소들이 많아 졌을 때 색상 관리하는데 유용함 - (개발자 도구) 제일 마지막 요소의 Color 값에서 대비율을 확인할 수 있음 - 카카오 고대비 태마 - 대비율은 웹 접근성 검사에서 사용됨 (노안, 색약을 위한 작업) - Lighthouse 보고서 생성 (웹 접근성 검사) 2-3. CSS ..

1. 수업 전 알아두기 1-1. 추천하는 확장도구 - (VSCode) Prettier : 코드 태그 자동생성 - (VSCode) Live Server : 실시간으로 Live Server 웹페이지를 열어 수정사항 확인 가능 휴대폰과 PC가 동일한 와이파이로 연결되어 있다면 휴대폰에서도 서버 웹페이지를 동일하게 확인가능 - (VSCode) vscode-icons : vscode 내 icon을 변경 가능 (setting > file theme 검색 > Icon Theme: VSCode Icons) - (VSCode) ident-rainbow : tab 색깔 변경 - (VSCode) Gitmoji : Git 활용시 커밋 메시지에 이모지 적용 - (VSCode) Ayu Mirage Bordered : (미설치) ..

1. 우리는 이렇게 공부해요 학습 곡선 어디에 있든지 그저 묵묵히 걸으면 목표한 바를 이룰 수 있다. 남은 비교 대상이 아니다. 초점을 안으로 모아 나만의 속도로 페이스를 잃지 마시고 묵묵히 걸어가라. 뱁새가 황새 따라가는 법은 뒤따라 나는 것이다. 그러면 같은 곳에 착지한다. 매우 많은 지식을 습득하게 될 것입니다. 때로는 너무 많은 지식에 버겁다고 느껴질 것이다. 그러나 버거운 마음을 내려두고 이해가 안되는 채로 내버려 두라. 중요한 것은 다시 나온다. 그러면 다시 공부하면 되다. 2번이 안되면 3번이면 된다. 모두의 속도는 다른다. 또 모두가 시작한 시점이 다르다. 나만의 속도로 페이스를 잃지 않고 묵묵히 걸어가라. 당신의 때가 옵니다. 반드시 옵니다. 2. 멋사 Front-end 공부방법 2-1...

목차 1. HTML/CSS 2. 김멋사 이력서 1. HTML/CSS 1-1. HTML - Section Tag 1-2. CSS - montserrat 폰트를 가져와서 전체 문서의 폰트로 변경 - Lorem Ipsum - 행간은 16px (160% 를 주는게 가장 보기 좋음) - Browser 간 다를 수 있는 마진 때문에 body, h1, h2 를 마진, 패딩 초기화 - div 가운데 정렬은 (margin-right: auto; margin-left: auto;) - div 그림자 주기 (box-shadow: 가로축 세로축 blur spray rgba(red, green, blue, 투명도);) - Floating 하고 겹치지 않게 overflow hidden 하는 법 - div 와 같지만 다르게 부르는..

목차 1. 일정표 2. 주요 학습 내용 멋쟁이사자처럼 프론트엔드 스쿨 7길에 지원하고 약 1개월이 지났다. 나는 1, 2차 평가를 통과하여 최종 합격하고, 드디어 6월 23일 멋쟁이사자처럼의 HRD-Net 행정등록이 완료됬다. * 위 훈련과정은 테킷 홈페이지에서 사전 선발된 사람을 대상으로 진행된다. 내가 지원하면서 가장 궁금했던 사항이었고 이제야 볼 수 있게된, 테킷 프론트엔드 스쿨의 4개월 상세 교육과정을 공유한다. 첨부파일로 붙여 놓은 계획서는 일(日) 단위 오전/오후로 시간구분이 되어 상세한 일정이 계획되어 있다. 교육과정이 변동될 수 있지만, '제주코딩 베이스캠프'에서 강의를 진행한다면 참고하기 충분할 것이다. 1. 일정표 ( 2023.07.03 ~ 2023.11.10 ) 2. 주요 학습 내용 ..