$$config title: 성원제 공부위키 keywords: - IT - 공부위키 $$ # 성원제 메모장 ## 메모 - GIT 질문 - 31강 다시 질문 ## 현재 진행중 ### ux sun - UX/UI 디자인 - ~2강 ### 좐느 - 포토샵 누끼따기/배경지우기/머리카락따기 : 일단 보류 - 포토샵 리터칭 : 완료 - 포토샵 강의/포토샵 강좌 : ~14강 - 일러스트레이터 강좌 : ~2강 ### 연정's Figma - 피그마 기초 강좌 : ~18강 ### 2707 정리(매일 10강씩) - ~48강 - 역순으로 가기 ### 웹사이트 부분모작 - 더페이스샵 홈페이지 ### 깃허브 강좌(1229) - ~26강 --- --- ## 필요한 링크 ### 개인 필요 사이트 - DNSZI 도메인 : https://dnszi.com/ ### HTML&CSS #### 불러오기 - 기본 세팅(제이쿼리 + 테일윈드 + 폰트어썸) - https://to2.kr/dwp - Swiper-Bundle - https://to2.kr/dwq - Swiper Demos(더 다양한 효과 가능) - 소스 사이트 : https://swiperjs.com/demos#effect-fade - 링크 불러오기 : https://codepen.io/daniel_sung/pen/XWzgJXV? - Mousewheel Control : https://codepen.io/daniel_sung/pen/LYOONVJ - Nested(희성쌤 ver) : https://codepen.io/daniel_sung/pen/xxPPVYQ?editors=1010 - cOM - https://to2.kr/dwy - Lodash + Images Loaded + Masonry (with AOS) - https://to2.kr/dwu - Animate & AOS & WOW JS - AOS 소스 사이트 : https://michalsnik.github.io/aos/ - Animate 소스 사이트 : https://animate.style/ - 불러오기 : https://to2.kr/dww - Smooth Scroll - https://to2.kr/dwx - Mini Music Player - https://codepen.io/daniel_sung/pen/ZEaRJPm - Web Gradients - 소스 사이트 : https://webgradients.com/ - 풀페이지 - 강의 링크 : https://codepen.io/jangka44/live/bGWvKWW - 불러오기(풀페이지 + Animate) : https://codepen.io/daniel_sung/pen/gOXjwKP? #### 강의 - HTML&CSS 기본 강좌 - https://slog.gg/p/1315 - HTML&CSS 실무팁 - https://slog.gg/p/2707 - 스와이퍼 관련 강의 - https://codepen.io/jangka44/live/poeOwzM - 프로젝트 라이언 관련 강의 - https://slog.gg/p/3064 - GSAP과 스크롤트리거 - https://codepen.io/jangka44/live/mdWZrqE - WOW JS 사용법 - https://slog.gg/p/3378 - JQEURY 강좌 - 내 기수 : https://slog.gg/p/2967 - 지난 기수 : https://codepen.io/jangka44/live/poeWbjm - PHP 개발환경세팅 - https://slog.gg/p/3459 - 라라벨 개발환경 세팅 - https://slog.gg/p/3462 - 라라벨 블레이드 세팅 - https://slog.gg/p/3463 - 라라벨 게시물 CRUD - https://slog.gg/p/3464 - 라라벨 인증과 인가 - https://slog.gg/p/3500 - 라라벨 리포지터리 샘플 - https://github.com/jhs512/laravel_auth - GIT 강좌 - https://slog.gg/p/1229 - VS CODE, 깃허브 페이지, 도메인 연결, 배포 - https://cdpn.io/pen/debug/xxPbjNx - 비전공자에서 개발자 취업까지 필요한 모든 것 - https://slog.gg/p/4680 - 리액트 풀스택 강좌 - https://slog.gg/p/4711 --- --- ## Github(깃허브) ### 개인 도메인 - danielsung.net ### 개인 깃허브 주소 - github.com/sungwonje/[리포지터리 이름] ### 클론 코딩 양식 - 양식 : https://cdn.jsdelivr.net/gh/[사용자명]/[레포지토리명]/[파일명]/[파일경로] - 예시 : https://cdn.jsdelivr.net/gh/sungwonje/project-lion_img/docs/mbti_hero_360.png --- --- ## PHP ### SQLYOG - 데이터베이스 생성 : F9 - CREATE DATABASE site$$ ### PHP 작업시 - 1st bash : ./artisan serve - 2nd bash : npm run watch - 3rd bash : 아무거나 ### PHP CSS(테일윈드 + 폰트 + 부트스트랩) 세팅 - 1st : 테일윈드 - 2nd : 폰트 - 3rd : 부트스트랩 ### PHP 프로젝트 작업 시작시 해야할 것 - 체크사항 1. XAMPP 설치 및 세팅 2. SQLYOG COMMUNITY 설치 3. composer 설치 4. VSCODE 설치 및 PHP 개발환경세팅 5. XDEBUG 세팅 6. nodejs - 실행순서 1. npm install 2. composer install 3. php artisan ide-helper:generate 4. vs code restart - Ctrl + Shift + P => reload window 5. .env.example 파일을 복사해서 .env 파일 생성 - APP_URL=http://localhost:8000 - DB 정보 세팅 6. DB 생성되어 있는지 확인 7. ./artisan migrate:refresh --seed 8. php artisan key:generate 9. ./artisan serve - 1st bash에서 10. npm run watch - 2nd bash에서 ### 기타 유의사항 - git add . 하려면 그 전에, git init . -> start . 누르기 - 라라벨 블레이드 세팅 3강 ### 현재 세팅 현황 #### 학원컴 - 라라벨 개발환경 세팅 - site20 - 세팅 완료 - 라라벨 블레이드 세팅 - site20 - 세팅 완료 #### 내 컴 - 라라벨 개발환경 세팅 - site21 - 세팅 완료 - 라라벨 개발환경 세팅 - site21 - 세팅 완료 - 3,4강 : git add . 이후 git commit -m "테일윈드 적용" 안 됨. ### 폴더에서 바로 vscode 여는 방법 1. 해당 폴더 루트 경로에서 cmd들어가기 -> code . 입력 2. 해당 폴더에서 빈 곳에 마우스 왼쪽 한 번 클릭 -> Shift + F10 입력 -> vscode로 열기 ### CRUD - npm install 안 됨. - ./artisan migrate:refresh --seed 입력 안 됨. - CRUD 11강 6분 55초 쯤부터. --- --- ### 풀스택 페이지 - 위캔 1227 --- --- ## JQuery ### 미해결 강좌 - 33, 34강 ### 팝업 시리즈 - 32~44강 ### 객체 - 46강 ### 자바스크립트와 제이쿼리 기초 9강(제이쿼리 세팅과 변수 활용) - JQuery로 CSS 작업하기. - ex) $('div').css('width', '100px'); - div를 선택하고 css 작업을 하겠다. ## 사이트 링크 - 공부로그 채널 : - [https://www.youtube.com/channel/UCGXf7Odl0wb-9M2HHviY_yQ/videos](https://www.youtube.com/channel/UCGXf7Odl0wb-9M2HHviY_yQ/videos) - 브랜드 채널(다니엘성) : - [https://www.youtube.com/channel/UCOYXzD03nzff1P1NAMyKitQ/videos](https://www.youtube.com/channel/UCOYXzD03nzff1P1NAMyKitQ/videos) - 주소 줄이기 : - [https://to2.kr](https://to2.kr) - 웹 국기 수업페이지 : - [https://slog.gg/p/1314](https://slog.gg/p/1314) - HTML&CSS : - [https://slog.gg/p/1315](https://slog.gg/p/1315) - 새 펜 : - [https://codepen.io/pen](https://codepen.io/pen) - 새 위캔 : - [https://slog.gg/p](https://slog.gg/p) - 내 위캔 : - [https://slog.gg/p/1321](https://slog.gg/p/1321) - 기술 블로그 : - [https://slog.gg/b/1499](https://slog.gg/b/1499) - FIGMA 프로젝트(with 최근학님) - [https://to2.kr/dmU](https://to2.kr/dmU) - 이미지 무료 호스팅 - [https://www.zpat.info](https://www.zpat.info) - MDN - [https://developer.mozilla.org/ko/](https://developer.mozilla.org/ko/) - W3 School - [https://www.w3schools.com/](https://www.w3schools.com/) - 위캔에 이미지 / 링크 올리는 법 - ![이미지 링크 주소](이미지 링크 주소) - [일반 링크 주소](일반 링크 주소) - 위캔에 코드펜 템플릿 넣기!!! (매우 유용!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!) - $$codepen (코드펜 embed src 주소) $$ - 위캔에 유튜브 영상 넣기 - $$youtube (각 영상의 고유 코드) $$ ## Wiken - Ctrl + U : 위캔 문법 보기. - Ctrl + F : 검색. - 미리보기 모드 토글 : ctrl + alt + shift + p - Start searching : Ctrl-F / Cmd-F - Find next : Ctrl-G / Cmd-G - Find previous : Shift-Ctrl-G / Shift-Cmd-G - Replace : Shift-Ctrl-F / Cmd-Option-F - Replace all : Shift-Ctrl-R / Shift-Cmd-Option-F - Persistent search : Alt-F - 다이얼로그가 안사라짐, enter to find next, Shift-Enter to find previous - Jump to line : Alt-G ## 꿀팁 - 구글에 'color picker' 검색하면 바로 rgba값 복붙 가능. - 구글에 '이모지 키보드' 검색해서 컴퓨터 이모지 복붙 가능. ## 크롬 명령어 - Ctrl + W : 탭 닫기. - Ctrl + T : 새 탭 열기. - Ctrl + R : 새로 고침. - Ctrl + PgUp/PgDdown : 좌/우측 탭으로 이동. - Home : 문서 최상단으로 이동. - End : 문서 최하단으로 이동. ## figma(피그마) ### figma의 특징 - 윈도우OS, 맥OS 대응 + 웹 브라우저를 통한 디자인 진행 - 웹 기반 브라우저로 사용하여 프로그램 활용 범위가 용이하며 앱 설치를 하지 않아도 됩니다. → 스케치는 맥OS에서만 사용 가능하지만, 피그마는 윈도우OS 및 웹 브라우저에서도 사용할 수 있습니다. - 웹 브라우저가 아니라도 컴퓨터에 직접 (네이티브) 프로그램을 설치하여 사용할 수도 있으므로 빠르게 작업을 진행할 수 있습니다. - 실시간 협업 시스템 (공동 라이브 디자인) - 웹 기반 브라우저 프로그램으로서, 피그마 계정 소유자가 링크를 공유하여 여러 명이 아트 보드를 확인하며 동시에 온라인으로 실시간 작업을 진행할 수 있습니다. - 개발자가 참조할 수 있는 정보를 주는 ‘개발 툴바’가 있어 개발자와 소통에 매우 효과적입니다. 마우스 툴바로도 수치값을 확인할 수 있어 가이드라인이 없어도 빠른 작업이 가능합니다. - 버전 히스토리 관리 - 히스토리 영역을 통해 협업자 중 누가 무엇을 변경했는지 확인하고, 필요에 따라 날짜&시간별로 기록되어 있는 히스토리를 확인할 수 있습니다. 때문에 버전 관리 필요 없이 히스토리 기능을 사용하여 편리하게 버전 관리가 가능합니다. - 포토샵과는 다르게 사용자가 날짜를 지정하여 저장할 수 있으며, 최대 30일까지 히스토리 저장이 가능합니다. - 히스토리뿐만 아니라 피그마 파일로도 저장이 가능하므로 필요시 파일로 내보내기 하여 파일을 관리하실 수 있습니다. - 최적화된 어댑티브(ADAPTIVE) 레이아웃 시스템 - 포토샵은 해상도에 맞추어 매번 새롭게 작업을 해야 하는 것에 비해, 피그마는 외곽 선을 조정하는 것만으로도 대부분의 콘텐츠 레이아웃을 크기에 맞게 자동 조정해 줍니다. - SKETCH 파일과의 연동 - 기존에 작업하던 스케치 파일들을 피그마에 임포트 하여 작업할 수 있습니다. - 현재 온라인에 배포되어 있는 스케치 UI 키트들을 피그마에서도 사용할 수 있습니다. - 프로토타이핑 PROTOTYPING - 직관적인 인터페이스로 UI 상호작용 및 애니메이션 제작이 가능합니다. - 클릭/호버/버튼 동작 등 단순한 인터렉션을 넣어 프로토타입을 제작할 수 있습니다. - 모바일에 최적화되어있어 플레이 시 프레임 및 모멘텀 스크롤과 같은 세부적인 부분의 프로토타입 또한 실제 화면처럼 느낄 수 있습니다. - 참고자료 : [https://www.wedesignx.com/knowledge/figma-ui-gui-design-program](https://www.wedesignx.com/knowledge/figma-ui-gui-design-program) ### 꿀팁 - plugin ### 단축키 - component 생성 : Ctrl + Alt + K - 선, 폰트크기, 둥글기 유지한 채로 크기 조절하기 : K - K로 사이즈 조절하기 - 출력(저장) Export : Ctrl+Shift+E - 잠금/잠금해제 Lock/Unlock Selection : Ctrl+Shift+L ### 참고 사이트 - About 피그마 - [https://www.wedesignx.com/knowledge/figma-ui-gui-design-program](https://www.wedesignx.com/knowledge/figma-ui-gui-design-program) - component - [https://www.youtube.com/watch?v=6e46VxYgcpI](https://www.youtube.com/watch?v=6e46VxYgcpI) - [https://brunch.co.kr/@ggk234/20](https://brunch.co.kr/@ggk234/20) ## HTML&CSS 타이핑 - Ctrl + Z : 이전 히스토리 작업 불러오기. - 최근 몇 십 개의 작업만 기억 - Ctrl + Y : 이후 히스토리 작업 불러오기. - Insert : 타이핑하다가 이유 없이 글자가 지워질 때 누르기. - Ctrl + Shift + 7 : 화면 리프레시 - Ctrl + F : 검색 ## CSS ### normalizing ``` *{ margin: 0; padding: 0; } ul,ol,li{ list-style: none; margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6{ margin: 0; } a{ color: inherit; text-decoration: none; } ``` ### library - 선택에 따라 항상 달라질 수 있음. ``` .cell{ float: left; } .cell-r{ float: right; } .row::after{ display: block; clear: both; content: ""; } .inline-grid { font-size:0; } .inline-grid > * { vertical-align:top; font-size:1rem; display: inline-block; box-sizing: border-box; } ``` ### style - 각 영역마다 css에 영역 구분 표시를 해주면 좋음 - ex) HTML의 header 영역을 css에 지정해서, 향후 css를 수정할 때 Ctrl + F로 검색해서 바로 찾아가기 좋음. ``` /* header start */ .top-bar{ background-color: beige; display: flex; justify-content: space-between; margin-bottom: 40px; } /* header end */ ``` ## 개인 메모장... - 가성비 기계식 키보드 : - [https://to2.kr/dk1](https://to2.kr/dk1) # 2021-11-11, 1일차 ## HTML, CSS 기본 개념 - 엘리먼트는 여는 태그와 내용과 닫는 태그로 구성된다. - 태그를 사용하는 이유는, 문서의 각 부분을 구분하기 위해서이다. - HTML의 엘리먼트는 배우이다. - HTML은 꾸미는 효과보다도, 구조적인 부분들만 잡아놓는다. - CSS는 코디이다. - CSS가 엘리먼트를 찾아가서 꾸며준다. - `

`, `

` 4개의 태그는 외우는 것이 좋다! ## CSS ### display - inline - width, height 속성을 지정해도 무시됨. - margin과 padding 속성은 좌우 간격만 반영되고, 상하 간격은 반영되지 않음. - 종류 : ``, ``, `` - block, inline-block

display	너비	높이	한줄 혼자사용
block	지정되지 않으면, 최대한 커진다.	지정되지 않으면, 최소한으로 줄어든다.	혼자사용(세로로 나열됨)
inline-block	지정되지 않으면, 최소한으로 줄어든다.	지정되지 않으면, 최소한으로 줄어든다.	최대한 여럿이 사용(가로로 나열됨)

# 2021-11-12, 2일차 ## CSS ### width, height - width, height의 기본 값은 auto이다. `width: auto;` `height: auto;` ### table - `` : 줄 - `` : 칸 - 단위 쓸 때 주로 사용. - 굵은 글씨로 표현 됨. - `` : 칸 - 일반 값을 쓸 때 주로 사용. ### a태그 - 기본적으로 다른 태그들은 display 속성이 block이지만, a는 예외적으로 inline 속성이다. - a는 글자와 함께 나와야 하기 때문이다. - ex) `네이버` - 결과값 : 네이버 ### br태그 - br태그는 열고 닫는 것 없이 단독 태그이다. ### 젠 코딩(emmet 문법) - `table>tbody>tr*2>td*4{안녕}` - 부모>자식 - {번호 or 내용} - `table[border="3"]>(thead>tr>th*2{타이틀})+(tbody>tr*2>td*2{하이})` - 형제+형제 (인접 동생) - ( ) 는 한 묶음으로 묶어줄 때 유용. - `table[border="1"]>tr*3>td*4{바이}` - [style 속성값] # 2021-11-15, 3일차 ## CSS ### text-align - 가운데 정렬 기능. - text-align은 대상 자체를 가운데 정렬 하는 것이 아니라, 대상 안에 있는 text를 가운데 정렬하는 것임. - 부모 입장에서 inline태그인 자식은 하나의 글자로 취급된다. 그래서 text-align이 가능하다. - inline 요소에 text-align을 주면 의미가 없다. 왜냐하면 inline요소는 text의 크기만큼 너비와 높이가 배치되기 때문이다. ### hover - hover는 요소 위에 마우스를 올렸을 때, 일어나는 효과이다. ### ` ` - HTML에서 두 글자 간격 이상 띄울 때, 사용하는 문법이다. ### text-decoration - 글자의 꾸밈 효과를 없애줄 때, 사용하는 속성이다. - a태그에서 밑줄을 없앨 때 등, 사용할 수 있다. # 2021-11-16, 4일차 ## CSS ### img - object-fit : contain; - 특정 상자 안에 이미지가 비율을 지키면서 커질 수 있는 만큼만 커짐. - But 빈 공간이 생길 수도 있음. - object-fit : cover; - 비율을 유지한 상태에서 가득 채워버림. - But 이미지가 짤리는 현상이 발생한다. ### CSS에 background image로 이미지 넣기 - 기본적인 루틴 ``` background-image: url(이미지 링크 주소); background-repeat: no-repeat; background-position: center; background-size: cover; ``` ### 인라인 style로 이미지 넣기 - HTML 인라인 효과는 CSS보다 힘이 강하다. - 넣는법 : HTML의 태그 안에 style="background-image:url(이미지 주소);" - ex) `

` - 이후 CSS에 효과 주기. ``` background-image: url(이미지 링크 주소); background-repeat: no-repeat; background-position: center; background-size: cover; ``` # 2021-11-17, 5일차 ## CSS - 정렬 - 블럭을 좌측 정렬 ``` margin-left: 0; margin-right: auto; ``` - 블럭을 우측 정렬 ``` margin-left: auto; margin-right: 0; ``` - inline태그의 정렬 - 스스로 정렬할 수 없음. - 오직 부모에 의해서만 정렬될 수 있음. - block - 스스로 정렬할 수 있음. ## CSS - 가로 정렬법 ### inline-block 이용 - 정렬되어야 하는 여러 자식 요소들의 display 속성을 inline-block으로 바꾸어 준다. - inline-block은 요소들을 텍스트와 시키는 것과도 비슷하다. 마치 워드프로세서에서 '글자와 같이 취급'과 비슷한 느낌이다. - But inline-block은 텍스트와 비슷하기 때문에, inline-block으로 정렬했을 씨, 요소들 간의 작은 틈이 발생한다. - "inline-block들 사이의 틈을 없애는 방법" - (1) 부모에 font-size 0을 준다. - But 이 방법은 일부 브라우저에는 지원되지 않기 때문에, 완전한 방법은 아니다. - inline-block의 특성상, 가로 방향으로 생기는 작은 틈들을 없앨 수 있는 방법은 없다... - 대신 하단의 틈은 없앨 수 있다 : 부모 요소에 `vertical-align: top;`을 주기. ### float 이용 - float를 사용하면 inline-block을 사용했을 때, 생겼던 틈들이 없어진다. - But 부모 요소에 높이를 주지 않았다면, 자식 요소들을 float로 정렬 했을 때 부모의 너비 값도 같이 없어져 버리는 상황이 발생한다. - 이럴 때 해결하는 방법은? - 부모 요소에 `overflow: hidden;` 을 준다. ### flex 이용 - 부모 요소에`display: flex;`를 주면 자식들이 가로 정렬 됨. - `justify-content`, `align-items` 를 이용해서 가로, 세로 정렬의 방법을 다양화할 수 있음. - 최신 기술임. - 일부 브라우저에는 호환 안 될 수도 있음. ### grid 이용 - 이것도 최신 기술임. - 부모 요소에 display: grid;와 grid-template-columns, grid-template-rows 로 가로, 세로 정렬할 수 있음. - 자유도가 매우 높음. 미래 지향적인 기술. - ex) CSS ``` body{ background-color: black; } .wrap{ width: 500px; background-color: white; margin: 0 auto; display: grid; grid-template-columns: 100px 100px 100px; justify-content: space-between; } .wrap>div{ width: 100px; height: 100px; background-color: darkred; } .wrap>div:nth-child(2){ background-color: green; } .wrap>div:nth-child(3){ background-color: darkblue; } ``` ## CSS - display flex - 부모,자식 요소에 줌으로써 쉽게 정렬하고 레이아웃을 잡을 수 있는 기능. - 신기술로 정렬하기에 매우 편리함. - flex의 요소(부모에 주는 효과) - justify-content - 내부 요소의 가로 위치를 변경하는 속성. - ` justify-content : flex start;` (기본값) 요소를 왼쪽에 배치 - `justify-content : flex-end;` 요소를 오른쪽에 배치 - `justify-content : center;` 요소를 중앙에 배치 - `justify-content : space-around;` 요소의 좌우에 같은 여백 생성 - `justify-content : space-between;` 요소의 좌우에 같은 여백 생성 및 처음과 마지막은 박스의 시작점과 끝점 - `justify-content : space-evenly` ; 요소 사이에 같은 간격을 넣어주는 것. - align-items - 내부 요소의 세로 위치를 변경하는 속성 입니다. - `align-items: flex-start;` 요소를 상단에 배치합니다. - `align-items: flex-end;` 요소를 하단에 배치합니다. - `align-items: center;` 요소를 중단에 배치합니다. - `align-items: stretch;` 높이가 정해져 있지 않을때 박스의 높이만큼 늘려줍니다. - flex-direction - 내부 요소의 정렬할 방향을 결정합니다. - `flex-direction: row;` 가로로 정렬 합니다. - `flex-direction: row-reverse;` 가로로 정렬 합니다. 순서를 반대로 변경합니다. - `flex-direction: column;` 세로로 정렬 합니다. - `flex-direction: column-reverse;` 세로로 정렬 합니다. 순서를 반대로 변경합니다. - flex-wrap - container가 item들의 폭보다 줄어들었을 때, 어떻게 할지 결정 - `flex-wrap: no-wrap;` 기본값. container의 폭이 item들의 폭보다 줄어들었을 때, 화면이 그대로 유지된다. - `flex-wrap: wrap;` container의 폭이 item들의 폭보다 줄어들었을 때, item들이 뚝 떨어진다. - flex-flow - `flex-flow` : flex-direction 과 flex-wrap 을 합친 내용입니다. - `flex-flow: (flex-direction값) (flex-wrap값);` 두가지 요소는 자주 사용되기 때문에 줄여서도 사용합니다. 안줄여도 상관없음. - align-content - `align-content` : 내부요소의 세로선상의 위치를 변경하는 속성입니다. - justify-content 세로버전 - 적용 가능한 속성은 justify-content 와 같습니다. - flex의 요소(자식에 주는 효과) - order - 자식에 주는 요소 - 아이템들의 순서를 정할 때 사용할 수 있음. - But 잘 쓰여지지는 않음. - align-self - 각각의 자식이 자신이 원하는 위치에 배치될 수 있음. - ex) `align-self: center; ` ## HTML - html, body, 태그의 관계 - HTML의 가장 최상의 태그는 html - 그 다음에는 body - html > body > 나머지 태그들 # 2021-11-18, 6일차 ## CSS - class ### .a.b - class a와 b를 동시에 가지고 있는 녀석을 정렬할 때 쓰는 법 ## CSS Plate 정답 - 1~10강 : [https://www.youtube.com/watch?v=_WCWfefT98c](https://www.youtube.com/watch?v=_WCWfefT98c) - 11~19 강 : [https://www.youtube.com/watch?v=os_N0J0XuOM](https://www.youtube.com/watch?v=os_N0J0XuOM) - 이후 정답 : to2.kr/dni ## CSS - inherit - color, font-size, text-align, letter-spacing의 기본값은 inherit이다. - inherit은 자식이 별다른 주관 없이 부모의 속성을 따라가는 것이다. ## CSS - 요소들의 기본값 ``` - font-size : inherit ``` ``` - font-weight : inherit ``` ``` - letter-spacing : inherit ``` ``` - color : inherit ``` ``` - background-color : transparent ``` ``` - width : auto ``` ``` - height : auto ``` ``` - margin : 0 ``` ``` - padding : 0 ``` ``` - border : inherit 아님 ``` ``` - display : block - 예외 : a, span 등 ``` ``` - border-radius : 0 ``` ``` - cursor : auto ``` ``` - text-align : inherit ``` ``` - text-decoration : inherit ``` # 2021-11-19, 7일차 ## 상황에 맞는 태그 ### ul - 리스트 - 순서가 없는 목록 - 안에 자식으로는 무조건 li - 기본 속성 : `display: block;` ### li - 목록에 포함되고 있는 아이템 - 목록에 해당하는 것은 모두 ul,li를 사용하자! - 쓸 일 엄청 많음! - 기본 속성 : `display: block;` ### ol - 순서가 있는 목록 - 안에 자식으로는 무조건 li ### nav - 네비게이션 태그. - 일종의 목록들을 감쌀 때 사용. - ex) 링크들을 감쌀 때. - div와 기능적으로 완벽하게 동일하지만, nav는 메뉴라는 본래 의도를 명확히 전달하기 때문에 협업하는 동료들이 이후에 수정할 때 구분하기 좋음. # 2021-11-23, 9일차 ## CSS ### display: inline-block;으로 그리드 짤 때 - 부모에 class inline-grid 넣어주기 .inline-grid { font-size:0; } .inline-grid > * { vertical-align:top; font-size:1rem; display: inline-block; } ### .w-2\/6 - HTML에 있는 class="w-2/6" 를 불러올 때, CSS에서 입력하는 법. ### 감성 프로그래밍 (블로그) - h100% 참고 ### vh - 부모, body, html의 높이값과 관계 없이, 전체창 크기 기준으로 높이의 비율을 설정하는 것. - ex) section > div { width: calc(100% / 7); height: 50vh; } - section > div 의 높이값이 전체창 기준으로 50%인 것. # 2021-11-24, 10일차 ## CSS ### 집에서 할 것 - BNX 협업과제 집에서 다른 방법으로도 해보기. flex, float 등등... ### BNX 사이트 주소 - https://bnx.oa.gg/index.html# ### 검사 단축키 - Ctrl + Shift + C ### image - img의 display 속성은 inline-block이다! # 2021-11-25, 11일차 ## CSS ### inline-grid로 박스 안 요소들 간에 일정한 margin값 주기 - 공식 및 예시 - con이라는 박스에 들어있는 8개의 img들을 한 줄에 x개씩 배치하면서, img간의 margin값을 20px씩 주고 싶을 때. - HTML

- CSS /* 라이브러리 */ .inline-grid { font-size: 0; } .inline-grid > * { display: inline-block; font-size: 1rem; vertical-align: top; box-sizing: border-box; } .con { width: 800px; margin: 0 auto; background-color: gray; } /* 스타일 */ .con > img { width: calc(100% / x - (20px * (x - 1) / x); } .con > img:not(:nth-child(xn)) { margin-right: 20px; } # 2021-11-26, 12일차 - 팀프로젝트 주소 : https://qccwm.csb.app/ ## CSS ### position 속성 정리 - absolute, fixed - 너비 : 최대한 줄어든다. - 본질 : 유령화, 유령의집화 - 겹침허용 : 겹치는게 가능. - 이동 : top, left, right, bottom으로 이동 - relative - 너비 : 그대로 유지. - 본질 : 유령의집화 - 겹침허용 : 겹치는거 불가능. - static - 너비 : 그대로 유지. - 본질 : 사람화 - 겹침허용 : 겹치는거 불가능. ### 수직 정렬 - position 이용 - display: block인 엘리먼트에 position: absolute; 주기 - top: 50%; , left: 50%; 주기. - transform: translate(-50%, -50%); ### 자손 - 메뉴바 만들 때, 자손을 잘 이용하자. ### 주말동안 해볼 것 - 혼자 다층 메뉴바 만들어보기. ### 혼자 안 보고 뚝딱 만들어야 함 - 82강 작업20 - 100강 작업3 - 101강 - 110강 작업6 # 2021-11-30, 15일차 ## CSS Diner에 나오는 선택자 속성들 ### A ~ B - A 뒤에 나오는 모든 B들 ### :only-child - ex) span:only-child - 다른 요소들 중, "오직 span태그들" 만 고름. - ex) ul li:only-child - ul태그 안에 있는 요소들 중, "오직 li태그들" 만 고름. ### :first-of-type - ex) span: first-of-type - 다른 요소들 중에 "첫 번째 span"만 골라낼 때. ### [attribute] - 모든 요소들 중, attribute의 속성이 있는 요소들. - ex) a[href="#"] - # 속성이 있는 모든 a요소들을 선택. ### [attribute^="value"] - ^ - attribute 속성의 이름이 "value"로 시작하는 모든 요소들. - ex) .toy[category^="Swim"] - toy들 중, category 속성의 시작값이 "Swim"인 것들. - .toy[category^="Swimmer"] - .toy[category^="Swimming"] ### [attribute$="value"] - $ - attribute 속성의 이름이 "value"로 끝나는 모든 요소들. - ex) img[src$=".jpg"] - img 파일들 중, 이름이 ".jpg" 로 끝나는 모든 것들. ### [attribute*="value"] - * - attribute 속성의 이름 중, "value"를 포함하는 모든 것들. - ex) img[src*="/thumbnails/"] - img 파일들 중, 이름에 "/thumbnails/"을 포함하는 모든 것들. ## CSS 게임 할 때 루틴(전 단계 충족 못 하면 넘어가지 말기!!!) - flex 개구리 : 10분 - flex 디펜스 : 20분 - flex 플레이그라운드 : 5분 - flex 문서(이번에야 말로) 정독 : 10분 - flex 플레이그라운드(다시보기) : 10분 # 2021-12-01, 16일차 ## CSS - display flex ### justify-content : 내부 요소의 가로 위치를 변경하는 속성 입니다. - justify-content : flex start : (기본값) 요소를 왼쪽에 배치 - justify-content : flex-end : 요소를 오른쪽에 배치 - justify-content : center : 요소를 중앙에 배치 - justify-content : space-around : 요소의 좌우에 같은 여백 생성 - justify-content : space-between : 요소의 좌우에 같은 여백 생성 및 처음과 마지막은 박스의 시작점과 끝점 ### align-items : 내부 요소의 세로 위치를 변경하는 속성 입니다. - align-items: flex-start 요소를 상단에 배치합니다. - align-items: flex-end 요소를 하단에 배치합니다. - align-items: center 요소를 중단에 배치합니다. - align-items: stretch 높이가 정해져 있지 않을때 박스의 높이만큼 늘려줍니다. ### flex-direction : 내부 요소의 정렬할 방향을 결정합니다. - flex-direction: row 가로로 정렬 합니다. - flex-direction: row-reverse 가로로 정렬 합니다. 순서를 반대로 변경합니다. - flex-direction: column 세로로 정렬 합니다. - flex-direction: column-reverse 세로로 정렬 합니다. 순서를 반대로 변경합니다. ### flex-wrap : 내부 요소들을 한줄 또는 여러줄로 나타냅니다. - flex-wrap: nowrap; 요소를 한줄에 나타냅니다. - flex-wrap: wrap; 요소를 여러줄에 나타냅니다. (float 속성과 같아짐) - flex-wrap: wrap-reverse; 요소를 여러줄에 나타냅니다. 순서를 반대로 변경합니다. ### flex-flow : flex-direction 과 flex-wrap 을 합친 내용입니다. - flex-flow: (flex-direction값) (flex-wrap값); 두가지 요소는 자주 사용되기 때문에 줄여서도 사용합니다. 안줄여도 상관없음. ### align-content : 내부요소의 세로선상의 위치를 변경하는 속성입니다. - justify-content 세로버전 - 적용 가능한 속성은 justift-content 와 같습니다. ### order 내부 요소의 순서를 변경하는 속성입니다. - 자식들에 적용하는 속성. ### align-self : align-items의 기능을 원하는 요소에만 넣는 내용입니다. - 자식들에 적용하는 속성. - align-items의 속성값과 같은 내용이 들어갑니다. ### flex-shrink - flex-shrink의 기본값은 1. ### gap - display flex에는 row로 정렬했을 때, gap이 있다. ex) gap: 10px; # 2021-12-03, 18일차 ## 테일윈드 참고 ## display: flex 질문 - 카카오 뱅크 헤더에서 a태그의 높이가 조정되는 것은 flex 때문? height: 100% 때문? 아님 둘 다 있어야 하나? # 2021-12-06, 19일차 - Ctrl + Shift + C - 속성 들어가기 - 서류 제출하기 - align-self :center; - con 줬으면 부모 혹은 조상 중에는 con-min-width를 주어야 한다!! - 거의 공식! 그냥 외워라. # 2021-12-07, 20일차 - flex로 만들면 - 개구리가 되면, block, inline, inline-block(무시) ## CSS ### flex - flex-gap 사용하기 (약간 margin 같은 개념) ### 아이템 배열하는 GRID 종류 - inline-grid - 음수마진 없이 : 숫자를 많이 ㅜㅜ - 음수마진 : 추가 엘리먼트가 필요할 때가 있다. - flex-grid - 추가 엘리먼트 필요x - 숫자 입력 간단. .flex-grid { display:flex; flex-wrap:wrap; --y-gap:0px; --x-gap:0px; --cc:5; gap:var(--y-gap) var(--x-gap); } .flex-grid > * { width:calc(100% / var(--cc) - (var(--x-gap) * (var(--cc) - 1)) / var(--cc)); } ## 반응형 ### 변수 - 변수 : -- - 조상에 있는 변수들은 자식에 쓰일 수 있다. - :root : 변수를 가장 위에 둘때 쓰는 것. - last-child (?) - 공식은 복사해놨다가 나중에 변수 등만 바꿔서 써라! ## 과제 ### 각자 본인 만의 블로그 직접 만들기, 장기 프로젝트 - 프로그래머스 파이썬 입문 진행 - https://to2.kr/dqj - 프로그래머스 로그인 후, 진행 - 문제만 풀기. ## 파이썬 ### 주소 - https://to2.kr/dqj ### 연산 - 더하기 : + - 곱하기 : * - 나누기 : / - 거듭제곱 : ** - 나머지 : % ### 해야할 것 - 위캔에서 CSS화면 구현하는 방법 알기. # 2021-12-08, 21일차 ## CSS ### 테일윈드 - 테일윈드에서는 모두 box-sizing: border-box; 가 걸려 있음. ### img - img는 inline-block이기 때문에, block을 걸어주면 애매한 경계선들이 없어짐 - 자식에 block줬으면 부모에도 block 줘야 함. - img는 position이 기본적으로 static - 따라서 z-index값을 주려면 position이 relative 혹은 absolute이어야 한다. ### Replace All(한 번에 다 바꾸기) - Ctrl + Shift + R ### after, before - ::after { content: ""; } - after는 한 마디로 자식의 뒤에 주는 것. - before는 한 마디로 자식의 앞에 주는 것. - But 가상선택자를 못 붙인다. - ex) :hover, :nth-child # 2021-12-09, 22일차 ## CSS ### 폰트어썸 - 겁나 유용함 ### BEM(Block, Element, Modifier) - B(Block) : - '독립적' - 독립적으로 존재할 수 있는 요소들. - 재사용 가능한 기능적으로 독립적인 페이지 컴포넌트. - ex) logo는 header 뿐만 아니라 footer에도 사용할 수 있는 독립적인 요소임. - E(Element) - '의존적' - 어딘가에 종속되어서만 존재할 수 있는 요소들. - 자신이 속한 블럭 내에서만 의미를 가지기 때문에 블럭 안에서 떼어다 다른 데 쓸 수 없음. - __ : 특정 영역에 구속될 때 쓰는 기호 같은 개념. - ex) .top-bar__menu - M(Modifier) - 블럭이나 엘리먼트의 속성을 담당. - 생긴 게 조금 다르거나, 다르게 동작하는 블럭이나 엘리먼트를 만들 때 사용하면 됨. - '불리언(boolean) 타입'과 '키-밸류(key-value) 타입'이 있음. - 불리언 타입 ex) .tab__item tab__item--focused - 키-밸류 타입 ex) .title--color-gray , .form-login--theme-normal - --focused, --color-gray, --them-normal이 Modifier에 해당함. - 정석 방법론 : block-name__element-name--modifier ### 집 가서 할 것 - BEM 연습하기(완벽하게 이해하고 앞으로 계속 연습) # 2021-12-10, 23일차 ## CSS ### background-image - background-size: cover - 상하 좌우가 잘리더라도 가득 채움. - background-size: contain - 상하 좌우가 잘리지 않는 선에서 가득 채움. - 남는 공간이 생길 수 있음. - background-position - background-position: (좌우) (상하); - 기본값 : background-position: 0 0; - 가운데로 이동 : background-position: center; = background-position: 50% 50%; ### padding의 퍼센트 - 자식의 padding값의 퍼센트는 부모의 '너비' 기준으로 함. ### background-color - background-size: cover 와 background-size: contain 을 많이 씀. # 2021-12-13, 24일차 ## CSS ### text-shadow - text-shadow: (좌우) (상하) (블러) (색상) - ex) text-shadow: 10px 10px 10px red; - 부분 모작 만들 때, fork 반드시 넣기. - flex-1개념 알아보기. # 2021-12-14, 25일차 ## 발표 - 이번주 금요일 (12/18) - 디자인 작업물 - 코딩 작업물 # 2021-12-15, 26일차 ## CSS ### 사이트 너비 변수 - :root { --site-width: 1000px; } - .con { width: var(--site-width); margin-left: auto; margin-right: auto; } - .con-min-width { min-width: var(--site-width); } ### root - 전역 변수 선언 # 2021-12-16, 27일차 ## 부분모작 ### 레이아웃 flex-grid ver. 희성쌤 - https://codepen.io/jangka44/pen/bGoqNNX # 2021-12-20, 31일차 ## CSS ### 텍스트 밑줄 애니메이션(가운데서 양 옆으로) - left: 50%; - transform: translateX(-50%); - ex) .menu-1 > ul > li > a > span { position:relative; } .menu-1 > ul > li > a > span::after { content:""; position:absolute; top:100%; left:0; width:0; height:2px; background-color:red; transition: width 1s; } .menu-1 > ul > li:hover > a > span::after { width:100%; } .menu-1-2 > ul > li > a > span::after { left:50%; transform:translateX(-50%); } # 2021-12-21, 32일차 ## CSS ### con-min-width - 반응형에서는 콘민위드 X ### 테일윈드 - 테일윈드는 적응형 # 2021-12-26, 37일차 ## 반응형 - @media에 우선순위 부여하려면 - 1) html > body > 해당 클래스 - 2) display: none 옆에 !important 붙이기 ## 이미지 높이를 부모에 맞추기 - img파일에 - height: 100%; , object-fit: cover; - 양 쪽이 조금 잘리더라도, 비율을 유지하면서 커짐. # 2021-12-28, 39일차 ## Javascript ### addClass, removeClass, hasClass - addClass --> 명령 - removeClass --> 명령 - hasClass --> 단정 - 단정문은 항상 true / false로 치환. ### 변수 - 변수명에는 - 못 씀! ## CSS ### 팝업 만들 때 - visibility: hidden;, opacity: 0; --> 세트 - 보여질 때 : visibility: visible;, opacity: 1; ### 기본기 - .pop-up.active = pop-up클래스를 가지면서 active클래스를 가진 녀석. # 2021-12-29, 40일차 ## 디자인 - 꽃봄 사이트 반응형 good. 나중에 포폴 만들때 반영하면 좋을 듯. ## JQuery - toggle(but 안 쓰는게 좋다!) - transition은 시작과 끝이 확실해야 한다! # 2021-12-30, 41일차 ## CSS ### margin-left: auto; - block 엘리먼트를 오른쪽으로 쉽게 배치하고 싶을 때. ### transform: translateY(-100%); - 자기 키 만큼 높아지는 것. ### 테일윈드 grid- 공부하기 ## JQuery ### 선택자 - prev() : 인접 형 - next() : 인접 동생 - next().next() : 인접 동생의 인접 동생 - children() : 자손 - find('*') : 후손 - closest(' class ') : 조상 - parent() : 부모 - siblings() : 형제 자매들(모두) - index() : 형제들 중 순서 ### this - 이벤트 당사자 - 클릭 당한 녀석 - this를 변수로 두는 일반적인 관례 - let $this = $(this); # 2022-01-01, 43일차 ## JQuery ### 공부한 양 - 33~37강 ### 축약 7강 - $('section > .container > :nth-child(' + no + ')').addClass('active'); - $(`section > .container > :nth-child(${no})`).addClass('active'); - ${no} --> 변수를 바로 지정할 수 있음. ### preventDefault() - 원래 일어나야 할 이벤트가 발생하지 않게 하려는 것. - ex) - 1. $('.a4').click(function(e) { e.preventDefault(); }); - 2. $('.a5').click(function() { return false; }); # 2022-01-02, 44일차 ## JQuery ### 공부한 양 - 38~43강 ### stopPropagation() - JQuery에는 상위보고체계가 있음. - 즉, 해당 엘리먼트가 클릭되면 자신이 클릭되었다는 사실을 윗 선에 보고하게 됨. - stopPropagation()을 쓰면 자신이 클릭되었다는 사실을 윗 선에 보고하지 않고, 자신이 클릭 되었다는 사실만 나타나게 됨. - But, 일반적으로 실무에서 stopPropagation()을 쓰지는 않고, return false; 를 주로 씀. - ex) - 1. stopPropagation() - $('span').click(function(e) { console.log("span 클릭됨!"); e.stopPropagation(); }); - 2. return false; - $('span').click(function(e) { console.log("span 클릭됨!"); return false; }); ### html, body { overflow: hidden; } - html { overflow: hidden; } - body { overflow: hidden; } - 두 개는 모두 효과가 똑같다. - But 일부 브라우저에서는 html, body { overflow: hidden; } 두 개 다 걸어줘야 한다. # 2022-01-03, 45일차 ## 꿀팁 - Ctrl + A, Shift + Tab - 바로 정렬하는 기능. ## JQuery ### 공부한 양 - 44~47강 ### 객체 - 객체는 폴더의 개념. - 객체에서는 변수 안에 변수를 만들 수 있다. - 즉, 폴더 안에 변수를 만드는 개념. - 개념만 이해하면 된다. 직접 객체를 만들 일은 잘 없다. ### 인스타 클론 - 파이썬 - 점프투장고 ### Project Lion - 전체 웹사이트 부분모작 할 예정. ### 스와이퍼 - cFe ## 클론 코딩 ### 말도 안 되게 느린 이미지 - https://sungwonje.github.io/project-lion_img/mbti_hero_360.png ### 정상 but 좀 느린 이미지 - https://github.com/sungwonje/project-lion_img/blob/main/docs/mbti_hero_360.png?raw=true ### 가장 빠른 방법 - 양식 : https://cdn.jsdelivr.net/gh/[사용자명]/[레포지토리명]/[파일명]/[파일경로] - 예시 : https://cdn.jsdelivr.net/gh/sungwonje/project-lion_img/docs/mbti_hero_360.png ### 내 리퍼지토리 - https://github.com/sungwonje?tab=repositories # 2022-01-06, 48일차 ## HTML&CSS ### picsum 이미지 - img src="https://picsum.photos/id/1/1500/600 - id 옆에 숫자 바꿔서 사용. ## JQUERY(스와이퍼) ### min-height - 테일윈드 할 때 - 부모에 min-height를 주었고 그 자식도 부모의 높이에 맞추려면, 최소한 부모의 높이값이 정해져 있어야 한다. - 즉, 부모에 min-height와 height(최소 0)을 주고, 자식에 height: 100%; 을 주면 된다. ### slidesPerView(객체) - 한 화면에 나타나는 슬라이더의 개수. - ex) slidesPerView : 3 - const 안에 넣는다. ### spaceBetween(객체) - 슬라이더 간의 간격. - spaceBetween: 30 - 이 때 숫자는 px. # 2022-01-08, 50일차 ## JQUERY ### 공부한 양 - 46~63강 - 56강 나중에 다시 ### * (제이쿼리 48강) - *은 포함의 뜻 - ex) html[class*="popup-"][class*="-actived"] { overflow: hidden; } - 즉, class 중에 "popup-"과 "-actived"가 포함된 모든 클래스들은 overflow:hidden 을 먹여라! # 2022-01-10, 52일차 ## JQUERY ### 공부한 양 - 70 ~ 81강 ### 제이쿼리 ver 팝업(or 서브메뉴) 나타나는 방식 - show() - hide() - fadeIn() - fadeOut() - slideDown() - slideUp() # 2022-01-27 ## dvv - 2월 5일까지 dvv 강의 다 듣기 - to2.kr/dvv - 오늘 들은 강의 : 107 ~ 112강 # 2022-01-28 ## dvv - 오늘 들은 강의 : 113 ~ 120강 # 2022-01-31 ## dvv - 오늘 들은 강의 : 121 ~ 122강