$$config title: 최근학 공부위키 keywords: - 공부모음 $$ # 2021-11-11. 1일차 https://codepen.io/rmsgkr5623/pen/YzrwNPm ## 크롬 명령어 - Ctrl + W : 탭 닫기 - Ctrl + T : 새탭 열기 - Ctrl + PgUp : 좌측탭으로 이동 - Ctrl + Down : 오측탭으로 이동 - Home : 문서 최상단으로 이동 - End : 문서 최하단으로 이동 - ## 타이핑 - Ctrl + Z : 이전 히스토리 작업 불러오기 - 최근 몇십개의 작업만 기억 - Ctrl + Y : 이후 히스토리 작업 불러오기 ## 웹페이지란? - 인터넷을 검색할 때 브라우저에 표시되는 문서. 주로 하이퍼텍스트 생성 언어인 에이치티엠엘(HTML)로 작성된다. 보통 문서 안에 하이퍼텍스트 링크가 있어 다른 웹 페이지나 사이트로 이동할 수 있다. ## HTML, CSS - 엘리먼트는 여는태그와 내용과 닫는태그로 구성된다. - 태그를 사용하는 이유는, 문서의 각 부분을 구분하기 위해서이다. - 엘리먼트는 배우이다. - CSS는 코디이다. - CSS가 엘리먼트를 찾아가서 꾸며준다. - HTML 은 문서의 내용 (뼈대 같은 역할) - JS 는 인터 렉션(장기 같은 역할) ## 코딩관련 주소 - github.com - https://codepen.io/accounts/signup/user/free - programmers.co.kr - https://studio.code.org/users/sign_up - https://www.typingclub.com/signup.html - https://www.figma.com/ - https://slog.gg/member/join - https://replit.com/signup?from=landing ## 오늘 배운 태그 - div : 요소는 플로우 콘텐츠를 위한 통용 컨테이너입니다. CSS로 꾸미기 전에는 콘텐츠나 레이아웃에 어떤 영향도 주지 않습니다. - section : HTML 문서의 독립적인 구획을 나타내며, 더 적합한 의미를 가진 요소가 없을 때 사용합니다. 보통 section 은 제목을 포함하지만, 항상 그런 것은 아닙니다. - nav : 문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구획을 나타냅니다. 자주 쓰이는 예제는 메뉴, 목차, 색인입니다. - article :문서, 페이지, 애플리케이션, 또는 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타냅니다. 사용 예제로 게시판과 블로그 글, 매거진 이나 뉴스 기사 등이 있습니다. - height : 높이 - width : 너비 - background-color : 홈페이지 뒷 배경 색깔 - font-size: 폰트 사이즈 지정 ~px; , rem;(ex 2rem = 기본 크기의 2배) # 2021-11-12. 2일차 ## Block, Inline-block 이해 block - 너비 : 너비가 지정되어 있지 않으면, 최대한 늘어난다. - 높이 : 높이가 지정되어 있지 않으면, 최소한으로 줄어든다. - 배열방향 : 한줄에 무조건 1개씩 세로 방향 inline-block - 너비 : 너비가 지정되어 있지 않으면, 최소한으로 줄어든다. - 높이 : 높이가 지정되어 있지 않으면, 최소한으로 줄어든다. - 배열방향 : 한줄에 최대한 많이 나온다 가로 방향 참고 주소: https://codepen.io/jangka44/pen/GRrxyKK?editors=1100 ## 태그 - letter-spacing :글자 사이 자간 을 주는 태그이다 ex) 10px--> 안 녕 - color : rgba(0.0.0.1) r,g,b 는 0~255까지 설정 가능 a는 0~1 까지 설정 가능 - table : 표를 만드는 태크 - td : 표의 열을 만드는 태그 - tr : 표의 행을 만드는 태그 ## Table - thead: 표의 머리 - tbody: 표의 몸통 - th: 글씨 굵기 진하게 - HTML에서 table에 border 값을 줬을 때 테두리가 생기게됨 ex) (table border="1") - CSS에서 border-collapse: collapse 로 테두리 선 을 얇게 조정할 수 있음. - table : 부모 > thead : 자식 > tr : 손자 느낌. - 부모 ( > ) /형재 ( + ) ex) table>thead>trx10>tdx10{숫자} ex) table>thead>trx10>tdx10{no,$} - br : 줄바꿈 태그 (br) 은 닫는 태크 를 안쓴다 ex) 안녕(두줄 뜀) ## 글자 꾸미기 - letter-spacing: 자간 조정 - - ex) letter-spacing: 5px; 안.....녕(온점 없다고 생각해주세요) - font-weight: 글자의 굵기 조정 (종류 bold, nomal) - font-size: 글자의 크기 조정 단위로는 rem(배 단위), px 을 주로 사용한다. ## a태그 - a태그: a태그 사이의 글자에 url 을 연결할 수 있는 태그. 기본적으로 inline-block의 속성을 띈다. - href="" "" 안에 이동할 링크를 첨부하여 url 연결 - a href="링크" 태그에 target="_blank" 의 속성을 추가하게 되면 새 창 에서 띄울 수 있으며 target="_self" 할시 현재탭에서 열기 기능이 있다. ex) (a herf="https://page.kakao.com/main" taget="_blank") ## 태그 사이의 부호 - 화살표 오른쪽: 부모와 자식 관계 엘리먼트 생성 - +: 형제 관계의 엘리먼트 생성 - [ ]: 속성값 입력가능 - { }: 내용 입력가능 # 2021-11-15. 3일차 ## 선택자 태그 - 후손/자식 선택자 : 후손선택자 .> : 자식선택자 .+ : 인접 동생선택자 선택자가 길면 우선순위가 높다 .> : 자식 선택자 ex) div>section*2>nav[tab키 입력] = div section nav /nav /section section nav /nav /section /div .+ : 인접 동생선택자 ex) div+section[tab키 입력] # 글자 정렬 - text-align: 글자 정렬 - - text-align:left; (왼쪽정렬) - - text-align:center; (중앙 정렬) - - text-align:right; (오른쪽정렬) - - text-align:justify; (양쪽 정렬) # 공백 또한 한 글자로 취급한다. 엔터를 하거나 또는 글자를 스페이스바 로 띄워도 한 글자로 취급한다. # css - 공백 문자: - text-decoration:none; 텍스트의 여러 효과를 설정 또는 제거 - hover:마우스 클릭했을시 깜빡임 효과 - border:dashed : 짧은 선으로 구성된 박스 - border:dotted : 점으로 구성된 박스 - border:solid : 선으로 구성된박스 - ex) div:hover { background-color:red; } - border:~px solid 색상; = 테두리 상자 색깔 - margin = 바깥 쪽 여백 - padding = 안 쪽 여백 # 2021.11.16. 4일차 ## 태크 - text-decoration:none; :밑줄 없애는 기능 - text-decoration:underline; :밑줄 생성 - object-fit:cover:비율유지 짤림 - contain:비율유지 빈공간 발생 - (img src="" alt=""):이미지 넣어주는 태그 # 상단 메뉴바 - 글자에 inline-block 을 줄 경우 : ㅡ로 정렬됨 - | 엘리먼트 에 너비 줄 경우 : 각 글자마다 박스 크기가 달라짐 - 글자 상자의 너비가 균일 하게 만들기 : 글자에 with값을 줘서 동일하게 만들 수 있음 - a태그에 block 속성을 줄 경우 : 너비를 가질수 있음( block 속성 a태그에 너비를 안 줄경우 : 부모 크기 상속받음) # 메뉴바 간단한 생성법 - nav>section*7{아이템 $} - 2nd) nav>({|}+section{아이템 $})*7 - 3rd) nav>({|}+section{아이템 $})*7+{|} - 4th)nav>({|}+section>a[href="#"]{아이템 $})*7+{|} # Lorem Picsum - 사이트 주소 : https://picsum.photos/ - https://picsum.photos/id/237(사진번호 변경시, 다른이미지)/200/300(뒤에 2숫자 가로*세로 길이)> 마음대로 숫자 변경해서 사이즈 변경 가능함. ## 2021.11.17. 5일차 # margin,padding 이란? margin - 박스의 바깥 쪽 여백 (margin의 기본값은 0) padding - 박스의 안 쪽 여백 # 이해 - margin/padding - left/right = 좌,우 - margin/padding - top/bottom = 위 아래 - margin/padding 숫자로 기입시 우선순위는 위 오른쪽 아래 왼쪽 순으로 값을 인식한다 - margin - (left, right) : auto; = 가운데 정렬 (놓아버린다=포기한다는 뜻) =>둘 다 놓으면 가운데 정렬 넓이 값이 정해져있을때 margin left,right 둘 중 하나는 포기 해야함 - display:inline에는 width, height, padding, margin이 제대로 작동하지 않는다. (img, a, span 등) # block 요소 정렬 - inline-block, inline : 부모의 text-align 속성에 의해 수동적으로 정렬됨. - block : margin을 이용하여 능동적으로 정렬함. - 우측 : margin-left:auto; - 가운데 : margin:0 auto; - 좌측 : margin-right:auto; # CSS태그 nth-child() :first-child : 첫 번째 자식 엘리먼트 :last-child : 마지막 자식 엘리먼트 div:nth-child(1) : div이면서 첫 번째 자식 div:nth-of-type(1) : div중에서 첫 번째 자식 (2), (2n), (4n), (2n+1), (7n+1), (3n) 등 수식을 넣어 활용가능 # 2021.11.18. 6일차 # id class ## id - id 전역 특성은 문서 전체에서 유일한 고유식별자(ID)를 정의합니다. 고유식별자의 목적은 프래그먼트 식별자를 사용해 요소를 가리킬 때와 스크립트 및 스타일 적용 시 특정 요소를 식별하기 위함입니다. - id 는 css 표기시 #으로 표기되며 한개만 들어간다(중복x) - ex) css #a{ font-size } ## class - class 전역 특성은 공백으로 구분한 요소 클래스의 목록으로, 대소문자를 구분하지 않습니다. 클래스는 CSS나 JavaScript에서 클래스 선택자나 DOM 메서드의 document.getElementsByClassName() (en-US)과 같은 메서드를 통해 요소에 접근할 수 있는 방법입니다. - class는 여러개 넣기 가능 띄어쓰기로 표시해야함 - - ex) div class="a b c" - class는 온점으로 표시(.) - - ex).a{ font-size } ## boder-radius - CSS border-radius 속성은 요소 테두리 경계의 꼭짓점을 둥글게 만듭니다. 하나의 값을 사용해 원형 꼭짓점을, 두 개의 값을 사용해 타원형 꼭짓점을 적용할 수 있습니다. - - 표기방법 border-radius: 30px; border-radius: 25% border-radius: 10% 30% 50% 70%; border-radius: 10% / 50%; border-radius: 10px 100px / 120px; border-radius: 50% 20% / 10% 40%; # cursor - CSS cursor 속성은 요소 위에 마우스 커서가 올라갔을 때 보여줄 모양을 지정합니다. # 68강 상단바 메뉴만들기 # HTML <.nav> <.div><.a href="#">Home<./div> <.div><.a href="#">Tutorials<./div> <.div><.a href="#">Articles<./div> <.div><.a href="#">Inspiration<./a><./div> <./nav> # CSS body{ background-color:black; } nav div a{ text-decoration:none; color:inherit; display:block; } nav{ text-align:center; background-color:pink; margin-left:450px; margin-right:450px; margin-top:50px; padding:20px; border-radius:20px; } nav div{ display:inline-block; width:110px; } nav div:hover a{ background-color:gray; color:red; } # 2021.11.19. 7일차 ## HTML태그 - ul 요소는 정렬되지 않은 목록을 나타냅니다. 보통 불릿으로 표현합니다 - li 요소는 목록의 항목을 나타냅니다. 반드시 정렬 목록(ol), 비정렬 목록(ul, 혹은 메뉴(menu) 안에 위치해야 합니다. 메뉴와 비정렬 목록에서는 보통 불릿으로 항목을 나타내고, 정렬 목록에서는 숫자나 문자를 사용한 오름차 순 카운터로 나타냅니다. - ol 요소는 정렬된 목록을 나타냅니다. 보통 숫자 목록으로 표현합니다. - ol ul (부모)은 중간에 div,nav(자식) 넣으면 안됨 무조건 ol li ul li 이런식 으로 표기 해야함 ## 컴포넌트란? - 컴포넌트 는 크게 두 개로 분리된다 Master componet 와 Instance 마스터 컴포넌트는 '자기 자신' 이라고 생각하고 인스턴스 는 '거울에 보이는 자기자신' 이라고 생각하면됩니다.내가 거울을 보고 어떤 행동을 하던 거울에 보이는 자기자신 은 똑같이 유지되는 이것을 컴포넌트라고 한다 # 2021.11.23. 9일차 ## CSS - vertical-align: CSS 속성은 inline 또는 table-cell box에서의 수직 정렬을 지정합니다. - - top middle bottom # 2021.11.24. 10일차 # 2021.11.25. 11일차 ## 홈페이지 구현 사이트 주소(https://k82l3.csb.app) ## CSS - inline-grid ex) 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일차 ## CSS - position 속성 정리 ![이미지](https://i.imgur.com/EiJ2oKL.png) 수직 정렬 position 이용 display: block인 엘리먼트에 position: absolute; 주기 top: 50%; , left: 50%; 주기. transform: translate(-50%, -50%); # 2021.12.01.16일차 # flex - 플렉스는 내가 만든박스에서 컨텐츠의 위치를 정하는 속성이다(부모 요소에 CSS를 추가한다.) # justify-content - justify-content:내부 요소의 가로 위치를 변경하는 속성 - justify-content:flex-start;:기본값이며,요소를 왼쪽에 배치 - justify-content:flex-end;:요소를 오른쪽에 배치 - justify-content:center;:요소를 중앙에 배치 - justify-content:space-between;:요소의 주변(위,아래,좌,우)에 여백을 생성한다 - justify-content:space-around;:요소끼리(좌,우)만 서로 미는 것 # align-items - align-items:내부 요소의 세로위치를 변경하는 속성 - align-items:stech;:기본값이며,높이가 정해져 있지 않을 때 박스의 높이만큼 늘려준다.부모가 커지면 자식도 커진다. - align-items:flex-start;:요소를 상단에 배치 - align-items:flex-end;:요소를 하단에 배치 - align-items:center;:요소를 중단에 배치 - align-items:baseline;:안에 있는 컨텐츠끼리 중앙에 맞춤 ## flex-direction - flex-direction : 내부 요소의 정렬할 방향을 결정합니다. - flex-direction: row 가로로 정렬 합니다. - flex-direction: row-reverse 가로로 정렬 합니다. 순서를 반대로 변경합니다. - flex-direction: column 세로로 정렬 합니다. - flex-direction: column-reverse 세로로 정렬 합니다. 순서를 반대로 변경합니다. # flex-wrap - flex-wrap : 내부 요소들을 한줄 또는 여러줄로 나타냅니다. - flex-wrap: nowrap; 요소를 한줄에 나타냅니다. - flex-wrap: wrap; 요소를 여러줄에 나타냅니다. (float 속성과 같아짐) - flex-wrap: wrap-reverse; 요소를 여러줄에 나타냅니다. 순서를 반대로 변경합니다. # 2021.12.07.19일차 ## @media - 미디어 쿼리 (반응형) - - 예제) @media (min-width : 800px){ .section > div { width : 800px;} --cc : 5; //-->width가 800px - img 5개 보여준다. } @media (max-width : 799px) and (min-width : 501px){ .section > div { width : 800px;} --cc : 4; //-->width가 799-501px - img 4개 보여준다. } @media (max-width : 500px){ .section > div { width : 500px;} --cc : 3; //-->width가 500px - img 3개 보여준다. } ## grid inline-grid 음수마진(x) : 숫자가 많음. 음수마진 : 추가 엘리먼트, 애매한 여백 발생 flex-grid 추가 엘리먼트 x 숫자 입력 간단 # 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; # 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-21, 32일차 ## CSS - con-min-width 반응형에서는 con-min-width 쓰면안됨 - 이미지 높이를 부모에 맞추기 img파일에 height: 100%; , object-fit: cover; 양 쪽이 조금 잘리더라도, 비율을 유지하면서 커짐. # 2021-12-30, 41일차 ## JQuery 선택자 - prev() : 인접 형 - next() : 인접 동생 - next().next() : 인접 동생의 인접 동생 - children() : 자손 - find('*') : 후손 - parent() : 부모 - siblings() : 형제 자매들(모두) - index() : 형제들 중 순서 - this 이벤트 당사자 클릭 당한 녀석 this를 변수로 두는 일반적인 관례 let $this = $(this);