$$config title: 최은미 공부위키 keywords: - IT - 공부위키 $$ # 위캔 단축키 - 단축키 $$에 커서누고 누르기 - ctrl +shift + R누르고, - 미리보기 모드 토글 : 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 # 2021-11-11, 1일차 ## 크롬 명령어 - Ctrl + W : 탭 닫기 - Ctrl + T : 새탭 열기 - Ctrl + PgUp : 좌측탭으로 이동 - Ctrl + Down : 오측탭으로 이동 - Home : 문서 최상단으로 이동 - Ctrl + Home : 코드펜의 첫부분으로 이동 - End : 문서 최하단으로 이동 ## 타이핑 - Ctrl + Z : 이전 히스토리 작업 불러오기 - 최근 몇십개의 작업만 기억 - Ctrl + Y : 이후 히스토리 작업 불러오기 - Ctrl + shift + 7 : 렌더링 # HTML, CSS 개요 - 웹페이지 = HTML + CSS + JS - HTML : 문서의 내용 - CSS : 문서의 꾸밈 - JS : 인터렉션 - 엘리먼트는 배우 - CSS는 코디 - CSS가 엘리먼트를 찾아가서 꾸며줌 - 기본값 : | 높이,너비:atuo | color:black | display:block | ### 태그 - 태그 : 꼬리표 - 엘리먼트는 여는태그와 내용과 닫는태그로 구성됨 - 태그를 사용하는 이유는, 문서의 각 부분을 구분하기 위해 - { div section nav article(팝업창)만 사용 } - div * 3 > 탭 : div 3개 생성하는 법 - div + section > 탭 : 형제태그 두개 만드는 법 - Format HTML : 태그를 재정렬해줌 ## CSS display 속성 - ※ 넓이 - block : 너비 지정 X → 100% 크기로 늘어남 - 높이 지정 X → 최소한으로 줄어듦 - inline-block : 너비 지정 X → 최소한으로 줄어듦 - 높이 지정 X → 최소한으로 줄어듦 - ※ 배열방향 - block : 한줄에 무조건 하나만 나옴 - inline-block : 한줄에 최대한 여러개가 나옴 - inline 속성 : a img span태그 # 2021-11-12, 2일차 ## CSS 글자 속성 - font-weight : normal; 기본속성 - font-weight : 글자두께 - font-size : 글자사이즈(3rem 기본3배) - letter-spacing : 자간조절 ## 테이블 - thead : 테이블 머리 - tbody : 테이블 몸통 - tr : 테이블 행 - th : 테이블 헤더(메인데이터) - td : 테이블 열(부가정보) - tr > th + td - border-collapse:collapse; (테두리로 변경) ## a태그 - [a href="주소/" target="_blank" ]네이버로[/a] : 주소창 이동 - inline 속성 - width, height, margin, padding 속성 적용 X - 자동생성 안될 때, 잘라내기 사용 ## 엘리먼트 관계 - " > " : 부모 자식 관계 - " + " : 형제 관계 - " { } " : 안에 들어감 - " [ ] " : 속성 - " ^ " : 빠져나가기 - " ( ) " : 한 덩어리로 묶임 - " {no. $} " : 숫자가 증가함 # 2021-11-15, 3일차 ## 블로그 - 주소 : [블로그](https://slog.gg/b/1502) ## 정렬 - text-align - center - right - left - 정렬하는 대상 엘리먼트가 아니라, 자신이 가지고 있는 텍스트를 정렬함 → 부모요소에 넣음 - 대상 엘리먼트의 글자와 자식 inline 요소만 정렬함 - display : inline-block 하면 엘리먼트가 텍스트화 됨 → 글자가 아닌 엘리먼트도 정렬 가능. - 오류) 1. inline 요소에 text-align속성을 줘도 소용없음 → 크기가 최소한으로 줄어든다는 속성때문에, 너비가 줄어 안에 요소의 공간이 사라져 정렬이 안됨. - " ;" : 두칸이상 띄울 때 사용 - ' : 줄긋기 - inline 요소의 정렬은 > 부모요소에게 상속받음 ## 효과 - hover : 클릭 애니메이션 효과 - 글자 효과 제거 : text-decoration : none; # 2021-11-16, 4일차 ## 상단메뉴바 만들기 - 글자에 inline 혹은 inline-block을 줄 경우 : 일자로 정렬됨 - | 엘리먼트에 너비 줄 경우 : 각 글자마다 박스크기가 달라짐 - 글자상자의 너비가 균일 하게 만들기 : 글자에 with값을 줘서 동일하게 만들 수 있음 - a태그에 block 속성을 줄 경우 : 너비를 가질수 있음( block 속성 a태그에 너비를 안 줄경우 : 부모 크기 상속받음) & inline-block도 가능 - a태그로 링크텍스트를 만들 수 있음 - text-decoration:underline; : 밑줄 ## emmet 메뉴구조생성 - 1st) nav>section*7{아이템 $} - 2nd) nav>({|}+section{아이템 $})*7 - 3rd) nav>({|}+section{아이템 $})*7+{|} - 4th, complete! nav>({|}+section>a[href="#"]{아이템 $})*7+{|} - 잘라내기 > 복붙하면 다시 tap키로 자동생성 할 수 있음 ## Lorem Picsum - 주소 : [로렘픽썸](https://picsum.photos/) - https://picsum.photos/id/237(사진번호 변경시, 다른이미지)/200/300(뒤에 2숫자 가로*세로 길이)> 마음대로 숫자 변경해서 사이즈 변경 가능함 ## img - img > 이미지태그 - 모든 이미지에는 비율이 있음 - 비율 변경했을 때, css이미지 설정 - 세로 변경할 땐 이상없음 - 가로 세로 길이 바꿨을 때 : 이미지가 다 보이나, 비율이 다 깨짐 - object-fit:cover; : 비율 유지하면서 커지게 해줌 > 공백 없이 꽉채움 > 이미지 잘림이 생김 - object-fit:contain; : 이미지 비율유지 하면서 최대한 커지게 해줌 > 니머지 공간은 공백으로 남김 # 2021-11-17, 5일차 ## 피그마 - 주소 : [피그마](https://www.figma.com/) - 완성본 : 프레임선택> erport >저장 후, - [주소만들기](https://www.zpat.info/) 에 업로드 후 url 저장 - 주소 줄이는 사이트 : [주소줄이기](to2.kt) ## margin, padding - margin : 박스의 바깥쪽 여백 - padding : 박스의 안쪽 여백, 상하좌우 - margin-left의 기본값 : 0 - margin-right의 기본값 : auto(자율) - margin: 0 auto & 둘다 auto : 가운데 정렬 - margin-right: 0; / margin-left: auto 같이 쓰기 : 오른쪽 끝으로 ## nth - 원하는 번호 엘리먼트를 불러옴 - 무지개 만들기 - 7줄일 때, 7n을 사용함(7n-1, 7n-2)혹은 (7n+1,7n+2) - nth-child - nth-last-child - first-child - last-child ## HTML - 모든 보이는 엘리먼트의 조상은 body이고, 그의 부모는 html # 2021-11-18, 6일차 ## 선택자 - div(엘리먼트) - div , section (두개 부르기) - #a(id) - .a(class) - .a.b(a클래스와 b클래스 두개를 동시에 가진 엘리먼트 - div.a(합쳐서) - div a (자손선택자 > 자손: 자식, 손자, 후손 모두 포함함) - div>a(자식선택자) - * : 전체선택 - 연습 사이트 : [선택자 연습](https://flukeout.github.io/) ## border-radius - 테두리지 지정 - 좌상단부터 시계방향으로 지정 : 10 20 30 40(안으로 들어가는 정도) - 각 모서리 설정가능 - 50% = 원 ## cursor - cursor : pointer; : 마우스 갖다 대면 손모양으로 변경됨 - 변경 사이트 : - [W3 schools](https://www.w3schools.com/cssref/pr_class_cursor.asp) - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) ## inherit - 부모에게 css상속받음 - 기본값 - font-size : inherit; letter-spacing : inherit; color : inherit; background-color : transparent;(투명함) width : auto; height : auto; margin : 0; padding : 0; display : block; (a img span - inline) border : none; border-radius : 0; cursor : auto; text-align : inherit; text-decoration : inherit; ## a의 노멀라이징 - color : inherit; - text-decoration : none; ## 컴포넌트 - 컴포넌트 : 유사한 엘리먼트들을 여러 번 그려야 할 때 , 유용하게 쓸 수 있음 - 사용법 : 오른쪽클릭> create컴포넌트 > 복사붙여놓기 - 마스트 컴포넌트를 수정하면 복사붙여넣기 한 것도 같이 변경됨. - 마스트 컴포넌트 : 최초에 만든 컴포넌트 - 인스턴스 : 마스터컴포넌트를 복사한 것 - ※ 오른쪽 중간에 constraints left와 top 값을 주면 , 감싸고 있는 엘리먼트 크기가 늘어나도 안에 요소는 위치가 고정되게 만듦 - 옵션 - 1.reset instance : 컴포넌트 리셋 (인스턴스>마스트 컴포넌트로 돌아옴) - 2.Detach Instance : 컴포넌트 해제 (해제한 인스턴스는 더이상 마스터의 영향을 받지 않음) - 3.Go to master component : 해당 인스턴스의 마스트 컴포넌트를 찾아감) - 4.push overrides to master : 역으로 적용 마스트 컴포넌트가 인스턴스의 영향을 받도록 - 왼쪽 상단 assets 에서 컴포넌트를 볼 수 있음 # 2021-11-19, 7일차 ## ul li - 가장 많이 쓰이는 엘리먼트 - ol , li ($$config title: 최은미 공부위키 keywords: - IT - 공부위키 $$ # 2021-11-11, 1일차 ## 크롬 명령어 - Ctrl + W : 탭 닫기 - Ctrl + T : 새탭 열기 - Ctrl + PgUp : 좌측탭으로 이동 - Ctrl + Down : 오측탭으로 이동 - Home : 문서 최상단으로 이동 - Ctrl + Home : 코드펜의 첫부분으로 이동 - End : 문서 최하단으로 이동 ## 타이핑 - Ctrl + Z : 이전 히스토리 작업 불러오기 - 최근 몇십개의 작업만 기억 - Ctrl + Y : 이후 히스토리 작업 불러오기 - Ctrl + shift + 7 : 렌더링 # HTML, CSS 개요 - 웹페이지 = HTML + CSS + JS - HTML : 문서의 내용 - CSS : 문서의 꾸밈 - JS : 인터렉션 - 엘리먼트는 배우 - CSS는 코디 - CSS가 엘리먼트를 찾아가서 꾸며줌 - 기본값 : | 높이,너비:atuo | color:black | display:block | ### 태그 - 태그 : 꼬리표 - 엘리먼트는 여는태그와 내용과 닫는태그로 구성됨 - 태그를 사용하는 이유는, 문서의 각 부분을 구분하기 위해 - { div section nav article(팝업창)만 사용 } - div * 3 > 탭 : div 3개 생성하는 법 - div + section > 탭 : 형제태그 두개 만드는 법 - Format HTML : 태그를 재정렬해줌 ## CSS display 속성 - ※ 넓이 - block : 너비 지정 X → 100% 크기로 늘어남 - 높이 지정 X → 최소한으로 줄어듦 - inline-block : 너비 지정 X → 최소한으로 줄어듦 - 높이 지정 X → 최소한으로 줄어듦 - ※ 배열방향 - block : 한줄에 무조건 하나만 나옴 - inline-block : 한줄에 최대한 여러개가 나옴 - inline 속성 : a img span태그 # 2021-11-12, 2일차 ## CSS 글자 속성 - font-weight : normal; 기본속성 - font-weight : 글자두께 - font-size : 글자사이즈(3rem 기본3배) - letter-spacing : 자간조절 ## 테이블 - thead : 테이블 머리 - tbody : 테이블 몸통 - tr : 테이블 행 - th : 테이블 헤더(메인데이터) - td : 테이블 열(부가정보) - tr > th + td - border-collapse:collapse; (테두리로 변경) ## a태그 - [a href="주소/" target="_blank" ]네이버로[/a] : 주소창 이동 - inline 속성 - width, height, margin, padding 속성 적용 X - 자동생성 안될 때, 잘라내기 사용 ## 엘리먼트 관계 - " > " : 부모 자식 관계 - " + " : 형제 관계 - " { } " : 안에 들어감 - " [ ] " : 속성 - " ^ " : 빠져나가기 - " ( ) " : 한 덩어리로 묶임 - " {no. $} " : 숫자가 증가함 # 2021-11-15, 3일차 ## 블로그 - 주소 : [블로그](https://slog.gg/b/1502) ## 정렬 - text-align - center - right - left - 정렬하는 대상 엘리먼트가 아니라, 자신이 가지고 있는 텍스트를 정렬함 → 부모요소에 넣음 - 대상 엘리먼트의 글자와 자식 inline 요소만 정렬함 - display : inline-block 하면 엘리먼트가 텍스트화 됨 → 글자가 아닌 엘리먼트도 정렬 가능. - 오류) 1. inline 요소에 text-align속성을 줘도 소용없음 → 크기가 최소한으로 줄어든다는 속성때문에, 너비가 줄어 안에 요소의 공간이 사라져 정렬이 안됨. - " ;" : 두칸이상 띄울 때 사용 - ' : 줄긋기 - inline 요소의 정렬은 > 부모요소에게 상속받음 ## 효과 - hover : 클릭 애니메이션 효과 - 글자 효과 제거 : text-decoration : none; # 2021-11-16, 4일차 ## 상단메뉴바 만들기 - 글자에 inline 혹은 inline-block을 줄 경우 : 일자로 정렬됨 - | 엘리먼트에 너비 줄 경우 : 각 글자마다 박스크기가 달라짐 - 글자상자의 너비가 균일 하게 만들기 : 글자에 with값을 줘서 동일하게 만들 수 있음 - a태그에 block 속성을 줄 경우 : 너비를 가질수 있음( block 속성 a태그에 너비를 안 줄경우 : 부모 크기 상속받음) & inline-block도 가능 - a태그로 링크텍스트를 만들 수 있음 - text-decoration:underline; : 밑줄 ## emmet 메뉴구조생성 - 1st) nav>section*7{아이템 $} - 2nd) nav>({|}+section{아이템 $})*7 - 3rd) nav>({|}+section{아이템 $})*7+{|} - 4th, complete! nav>({|}+section>a[href="#"]{아이템 $})*7+{|} - 잘라내기 > 복붙하면 다시 tap키로 자동생성 할 수 있음 ## Lorem Picsum - 주소 : [로렘픽썸](https://picsum.photos/) - https://picsum.photos/id/237(사진번호 변경시, 다른이미지)/200/300(뒤에 2숫자 가로*세로 길이)> 마음대로 숫자 변경해서 사이즈 변경 가능함 ## img - img > 이미지태그 - 모든 이미지에는 비율이 있음 - 비율 변경했을 때, css이미지 설정 - 세로 변경할 땐 이상없음 - 가로 세로 길이 바꿨을 때 : 이미지가 다 보이나, 비율이 다 깨짐 - object-fit:cover; : 비율 유지하면서 커지게 해줌 > 공백 없이 꽉채움 > 이미지 잘림이 생김 - object-fit:contain; : 이미지 비율유지 하면서 최대한 커지게 해줌 > 니머지 공간은 공백으로 남김 # 2021-11-17, 5일차 ## 피그마 - 주소 : [피그마](https://www.figma.com/) - 완성본 : 프레임선택> erport >저장 후, - [주소만들기](https://www.zpat.info/) 에 업로드 후 url 저장 - 주소 줄이는 사이트 : [주소줄이기](to2.kt) ## margin, padding - margin : 박스의 바깥쪽 여백 - padding : 박스의 안쪽 여백, 상하좌우 - margin-left의 기본값 : 0 - margin-right의 기본값 : auto(자율) - margin: 0 auto & 둘다 auto : 가운데 정렬 - margin-right: 0; / margin-left: auto 같이 쓰기 : 오른쪽 끝으로 ## nth - 원하는 번호 엘리먼트를 불러옴 - 무지개 만들기 - 7줄일 때, 7n을 사용함(7n-1, 7n-2)혹은 (7n+1,7n+2) - nth-child - nth-last-child - first-child - last-child ## HTML - 모든 보이는 엘리먼트의 조상은 body이고, 그의 부모는 html # 2021-11-18, 6일차 ## 선택자 - div(엘리먼트) - div , section (두개 부르기) - #a(id) - .a(class) - .a.b(a클래스와 b클래스 두개를 동시에 가진 엘리먼트 - div.a(합쳐서) - div a {하위선택자 div의 자식의 자식인a를 부름 (후손)) - div>a(자손) - * : 전체선택 - 연습 사이트 : [선택자 연습](https://flukeout.github.io/) ## border-radius - 테두리지 지정 - 좌상단부터 시계방향으로 지정 : 10 20 30 40(안으로 들어가는 정도) - 각 모서리 설정가능 - 50% = 원 ## cursor - cursor : pointer; : 마우스 갖다 대면 손모양으로 변경됨 - 변경 사이트 : - [W3 schools](https://www.w3schools.com/cssref/pr_class_cursor.asp) - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) ## inherit - 부모에게 css상속받음 - 기본값 - font-size : inherit; letter-spacing : inherit; color : inherit; background-color : transparent;(투명함) width : auto; height : auto; margin : 0; padding : 0; display : block; (a img span - inline) border : none; border-radius : 0; cursor : auto; text-align : inherit; text-decoration : inherit; ## a의 노멀라이징 - color : inherit; - text-decoration : none; ## 컴포넌트 - 컴포넌트 : 유사한 엘리먼트들을 여러 번 그려야 할 때 , 유용하게 쓸 수 있음 - 사용법 : 오른쪽클릭> create컴포넌트 > 복사붙여놓기 - 마스트 컴포넌트를 수정하면 복사붙여넣기 한 것도 같이 변경됨. - 마스트 컴포넌트 : 최초에 만든 컴포넌트 - 인스턴스 : 마스터컴포넌트를 복사한 것 - ※ 오른쪽 중간에 constraints left와 top 값을 주면 , 감싸고 있는 엘리먼트 크기가 늘어나도 안에 요소는 위치가 고정되게 만듦 - 옵션 - 1.reset instance : 컴포넌트 리셋 (인스턴스>마스트 컴포넌트로 돌아옴) - 2.Detach Instance : 컴포넌트 해제 (해제한 인스턴스는 더이상 마스터의 영향을 받지 않음) - 3.Go to master component : 해당 인스턴스의 마스트 컴포넌트를 찾아감) - 4.push overrides to master : 역으로 적용 마스트 컴포넌트가 인스턴스의 영향을 받도록 - 왼쪽 상단 assets 에서 컴포넌트를 볼 수 있음 # 2021-11-19, 7일차 ## ul li - 가장 많이 쓰이는 엘리먼트 - ol ul 의 자식은 무조건 li만 와야함 - ol , li (많이 안쓰이나, 그냥 있다) - ol을 쓰면 li 앞에 순차적으로 번호가 붙음. - ol : 목록(순서있는 목록) ## 노멀라이징 - ul, li {list-style:none; - padding:0; (안쪽여백제거) - margin:0; } (바깥쪽여백제거) - body{ - margin:0;} - h1, h2 - { margin:0;} - h 시리즈 태그에는 기본적인 margin이 들어있다. 그걸 제거하고 써야 한다. ## 네비게이션 - 클릭하면 이동하는 것 (링크도 네비게이션 함) - nav를 씀 - nav> ul>li - 링크를 감싸는데 쓰임 # 2021-11-22, 8일차 ## display flex - justify-content : 가로선 상 / 정렬 - align-items : 세로선 상 / 정렬 - align-content : 세로상 / 여분 공간이 있는 경우 / 사이 간격 조절 - flex-direction : 정렬할 방향 지정 - flex-wrap : 한줄 또는 여러줄 걸쳐 정렬 - flex-flow : flex-direction / flex-wrap을 간략 한 속성 ex) flex-flow : column wrap - order : flex 요소/ 순서지정 - align-self : align-items 값 무시 / 세로선 상/정렬 - ex ) 옐로우만 위치 변경 >> .yellow { order:+2; align-self : flex-end; } # 2021-11-23, 9일차 ## display - none : 없어진다. - inline : 글자화, 너비최소축소, 가로 - inline : a, 글자 - inline-block - block : 블록화, 너비최대확대, 세로 - flex , table( 블럭) ## CSS 종류 - 3가지 - 노말라이즈 - 라이브러리 - 커스텀 ## 그리드 라이브러리 - 라이브러리 - .inline-grid{font-size:0; } 글자 사이 여백 없애기 여백> inline-block이라서 생김 - .inline-grid> * { font-size:1rem; display:inline-block; vertical-align:top; - (글자쓰면 아래로 내려감 > 위로올리기.} 글자원래대로 돌리기 ## 엘리먼트 태그로 화면 다 채우기 - html - body - 태그 의 전체에 height:100%줘야함 - 부모요소에게 높이를 상속받음 - html은 윈도우창의 100%를 받아옴 - height:100vh; 윈도우에서 직접 받아오는 법 위에 부모요소에 다 안적어줘두됨 # 2021-11-24, 10일차 ## box-sizing:border-box - 바깥쪽에 있는 border가 안쪽에 생김 - padding, 테두리 다 안쪽에 생김 - 박스 크기가 원래 지정된 크기로 돌아감 # 2021-11-25, 11일차 ## 1. img박스로 여백없애기 - display:block주면 밑에 라인이 사라짐 - img가 원래 inline-block속성이었어서 여백이 생김 - width: 100%; - 이미지는 비율이 있어서 높인 안 줘두 됨 ## 2. 퍼센트 - 를 이용한 여백조절(너비 고정px) - width:calc(100% / 4 - (20px * 3 / 4)); - 20 px >> 마지막 4번째껀 여백X (전통계산방식) ## 3. 음수마진으로 여백조절 - margin에서 -값을 주면 테두리에서 벗어나 영역을 차지함 - 100%(부모너비 기준) 을 주면 테두리를 빠져나감 - margin-right:-100% 할 땐, left를 auto로 설정해둬야 함 - padding : 0 20px; 로 좌우로 여백이 생기도록함 - (inline-grid의 border-box속성으로 padding을 줘도 이미지크기가 증가되지 않음) - margin: 0 -20px;(padding값)을 줘서 - 이미지 박스의 끝 좌우가 con틀에 삐져나가도록해서 여백을 없앰 - 이미지크기를 calc(100% / 4)해두면 나중에 이미지 추가됐을 때, - 나누는 이미지 수만 바꾸면 알아서 비율에 맞게 크기가 지정되기 때문에 더 편리함 # 2021-11-26, 12일차 ## Position - static : - 기본 - 겹침 불가능 - relative : - 유령의집화 - 겹침 불가능 - top, left, right, bottom으로 이동, 기준이 현재위치 - absolute, fixed(고정) : - 유령화 - 겹침 가능 - top, left, right, bottom으로 이동, 기준이 부모유령 ### absolute - with, height, top , left로 위치 조절 가능 - left : 50% 하면, left에서 50%만큼 밀려남 (오른쪽에위치) - with, height 없이 top. left,right,botton으로 너비, 높이 조절할 수 있음 ### transform - 부모엘리먼트를 중앙정렬하는 법: - position:absolute; - top: 50%; - left: 50%; - transform: translateX(-50%) translateY(-50%); # 2021-11-29, 13일차 ## white-space - 스페이스와 탭, 줄바꿈, 자동줄바꿈 정하는 속성 - nowrap : 줄바꿈X > 한줄 병합 ## overflow - 가로방향 넘치는 부분을 어떻게 할지 정하는 속성 - hidden - scroll - auto ## text-overflow - 넘쳐서 숨겨지는 텍스트 ... 처리 (overflow hidden 후, ...처리) - ellipsis # 2021-12-02, 16일차 - figma variants - flex-basis : 아이템기본크기 - flex-glow : 늘어나는 비율 - flex-shrink : 유연하게 줄어들기 (기본값 1 > 0 : 고정값) # 2021-12-03, 17일차 ## 웹폰트 적용하기 - 브라우저에서 폰트 스타일 직접 구현해줌 - 한글폰트는 영문에 비해 무거워서 적게 사용 - 하나의 문장 안에서 영문자와 숫자만 다른 폰트로 적용하는 법 - font-family : "Smooch"(영문폰트) , "OTWelcomeBA"(한글폰트) 코드 써주기 - 한글폰트에는 영문폰트도 포함되있는 경우가 많아서, 한글폰트를 먼저 써주면 영문폰트도 - 한글 폰트로 변경 되기 때문에, 영문폰트를 먼저 써줌 ## 테일윈드 - 노멀라이즈가 link 주소를 넣으면 알아서 됨 - html class에 css를 넣어서 빠르게 코딩할 수 있음 - boxsizing-border-box도 알아서 넣어짐 # 2021-12-06, 18일차 ## con-min-width - con 위 부모속성에 넣기 - 줄어드는데 한계가 존재 - con을 쓰면, 필수적으로 들어가야함 - con부모 속성은 자유롭게 늘어남(너비가 존재X) > 자식을 넘어 줄어들면 고장남(너비가 밑으로 떨어짐) - 떨어지지 않게 하기 위해서, 최소 너비를 정해서 고정시켜주기 ## header> section # 2021-12-07, 19일차 ## Flex items - 부모요소에 flex를 넣으면 자식 item들은 inline,block속성이든 속성이 들지 않음 - 부모요소 : flex > 자식이 block취급되고 , 너비도 작동함 ## 반응형 - 자식이 block일때, 부모 inline이면 안됨. - media(미디어 쿼리) - inline-grid - 음수마진 없이 : 숫자를 많이 써야함 - 음수 마진: 추가 엘리먼트 필요 - flex-grid - 추가 마진도 필요없고, 수치가 제일 편리함 ## 변수 - 조상에 있는 변수 , 자식도 쓸 수 있음 - CSS 맨 위에 :root{ 변수명 : 값 }해서 쓰면 모든 CSS에서 변수 사용가능 # 2021-12-08, 20일차 ## img - 무조건 display:block주기 > 아니면 아래 여백생김 ## after - ul > li::after{ content: "입니다."; > 활성화 } - li의 자식이 숨겨져있는 것 - before :: li의 부모 - inline속성 - img는 열고 닫기가 없어서 자식이 존재할 수 없음 >> after쓸 수 없음 - after은 자식이기 때문에(코드가 아래위치), 나중에 나온 유령요소로 before보다 컨텐츠 위치가 앞에 뜸 ## transform:scale - transform:scale(2); - 사이즈를 크게 만듦 2배 $ `transform`코드구성 ```css div { width:300px; overflow:hidden; } div > img { width:100%; display:block; transition: transform 1s; z-index:-1; position:relative; /*★ z-index:-1(맨뒤로 보내기)줘야 이미지가 커졌을 때, 앞으로 안 나옴(오류로 밑으로 삐져나올 수도 있음) and z-index를주려면 최소한 relative가 되어야함 */ } div:hover > img { transform:scale(1.5); } ``` ## z-index - 기본0 - 1은 앞으로 나옴 - -1은 맨뒤로 - z-index 주려면 최소한 relative속성을 줘야 먹음 ## opacity - 0 > 불투명 (안보임) - 1 > 투명 (개체가 보임) # 2021-12-09, 21일차 ## font-awsome ## span - div처럼 특별한 기능X , CSS와 함께 쓰임 - div와 차이점 - display가 inline, div는 줄바꿈 되지만, span 은 줄바꿈X ## box-shadow - 그림자 두개 주는 법 "," - 그림자 X축 y축 퍼진정도 색상; - text-shadow도 있어서 글자에도 줄 수 있음 - transition을 줘서 입체감 있게 만들 수 있음 ## 이름 짓는법 - 독립적인 하나의 존재 block (재사용>블럭) (logo(하나만 존재)) - 한정적인 존재 엘리먼트(블럭에속해서 의미를 갖는 요소) - top-bar__menu-1: 종속적인 (__) 엘리먼트라는 뜻 > 블럭으로 사용하고자 하면 빼면됨 - top-bar__menu-1 이름이 길어서 하나 부르면됨 - logo > 독립적인 존재 logo그냥 불러주면됨 - CSS BEM 확인해보기 # 2021-12-10, 22일차 ## background-size - contain : 이미지를 자르거나, 늘리지않고 컨테이너 크기 내에서 이미지를 최대한 크게 조정함 - cover : 컨테이너에 빈공간이 생길 경우, 빈공간이 남지 않도록 세로 혹은 가로를 잘라 이미지를 늘림 ## 변수는 라이브러리 X 커스텀 $`변수 root는 커스텀` ```css :root{ --site-width: 1200px; } /* root의 너비값은 해당 pen에서만 사용됨 > 커스텀 */ ``` ## 소스코드 - Ctrl + U # 2021-12-13, 23일차 - https://slog.gg/p/2649 부분모작 - flex-1 : 글자수상관없이1비율 >> flex-grow : 1, width:0; 두개 적용한 거랑동일 - https://slog.gg/p/2707 css실무팁 # 2021-12-27 ## 자바스크립트 - css는 상태유지 불가 -hover마우스떼면 사라짐 - html의 영구적인손상을일으킴 # 2021-12-30 ## 자바스크립트 - 선언 - 동생 .next() - 형 .prev() - 자식 .children() - 주인공의 후손 box-1 * 한거랑 동일 - 모든 후손 .find('*').children() - 조상(조상은 한명만 찾을 수 있음) .parent().closest() - .closest('html') 젤가까운, 한번만 가능 - find('div') : div찾기 parent('section'): 부모인section찾기 - 부모 .parent() - 부모의 부모의 동생의동생의 각 2번씩 써줌 - 자바에서 스타일 바꾸면 X active주기 ## siblings - 나를 제외한 형제 일컫 # 로고안깨지는법 - git hub에 업로드하기 - 포폴했을때, 절대안깨짐 - 양식:https://cdn.jsdelivr.net/gh/[사용자명]/[레포지토리명]/[파일경로] - https://slog.gg/p/3064 라이언 모작위키 # 2022-01-07 $`before로 폰트어썸 적용` ```css - div > span::before{ content:"\f083"; font-family:"Font Awesome 5 Free"; font-weight:900; } ``` ## currentColor. - 현재 text color를 의미하며, color 값을 사용하는 모든 선언에 사용할 수 있습니다 # 2022.01.27 ## 내용 : 2022년 01월 27일, VS CODE, 깃허브 페이지, 도메인 연결, 배포 - 주소 : to2.kr/dvv - 2.5 ~6까지 정독 > 하루 3개씩 ## 자바스크립트 defer위에 넣기 > 지연리딩 # 2022-02-25 - fixed 계속 중앙위치 > absolute 원하는 위치에서 고정 반응형 - pointer-events:none; > 객체 선택 안되게 설정 투과 - 내용 : 2021년 05월 28일, 유용한 소스코드 모음, to2.kr/cAF - [모음이동](https://codepen.io/jangka44/live/rNyGMzY) - /* 부트스트랩 > 디자인없이 개발자가 다만들수있음 > 기본적인디자인되어있음.12grid반응형만드는데 최적화되어있음. - 1년차 되면 이직률좋*/