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

1. CSS 실무 테크닉 1-1. 아이스브레이킹 - 유니티 개임 개발자 6개월 과정 듣고 취업 - 퇴사 후 웹개발 부트캠프 5개 듣기 (2년반) - 배울게 많아요, 길게 보세요. 급하게 생각하지 마세요. - 혜진 강사님의 뼈떄리는 말씀 더보기 비교를 통해서 얻을 수 있는 것은 두 가지 비 - 비참해지거나, 교 - 교만해지거나 밖에 없다고 했다. - 길게 봐야한다. - 다른 사람이랑 비교하지 말라. - 취업 이야기: 카카오 자회사 검색 개발팀 - 네트워크가 정말 중요하다. (중요한 정보가 나온다. 88명을 소중히 여겨라) - 모두가 취직을 할 것이고 중요한 정보를 공유하고 질문할 수 있다. - 관심 회사의 자리가 있는지? - 그 회사의 팀 분위기는 어떤가요? - 개발자는 실력 그리고 소프트스킬이 매우 중요..

목차 1. 메인 페이지 만들기 2. 반응형 이미지 3. 3D 관련 속성들 4. 카드 뒤집기 만들기 1. 메인 페이지 만들기 1-1. 자신만의 포트폴리오를 만들어라 - 디자인 요소를 다르게 해서 응용해보아라 - 피그마 디자인 파일에 있는 디테일 (인터렉션 변화)를 넣어서 완성시키세요. 1-2. 두근두근 다이어리 메인 페이지 만들기 - textarea 는 inline-block 라서 baseline 에 정렬됨 - h2 에서 padding: 0.5em 0 0.5em 2em; 은 line-height 내부 font-size 를 기준으로한다. - textarea 는 font 속성을 상속받지 않기 때문에 따로 font: inherit; 해줘야한다. - 에서 datetime 은 일시의 정확한 포맷이 있다. - 세로로..

목차 1. form 관련 동적 가상 선택자 2. HTML 구조 잡기 3. 로그인 페이지 만들기 4. 검색 엔진 최적화 1. form 관련 동적 가상 선택자 태그는 사용자에게 입력 받은 정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획을 나타낸다. 하지만 별도로 사용자 입력 정보를 제출할 필요가 없다면 form 태그를 사용하지 않아도 된다. 1-1. 동적 가상 선택자 ( : 으로 시작) - : enabled, : disabled 활성활/비활성화 - :read-only, :read-write 편집 가능/불가능 - :checked 유형이 check-box/radio 로 선택된 상태 - :required 필수 입력값 1-2. 가상 요소 ( :: 으로 시작) - ::placeholder 입력에 대한 추가 ..

목차 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. Grid Garden 2. 게임 클리어 및 답안 오늘의 프론트엔드 스쿨(FES) HTML/CSS 주제 Grid 를 배웠다. 강사님께서 주신 복습용 게임을 통해서 Grid 를 복습하고 익숙해지고자 한다. 1. Grid Garden CSS Grid 사용법을 익힐 수 있는 재미있는 사이트다. 나도 4개월의 멋쟁이사자처럼 부트가 끝나고 이런 무료 사이트를 만들 수 있는 실력을 갖추고 싶다. 본격적으로 Gird 속성들을 복습해본다. Gird Garden 은 28 단계까지 있다. 2. 게임 클리어 및 답안 Grid 가 익숙하지 않아서 헤매기도 했고, 강의에서 핵심적으로 배웠던 속성은 사용되지 않아서 어려웠다. 다시 한번 풀어보면서 답안을 공유한다. (마우스로 드래그 하면 보임) 순번 (1 ~ 14) 답안..

목차 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. 이것만큼은 꼭 챙기기! 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) : 복잡하지 않게 직접적이고 간단하..

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

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

목차 1. 정의 2. 접근성 안내서 3. 접근성을 프로젝트에 포함시키는 방법 1. 정의 : Accessibility MDN Web Docs 에서는 웹 개발에 있어서 접근성을 정말 주된 우선순위로 고려하길 권고한다. 웹 접근성에 대해 MDN Web Docs 를 기준으로 정의부터 살펴본다. 웹 개발에서 (종종 A11y 로 축약된 - "a", 11자, "y"로 표시됨) 접근성은 사람들의 능력이 어떤 식으로든 제한되어 있더라도, 가능한 많은 사람이 웹 사이트를 사용할 수 있도록 하는 것을 의미한다. - MDN Web Docs https://developer.mozilla.org/en-US/docs/Web/Accessibility Accessibility | MDN Accessibility (often abbre..

목차 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 (검색..