$$config title: 송채령 공부위키 keywords: - IT - 공부위키 $$ # 2021-11-11, 1일차 ## 관련 링크 - 공부 위키 - 새팬 만들기 - 강의내용 정리 - 새 위캔 - 주소 줄이는 사이트 - 공부 LOG 채널 - 기술 유튜브 채널 - 자바스크립트 공부 - 수업정리 위캔 - 아바타 만들기 - 컬러피커 - [테스트용 이미지](picsum.photos/id/238/200/300) - [이미지 호스팅](https://www.zpat.info/) - [MDN](https://developer.mozilla.org/ko/docs/Web/CSS/cursor) - [w3schools](https://www.w3schools.com/) ## 크롬 명령어 * Ctrl + W : 탭 닫기 * Ctrl + T : 새탭 열기 * Ctrl + PgUp : 좌측탭으로 이동 * Ctrl + Down : 우측탭으로 이동 * Home : 문서 최상단으로 이동 * End : 문서 최하단으로 이동 # 2021-11-22, 8일차 ## * Window + ↑ ↓ ← → : 창 방향 바꾸기 * Ctrl + 클릭 : 새탭에서 열기 * Ctrl + N : 새 페이지 ## 타이핑 * Ctrl + Z : 이전 히스토리 작업 불러오기 * Ctrl + Y : 이후 히스토리 작업 불러오기 * 최근 몇십개의 작업만 기억 * Shift + a : 전체 * Shift+ Home/End : 커서 위치로 앞/뒤 * Ctrl + Shift + 7 : 다시 나오게함 * Ctrl + U : 코드 보기 ## HTML, CSS * 엘리먼트는 여는태그와 내용과 닫는태그로 구성된다. * 태그를 사용하는 이유는, 문서의 각 부분을 구분하기 위해서이다. * 엘리먼트는 배우이다. * CSS는 코디이다. * CSS가 엘리먼트를 찾아가서 꾸며준다. * `div` / `section` / `nav` / `article` : 사용 가능한 태그 * `+` : 인접 동생, 형 사이 * `>` : 부모 자식 사이 * `^` : 부모 자식 사이를 끊어서 새로운 형제사이를 만드는 태그 (갯수만큼 끊어짐) ## HTML 개요 - 웹페이지 = html + css + js - html : 문서의 내용 - css : 문서의 꾸밈 - js : 인터내셔널(사용자클릭 반응) * 소스코드가 페이지에 나오는것 : 렌더링 * rem= 기본크기의 x배 ``` * ex) [ forn-size : rem3; ] > 원래의 3배 글씨크기 * div*3 + tab = div 3 번 ``` ## CSS display 속성 - `color` : 색상 - `width` : 너비 - `height` : 높이 - `background-color` : 글자 뒤 색상 ## 위캔 명령어 - `#` : 갯수마다 제목 크기변화 # 2021-11-12, 2일차 ### 타이핑 - <--! !--> : html 주석 - /**/ : css 주석 ## CSS 기본값 - `width / hright` : auto 가 기본값 - `display : block` : 이 기본값 - `color : black` : 이 기본값 - `font-weight:normal` : 이 기본값 ### CSS display 속성 개념 - `block` - 너비(`width`) : 너비가 지정되어 있지 않으면, 늘어난다 - 높이(`height`) : 높이가 지정되어 있지 않으면, 줄어든다 - 배열방향 : 세로, 한줄에 무조건 1개씩 - `inline-block` - 너비 : 너비가 지정되어 있지 않으면, 최소한으로 줄어든다 - 높이 : 높이가 지정되어 있지 않으면, 줄어든다 - 배열방향 : 가로, 한줄에 최대한 많이 나온다 ### CSS 글자 조절 - 글자의 두께 조절 (두껍게, 기본) - `font-weight : normal` - `font-weight :bold` - 글자의 넓이 조절 - `font-width : 100px;` - 기본폰트의 3배, 140px - `font-size : 3rem` - `font-size : 140px` - 자간조절 - `letter-spacing : -10px;` - 텍스트 좌우 가운데 - `text-align : center/right/left,` - 글자의 효과 제거 - `text-decoration : none` ### rgba 함수의 인자 - 인자 1(red) : 0 ~ 255 - 인자 2(green) : 0 ~ 255 - 인자 3(blue) : 0 ~ 255 - 인자 4(alpha, 투명도) : 0 ~ 1 - 하나라도 지정하지 않을시, 블랙으로 표시됨 (0이 아닌 빈칸으로 둘시) - ex 1) `color:rgba(0,,300,0.5)` : 블랙 - ex 2) `color:rgba(0,0,300,0.5)` : 연한 블루 - 3개의 조합이 65,000개 까지 나옴 ## html 표 타이핑 - `table` : 보드 - `tr` : 데이터와 부가데이터를 감싼다 - `th` : 부가 데이터 (굵은 글씨로 표현) - `td` : 데이터 ### emmet 문법 ``` a[href="https://www.google.com"][target="_blank"]{구글로 이동} 구글로 이동 ``` # 2021-11-15, 3일차 ## CSS 엘리먼트 순서 ``` div>a{color:pink;} div>a{color:orang;} 같은 a라도 밑의 태그가 먼저이기 때문에 오렌지로 표시됨 ``` `div a` : div 안에 있는 a 후손 모두 선택 `div>a` : div의 자식만 선택 ## 명령어 - win+shift+s : 화면 캡쳐 ## css 코드 - `border:dashed` : 짧은 선으로 구성된 박스 - `border:dotted` : 점으로 구성된 박스 - `border:solid` : 선으로 구성된박스 - `엘리먼트:hover` : 마우스를 올리면 달라지는 결과값 ## html 코드 - ` ` : 두칸이상 띄워쓸때 사용 - 잘 가 ### 강의메모 - 백그라운드 컬러를 칠해보면 엘리먼트들이 위치가 맞는지 아닌지 알 수 있는 좋은습관 - 평일 3시간 이상 토,일 1시간 공부녹화 - 오캠녹화 : F2 - 녹화 일시정지 : Shift+F2 # 2021-11-16, 4일차 ## CSS 코드 - `a` 는 `inline-block` 이 아닌 `inline` - `inline` 은 너비 조절x ## 링크 - [테스트용 이미지](picsum.photos/id/238/200/300) - [이미지 호스팅](https://www.zpat.info/) # 2021-11-17, 5일차 ## 피그마 모작 - [카카오뱅크 배너](https://slog.gg/p/1695) ## 여백 - `margin` : 대상에서 여백 조절 - `padding` :대상의 바깥쪽 여백 조절 - `margin-left:auto;` - `margin-right:auto;` ## nth - `section>div:nth-child(2)` div이면서 부모의 자식 - `nth-child(*n+*)` : *n: ~번째 줄 * : ~번째 # 2021-11-18, 6일차 ## 링크 - [MDN](https://developer.mozilla.org/ko/docs/Web/CSS/cursor) - [w3schools](https://www.w3schools.com/) ## 모서리 둥글게 - `border-radius` - ~px , ~% - 50% 는 원형이 된다 # 2021-11-19, 7일차 https://brunch.co.kr/ ## margin - 기본적으로 들어가있음 ## 목록태그 - `ul` : 순서있는 목록 - `li` : `ul`,`ol` 의 자식 - `ol` : 항목 ## 제목 크기 - `h1` : 큰제목 - `h2 : h1` 다음으로 큰제목 - `h3 : h2` 다음으로 큰제목 - `h4 : h3` 다음으로 큰제목 - `h5 : h4` 다음으로 큰제목 - `h6 : h5` 다음으로 큰제목 ## 리스트스타일 ## nav - 네비게이션 태그 # 2021-11-23, 9일차 ## display - none : 없어진다(안 보이는게 아니라 아예 없어진다) - inline : 글자화,너비최소축소,가로 - inline : a, 글자 - inline-block - line-height:0 : 인라인블록 여백 없앰 - block : 블록화, 너비최대확대, 세로 ## css 3가지 - 노말라이즈 : 모든 요소에 적용 - 라이브러리 : 특정 요소에 적용 - 커스텀 : 특정 엘리먼트 적용 ## 노말라이즈 - 기본적으로 a는 text-decoration, color 를 inherit(none)으로 설정해줌 - a를 굉장히 많이 쓰는데, 기본 디자인때문에 매번 바꿀수 없기때문에 노말라이즈 필수 - 기본적인 노말라이즈 정리(범용성큼) ``` a {color:inherit; text-decoration:inherit; } body{ margin:0; } ul,li{ list-style:none; padding:0; margin:0; } ``` - inline-grid 라이브러리 정리(모두에겐 적용되진 않지만 인라인그리드가 필요할 때 마다 쓴다) ``` .inline-grid{ font-size:0;}
.inline-grid > * { vertical-align:top; font-size:1rem; display:inline-block; } ``` ## nav - 링크를 감쌀때는 nav 사용 (같이 일하는 사람들이 이해하기 쉽다) - div 써도 되지만 기왕이면 nav 쓰기 ## ul,li - 목록 쓸때 ul,li 사용 div로 도배하는것보다 ul,li로 쓰는게 좋음 ul밑에 li 몇개 (메뉴가4개면 li4개) # 2021-11-24, 10일차 ## border - boxsize-borderbox ## 너비 단축키 - ctrl+shift+c # 2021-11-25, 11일차 ## inline-grid - 그리드 사용할때 필수 - `width:calc(100% / 7);` - 퍼센트 / 7 사이 띄어쓰기를 안하면 적용이 안된다!!!!!!! 꼭꼭 외우기 ## box-sizing - `box-sizing:border-box;` - padding,border,margin을 줘도 box-sizing:border-box; 을 주면 초기설정한 높이 넓이값에서 더 커지지 않고 , 설정이 안쪽으로 들어가게된다. ## inline-grid 와 border-box - 인라인 그리드에 보더박스를 주게되면 퍼센트를 바꾸지 않아도 틀에 딱 맞게 들어간다.(요소들이 반응형으로 자동정렬) # 2021-11-26, 12일차 ## transform - 기존 위치에서 이동 - 트랜스폼에 의해서 발생된 영향은 주변에 영향을 미치지않는다 - translate x(가로)/y(세로) ## 피그마 프로토타입 구현

$$youtube dT4CXCi7nQg $$ # 2021-11-29, 13일차 # position의 속성 - absolute, fixed - 너비 : 최대한 줄어든다. - 본질 : 유령화, 유령의집화 - 겹침허용 : 겹치는게 가능 - 이동 : top, left, right, bottom으로 이동, 기준이 부모유령 - relative - 너비 : 그대로 유지 - 본질 : 유령의집화 - 겹침허용 : 겹치는거 불가능 - 이동 : top, left, right, bottom으로 이동, 기준이 부모유령 - static - 너비 : 그대로 유지 - 본질 : 사람화 - 겹침허용 : 겹치는거 불가능 - 이동 : - # 2021-11-30, 14일차 ## 로고바, 메뉴박스, 이미지박스 구현시험 $$codepen https://codepen.io/chaeryeong1/embed/KKXKQwZ?default-tab=html%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true $$ # 2021-12-1, 15일차 ## 로고바, 메뉴박스, 이미지박스 구현-2 $$codepen https://codepen.io/chaeryeong1/embed/QWqwvEg?default-tab=css%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true $$ ## display:flex ```

``` ## flex-direction ``` - flex-direction : 배치 방향 설정 - row : 아이템들이 행(가로) 방향으로 배치됩니다. - row-reverse : 아이템들이 역순으로 가로 배치됩니다. - column : 아이템들이 열(세로) 방향으로 배치됩니다. - column-reverse : 아이템들이 역순으로 세로 배치 됩니다.

``` ## flex-wrap ``` - flex-wrap : 줄넘김 처리 설정 - nowrap (기본값) : 줄바꿈을 하지 않습니다. 넘치면 그냥 삐져 나갑니다. - wrap : 줄바꿈을 합니다. float이나 inline-block으로 배치한 요소들과 비슷하게 동작합니다. - wrap-reverse : 줄바꿈을 하는데, 아이템을 역순으로 배치합니다. 그림을 보면 이해하실 수 있습니다.

``` ## flex-flow ``` flex-flow : flex-direction 과 flex-wrap 을 합친 내용입니다. -flex-flow: (flex-direction값) (flex-wrap값); 두가지 요소는 자주 사용되기 때문에 줄여서도 사용합니다.
안줄여도 상관없음.

``` # 2021-12-2, 16일차 ## justify-content ``` 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 : 내부 요소의 세로 위치를 변경하는 속성 입니다. - align-items: flex-start 요소를 상단에 배치합니다. - align-items: flex-end 요소를 하단에 배치합니다. - align-items: center 요소를 중단에 배치합니다. - align-items: stretch 높이가 정해져 있지 않을때 박스의 높이만큼 늘려줍니다. ``` # 2021-12-3, 17일차 ## align-content ``` align-content : 내부요소의 세로선상의 위치를 변경하는 속성입니다.
justify-content 세로버전
적용 가능한 속성은 justift-content 와 같습니다. ``` 여기 까지는 부모요소에 넣는 속성입니다. 아래부터는 자식요소에 넣는 속성입니다. ## order ``` order 내부 요소의 순서를 변경하는 속성입니다. flex-flow: 정수 정수값이 들어가며 숫자가 높을수록 뒤로 가게 됩니다. 음수값도 들어갈수 있으며 음수의경우 앞으로 가게 됩니다. ``` ## align-self ``` align-self : align-items의 기능을 원하는 요소에만 넣는 내용입니다. align-items의 속성값과 같은 내용이 들어갑니다. ``` # 2021-12-6, 18일차 ## 일러스트 - 벡터 형식의 프로그램 - 품질변화(x) - 오브젝트 한번에 변경됨 - 로고에서 많이활용 - 해상도 / ppi - 사이즈 설정 잘못해도 이미지가 많이 깨지지않음 - 중요한 툴 - 패스파인더 - 변형툴 - 펜툴 ## 디자인 컬러 코드 - RGB : 가산혼합_웹 : 빛의 삼원색 - 색이 섞일수록 밝아짐 - CMYK : 감산혼합_인쇄 : 색의 삼원색 - 색이 섞일수록 어두워짐 # 코딩수업 ## 폰트적용 ~ 노말라이즈 기본 양식 ``` /* 폰트적용 */ @font-face { font-family: 'GmarketSansMedium'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff'); font-weight: normal; font-style: normal; } html > body { font-family: "GmarketSansMedium"; } /* 노말라이즈 */ body, ul, li { margin:0; padding:0; list-style:none; } a { color:inherit; text-decoration:none; } ``` # 2021-12-7, 19일차 ## 테일윈드 `` ## 변수 - :root{} 변수를 감쌀때 사용 ## 포토샵 행동 단축키 - 무조건 컨트롤이 들어감 컨트롤+알파벳조합 연상시켜서 외우면 편함 - 포토샵 설정: ctrl+k - 캔버스 만들기 : ctrl+n - 레이어 만들기 : ctrl+shift+n - 파일 열기 : ctrl+o - 레이어 합치기 ctrl e - 돋보기 z ## 색상 - 색상취소:D - 전경색 ctrl+ del or \ - 배경색 alt +del or \ ## 누끼 - 올가미 l - 사각영역 m - 매직완드 w - contiguous 선택 시 면 선택 해제시 색상선택 - 선택 영역 select and mask - shift / alt shift + alt - select>color range - 색상영역이 비슷할때 사용하기 좋음 ## 반응형 웹 만들기 라이브러리 ``` {--gap:??px;} {width:calc(100% / var(--cc) - (var(--gap)) * (var(--cc) - 1) / var(--cc));} @media (max-width:1020px) and (min-width:801px) { .section-prod-list > .container >ul{ --cc:5; } } @media ( max-width:800px ) and ( min-width:601px ) { .section-prod-list > .container > ul { --cc:4; } } @media ( max-width:600px ) and ( min-width:401px ) { .section-prod-list > .container > ul { --cc:3; } } @media ( max-width:400px ) and (min-width:201px) { .section-prod-list > .container > ul { --cc:2; } } @media ( max-width:200px ) and (,) { .section-prod-list > .container > ul { --cc:1; } } ``` # 2021-12-8, 20일차 ## 위캔, 코드팬 명령어 - ctrl+shift+r : 선택한 단어만 변경 가능 ex) a>b ## ::after - ::after 자식에 붙이는 수식 - 가상선택자,호버등은적용 불가 ## transition - 호버할때 마우스 올리면 바뀌는 속도 조절가능 ex)transition: 1s,2s,~s ## opacity - 투명도조절 ex)opacity 0; # 2021-12-9, 21일차 # 포토샵 ## 레이어 - 레이어 복사하기 - ctrl+c,v - ctrl+j - alt+드래그(이동툴) ## 크롭 - 크롭:c - 이미지 사이즈 : ctrl+alt+i - 캔버스 사이즈 : ctrl+alt+c ## transform - 2020ver - 레이어 사이즈 변경 : ctrl+t - 드래그:정비례 - shift+드래그 : 자유변형 - alt+드래그 : 가운데 기점 정비례 - ctrl+드래그:왜곡 - ctrl+alt+shitf+드래그:원근왜곡 # 2021-12-10, 22일차 - ctrl+shift+c 페이지내에서 클릭하면 검사 # background - background-size: contain 양옆부분만 채우기, cover 짤려도 모두 채우기, - background-repeat:no-repeat 짤려도 사진 위아래 양옆이 모두 다 나옴(대신 여백이 생길 수 있음) - background-position : center=50% 50% 같은말 - (이미지 중심점이 박스의 중심점과 고정됨) <--디자인수업--> # 2022-01-03 38일차 https://projectlion.io/ https://projectlion.io/courses/technology/roblox https://projectlion.io/users/login https://projectlion.io/users/register # 2022-01-07 42일차 ## 테일윈드 반응형 ` // tailwind.config.js module.exports = { theme: { screens: { 'sm': '640px', // => @media (min-width: 640px) { ... } 'md': '768px', // => @media (min-width: 768px) { ... } 'lg': '1024px', // => @media (min-width: 1024px) { ... } 'xl': '1280px', // => @media (min-width: 1280px) { ... } '2xl': '1536px', // => @media (min-width: 1536px) { ... } } } } `