듀의 자료저장소

수업중에 select box 예제 코드를 분석하다가 box-sizing을 왜 쓰는지 이야기가 나와서 따로 적는다. padding을 쓸 때 왜 box-sizing: border-box를 써주는 걸까? 바로 이 부분! 피그마 수치를 볼 때마다 항상 따라오는 부분이다. 왜 padding을 쓸 때 box-sizing: border-box 효과를 주는 것일까? h2 { margin: 30px; } .cont-select { ★ position: relative; width: 200px; } .btn-select { width: 100%; padding: 13px 30px 13px 14px; font-size: 12px; line-height: 14px; background-color: #fff; border: 1..

IT 공부/프론트엔드(Front-end) 2021. 11. 29. 09:28

FE 개발자도, 기본적인 BE(node, AWS, linux)는 다룰 줄 알아야 한대서 오늘은 실무에서 자주 쓰는 리눅스 명령어를 정리해보려고 한다. 1. pwd: 현재 디렉토리 위치 확인하기 (print working directory) directory = folder 개념 2. mkdir + 폴더명 : 디렉토리(=폴더) 생성하기 # mkdir -p a/{b,c} mkdir -p 중간 경로에 있는 디렉토리까지 자동생성! # mkdir a b 디렉토리 a, b 2개 생성! rmdir leehojun # 파일있는 폴더 지울 때에는 rm -r leehojun/ # -r는 recursive 재귀적으로 파일 지움 mkdir one/two/three # error mkdir -p one/two/three/fou..

IT 공부/백엔드(Back-end) 2021. 11. 29. 07:29

AWS보다 훨씬 쉬운 구름 IDE로, git에 올린 개인 프로젝트 서버연결을 할 수 있다. apt-get에서 nginx를 활용하여, 정적 페이지를 배포하는 방법이다. 먼저 용어 정리부터 시작! Ubuntu - Debian 계열 Linux에서 나온 OS(운영체제) - dpkg packaging systme: Debian계열이 사용하는 시스템 packaging system - 패키지 관리 시스템: 소프트웨어를 설치하고 관리까지 진행 - source code 없이 프로그램을 build - deb package vs rpm package Linux에서 크게 Debain 계열과 Redhat 계열이 있음. apt (Advanced Package Tool) 일종의 명령어 라인 도구 - packaging system과..

IT 공부/백엔드(Back-end) 2021. 11. 29. 05:26

contetns 길이가 길어졌을때, css에서 말줄임 ('...')을 통해 생략할 수 있습니다. text-overflow: ellipsis; 속성을 쓰면 편하게 처리할 수 있습니다. javascript를 쓰지 않고도 충분히 css만으로도 처리가 가능합니다. 주로 '게시판'의 텍스트 제한이 넘어갔을 때 사용하는 것 같습니다. oseid-the-styleful) on CodePen. 말줄임('...') css 속성 text-overflow: ellipsis;) 1줄 라인일때 1. ellipsis는 block 일때만 적용 2. overflow: hidden; width를 10% 주었으므로, 이 넓이 이상 넘어가면 자동으로 텍스트가 생략됩니다. 3. text-overflow: ellipsis; width 10%..

IT 공부/프론트엔드(Front-end) 2021. 11. 27. 14:54

리눅스의 vi 명령어는 일종의 editor를 소환할 수 있다. 모드형 편집기로, 명령/입력 모드 전환을 통해서 필요한 문서를 쓸 수 있다. vi와 vim은 다른데, vi는 리눅스에 내장된 기본 에디터고 vim은 조금 더 업그레이드된 버전이다. 그러나 보안이 위험한 극한상황에서는 GUI 환경이 돌아가지 않기 때문에 vi만을 써야 하는 상황도 생긴다. vi (일종의 에디터) : - 입력모드가 아니라, '명령모드'에서 진행해야함 - 리눅스 vi보다 vim이 훨씬 더 좋다. - 그러나 vim이 안 깔려 있는 극한 상황도 생김 (보안 문제, 특정 업종계열) vim test.txt : txt 파일 생성 (가능) 에디팅 (편집하기) : i : 명령모드 → 입력모드 (변환) i: 편집이 가능한 상태 esc: 입력모드에..

IT 공부/백엔드(Back-end) 2021. 11. 26. 07:28

티스토리블로그에서 코드펜 소스코드를 써보기로 했다. 1. 원래는 이미지로 캡쳐했다. 전체 소스코드를 다 보여줄 수 없고, 일일이 캡쳐하기가 귀찮다. 텍스트를 복붙해도 되지만, 이 경우 블로그 로직에 맞지 않으므로 패스! 2. 티스토리블로그에 '코드블럭'기능을 이용 깔끔해서 그동안 잘 쓰고 있었는데, 구현된 결과물을 바로 blog에서 확인해볼 수 없다는 것이 단점이었다. 3. 코드펜(codepen) 소스코드 연동 [티스토리에 코드펜 소스코드 넣는 법] ① 코드펜 사이트 접속 후 회원가입! https://codepen.io/ CodePen An online code editor, learning environment, and community for front-end web development using ..

IT 공부/프론트엔드(Front-end) 2021. 11. 23. 07:46

멋쟁이사자처럼 FE과정에서 html과 css로 '자판기 만들기' 클론코딩을 했다. JS까지 했을 경우, ★★★☆☆ 별 3개 난이도의 2박 3일짜리 프로젝트라고 한다. 아직 바닐라코딩을 원활하게 하지는 못해서, 수업시간에 배운 내용을 바탕으로 필사하는 식으로 복습을 해보려 한다. (강사님의 코드 복습!!) PC버전에, 미디어쿼리를 적용해서 Mobile 버전까지 구현(=복습)할 예정이다. 작업순서 1. HTML 마크업하기 2. css 클래스 순서대로 작업 (배치+스타일링) (필요에 따라 markup에 class 추가) 3. 반응형 ( 미디어쿼리 ) 작업 4. javascript 로직 작업 마크업 (HTML) PC 버전의 UI는 위와 같다. 피그마 작업링크를 주셨기 때문에, padding, margin 같은 ..

IT 공부/프로젝트(project, 부트캠프 및 협업) 2021. 11. 22. 07:17

Git-hub에 TIL(Today I learned)를 기록하려고 깃 사용법을 공부하고 있었다. 드림코딩 엘리님의 강의 보면서, 내장되어있는 cmd보다 좀 더 편리한 기능이 붙어 있는 cmder을 설치했다. cmder(window)를 설치하려는데 7zip or winrar not found 에러가 떠서 이를 해결한 겸 포스팅해보려 한다. 7zip not found! It is not installed? Goto 'Update' page and check 7-zip command 설치 중에 이런 메세지가 뜬다면, 7-zip 파일을 설치해주면된다. 아래 url을 통해서 최신 버전을 설치해줄 수 있다. https://www.7-zip.org/ 7-Zip 7-Zip 7-Zip is a file archiver ..

IT 공부/프론트엔드(Front-end) 2021. 11. 15. 11:00