$$config title: 공부정리 keywords: - 사이트 - ... $$ # 사이트 - [수업주소](https://slog.gg/p/10268) - [코드팬](https://codepen.io/) - [깃허브](https://github.com/) - saco960@gmail.com --- # 기타 사이트 - [무료이미지호스팅](https://www.zpat.info/) - [연습용 이미지 다운로드 사이트](https://picsum.photos/) - [CDNJS 주소](https://cdnjs.com/) - [호환성검사 사이트](https://caniuse.com/) - [codepen Top-100](https://codepen.io/2021/popular/pens/) - [주소단축 사이트](https://to2.kr/) 피그마 --- ## 불러오기 사이트 - [폰트어썸](https://fontawesome.com/icons?d=gallery&p=2&m=free) - [테일윈드 치트시트 주소](https://nerdcave.com/tailwind-cheat-sheet) - [테일윈드 주소](https://tailwindcss.com/) - [AOS](http://michalsnik.github.io/aos/) ## 색상 주소 - [컬러헥스](https://www.color-hex.com/) 색상정보 확인 - [컬러헥사](https://www.colorhexa.com/) 색상정보 확인 --- - [그라비언트](https://www.grabient.com/) 그라디언트 조합 --- - [2-color](https://2colors.colorion.co/) 2가지 색상 조합 - [컬러헌트](https://colorhunt.co/) 여러 색상조합 # 연습 사이트 ## 선택자 연습 - [css dinner](https://flukeout.github.io/) ## 자바스크립트 연습 - [code.org_3 연습](https://studio.code.org/s/course3) - [code.org_4 연습](https://studio.code.org/s/course4) ## 영타연습 - [영타연습](https://www.speedcoder.net/) # 공부자료 ## float - [float](https://webclub.tistory.com/606) ## Flex - [flex__공부자료](https://studiomeal.com/archives/197) - [flex-basis 공부자료](https://moo-you.tistory.com/384?category=308744) - [flex-basis 설명](https://codepen.io/kimleehong/pen/qBxVJMx?editors=1100) - [flex-basis, flex-shrink, flex-grow 이해해보기](https://cdpn.io/pen/debug/adLPwv) - [flex-1__공부자료](https://heewon26.tistory.com/275?category=797490) - [flex-1__설명](https://codepen.io/kimleehong/pen/xxYLmKZ?editors=1100) - [자주쓰는 기능들과 주의할 점](https://codepen.io/kimleehong/pen/RwMpZqg?editors=1100) --- - [플렉스 개구리](https://flexboxfroggy.com/#ko) - [플렉스 게임](http://www.flexboxdefense.com/) ## AOS - [AOS-참고 자료](https://inpa.tistory.com/entry/AOS-%F0%9F%93%9A-%EC%8A%A4%ED%81%AC%EB%A1%A4-%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98-Animate-On-Scroll#data-aos_%EC%98%B5%EC%85%98_%EC%86%8D%EC%84%B1) - data-offset : 걸리는 위치값이고 정수사용 가능(음수 사용 가능 하다는 얘기 : -807) - data-offset : 0은 내용물이 화면에 보이기 시작한 순간을 의미하고, 설정을 하지 않았을 시에는 0 보다 조금 더 위인 하단부에 내용물이 보일 때 작동한다. - AOS JQ 로 한번에 바꾸는 법 ``` ex) AOS.init({ once: true, duration:1000 }); ``` # 웹 정리 ## 박스 - 색상 : background-color:blue; - 넓이 : width:50 (px, %, vw); - 높이 : height:100 (px, %, vh); - calc(100% / 7); : 계산 - vw / vh : 현제 스크린 크기에 맞춰 상대적 크기를 반환 (1 = 현재 스크린 크기 1/100) - 테두리: border:10px/*(두께)*/ solid, dashed/*(형태)*/ currentcolor/*(색)*/; - 모서리: border-radius : 왼쪽위 오른쪽위 오른쪽 아래 왼쪽 아래(px; , %;) - 박스의 안쪽 여백 : padding 상하 좌우(px, %, auto) - 박스의 바깥족 여백 : margin 상하 좌우(px, %, auto) - margin-right:100px; - margin-left:100px; (margin 사용하면 block도 가로 정렬 가능) `블락 가운데 정렬은 마진 사용하기!!!!(margin : 0 auto;)` - 그림자: box-shadow: x축 / y축 / 흐릿한값 / 퍼짐값 / 색상; - 그림자 여러개 만들기 가능(box-shadow 여러번 쓰면됨 - transition 사용가능 ## 속성 - display - block : ex) div, section, nav, article 등 - inline-block : 한줄에 여러개 나올 수 있다, 내용물 높이와 너비에 자동으로 맞춰지고 내용물이 없을 시 너비, 높이 둘 다 지정해야 나온다. - inline : ex) span, a, img - none : 화면에 나오지 않음 - :hover : 마우스를 올려두었을 때의 상태를 선택 - transition : 변경이 되기 까지의 시간을 설정 ``` div { - 속성: transition-property: width; - 기간 : transition-duration: 2s; - 시기 선택: transition-timing-function: linear; - 지연 : transition-delay: 1s; } ``` - vertical-align:top; - box-sizing:border-box; : 박스 사이즈 내부의 보더값이나 패딩들이 박스 사이즈를 넘지 못하게한다 - 변수이용: ``` :root{ --cc : 5; --bg-gray-300:#ccc; } 에 변수 쓰고 background-color: var(--bg-gray-300); - var(변수) 쓰기 ``` - position : 위치를 지정하는 방식을 정하는 css 속성 - absolute : 절대적인 위치 - width값을 주지 않으면 최소한으로 줄어든다. - top, right, bottom, left 값으로 위치 조절이 가능하다. - 겹치는 거 불가능 - relative : 상대적인 위치 - top, right, bottom, left 값으로 위치 조절이 가능하다. - 현재 위치를 기준으로 이동된다. - 겹치는 거 가능 - static : position의 기본 값 - 겹치는 거 불가능 - white-space - white-space:nowrap; : 줄바꿈하지 못하게 만든다. - overflow : 모든 넘친 부분 - overflow-x : x축으로 넘친 부분 - overflow-y : y축으로 넘친 부분 - visible : 기본값, 넘쳐도 보이게 한다. - hidden : 넘치면 숨기게 한다. - scroll : 넘쳐도, 안 넘쳐도 스크롤이 생긴다. - auto : 넘칠 때만 스크롤이 생긴다. - text-overflow : 넘쳐서 숨겨지는 텍스트 ... 처리 - hidden: 넘쳐서 잘린 부분을 ... 으로 나타내 준다. - ellipsis; : 영어는 단어 단위로 줄바꿈이 되어서 알파벳 단위로 줄바꿈이 되도록 바꾸는 역할 - 전제 조건 : 1. white-space:nowrap; 2. overflow-x:hidden; 을 같이 써줘야 한다. --- - 여러줄 나오게 만들 때 - 여러 줄로 나와야 하기 때문에 white-space는 사용하지 않았습니다. - display: -webkit-box; - webkit 브라우저 엔진을 사용하고 있는 브라우저(Chrome, Safari)에만 사용이 가능합니다. - 표준화가 되지 않은 속성이기 때문에 인터넷 익스플로러에서는 작동하지 않는다! - webkit-line-clamp: 2; : 보여줄 라인 수 - webkit-box-orient: vertical; : 박스의 흐름 방향을 지정 - webkit-line-clamp를 주려면 display를 -webkit-box로, -webkit-box-orient를 vertical로 지정해야만 작동을 한다 - z-index:-1; - 포지션은 전부 z-index 속성을 갖고 이걸 레이어라고 생각하면 편함 - 만약 1를 주면 가장위로 올라가 1준 것 끼리경쟁 - ::before / ::after : 가상선택자 - `{ content:""; }` = 필수로 작성 - before는 ::after 뒤로 정렬된다. - 미디어쿼리 - 미디어 쿼리 문법 : `@media only|not 매체유형 and (조건문) { CSS 코드 }` - only|not 거의 무조건 only를 쓰고 생략이 가능해서 거의 생략합니다. 생략할 경우 기본값은 only */ - 미디어 쿼리를 지원하는 사용자 에이전트만 미디어 쿼리 구문을 해석하라는 명령 */ - 매체유형에는 all(모든 매체), print(프린터 기기), screen(컴퓨터, 태블릿, 스마트폰 등), speech(스크린 리더, 스피치) 등이 있음. */ ``` @media all and (조건) {} @media print and (조건) {} @media screen and (조건) {} @media speech and (조건) {} ``` - all, print, screen이 가장 많이 쓰이는데 생략이 가능해서 생략하셔도 됩니다. 생략할 경우 기본값은 all */ - and는 논리적으로 ‘AND’ 연산을 수행해 앞뒤 조건을 모두 만족해야 한다는 것을 의미 */ - only와 매체유형을 생략할 경우에는 작성하지 않아요! 생략! - 조건문이 참일 때 CSS 코드 처리 - 조건문은 두 가지 이상이 들어갈 수 있는데 and나 ,(콤마)로 연결해 줍니다 - CSS코드는 평소에 작성하던 방식 고대로 써주시면 됩니다! - 한 줄 요약 - `@media (조건문) {코드}` 만 외워두시면 됩니다! - max-width: 이하일 때 - min-width: 이상일 때 - 컴퓨터 화면을 우선으로 생각할 때 max-width, 넓은 해상도부터 시작 - 모바일 화면을 우선으로 생각할 때 min-width, 좁은 해상도부터 시작 - 화면이 바뀌는 지점들을 breakpoints라고 한다. - web docs(웹 문서) : orientation (방향) - portrait : 모바일에서 세로 방향일때 작동 - landscape : 모바일에서 가로 방향일때 작동 ``` @media screen and (orientation: portrait) { 태그 { 속성 : 속성값 } } ``` ``` @media screen and (orientation: landscape) { 태그 { 속성 : 속성값 } } ``` - float:특정 요소를 떠있게, 흐르도록, 부유하게 하도록 하는 속성 - left : 요소를 왼쪽 방향으로 부유하게 설정 - right : 요소를 오른쪽 방향으로 부유하게 설정 - none : 기본값(default), 요소를 띄우지 않는다.) - `플롯 속성을 사용할 요소는 position 속성의 absolute 값과 양립할 수 없습니다.` - 애니메이션 0글자0 글자 사이즈 : font-size: (30px, 3rem;) *( font-size:0; : 너드값 없애기) 글자 굵기 : font-weight: (bolder, bold, lighter, 700) 글자 색상 : color: (yellow, rgb(200,110,0), ) 가로정렬 : text-align: (center, right, end ) 세로 정렬 (- height:100px; - line-height:100px;) 자간설정 : letter-spacing: (30px, -3rem;) 줄바꿈 : - white-space: nowrap; - 영문 단어 단위로 줄바꿈 : word-break: break-all; 윗첨자, 아랫첨자 : - _아래첨자 - ^윗첨자 공백 한칸을 의미 (아이템 사이의 너비주기 - - width :30px; ) (height:40px; line-height:40px;) > 같이 써야 가운데 정렬(그냥 그렇게 외우기) 그림자: text-shadow: x축 / y축 / 흐릿한값 / 퍼짐값 / 색상; ( * - 그림자 여러개 만들기 가능(text-shadow 여러번 쓰면됨 - transition 사용가능) 글자선긋기 - underline : 밑줄긋기 - overline : 윗줄긋기 - line-through : 가운데 줄긋기 0태그0 : 링크를 걸어주는 태그 - _self : 현재 위치에서 열어준다. - _blank : 새창에서 열어준다.
: 줄바꿈 태그

: 순서 태그 0테이블0 : 테이블(표) 태그 : 테이블의 열 (속성 : block)

: 각 행과 열의 첫번째 칸, font-weight:bold, 중앙 정렬 (속성 : inline-block)	: 테이블 데이터 (속성 : inline-block) 0이미지0 img의 display 속성의 기본값은 inline이다. width와 height 중 하나만 주어도 다른 하나의 값이 조정된다. object-fit : 오브젝트 채우기 object-fit:fill;: 기본값, 요소에 크기에 맞게 꽉채워 보여줌, 필요한 경우 오브젝트가 늘어나거나 찌그러집니다. object-fit:cover; : 요소의 가로나 세로크기에 가능한 맞춰져 크기가 조정되고, 비율은 고정된 상태입니다. 개체 크기에 맞게 잘립니다. 가득 채울때까지 확대됩니다. object-fit:contain; : 요소의 가로나 세로크기에 가능한 딱 맞춰져 크기가 조정되고, 비율은 고정된 상태입니다. 딱 맞추기 때문에 남는 공간이 발생할 수 있습니다. object-fit:none; : 원본이 가운데에 나온다. object-position : 오브젝트 위치 조정 object-position: 가로위치 세로위치; 속성값 : px, %, left/right/center/top/bottom background-image(css) - background-position = object-posion - backgroun-repeat:no-repeat; : 이미지 반복방지 0노멀라이즈0 body ul, li { /* 앞에 점 없애기 / list-style:none; / 안쪽 여백 제거 / padding:0; / 바깥쪽 여백 제거 / margin:0; } a { text-decoration: none; color: inherit; } img, video{ display:block; width:100%; } / 라이브러리 / html>body { box-sizing:border-box; } 피그마 다운 : https://www.figma.com/downloads/ > Desktop app for Windows

: 각 행과 열의 첫번째 칸, font-weight:bold, 중앙 정렬 (속성 : inline-block)

: 테이블 데이터 (속성 : inline-block) 0이미지0 img의 display 속성의 기본값은 inline이다. width와 height 중 하나만 주어도 다른 하나의 값이 조정된다. object-fit : 오브젝트 채우기 object-fit:fill;: 기본값, 요소에 크기에 맞게 꽉채워 보여줌, 필요한 경우 오브젝트가 늘어나거나 찌그러집니다. object-fit:cover; : 요소의 가로나 세로크기에 가능한 맞춰져 크기가 조정되고, 비율은 고정된 상태입니다. 개체 크기에 맞게 잘립니다. 가득 채울때까지 확대됩니다. object-fit:contain; : 요소의 가로나 세로크기에 가능한 딱 맞춰져 크기가 조정되고, 비율은 고정된 상태입니다. 딱 맞추기 때문에 남는 공간이 발생할 수 있습니다. object-fit:none; : 원본이 가운데에 나온다. object-position : 오브젝트 위치 조정 object-position: 가로위치 세로위치; 속성값 : px, %, left/right/center/top/bottom background-image(css) - background-position = object-posion - backgroun-repeat:no-repeat; : 이미지 반복방지 0노멀라이즈0 body ul, li { /* 앞에 점 없애기 */ list-style:none; /* 안쪽 여백 제거 */ padding:0; /* 바깥쪽 여백 제거 */ margin:0; } a { text-decoration: none; color: inherit; } img, video{ display:block; width:100%; } /* 라이브러리 */ html>body *{ box-sizing:border-box; } 피그마 다운 : https://www.figma.com/downloads/ > Desktop app for Windows