1. 옮기려는 파일이 위치 한 곳으로 이동 $ cd /mnt/c/Users/(user명)/Downloads/a 2. 파일(폴더) 복사 cp [option] [원본파일] [목적지] (예시는 a 폴더를 /home/(User명)/ 경로에 images라는 이름으로 복사) $ cp -r a /home/(User명)/images cp명령어 옵션 -r : 디렉토리 복사. 하위 디렉터리와 파일 모두 복사 -p : 원본파일의 소유주, 그룹, 권한, 시간 정보를 보존하면서 복사 -i : 복사 대상파일이 있는 경우 복사 실행 여부를 사용자에게 묻는다. -f : 복사 대상파일이 있는 경우 사용자 확인 없이 강제 복사
wsl에서 npm 사용시 아래 에러가 나서 검색해보니 사용중인 nvm경로나 버전이 안맞는 경우 생긴다고 한다. nvm list 로 확인해보니 system버전 사용중이었다. 새로운 쉘을 실행하는 경우에도 node버전을 고정시키기 위해 아래와 같이 v14.15.0을 default로 설정해 주었다. $ nvm alias default 14.15.0 설치되어 있는 가장 최신버전을 사용하는 경우에는 아래와 같이 입력해주면 된다. $ nvm alias default node 정상적으로 설정된 결과
git pull 시도시 다음과 같은 권한 문제 발생 error: cannot open .git/FETCH_HEAD: Permission denied 시도 1. -> 실패 sudo chown -R $USER .git/ 시도 2. -> 성공 sudo chmod a+rwx .git/FETCH_HEAD
해당 내용은 "쉽고 빠르게 익히는 CSS3(제이슨 크랜포드 티그)"를 읽고 정리한 글입니다. 색상값 선택 색상 키워드 1) currentcolor 키워드 : currentcolor를 사용해 색상값을 설정하면 엘리먼트의 현재 color값을 사용하게 된다. currentcolor를 color속성에 지정하면 마치 color:inherit을 사용한 것처럼 부모 엘리먼트의 색상값을 상속한다. div { color: aqua; border-color: currentcolor; } 2) transparent 키워드 : 알파 값 0, 즉, 정말 투명한 효과를 주는 키워드. 이 키워드를 사용하면 해당 엘리먼트 뒤에 있는 모든 대상이 투명하게 투영돼 보인다. 3) RGB 16진수 값 : 원하는 색상의 적, 녹, 청색 수준..
해당내용은 "쉽고 빠르게 익히는 CSS3(제이슨 크랜포드 티그)"를 읽고 정리한 글입니다. 텍스트 간격 조절 글자 사이의 간격 조절(트래킹) : 트래킹은 단어에 있는 글자 사이의 간격 크기로 CSS에서는 letter-spacing 속성을 통해 제어한다. h1{ letter-spacing : 2px; } 단어 사이의 간격 조절 : word-spacing속성을 사용하면 화면에 보이는 단어 사이에 간격을 추가해 텍스트 가독성을 높일 수 있다. p { word-spacing : -.3em; } 텍스트 줄 간격 조절 : line-height 속성을 사용하면 텍스트 기준선(대부분 글자의 바닥) 사이의 간격을 지정할 수 있다. body { line-height : 1.5; } 텍스트 대소문자 설정 : text-tra..
PWA란 무엇인가? PWA(Progressive Web Apps)는 웹과 네이티브 앱 기능 모두의 이점을 갖도록 개발된 웹앱이다. 웹은 접근이 쉽고, 링크로 공유하는것이 용이하다. 네이티브 앱은 좀더 부드러운 사용자 경험(브라우저를 사용하지 않고 아이콘을 눌러 이동)을 제공할 수 있고, 설치가능하여 오프라인에서 동작이 가능하다. PWA로 구현된 웹앱인지 아닌지 어떻게 판단하나? 바로 알기는 쉽지않다. 앱이 "오프라인에서 동작, 설치가능, 쉬운동기화. 푸시알람" 등의 기능이 구현되어 있는 경우 PWA라고 볼 수 있다. Discoverability 웹 앱이 검색 엔진에서 더 잘 표현되고 노출, 분류 및 순위를 매기기 쉬우며 브라우저에서 사용할 수 있는 메타데이터를 갖추어 특별한 기능을 제공하는 것 Insta..
해당내용은 "쉽고 빠르게 익히는 CSS3(제이슨 크랜포드 티그)"를 읽고 정리한 글입니다. 웹 타이포그래피의 이해 타입패밀리는 유사한 성격을 가진 서체분류를 말한다. (웹디자인에서는 폰트패밀리라고 부른다.) 플래시나 기타 그래픽에 사용된 텍스트와 비교해 HTML텍스트의 장점은 수정이 필요할 때마다 쉽게 편집할 수 있고, 보이는 화면 크기에 맞게 텍스트의 크기 조절이 가능하다는 점이다. 또한 데이터베이스를 활용해 텍스트 콘텐츠를 저장하고 이를 HTML텍스트 결과물로 내보낼 수 있다는 장점도 있다. 하지만 사용자의 기기에 있는 폰트에 따라 디자인 제약을 받는다는 단점이 있다. - 캐릭터 셋 지정 HTML문서 작성시 페이지에서 사용할 캐릭터셋을 지정해야한다. 캐릭터셋은 브라우저가 텍스트를 보여주기 위해 인식하..
해당내용은 "쉽고 빠르게 익히는 CSS3(제이슨 크랜포드 티그)"를 읽고 정리한 글입니다. 태그 어트리뷰트 기반 스타일 정의 스타일 어트리뷰트는 모두 CSS가 처리하는게 맞지만 많은 HTML 태그에서는 여전히 스타일을 정의하는 어트리뷰트들을 갖고있다. ex) img태그는 src어트리뷰트를 통해 로드할 이미지 파일의 소스를 지정한다. 이러한 어트리뷰트나 어트리뷰트 값을 사용해 HTML 엘리먼트에 스타일을 적용할 수도 있다. 이렇게 하면 어트리뷰트가 설정된 경우 어트리뷰트 값이 특정 값인지 아닌지에 따라 스타일을 설정 할 수 있다. - 엘리먼트 어트리뷰트 기반으로 한 스타일 설정 a[title |= "resume"] { color: red; } resume 형식 이름 스타일 적용 엘리먼트 [attr] 어트리..
해당내용은 "쉽고 빠르게 익히는 CSS3(제이슨 크랜포드 티그)"를 읽고 정리한 글입니다. 선택적 스타일 기능은 조건에 부합할 때만 엘리먼트에 스타일을 적용할 수 있는 기능이다. 엘리먼트 가계도 Chappter 4The Pool of Tears 중첩된 형태에서 바깥쪽 엘리먼트()를 부모, 안쪽 엘리먼트()를 자식이라고 한다. 자식태그와 이 자식 태그의 자식태그들은 모두 부모의 자손이다. 같은 부모 밑에 있는 두 태그는 형제라고 하며 나란히 위치한(= 바로 앞뒤로 위치한) 두 태그는 인접 형제라고 한다. 문맥에 따른 스타일 정의 문맥 스타일을 사용하면 부모 및 형제를 기준으로 특정 엘리먼트가 보이는 방식을 지정할 수 있다. - 자손 엘리먼트의 스타일 적용 .copy h1 em { color : red; }..
해당내용은 "쉽고 빠르게 익히는 CSS3(제이슨 크랜포드 티그)"를 읽고 정리한 글입니다. 기본 CSS선택자 CSS는 CSS규칙을 토대로 웹 페이지상의 엘리먼트 스타일을 정의하는 식으로 작동한다. CSS규칙은 세가지 형태의 선택자를 사용해 적용한다. - HTML 선택자: 특정 태그를 참조하는데 사용 - 클래스 선택자 : 엘리먼트에 개별 적용됨 - ID 선택자 : 페이지내 단일 엘리먼트에 적용됨. 형식 선택자명 스타일이 적용되는 엘리먼트 a HTML 지정된 모든 HTML .myClass 클래스 클래스가 적용된 모든 HTML 태그 a.myClass 의존 클래스 클래스가 적용된 특정 HTML 태그 #myID ID ID가 적용된 모든 HTML 태그 a#myID 의존 ID ID가 적용된 특정 HTML 태그 * 공..
