본문 바로가기

분류 전체보기

 (89)
코드리뷰에서 헷갈리는 것 정리! FLEXBOX 정리 min-width: 400px; flex-basis: 0 ㄴ> 이렇게 하면 이미지가 움직이지 않고 400 고정 width: 100px; flex-shrink: 0; ㄴ> 이렇게 해도 동일하게 움직이지 않고 고정된다! 다른 요소에 width값이 정해져있을 때!!! flex-basis:0; flex-grow:1; ㄴ> 이렇게 하면 여백 꽉차게 사용
html/css #17-em, rem, GRID 실습 em, rem 관련 루트에 폰트 사이즈가 font-size: 10px; 라면 folnt-size:1.4rem 기존 자리 grid-row-start: 2-> 1칸 이동한 자리 items에 해당 속성을 넣어준다. row는 행이동 col은 열이동 셀을 가지고 있는 공간 병합 grid-row-start:1; grid-row-end: 3; ㄴ 행을 1~3까지 grid-column-start: 1; grid-column-end: 3; ㄴ 열을 1~3까지 *단축속성 grid-row : 1 / 3 (1~3까지 row를 설정) *단축속성 grid-col 1 / 3 (1~3까지 col읈 설정) 칸 수로 작성하기 grid-row-start:1; grid-row-end: span 3; /*칸 수로 3칸을 차지하자 */ gri..
html/css #16-grid display: grid 로 그리드를 선언할 수 있다. flex와 동일하게 Grid Items가 만들어진다. 부모관점에서 안보이는 가상의 틀이 있다. .grid { box-shadow: inset 0 0 20px red; display: grid; gap: 10px; height: 500px; /*500px 을 아이템들이 나눠갖는다.*/ grid-template-columns: 400px; } .card { box-shadow: inset 0 0 20px yellow; /* height: 500px; */ } grid-template-columns 주기! 입력한 만큼 열 추가 .grid { box-shadow: inset 0 0 20px red; display: grid; gap: 10px; height..
html/css #15-2-부족한 점 보충2 (지그재그/이벤트 풀이2) flexbox의 통제에서 벗어나려면 -> position: absolute 왼쪽 사진과 오른쪽 컨텐츠박스가 flex로 잡혀있을 때 두 컨텐츠들을 고려하여 상하정렬이된다. 이를 깨기 위해서는 왼쪽 cover에 position: absolute를 준다. >> 이전에 바리스타때 나왔던 이야기이다. display: block으로 수직정렬해준다면 지정되어있던 position을 unset으로 풀어줘야 이미지가 나온다. (이미지가 absolute로 물리적으로 잡히지 않고 있기 때문에) .plate { display: block; } .plate-cover { width: unset; aspect-ratio: 8/6; } .plate-cover-src { position: unset; } 내의 텍스트 길이가 너무 늘어..
html/css #15-부족한 점 보충 (지그재그 풀이) flex-grow: 1 flex-basis: 0 flex-grow로 여백공간이 가득찬 상태에서 flex-basis가 움직이지 않으므로 (flex-basis: auto 가 아님) 가득찬 상태로 유지가됨! -> 컨텐츠 길이에 따라 좌지우지 되지 않고 고정됨 .plate-contents { box-shadow: inset 0 0 20px lime; flex-grow: 1; flex-basis: 0; /*basis가 가득찬 상태에서 grow로만 가득 찬 부분이 있다! -> 컨텐츠에 의해 좌지우지 되지 않는다.*/ } 이미지 초기화 width: 100% -> 기본스타일 초기화로 부적합하다. max-width: 100% -> 기본스타일 초기화로 적합하다. 부모보다 클때는 부모 컨테이너, 작을때는 작게 vertica..
html/css #14-transform, 애니메이션 가운데 정렬하는 방법 (position + absolute 사용) position: absolute; left: 50%; top: 50%; transform: translate( -50%, -50%) position: absolute; left : 50%; top : 50%; /*position은 컨테이너 블록 기준의 너비, 높이 퍼센테이지이다. 꼭짓점이 해당 위치에온다. */ transform: translate(-50%, -50%); /*자기자신의 너비, 높이 기준의 퍼센테이지이다. 우리 눈으로 안맞는 부분을 맞춰주기 위해서 쓴다. */ transform: translate( x, y) 이 상황에서 머리를 아래로 이동하려고 하면 transform: translateY(60%); = 내 자신의 높이를 ..
GIT 특강#2 git reset --hard : 돌아가고 싶은 해시코드 상태로 돌아간다. git log --oneline : 해시코드를 포함한 깃 로그 조 VSCODE 에서 백틱 (ctrl + ~) 누르면 터미널 노출/숨기기 git .ignore : git에서 관리하지 않도록 하겠다. ㄴ txt, html 확장자 파일 ㄴ docs 디렉토리 무시하겠다! cp 파일 복사 cp -r 디렉토리 레벨 복사 패키지 추가 & 삭제하는 법 npmjs.com -> 패키지 다운받기 -> add-gitignore -설치하고 싶다 : npm i add-gitignore -실행만 1회성으로 실행 : npx add-gitignore node,windows,osx,visualstudiocode ㄴ ex) osx 를 지정했다면, mac os 에 ..
GIT 특강#1 init, commit git init : 해당 디렉토리를 git으로 관리하겠다. ㄴ git이 관리하는 디렉토리에 이동하면 (main)이 떠있다. 독립된 공간이 관리하는 상위 폴더에 git init을 주면 안된다! 일반 디렉토리로 만들기 위해서는 rm -rf .git -> .git 파일을 삭제해주면 된다. git status : 현재 git의 상태를 물어본다. ㄴ Untracked files -> 변경은 감지했는데, 추적하지 않은 것이 있다. (업데이트 안되었을 때) git add 파일의 변경 사항을 index(Staging Area)에 추가 get add . : 현재 워크 디렉토리에 있는 모든 것 다 stage에 올리겠다! git rm --cached : stage에서 다시 working directory로 롤백 (한번도 커..

티스토리툴바