분류 전체보기

Grid Grid Items 1. grid-row 속성 grid-row-start, grid-row-end, grid-column-start, grid-column-end span 키워드를 사용하면 셀 갯수를 지정하여 확장할 수 있다 /* 단축속성 */ grid-row : {start 값} / {end 값} 또는 {start 값} / span {값} grid-column : {start 값} / {end 값} 또는 {start 값} / span {값} /* ex */ grid-row: 1/3; /* start: 1, end: 3 */ grid-column: 1/3; /* start: 1, end: 3 */ 빈 칸에 4를 넣기 위해 grid-auto-flow: row dense; 를 사용한다 2. just..
Float 수평정렬, block 형태 float: left로 왼쪽 수평 정렬을 했는데 요소들이 컨테이너 밖으로 튀어나왔다. 이런 경우에는 해제(clear)를 해줘야 한다 해제(clear) 하는법 float를 부여했다가 해제를 시작할 요소에 clear 속성을 부여한다 (그러나 사용하지 않을 요소를 구조적으로 만드는 것은 비효율적이다) container에 overflow: hidden => float과 관련이 없다(근본적인 해결 방법이 아니다) 컨테이너에 가상 요소 선택자 ::after를 이용 (가상 요소 선택자는 content가 필수로 있어야 한다) clearfix가 부여된 컨테이너에는 float을 사용하는 요소들만 있어야 한다 Position position은 body 기준으로 위치한다 static을 제..
· 기타
Vercel이란? Vercel은 Next.js 개발팀에서 만든 프론트엔드 호스팅 사이트로 빌드+배포+호스팅 서비스를 이용 데이터를 저장할 필요가 없는 사이트를 복잡한 절차없이 간편하게 호스팅할 수 있다 비슷한 서비스로는 Netlify라는 서비스도 있지만 Netlify는 한국 서버를 지원하지 않음 Vercel로 배포하는법 1. Vercel 회원가입 2. 로그인 후 Add New 클릭 ➔ Project 선택 3. Github 아이디 연동 후 배포하고 싶은 Repository ➔ import 4. 원하는 설정 후 Deploy 클릭 ( 저는 아무 설정도 하지 않고 배포를 진행했습니다 ) 5. 배포 완료 배포 과정이 매우 간단해서 좋았고 Github와 연동하면 수정 사항을 push할때마다, 자동으로 감지하고 Bu..
· ✏ 회고
한달 간 기록 강의 1 ~ 2주차 : 자바스크립트 기본 개념, 자료구조 & 알고리즘 첫째주에는 OT를 진행하고 다음 날부터 강의를 듣기를 시작했다. 자바스크립트 기본 개념인 스코프 클로저 등을 배웠고 자료구조 & 알고리즘을 배웠다. 자바스크립트 기본 개념을 배우는 것은 너무 좋았다. 내가 알고있는 개념도 있지만 모르고 있는 개념이 아직 너무 많다는 것과 중요한 개념들이 많아서 추가학습이 필요하다고 느꼈다. 둘째주에는 자료구조 & 알고리즘에 대해 배웠다. 강의를 듣고 알고리즘 문제를 푸는 방식으로 진행했는데 알고리즘 문제 몇 문제가 정말 어려워서 고생했다... 개념을 배우고 문제를 풀어보면서 DP, DFS, BFS 부분이 어려웠지만 팀원들과 알고리즘 스터디에서 여러 문제를 풀어보니 조금은 익숙해진거 같다...