$$config title: 오지연 공부위키 keywords: - IT - 공부위키 $$ - [https://slog.gg/p/1314](https://slog.gg/p/1314) - [https://codepen.io/pen](https://codepen.io/pen) - [https://slog.gg/p](https://slog.gg/p) - [오지연님 LOG, to2.kr/dkN](https://to2.kr/dkN) - [오지연님 기술, to2.kr/dkT](https://to2.kr/dkT) - [오지연님, 블로그 slog.gg/b/1504](https://slog.gg/b/1504) # 관련 - [관련링크 chg](https://codepen.io/jangka44/live/eYgMGYX) # 2021-11-11, 1일차 ## 크롬 명령어 - Ctrl + W : 탭 닫기 - Ctrl + T : 새 탭 열기 - Ctrl + PgUp : 좌측 탭으로 이동 - Ctrl + Down : 우측 탭으로 이동 - Home : 문서 최상단으로 이동 - End : 문서 최하단으로 이동 - Window + 방향키 : 창 위치(방향) 바꾸기 - Shift + a : 전체선택 - Shift+ Home/End : 커서 위치 - Ctrl + 클릭 : 새탭에서 열기 - Tab반대로 = Shift Tab - ------ ## 타이핑 - Ctrl + Z : 이전 히스토리 작업 불러오기 - 최근 몇십개의 작업만 기억 - Ctrl + Y : 이후 히스토리 작업 불러오기 - ------ ## HTML, CSS - 엘리먼트는 여는 태그, 내용, 닫는 태그로 구성된다. - 태그를 사용하는 이유는, 문서의 각 부분을 구분하기 위해서이다. - 엘리먼트는 배우이다. - CSS는 코디이다. - CSS가 엘리먼트를 찾아가서 꾸며준다. - ------- ## 사용 가능 태그 - `

` - `

` - `` - `

` - 태그명 tab 엘리먼트 생성 - 태그명*숫자 tab 엘리먼트 여러개 (곱한 수 만큼) 생성 - font-size:~~px; , rem;(ex 3rem = 기본크기의3배) # 2021-11-12, 2일차 ## CSS display 속성 - display:block; - 너비 : 너비가 지정되어 있지 않는 경우, 최대한으로 늘어난다. - 높이 : 높이가 지정되어 있지 않는 경우, 최소한으로 줄어든다.(늘어나지 않고 글자에 맞춰진다.) - display:inline-block; - 너비 : 너비가 지정되어 있지 않는 경우, 최소한으로 줄어든다. 글자화된다. - 높이 : 높이가 지정되어 있지 않는 경우, 최소한으로 줄어든다.(늘어나지 않고 글자에 맞춰진다.) - display:block; - 배열 : 한줄에 무조건 한개씩 나타난다. (한 줄 다 씀), 세로배열 - display:inline-block; - 배열 : 한줄에 최대한 여러개가 나타나며 상황에 따라 줄바꿈 되기도 한다. 가로배열 - display:none; - 없어진다. - 정렬 - block; = 스스로 margin-left, margin-right를 사용해서 정렬 - inline-block; = 부모의 text-align에 의해서 정렬 - 예외 - a, img, span 엘리먼트는 기본적으로 display가 inline이다. - inline요소에는 width, height, margin, padding 속성이 제대로 적용되지 않는다. - 알아낸 사실 - div, section, nav, article의 display 속성 기본값은 block 이다. - div, section, nav, article의 width 속성 기본값은 auto 이다. - div, section, nav, article의 height 속성 기본값은 auto 이다. ----- ## CSS ### 글자 꾸미기 - 글자 두께 조절 - font-weight:normal; (기본값) - font-weight:bold; (굵게) - 글자 크기 조절 - font-size:3rem; - font-size:140px; - 자간 조절 - letter-spacing:-10px; - 글자 색상 조절 - color:#787878; - rgba:(255,255,255,1) - (ex. rgba 함수의 인자 - 인자 1(red) : 0 ~ 255 까지 넣어서 실험 - 인자 2(green) : 0 ~ 255 까지 넣어서 실험 - 인자 3(blue) : 0 ~ 255 까지 넣어서 실험 - 인자 4(alpha, 투명도) : 0 ~ 1 까지 넣어서 실험) ## HTML ### 엘리먼트, 부모, 자식, 형제 관계 - 나를 감싸는 엘리먼트 : 부모 엘리먼트 - 내가 감싸는 엘리먼트 : 자식 엘리먼트 - 같은 부모를 둔 엘리먼트 : 형제 엘리먼트 - table>tr(곱)2>td(곱)6[탭키] 총 엘리먼트 개수 : 9개(table 1개, tr 2개, td 6개) table의 자식 엘리먼트 개수 : 2개 table의 후손 엘리먼트 개수 : 8개 ex) table>thead>trx10>tdx10{숫자} ex) table>thead>trx10>tdx10{no,$}=> $ : 숫자가 순서대로 ex) table>thead>tr+tbody thead와 tbody가 형제 관계로 tbody를 table의 자식으로 빠져 나오게 하려면 => table>(thead>tr)+tbody 또는 table>thead>tr^tbody --- ### table 태그 - `

` = 표 만들기 - `` = 테이블의 머리 - `` = 테이블의 몸통 (주요 내용) - `` = 줄 (행) - `` = 칸 (열) - `` = 부가정보 - table에 border 값을 줬을 때 테두리가 생김 - `

` - css에서 table{border-collapse:collapse;} = 표(table)의 테두리와 셀(td)의 테두리 사이의 간격을 없앰 --- ### a 와 br 태그 - `` = 링크 이동 버튼 엘리먼트 display:inline-block; (= inline엘리먼트) - 속성 - `` 이동할 주소 - ``새 창으로 띄울지 여부 정함 - `
` = 줄바꿈 엘리먼트 (닫는 태그 쓰지 않음) --- ### 젠 코딩 - a[href="https://www.naver.com"][target="_blank"]{네이버로 이동}+br +a[href="https://www.google.com"][target="_blank"]{구글로 이동}+br +a[href="https://daum.net"][target="_blank"]{다음으로 이동} = 공백 없이 끝까지 다 이어 붙여서 써야함 # 2021-11-15, 3일차 붙여넣기 시 탭 활성화 안될 때 잘라내기 붙여넣기 후 다시 탭 -------- ## 웹 코딩 ### 선택자 후손/자식 선택자 ` ` : 후손선택자 ` > ` : 자식선택자 ` + ` : 인접 동생선택자 선택자가 길면 우선순위가 높다 - `>` : 자식 선택자 ``` 예) div>section*2>nav[tab키 입력] = div section nav /nav /section section nav /nav /section /div ``` - - `+` : 인접 동생선택자 ``` 예) div+section[tab키 입력] ``` ------ ### 정렬 - text-align: 글자 정렬 - text-align:left; - text-align:center; - text-align:right; - 공백 또한 한 글자로 취급한다. - 엔터를 하거나 또는 글자를 아무리 띄워도 한 글자로 취급한다. /절대로 자신을 정렬하는게 아니라. 자신이 가지고 있는 텍!스!트!를 정렬한다./ 글자가 아닌 엘리먼트도 정렬할 수 있을까? = 힌트 : display:inline-block 하면 엘리먼트가 `텍스트 화` 된다.
기본 엘리멘트의 display 속성은 block a의 display 속성은 inline-block -> div안에 a가 있다면 a는 `텍스트 화` 되어 한 글자로 취급 inline 요소와 text align 속성을 함께 주면 의미 없는 이유 너비가 이미 최소화 되어 있는 상태에 정렬할 공간 자체가 없기 때문 block 요소끼리도 마찬가지 최대의 안에서 최대가 정렬 될 공간이 없기 때문에 의미가 없다. ----- ### 공백 문자 - - 공백 문자 ( 공백 한 칸을 의미 ) - 두칸 이상 띄울 때 ---- ### 텍스트 속성 - text-decoration:none; 텍스트의 여러 효과를 설정 또는 제거 ---- ### hover - 마우스 올림을 받은 div ``` 예) a:hover { background-color:black; } ``` ---- ### css - border:~px solid 색상; = 테두리 상자 - margin / padding = border경계로 나뉨 - margin = 바깥 쪽 여백 - padding = 안 쪽 여백 # 2021-11-16, 4일차 ## emmet 명령어 ### 명령 구조 - 1st nav > section*7{아이템$} - 2nd nav > (section{아이템$}+{|})*7 - 3rd nav > ({|} + section{아이템 $})*7 - 4th nav > ({|} + section{아이템$})*7 + {1} - 5th, complete! nav > ({|} + section > a[href="#"]{아이템$})*7 + {|} ## a의 display - a = display:inline; inline-block과 유사하지만 width, height, margin, padding 값이 적용 되지 않는다. ## 이미지 태그 [https://picsum.photos/](https://picsum.photos/) ### 이미지 - img 태그는 열고 닫지 않는다. - img는 자식을 가질 수 없다. - img의 display는 inline이다. - src="이미지 URL" - 이미지는 비율 이라는 속성을 가지고 있어 height나 weight 둘 중 하나만 주면 다른 하나가 비례하여 맞춰진다. 웬만하면 하나를 주는 것을 추천. ## 이미지 태그 css ### 비율 변경했을 때, css이미지 설정 높이(height) 나 너비(width) 둘 중 하나만 이나 둘의 비율을 맞춰 변경할 땐 이상 없지만 높(height)와 너비(width)의 비율을 무시한 채 아무렇게나 바꾸면 이미지가 이상하게 보임 - object-fit - object-fit:contain : 박스 안의 이미지가 비율을 유지하도록 한다. (공백 O) (잘리는 부분 없음) - object-fit:cover : 박스 안의 이미지가 넘쳐도 꽉 차도록 한다. (공백 X)(잘리는 부분 있음) - object-position : 50% 50%; -> cover의 DEFAULT. 첫 번째 수치는 이미지의 가로 위치 - img에 padding을 주는 것은 좋지 않다. - 다른 태그로 감싸거나 display를 inline-block으로 변경하여 padding을 줌. # 21-11-17, 5일차 ## CSS ### margin과 padding margin - 박스의 바깥 쪽 여백 (margin의 기본값은 0) padding - 박스의 안 쪽 여백 ------ - margin/padding - left/right = 좌,우 - margin/padding - top/bottom = 위 아래 - margin-left:0; = 왼쪽으로 정렬 - margin-rignt:0; = 오른쪽으로 정렬 - margin - (left, right) : auto; = 가운데 정렬 (놓아버린다=포기한다는 뜻) =>둘 다 놓으면 가운데 정렬 넓이 값이 정해져있을때 margin left,right 둘 중 하나는 포기 해야함 margin의 이해 =>왼쪽을 놓는다 = 오른쪽으로 이동(margin의 기본값은 0이기 때문) 오른쪽을 놓는다 = 왼쪽으로 이동 block 요소 정렬 - inline-block, inline : 부모의 text-align 속성에 의해 수동적으로 정렬됨. - block : margin을 이용하여 능동적으로 정렬함. - 우측 : margin-left:auto; - 가운데 : margin:0 auto; - 좌측 : margin-right:auto; inline요소는 스스로 정렬하지 못하고 부모에 의해 수동으로 정렬된다 block요소는 마진을 이용해서 스스로 정렬이 가능하다. display:inline에는 width, height, padding, margin이 제대로 작동하지 않는다. (img, a, span 등) = > display:inline-block;으로 변경 ### 모든 보이는 엘리먼트의 부모는 body이고 그의 부모는 html이다. ``` 예) div의 부모 = body body의 부모 = html ``` ### 선택자 - 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) 등 수식을 넣어 활용가능 - 참고 [https://thrillfighter.tistory.com/575](https://thrillfighter.tistory.com/575) [https://lalacode.tistory.com/6](https://lalacode.tistory.com/6) # 21-11-18, 6일차 ## id, class 선택자 태그가 div인 것! = div{} id가 a 인 것! = #a class가 a 인 것! = .a - id와 class - id - 중복 되어서는 안 된다. ``` 예)

#a { background-color:green; } 또는 div#a { background-color:gold; } ``` - class - 중복이 가능하다. - 여러개 사용이 가능하다. ``` 예)

.b { background-color:gold;} .c { color:black;} ``` - 붙여 쓰는 것은 중복 조건 ~ 이면서. - 선택자 - ' ': 후손 - `+`: 인접한 형제 - `~`: 형제 모두 - `*`: 모두 - :only-child: 형제 없는, 누군가의 유일한 자식 ## border-radius - border-radius - 모서리를 둥글게 한다. ## cursor - cursor:pointer - 커서를 포인터로 변경한다. [참고] css cursor [MDN](https://developer.mozilla.org/ko/docs/Web/CSS/cursor) [W3Schools](https://www.w3schools.com/cssref/pr_class_cursor.asp) ## inherit - inherit - 상속. 부모를 따라한다. - color의 default는 black이 아니라 inherit이다. - inherit을 default로 가지고 있는 태그 - font-size, text-align, color, text-decoration, font-weight, letter-spacing, font-style 등 font-size = inherit; font-weight = inherit; letter-spacing =inherit; color =inherit; background-color = transparent; width = auto; height = auto; margin = 0; 상속되지 않음 padding = 0; 상속되지 않음 display = 대부분 block 상속되지 않음 (a, img, span 제외) border = none; border-radius = 0; cursor = auto; text-align = inherit; text-decoration = inherit; span은 링크 걸 수 없음 ## 노멀라이즈 - 노멀라이즈 - inherit 값을 이용해 엘리먼트를 평범하게 만든다. - 노멀라이즈는 CSS의 맨 윗 부분에 하는 것이 좋다. - body 노멀라이징 : body { margin:0; } - a의 노멀라이징 : inherit - 선택자가 여러 개일 때, 긴 것이 적용된다. - class - 클래스를 하나만 써야 한다면 가장 최상위 태그에 사용한다. - 가장 많이 사용하는 태그는 div이다. - 노말라이즈 외우기 ``` body { margin:0; } .inline-grid { font-size:0; } .inline-grid > * { display:inline-block; vertical-align:top; # 21-11-19, 7일차 ## 리스트 - 리스트 - 서로가 동등할 때에 리스트를 사용한다. - ul: Unordered List (순서가 없는 리스트) - ol: Ordered List (순서가 있는 리스트) - li: List Item (display default 값은 block) ul이나 ol의 자식은 무조건 li여야 한다. 중간에 div 태그 쓸 수 없음(하위 태그에 div가 있을 수 없음) - ol : 목록(순서 있는 목록) - ul : 목록(순서 없는 목록) - li : 항목(목록에 포함된) - 리스트 규칙 - ul < li < a는 불변의 법칙이다. - ul은 ul을 자식으로 둘 수 없다. - a는 대부분의 경우 오직 텍스트만 가질 수 있다. - li는 li를 자식으로 둘 수 없다. - ul의 자식은 무조건 li 여야 한다. - li는 그 어떤 것도 자식으로 가질 수 있다. [참고](https://www.codingfactory.net/10225) li [참고](http://tcpschool.com/html-tags/li) ul [참고](http://tcpschool.com/html-tags/ul) ol [참고](http://tcpschool.com/html-tags/ol) ## ul li 노멀라이즈 list-style:none; = 리스트 점 없애기 padding:0; margin:0; ## h 노멀라이즈 - h1~h6 - 숫자가 작을수록 큼. margin:0; font-size:1rem; font-weight:normal; # 21-11-22, 8일차 - 82강 - 중앙 둥근모서리 메뉴 구현 튜토리얼 - 83강 - 3가지 메뉴 구현 - display:flex - FLEX [연습](https://flexboxfroggy.com/#ko) [참고](https://studiomeal.com/archives/197) [참고](https://thrillfighter.tistory.com/489) [참고](https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox) [참고](https://developer.mozilla.org/ko/docs/Web/CSS/flex) # 21-11-23, 9일차 - 84 ~ 91강 + 인접동생 ~ 동생들 display:none = 없어진다 display:inline(너비 높이 마진 패딩 적용x = a, span, 글자 등),inline-block(img) = 글자화 너비최소축소, 가로 display:block = 블럭화, 너비최대확대, 세로 display:flex,table = block calc css 3가지 - 노말라이즈 - 라이브러리 - 커스텀 ## 88강 /* 노말라이즈 */ ``` body, ul, li { margin:0; padding:0; list-style:none; } ``` /* 라이브러리 */ ``` .inline-grid { font-size:0; } .inline-grid > * { display:inline-block; vertical-align:top; font-size:1rem; } .w-1/6 { width:calc(100% / 6); } .w-2/6 { width:calc(100% / 6 * 2); } .w-3/6 { width:calc(100% / 6 * 3); } .w-4/6 { width:calc(100% / 6 * 4); } .w-5/6 { width:calc(100% / 6 * 5); } .w-full { width:100%; } ``` ## 89강 화면 높이 대비 비율로 엘리먼트 높이 조절, 중첩퍼센트 - html>body>section ``` html 100%->body 100%->section 100% ``` = 모든 부모에게 다 적용해 줘야 함 vh = 부모 높이 신경 X 화면에 맞춰진다. vh - vh 요소는 값의 100분의 1의 단위 # 21-11-24, 10일차 - 그리드로 계단식 비율 예제 - box-sizing:border-box - inline-grid에box-sizing 추가 => 컨테이너로 레이아웃을 중앙에 모으고 너비 고정시키기 - 96강 = BMX 사이트 상단부분 구현 # 21-11-25, 11일차 ## 수행사항 (codesandbox) ``` CSS에 주석 노말라이즈 라이브러리 커스텀 상단바 메뉴바 상단이미지바 ----------- CSS 파일 분리 style 태그 사용 금지 link 태그로 적용 파일명 : common.css 웹폰트 적용 눈누 웹폰트는 폰트파일을 다운로드해서 설치할 필요가 없습니다. 로고 디자인 피그마로 작업 후 export zpat.info 을 이용해서 업로드 후 URL 생성 ``` ## 97~101강 - .img-box 클래스로 자식 이미지 주변에 여백제거 - 음수 margin 개요 - 아이템 너비 수식 - 그리드, 여백 음수마진 방법 - calc(250px - 15px) - calc(25% - 15px) - calc(25% - 60px / 4) - calc(25% - 20px * 3 / 4) - calc(100% - 20px * (4 - 1) / 4) =>이미지 개수가 바뀌면 숫자 모두 바꿔줌(4->3) calc(100% / 3 - 20px * (3 - 1) / 3) # 21-11-26, 12일차 ## position - static : 사람 모드, position의 default 값. 겹치지 않고 위아래로 배열된다. - relative : 사람 모드, 유령의 집(유령을 가둘 수 있다.) - absolute : 유령 모드, 유령의 집, 유령의 집에 구속됨(기본적으로 윈도우). 서로 영향을 미치지 않고 겹친다. 포토샵으로 치면 별도의 레이어가 된다. - 위치를 조정하지 않으면 그 자리에 나온다. - top, bottom, left, right 값을 모두 주면 width나 height를 주지 않아도 크기가 조정된다. - 유령 안에 유령이 있으면 그 유령을 가둔다. (default 값은 auto 이므로 값을 주고 싶지 않다면 0을 주어야 한다.) - position:absolute로 절대 좌표 값으로 위치를 지정했을때 중앙 정렬하는 법 ``` left:50%; - 화면의 전체 가로 수치에서 절반 만큼의 위치로 이동 transform:translateX(-50%); - 자신의 가로 수치의 절반 만큼 마이너스 이동 ``` ```

종류	absolute, fixed	relative	static
너비	최대한 줄어든다.	그대로 유지	그대로 유지
본질	유령화, 유령의집화	유령의집화	사람화
겹침허용	가능	불가능	불가능
이동	top, left, right, bottom으로 이동	-	-

``` ## transform - transform:translateX(-50%) translateY(-50%); - transform:translate(-50%, -50%); # 21-11-29, 13일차 ## white-space:nowrap; - 줄바꿈 금지 - 예)

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cupiditate veniam cum, corrupti praesentium sit, atque ad optio inventore omnis quod nostrum amet eveniet? Assumenda labore accusamus soluta adipisci, aliquam veniam?

```

``` ## overflow-x:auto; - 필요에 따른 스크롤바 생성 - 예)

```

``` ## overflow-x:scroll; - 스크롤바 무조건 생성 - 예)

스크롤바 무조건 생성

```

스크롤바 무조건 생성

``` ## overflow-x:hidden; & text-overflow:ellipsis; - 넘친 내용 숨김 & 넘친 내용 ... 으로 처리 - 예)

```