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

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