전체 글
![[Git] GUI & 웹에서 VSC 사용](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2Flaua9%2Fbtrx30TX23r%2FAAAAAAAAAAAAAAAAAAAAAJQmVWRZ6mNYBA9_PdDKkebpTLOrcPkzw1pGUogBzjrx%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1759244399%26allow_ip%3D%26allow_referer%3D%26signature%3DlQeTA62JmrQWpaQ6BWu7FCza0vA%253D)
[Git] GUI & 웹에서 VSC 사용
코딩을 시작한 이후로 필수로 해야한다는 것 중 하나가 1일1커밋, 잔디심기였다. ✍Git & GitHub Git : 분산 버전 관리 툴 GitHub : 웹 호스팅 서비스 GUI 방식 Repository를 생성할 때 주의 -READEME.md를 만들지 않으면 명령어를 입력해야한다. README.md - 마크다운방식으로 입력해야한다. 자세한 방법은 아래 링크를 참고해주세요. https://gist.github.com/ihoneymon/652be052a0727ad59601 GitHub에서 Repository에서 .을 누르면 바로 웹에서 VSC가 열린다. 또는 주소창에 .com 을 dev로 바꿔도 열린다. 커밋 메세지를 입력 후 상단에 체크 깃헙으로 보이게 되는 페이지 public일때만 페이지를 빼 낼 수 있다..

4일차 :: GET, POST 정리
백엔드 공부를 할때도 get, post로 정말 골머리를 앓았던 기억이 있다. 이걸 공부할때 request, response 와 같이 너무 헷갈려서 계속 물어보고 코드를 봤었다. 이전에도 포스팅했지만 GET, POST만 자세하게 정리해보고싶어서 또 써봤다. get과 post는 웹 개발을 할 때 주로 사용하는 HTTP 메서드로 클라이언트에서 서버로 요청할 때 사용한다. 예를 들어 설명하면, 회원가입은 post로 입력받은 정보들을 서버에 보내고 가입한 회원이 마이페이지에서 자신의 정보를 확인할 때 get방식으로 입력했던 정보를 보여주는 식이다. ✍ get : 요청 시 URL주소에 값(파라미터)을 담아서 전달하는 방식으로 클라이언트에서 서버로 정보를 요청할 때 사용한다. 특징 브라우저 히스토리에 남는다. 비밀번..
![[책 리뷰] 소문난 명강의 : 시험장에 몰래 가져갈 이경오의 SQL+SQLD 비밀노트](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FbIDlCk%2FbtrxwAJdfEU%2FAAAAAAAAAAAAAAAAAAAAAHLotX5AHsabVU0qdDULseXJLHun5b2javbvsFKfEh53%2Fimg.jpg%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1759244399%26allow_ip%3D%26allow_referer%3D%26signature%3DW4I6tsW%252BDxVLQAKwFYMpmiNpVAA%253D)
[책 리뷰] 소문난 명강의 : 시험장에 몰래 가져갈 이경오의 SQL+SQLD 비밀노트
안녕하세요! 오늘 리뷰해 볼 책은 SQLD책입니다. SQL(Structured Query Language)이란? 데이터베이스를 직접적으로 다룰 수 있는 언어로, 데이터를 정의, 조작하고 결과를 적용하거나 취소할 수 있고 접근권한을 제어하는 처리들로 구성되어있다. SQLD(SQL Developer)는 SQL 개발자로, 데이터베이스와 데이터 모델링에 대한 지식을 바탕으로 응용 소프트웨어를 개발하면서 데이터를 조작하고 추출하는데 있어서 정확하고 최적의 성능을 발휘하는 SQL을 작성할 수 있는 개발자를 말한다. IT 회사들 공고 봤었을 때 종종 정보처리기사 외에 SQLD도 우대 사항으로 되어있는 공고들을 봤어요. 그만큼 SQLD가 SQL을 잘 알고있다는 걸 알려준다고 생각했습니다. SQLD 시험은 시험비 5만원..
![[TIP] 개발자 도구에서 홈페이지 전체 캡처 하는 법](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FrDQZY%2Fbtrx2S3bEE0%2FAAAAAAAAAAAAAAAAAAAAAOjoOOd5DDafS92BjJKAEy_yW05qtqo5ODKOtV56FtOD%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1759244399%26allow_ip%3D%26allow_referer%3D%26signature%3DRckoOmSfO8oANY03XjX%252F4Ii7h6s%253D)
[TIP] 개발자 도구에서 홈페이지 전체 캡처 하는 법
매번 스크립 캡처 도구를 이용해서 캡처했는데 개발자 도구에서 화면을 캡처할 수 있다. 방법 1. f12 개발자 모드를 연다. 2. 우측에 ⋮ 을 선택 -> Run Commend (단축키 : ctrl shift p ) 3. screenshot 검색 후 Capture full size screenshot 선택한다. 4. png로 저장 된 파일 확인한다.
[CSS] 가상 클래스? 가상 요소?
이전에 로그인 버튼 만들기를 하면서 ::before, ::after를 사용해서 만들어봤었습니다. 이걸 가상요소라고하는데 기존에 많이 사용했던 :hover같은 가상 클래스와는 다르다고해서 어떤 종류가 있는지 정리해봤습니다. 가상 클래스(Pseudo Classes)❓ - 하나의 콜론(:)을 사용하며, 별도의 class를 지정하지 않아도 요소를 선택할 수 있다. 즉, 가상 클래스는 선택하고자 하는 HTML 요소의 특별한 '상태(state)'를 명시할 때 사용한다. Selector Example Example Description :active a:active Selects the active link :checked input:checked Selects every checked element :disable..

3일차 :: 나도 오픈소스 기여를 할 수 있다?!
오픈 소스(Open-source software) 공개된 소스 코드를 누구나 제한 없이 사용할 수 있는 오픈 소스 라이선스를 만족하는 소프트웨어를 의미한다. 원래는 오픈 소스 소프트웨어인데 대체로 오픈 소스라고 부른다. 오픈소스에 기여한다는 것 소스 코드를 수정하고 고치는 일뿐만 아니라 오픈소스 SW를 개발하는 개발자에게 도움을 주는 모든 행위가 오픈소스에 기여하는 일이다. 오류 제보, 주석, 문서화 작업에 참여하는 일도 포함된다. 오픈소스에 도움을 주는 사람을 통칭해 '컨트리뷰터'(Contributor)라 부르고, 소스코드를 수정하고 조절할 수 있는 권한을 가진 사람을 '커미터'(Committer)라고 부른다. 인기있는 프로젝트에선 2~3년 이상 활동을 해야 컨트리뷰터가 되기도 한다. 출처: 오픈소스컨..
![[Frontend] 책 추천](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FbKmJ24%2FbtrxY5BEKwt%2FAAAAAAAAAAAAAAAAAAAAALOUNjGo1DSu5RN2pHt_ZRKMU1P1S-CYbzyoi8xEVrnd%2Fimg.jpg%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1759244399%26allow_ip%3D%26allow_referer%3D%26signature%3Dly%252FA6XGpg1aQ2z%252BJU2n99Dm%252FRzM%253D)
[Frontend] 책 추천
수업 시간에 강사님으로부터 읽어두면 좋을 책들을 추천받아서 정리해보았습니다. 1. 함께 자라기: 애자일로 가는 길 - 김창준 2. 자바스크립트 완벽가이드 - 데이비트 플래너건 3. DOM을 깨우치다: 가치에 대한 완전한 이해 - 코디 린들리 http://www.kyobobook.co.kr/product/detailViewKor.laf?ejkGb=KOR&mallGb=KOR&barcode=9788994774510&orderClick=LAG&Kc= DOM을 깨우치다 - 교보문고 가치에 대한 완전한 이해 | 모던 웹을 위한 자바스크립트와 DOM에 대한 고찰“더글라스 크락포드(Douglas Crockford)는 저서인 『자바스크립트 핵심 가이드』에서 JavaScript 언어의 내부를 이해하기 위 www.kyobo..
[CSS] White-space
✍ white-space : 요소가 공백을 지정하는 속성 normal : white-space의 기본 값으로 화면에서 보여지는 영역만큼 줄바꿈을 하게 된다. nowrap : 의 내용이 화면을 넘어가도(뷰 포트보다 문장의 길이가 짧으니) 감싸지 않겠다.는 의미로 화면을 벗어나면 가로 스크롤이 생기며 한 화면에서 보이지 않게 된다. 을 함께 쓰면 한 문장 단위로 줄 바꿈 시행 (영어 기준, 한글은 한 글자씩)=> 반응형 디자인할때 쓰인다. 단어 안에서 줄이 바뀌기를 원하는 경우 overflow-wrap, word-break, hyphens를 사용하세요. word-break : keep-all ➡ 단어 단위로 묶는다. https://developer.mozilla.org/ko/docs/Web/CSS/white..
![[HTML, CSS] 로그인 화면 만들기 + 가상요소](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FdaLiCY%2FbtrxKihDxRp%2FAAAAAAAAAAAAAAAAAAAAADTMYZp4xXiQ9BN_nt8reaYmVYvlfWRzylKKQxTLjWVv%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1759244399%26allow_ip%3D%26allow_referer%3D%26signature%3D2x3KuNt4AwawpTwdlNPPP06EXoo%253D)
[HTML, CSS] 로그인 화면 만들기 + 가상요소
썸네일과 같은 간단하게 버튼만 있는 로그인 화면을 만들었습니다. 로그인페이지는 을 쓰거나 다른 버튼을 추가해 다양하게 만들어봤는데 이번엔 가상요소 ::after을 써서 만들어봤습니다. 아이콘 이미지 출처 : flaticon

2일차 :: 선택과 집중?!
✍어려운 주제를 만났을때는 시각화 하자! 시작할 때 가장 중요한 공부 방향 오늘 강의를 들으며 소소하게 충격 받은게 알고 있다면 수업을 듣지않고 현재 수준에 맞는 공부를 해라! 지루하더라도 복습 열심히해야한다는 약간의 강박에서 벗어난 느낌(?)이다. 왜 잘하는 사람들은 다른가 또 깨닫는 이야기이기도 한게 '선택과 집중'인 것 같았다. 물론 내가 멋쟁이사자처럼에서는 강의를 들어본적 없으니 이전에 몰랐던 새로운 내용들도 알려줄테니 강의를 듣는것도 좋지만 듣지 않아도 되는 과정에서는 나중에 하게 될 과제를 미리 해봤다. 그 전에 지금 내 실력을 이야기하자면 HTML, CSS, JS를 했지만 당당하게 나 잘해!라고 하기엔 스스로가 만족 못하고 있다. b와 c 그 중간인데 JS를 안다고 하기에도 애매하고 모른다고..