Shadow 빛 방향 통일. 수평에 비해 수직이 2배가 되도록 설정하기. 항상 같은 비율로. 그림 그릴 때의 기본 이론과 동일. 겹겹이 쌓는 게 더 자연스럽다 .traditional.box { box-shadow: 0 6px 6px hsl(0deg 0% 0% / 0.3); } 위의 예제보다 아래의 예제가 훨씬 결과값이 자연스럽다. 단, 오래된 디바이스에서는 렌더링이 느려지는 문제가 생길 수 있으므로 테스트 필수. .layered.box { box-shadow: 0 1px 1px hsl(0deg 0% 0% / 0.075), 0 2px 2px hsl(0deg 0% 0% / 0.075), 0 4px 4px hsl(0deg 0% 0% / 0.075), 0 8px 8px hsl(0deg 0% 0% / 0.075)..
reset `reset` 명령어로 특정 커밋 지점으로 되돌아가고, 이력을 정리하며 원격 저장소에 변경사항을 반영할 수 있다.참고글 : git reset HEAD~1 / 가장 최근의 로컬 커밋 제거 방법가장 최근의 로컬 커밋을 제거하려면 git reset HEAD~1 명령어를 실행하면 된다.구체적으로는 커밋을 취소하고 수정된 파일을 다시 스테이징 영역으로 가져와 이전 상태로 되돌리고 싶을 때 사용할energneer.tistory.com1. 커밋 이력 조회git log --oneline위와 같이 한 줄로 로그를 조회하라는 명령어를 입력하면 아래와 같이 터미널에 각 커밋에 대한 일곱자리 해시값과 커밋 메시지가 표시된다.abcd123 (HEAD -> main, origin/main, origin/HEAD) ..
amend : 빠뜨린 파일, 오타가 있을 때 수정하기 git commit --amend 명령은 현재 브랜치의 가장 최근 커밋을 수정하거나 확장하는 데 사용됩니다. 스테이지에 파일을 올린 후 git commit --amend를 실행하면 현재 스테이징 영역에 있는 파일들을 이전 커밋에 포함시킬 수 있습니다. 즉, 이미 실행한 커밋을 수정할 수 있습니다. 파일을 스테이징 영역에 추가합니다. git add filename 등의 명령을 사용하여 파일을 스테이징합니다. 스테이징 영역에 파일이 추가된 후 git commit --amend를 실행합니다. 텍스트 편집기가 열리면 커밋 메시지를 수정할 수 있습니다. 메시지를 원하는대로 수정하고 저장합니다. 저장하면 Git은 이전 커밋을 수정하고 스테이징 영역에 있는 파일들..
소소한 기능 커스텀하는 게 너무 재밌어! 1. 스킨 편집에서 카테고리 접기/펼치기 옵션을 아래와 같이 설정 2. HTML 바로 윗부분에 아래의 스크립트 삽입 [0] 을 다른 숫자로 바꿔주는 방법으로 해당 순번의 카테고리가 펼쳐지도록 설정할 수 있다. (0이 1번째 카테고리) 처음에는 DOMContentLoaded로 하면 반응이 없어서 load로 바꿨는데, 다시 실험해보니 문제없이 작동한다. DOMContentLoaded가 안 되는 경우에는 load를 사용하면 될 것 같다. 처음에는 카테고리를 설정하는 js 파일의 forEach문에서 어떻게 한 인덱스만 제외하고 돌아가게 할 수 없을까 방법을 찾아보았다. 그러나 검색해서 나온 방법들은 '인덱스'를 기준으로 제외하는 게 없었다. (array 내부 내용을 정확..
getElementById getElementById : Id를 가져올 수 있다. document.getElementById("id"); getElementsByClassName : array로 가져다준다 getElementsByName : array로 가져다준다 querySelector querySelector css selector를 명시해줘야한다. id를 가져오는 경우에는 ("#id") 라고 입력한다. 단 하나의 element만 return 해준다. querySelectorAll 여러 element를 array로 가져오는 방법. document.querySelector(“.hello h1:first-child”) document.getElementsByClassName(”hello”)
array 안에 있는 항목 받아오기 const daysOfWeek = ["mon", "tue", "wed", "thu", "fri", "sat"]; // Get Item from Array console.log(daysOfWeek[5]); //sat 결과가 sat인 이유 컴퓨터는 숫자를 0부터 센다. array에 element 추가 해주기 : push 맨 끝에 item을 추가 해준다. const daysOfWeek = ["mon", "tue", "wed", "thu", "fri", "sat"]; // Get Item from Array console.log(daysOfWeek); // Add one more day to the array daysOfWeek.push("sun"); // push는 항목 하..
주로 메뉴 상단에 자주 주게 되는 백드롭 필터 효과에 대해 메모해둔다. backdrop-filter: blur(2px); /* 가우시안 블러같은 효과 */ backdrop-filter: brightness(60%); /* 명도 */ backdrop-filter: contrast(40%);/* 대비 */ backdrop-filter: drop-shadow(4px 4px 10px blue);/* 그림자 */ backdrop-filter: grayscale(30%);/* 그레이스케일 */ backdrop-filter: hue-rotate(120deg);/* 포토샵에서 색 레이어 깔고 색상 효과 준 느낌 */ backdrop-filter: invert(70%);/* 색반전 */ backdrop-filter: o..
멀티 커서 수동 지정은 Alt+Click 으로 가능하다. alt를 누른채로 원하는 곳을 클릭해주면 된다. Ctrl+Alt+Up or Ctrl+Alt+Down 멀티커서를 위 아래로 넓힌다. 선택 단어 선택. 여러번 사용하면 멀티 선택이 가능하다. Ctrl+D 현재 선택한 문자열 또는 커서 주변의 단어와 일치하는 문자열 모두를 선택한다. Ctrl+Shift+L Shrink / expand selection : 단위로 묶어서 선택을 늘려갈 수 있다. Shift+Alt+Left or Shift+Alt+Right 행 전체 다루기 현재 행 전체 선택 : Ctrl+L 라인 전체 위아래 복제 : Shift+Alt+Up or Shift+Alt+Down 현재 행 전체 삭제 : Ctrl+Shift+K 현재 행 위아래로 이동..
테이블 만들기 CREATE CREATE TABLE customers (id INTEGER PRIMARY KEY, name TEXT, age INTEGER, weight REAL); AUTOINCREMENT id 값에 AUTOINCREMENT를 붙여주면 1씩 증가하는 값이 자동으로 생성된다 CREATE TABLE books ( id INTEGER PRIMARY KEY AUTOINCREMENT, author TEXT, title TEXT, words INTEGER); 데이터 삽입 INSERT INSERT INTO customers VALUES (73, "Brian", 33); 특정 열 INSERT INTO customers (name, age) VALUES ("Brian", 33); 데이터 쿼리 선택 전체 ..
