코린이

--[본 내용은 GIT 과 VSCODE 가 이미 깔려 있다는 가정하에 진행됨]--git hub 협업파일 열기 및 생성{명령 프롬포트 열기 (CMD. git bash 등)cd 경로 // desktop ( 바탕화면 )mkdir 파일명 cd desktop/파일명 git init }간단한 연결을 위한 설정 명령어{git config user.name git config user.name "닉네임" git config user.email git config user.email "이메일" 코드 시작{git 에서 프로젝트 생성후 / 해당 프로젝트 주소 협업 하는 사람들에게 배포생성후 프로젝트 초대 에 (닉네임 or 이메일 입력) 해서 초대@중요git remote add origin 프로젝트주소 git pull or..

안녕하세요.2024 - 08 - 20 - likelion xkqqk 링크 모음   테일윈드 3 - 공식사이트테일윈드 2.x - 치트시트 -https://nerdcave.com/tailwind-cheat-sheet[Tailwind CSS Cheat Sheetnerdcave.com](https://nerdcave.com/tailwind-cheat-sheet)# css-- 변수이름 : xx ;var(변수이름)object-fit : cover ( 비율 유지되면서 커짐 )object-fit : ( )# htmlsticky top-0 { top 0 을 만나면 fixed &lt &gt배경 이미지 넣기h1 2024-08-26var x;변수 선언 예정x = 50;x = x + 5..

[언스플래쉬}-상업적으로 이용 가능한 무료 이미지 사이트-포트폴리오 에서도 사용가능-원본 이미지를 확인 할 수 없도록 함성된 상태만 상업적으로 사용 가능하다.-브랜드 상표나 사람 얼굴 인식이 가능한 이미지는저작권이 따로 되어있기 떄문에 사용하지 않는 것이 좋다. [이미지 태그]-src= "" 값으로는 이미지 경로는 사용할 수 있다,ㄴ 파일 폴더 경로ㄹㄴ url 주소-img 태그는 닫는 태그가 없다, 무엇인가를 가둘수 없다

[포트폴리오] -포트 폴리오도 상업적인 용도로 사용된다 -디자인으로 활용하기 전 폰트 두께 먼저 확인 후 사용한다 -폰트마다 사용 할 수 있는 두께가 다르다 -300 or 400. 500 . 700. 적어도 세가지 이상을 가지고 있는 폰트를 본문 폰트로 선정하는 것이 좋다 [폰트] -상업적인 용도로 사용가능한 폰트들을 사용 해야된다. ㄴ다폰트에는 상업적으로 사용가능한  무료폰트가 있고, 상업적으로 사용 불가능한 무료 폰트가 있다, 잘 확인하고 사용하지  않으면 내용증명서 날아옴 [눈누] -상업적으로 사용 가능한 폰트들만 모으놓은 사이트 ㄴ 포트 폴리오 제작시 활용하면 좋다. - 유행하는 폰트들은 눈누 모든 폰트 순위에서 확인가능

과일(목록) -딸기 -수박 -바나나 사용자 메뉴 (목록) -로그인 -회원가입 아이콘 박스(목록) -장바구니 아이콘 -찜 목록 아이콘 ul, li 주의 사항 -ul 과 li 는 꼭 항상 같이 사용 -ul 자식으로 li 태그만 사용가능 -ul 태그는 기본적으로  margin, padding 값을 가지고 있음 - li 태그는 기본적으로 list-style 값을 가지고 있다

ul > li > a 태그     class="top-bar">            class="container1">        class="logo-box">로고박스        class="menu-box">                      href="#">list            href="#">list            href="#">list            href="#">list                          class="user-box">사용자 메뉴             /* 노멀라이즈  */body , ul , il {  margin: 0; padding: 0;  list-style: none;}a {  /* 기본컬러 */  color: i..

[파일과 폴더]파일-확장자가 붙어있는 것들을 파일 ex ).jpg / .png  / .html  / .css   폴더-파일을 정리해주는 역활-vscode에서는 폴더를 먼저 열고 그 안에서html, css 등 .. 파일을 만들어줘야 한다. [파일 탐색기] window + e[돋보기]window + s[doctype 선언 ] ! + tap  [css 파일 연결]-head 태그 안에 link 태그 생성후href="" > 쌍따옴표 안에다가 css 파일 이름 작성 [언어 설정]- 한국어로 설정하는 경우 lang 값을 ko 로 입력

[flex-direction]row) 한줄에 같이 정렬 (기본값)-justify-content 가로 작동-align-items 세로 작동-flex-grow 가로 작동 column ) 한줄에 하나씩 정렬- justify-content 세로 작동-align-items 가로 작동-flew-grow 세로 작동 *reverse를 적용하게 되면 start가 오른쪽 정렬으로 바뀌고end 가 왼쪽 정렬으로 바뀐다.flex-item 순서로 바뀐다는 특징이 있다. [flex-grow] 너비를 설정하는 속성- flex -container 너비를 활용한 솏성ㄴ flex-container안에서만 사용가능ㄴ 다 사용하고 남는공간만 사용-값을 1부터 n 값까지 사용 가능하다ㄴ flex - item에 너비를 각각 설정할 수 있기 때..

---------------------[앵커태그]- 클릭했을때 원하는 경로로 이동할 수 있게 해주는 태그- 요소가 있어야 클릭해서 이동할 수 있다.-기본적으로 href 라는 속성 생성- 기본적으로 target 이라는 속성 작동ㄴ 기본값: self ( 내가 보고 있는 페이지가 바뀌면서 경로 이동)ㄴ _blank ( 새탭이 열리면서 이동)- title 속성을 사용할 수 있다.ㄴ 형태 ) title = " "ㄴ " " 안에 원하는 문구를 입력해주면  마우스를 올렸을때 말풍선으로 표시 해준다.-이동할 링크가 정해지지 않았다면   href 속성값으로 꼭 #을 작성 해줘야 함  엘리먼트  [none 값]-없앤다. [flex]-flex 속성값이 적용된 태그를 flex-container  라고 부름-flex-conta..

= >div01 div02 div03 div04 div05 =>BUTTON  -----바깥으로 들어가는 여백 ( magin ) (gap)안에서 들어가는 여백 ( padding ) ㄴ 태그선을 기준으로 안쪽으로 들어오는 여백ㄴ 태그 너비 높이값에 포함* - marginㄴ 태그선을 기준으로 바깥으로 들어오는 여백ㄴ 태그 너비높이값에 포함되지 않는다.*형제관계에서 활용 -gap ㄴ flex 에서 사용하는 여백값ㄴ 요소와 요소 사이에 들어가는 값ㄴ 왼쪽 오른쪽 구분해서 넣을 수 없고    요소 사이에 한번에 들어간다,*형제관계에서 활요* [inline 과 padding 관계 ]- inline 요소는 padding-top 을 적용했을때 위치가 고정된 상태로 적용된다(정상 작동 x ㄴ ( 해결방법) 다른 disp..