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

목차 1. 수업 외 특별 활동 2. Tailwind 개요 3. Tailwind 로 이력서 만들기 1. 수업 외 특별 활동 - 책 집필 (8월 중순, 팀구성 자유, 주제 구상해오기) - 오픈소스 프로젝트 - 신입 개발자 자기소개 작성 문의 (희망 연봉 명시된 이력서를 보낼 것) - Sass TailwindCSS Bootstrap (Bootstrap 이 가장 빠름, 돈으로 해결함) 2. Tailwind 개요 - Tailwind : 만족도가 높고 꼭 배워야 한다고 생각함 - 부트스트랩 : 찍어내야하고 빨리 만들어 낸다면 사용 - 프론트엔드 스쿨에서 유료강의도 제공해줄 것이지만 지원회사에서 Tailwind 를 사용할 때 시간내서 더 볼 것 2-1. Tailwind CSS HTML 을 벗어나지 않고 모던 웹사이트..

목차 1. CSS 애니메이션 2. 햄버거 버튼 만들기 3. Video & Audio 4. SVG & Canvas 5. Form 6. Select 1. CSS 애니메이션 1-1. 기본 개념 - JavaScript 없이 요소에 애니메이션 효과를 적용할 때 사용한다. - 애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타내는 keyframes로 이루어진다. - transition VS animation : transition 의 경우 요소의 상태가 변경되어야 애니메이션을 실행할 수 있지만, animation 속성은 요소의 상태 변화와 관계없이 애니메이션을 실핼할 수 있다. - @keyframes : 두개 이상의 애니메이션 중간 상태를 지정합니다. (0% > 100% 또는 from > to) 1..

목차 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. 주제: 수능표 만들기 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..

목차 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. 인트로 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. 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 와 같지만 다르게 부르는..