$$config title: 최진우 공부위키 keywords: - IT - 공부위키 $$ # 2021-11-11, 1일차 ## 크롬 명령어 * Ctrl + W : 탭 닫기 * Ctrl + T : 새탭 열기 * Ctrl + PgUp : 좌측탭으로 이동 * Ctrl + Down : 오측탭으로 이동 * Home : 문서 최상단으로 이동 * End : 문서 최하단으로 이동 ## 타이핑 * Ctrl + Z : 이전 히스토리 작업 불러오기 * 최근 몇십개의 작업만 기억 * Ctrl + Y : 이후 히스토리 작업 불러오기 ## HTML, CSS * 엘리먼트는 여는태그와 내용과 닫는태그로 구성된다. * 태그를 사용하는 이유는, 문서의 각 부분을 구분하기 위해서이다. * 엘리먼트는 배우이다. * CSS는 코디이다. * CSS가 엘리먼트를 찾아가서 꾸며준다. ### display * block - 기본적인 상태로 한 줄을 차지한다. - inlin-block 사용해 공간이 있다면 한줄로 옮겨 사용하게 할 수 있다. ### 자주사용 태그 * div, section, nav, article # 2021-11-12, 2일차 ## 수업메모 * display height,width의 기본값은 auto. - block - 너비 : 너비가 지정되어 있지 않으면, 최대한 늘어난다. - 높이 : 높이가 지정되어 있지 않으면, 최소한으로 줄어든다. - 배열방향 : 세로방향으로 한줄에 무조건 1개 - inline-block - 너비 : 너비가 지정되어 있지 않으면, 최소한으로 줄어든다. - 높이 : 높이가 지정되어 있지 않으면, 최소한으로 줄어든다. - 배열방향 : 가로방향으로 한줄에 공간되는 만큼 최대한 여러개 * 같은 속성은 아래것으로 출력됨 * letter-spacing 자간 * font-weight 글자 굵기bold * ctrl+shift+7 새로고침 * 띄어쓰기 <.br> br태그는 하나짜리라 닫아줄 필요없음 ### color * 색설정 r빨g초b파a투명 (@,@,@,#) @= 0~255까지 설정 #=0~1투명도 설정 * color rgba =16진수 (rgb 구글에 컬러피커로 원하는 색 검색가능) ## table(표만들기) * thead로 구분하는곳을 감싸고 나머지 내용을 tbody로 감싸기 * tr=가로줄 td=칸 th=부가설명 굵은 글씨 * boder =테두리 <.table border="@"> @는 테두리 선 굵기 * 테두리 지우기 : border-collapse:collapse; * 0

교시	월	화	수
1	국어	수학	영어

## 젠코딩 * 젠코딩 A+B 형제 관계 ex) nav+div * A>B부모 관계 ex) table>tbody>tr*10>td*10{번호} , {no. $} * 젠코딩 사용할 때 >여러개 사용가능, >중간에 (), +,*,^ 도 같이 사용 가능함 * 여러개 만들땐 *사용해 한번에 여러개를 생성할 수 있다. * nav>({|}+section>a[href="#"]{아이템 $})*7+{|} ## a 태그 * a 기본 display 인라인블럭이 디폴트 값 * <.a href="주소"> a태그로 클릭하면 페이지로 가게하는 태그 , target="_blank"새창으로 열기 ex)<.a href="https://www.kakaocorp.com/" target="_blank">카카오 * a[href="#"][traget="_blank"]{네이버로 이동}+br+a[href="#"][traget="_blank"]{다음로 이동} * a태그 한번에 만들기중에 [ ] 는 < >안에 적히는 곳이고 { }는 보여지는 글씨 써지는 곳 * div>a[href="#"][traget="_blank"]{네이버로 이동} 한번에 만들기 # 2021-11-15, 3일차 ## 수업메모 * div> a{color:#; } 로 원하는곳 만 색설정가능 * A>B는 자식 선택 A B 는 후손 선택 * @:hover - 마우스 올려지면 변함 * A>B+C{ } B의 인접동생만 적용됨 * &.nbsp; =띄어쓰기 * 글자의 효과 제거 = text-decoration:none; ## text-align * text-align은 자신이 가지고있는 "텍스트"에 적용되는것 * 텍스트는 인라인블럭 * <.div> <.a href="http://www.bnx.co.kr/16fw/main/main.asp" target="_blank">bnx 사이트<./a> <./div> 여기에서 div의 텍스트는 a태그 한개 * div>section 에서 div에 text-align과 inline-block은 같이 사용할필요 없음 인라인 블럭으로 이미 줄였는데 text-align과 같이쓸 필요가 없다 # 2021-11-16, 4일차 ## 수업메모 * inlin은 패딩 너비 높이 다 안됨 * 폰트 변경 font-weight * 자간 늘리고 줄이기 letter-spacing * css 적용 할 때 A>B 이런 식으로 정확히 어디에 있는 건지 적어서 하는 습관 * css에 a 노말라이즈 * a{ text-decoration:none; color: black; } 하고 시작 * :hover은 최대한 왼쪽에 있는 태그에 붙혀주는게 왠만하면 좋다 ## 메뉴 만들기 * &.nbsp; 말고 띄어쓰기나 공간 만들때 section, nav 이용해 투명한 공간 만들기 * 곻간 만들때 background-color 로 색 넣어서 크기 확인하면서 하기 ## img * object-fit 사진 설정 - cover,contain * https://picsum.photos/ 이미지 사이트 # 2021-11-17, 5일차 ## 수업메모 * https://www.zpat.info/ 이미지url만들기 ## 공백 * padding - top, left, right, bottom 사용으로 범위 내에 여백 만들어 냄 * margin - top, left, right, bottom 사용으로 범위 외에 여백 만들어냄 ## nth * nth-child(an+b) 방정식 사용해 특정 부분을 전부 변경할 수 있다 * @:nth-child, nth-last-child ($)로 지정해서 설정하기 * 맨 처음과 마지막 단 두개만 fist-child , last-child 로 가능 # 2021-11-18, 6일차 ## 수업메모 * mdn, w3schools사이트가서 css 값들 찾아보기 가능 ## 태그 기본값들 * font-size:inherit; * font-weight:inherit; * letter-spacing:inherit; * color:inherit; * background-color:transparent; * width:auto; * height:auto; * margin:0; * padding:0; * display:block; * border:none; * border-radius:0; * cursor:auto; * text-align:inhreit; * text-decoration:inhreit; ## border-radius * 각진부분을 완만하게 만들어줌 * 최대로 줄수있는 %는 50% * 50%주면 원만들어짐 * (apx bpx cpx dpx)로 각기 다르게 설정가능 ## id , class * A id="@", class="@"로 사용 * id="@" #@로 사용해 nth없이 하나 콕찝기 가능 무조건 하나만 가능 * class="A B" .A , .B로 사용해 nth없이 하나 콕찝기 가능 동시에 여러개설정가능 * /* class 가 a 인 엘리먼트 선택 */ - .a { color:red; } - /* id가 a 인 엘리먼트 선택 */ #a { color:blue; } - /* class a와 b를 동시에 가지고 있는 엘리먼트 선택 */ .a.b { color:gold; } - /* 태그가 section이고 class a와 b를 동시에 가지고 있는 엘리먼트 선택 */ section.a.b { color:green; } # 2021-11-19, 7일차 ## 수업메모 * ul,li 목록 정하는 태그 ol,li 둘은 무조건 부모자식관계 중간에 div 같은거 침입불가능 * ul.li 노말라이징 : list-style:none;, padding:0; margin:0; * h 노말라이징 : margin:0; , (font-size:1rem;, font-weight:nomal;)는 선택 # 2021-11-23, 9일차 ## 수업메모 - display 정리 - none 없어진다 - inline 너비최소,가로,글자화 - inline 글자,a ,mg,span (iimg는 예외로 너비 마진패딩이 가능) - inline-block 너비, 마진, 패딩, 가능 - block 블록화,너비최대,세로 - flex,table - 네모 사이에 간격 - text 사이즈를 0 으로만들고 버티컬로 위로 옮기기 - 글자 쓰려면 따로 사이즈 설정해주기 - <.!-- -->로 간격 지우기도 가능 - 라이브러리 만들기 - inline-grid로 font 0 설정 - inline-grid > * font 크키, 버티컬, display설정 - 상자안에 네모 빈틈없이 채우기 - witdh 를 calc( % / n * t)로 쓰기 - 라이브러리 만들기 - w-n\/t 로 라이브러리 만들어 놓고 class 설정해서 해도됨 - 화면 대비 가로,세로 비율 설정 - 그냥 100%로 하면안되고 body와 html 의 크기에 100%기 때문에 둘다 100% 줘야함 - 화면의 50%만 주려면 부모다 100% 주고 50%할꺼에 높이 50% 주기 - 귀찮으니 설정할거에 높이주고 vh 쓰면 됨 # 2021-11-24, 10일차 - box-sizing - border-box - 영역 크키에 맞춰짐 - 컨테인 - 배경사이즈를 con 으로 설정해놓고 그 안에 메뉴 칸 이미지 칸 나눠서 작업 # 2021-11-25, 11일차 - 이미지box - con과 비슷하게 이미지에 상자 역할을하는 걸 설정하고 그안에서 이미지 다듬기 - 음수 margin - 음수 마진을 준방향으로 안으로 안들어오고 밖으로 나감 - left right 안될때는 보내려고 하는 반대방향 margin auto 줘야함 - 아이템 너비 수식 - con 전체에 5개의 아이템을 넣고 사이 여백 20을 주기 - calc:(100% / 5 - 20px * (5 - 1) / 5); - 100/5 한줄의 한 아이템의 크기 - 20*(5-1)/5 사이 여백의 개수 만큼 아이템 줄이기 - 음수 마진으로 하기 - 아이템의 크기를 100%/n 으로 주고 패딩으로 여백주기 - 여백준 만큼 아이템box에다가 음수마진 주기 # 2021-11-26, 12 일차 - position - 0

종류	너비	본질	겹침허용	이동
absolute,fixed	최대한 줄어든다	유령화, 유령의 집화	겹치는게 가능	위아래왼오 이동가능, 기준 부모
relative	그대로 유지	유령의 집화	겹치는게 불가능	위아래왼오 이동가능, 기준 현재위치
static	그대로	사람화	겹치는게 불가능	-

-transform - 미세조정 transformX,Y(px) # 2021-12-1, 13 일차 ## 수업 메모