햇살아빠의 IT이야기

Git: 현업에서 대부분의 회사들이 사용하고 있는 Git
협업할때 Git사용
지정한 폴더안에 Git폴더 생성 →폴더안에는 폴더안에서 만든 파일들 파일들이 수정될때마다 버전을 등록할수 있다. (버전등록가능/버전별로관리가능)
commit한다는 것은 버전으로 등록하자는 의미 등록하게되면 이렇게 적힘
user story 1 → story1, 1: 40pm
user story 2 → story1, 1: 40pm
원하는 시점에서 버전들 생성가능 (Github/Bitbucket)
Git의 정말 좋은 부분
분산형관리시스템(Distributed Version System)
문제생겨도 타시스템에서 복구 작업 가능
작업 : m1 m2 m3 m4 m5 —-Master Branch ( Branch) - commit
branch(dark)/ branch(pink)버전으로 새로운 commit을 만들 수 있음

■ CSS(Cascading Style Sheets)란 무엇인가?

CSS에대해서 혹시 궁금하셨던 부분이 있으시다면?  어디까지 알고계셨을까요?  그렇다면 지금부터 꼼꼼하게 설명드리도록 할게요. 

■ 웹 문서에서 스타일(style)이란 어떻게 또 정리해볼 수 있을까요?

HTML문서에서 자주 사용하는 글꼴이나 색상, 정렬, 각 요소의 배치 방법과 같이 문서의 겉모습을 결정짓는 것을 가르킵니다. 반응형 웹 디자인이란 사용자가 PC로 접속하든, 모바일로 접속하든 웹 브라우저의 크기에 따라 화면 레이아웃을 자동으로 바꿔주는 방법을 말합니다. 스타일규칙이란 속성과 값이 하나의 쌍으로 이루어진 것을 말합니다. 스타일 규칙을 한눈에 확인하고 필요할 때마다 수정하기도 쉽도록 한 군데 묶어 놓은 것을 스타일 시트라고 합니다. 스타일 시트는 크게 웹 브라우저에 기본으로 만들어져 있는 브라우저 기본 스타일과 사이트 제작자가 만드는 사용자 스타일로 나눌 수 있습니다. 사용자 스타일은 다시 인라인 스타일과 내부스타일 시트, 외부 스타일 시트로 나누어집니다. 스타일시트를 사용하지않고 스타일을 적용할 대상에 직접 표시하는 방법을 인라인 스타일이라고 합니다. 웹 문서 안에서 사용할 스타일을 같은 문서 안에 정리한 것을 내부 스타일 시트라고 합니다. 전체선택자는 스타일을 문서의 모든 요소에 적용할 때 사용하고 웹 브라우저의 기본 스타일을 초기화할 때 자주 사용합니다. 테두리 사이에 여백은 약간 두는데 이것을 마진과 패딩이라고 합니다. 타입선택자는 특정 태그를 사용한 모든 요소에 스타일을 적용 특정 부분만 선택해서 스타일을 적용하려면 클래스 선택자를 사용 id선택자도 클래스 선택자와 마찬가지로 웹 문서의 특정 부분을 선택해서 스타일을 지정할 때 사용.

즉, id스타일을 웹 요소에 적용할 때는 id="아이디명"처럼 사용 #아이디명 { 스타일규칙 } 클래스 선택자와 id선택자의 가장 큰 차이는 클래스 선택자가 문서에서 여러 번 적용할 수 있는 반면, id 선택자는 문서에서 한 번만 적용할 수 있다는 것이죠.

선택자1, 선택2 { 스타일 규칙 } !important를 붙이게되면 그 스타일은 다른 스타일보다 우선순위가 높아짐을 뜻합니다.

h1 { background-color: blue; !important; }

인라인스타일: 태그 안에 style속성을 사용해 해당 태그만 스타일을 적용

id 스타일: 한 문서에 한 번만 적용(선택자 이름 앞에 #기호를 사용)

클래스 스타일: 선택자 이름앞에 .를 사용

타입스타일: 웹 문서에 사용한 특정태그에 스타일을 똑같이 적용

- 전체선택자: * {margin:0;}

- 타입선택자: p {font-style: italic;}

- 클래스 선택자: .bg {background-color}

- id선택자: #container {windth: 500px;}

- 그룹선택자: h1, h2 {text-align: center;}

먼저 깃허브에대해서 구체적으로 설명하기 전에 이미 IT시장의 70~80%이상의 개발자들은 Github은 필수로 사용하고있어요. 솔직히 80%이상이라고해도 과언이아니겠죠. 하지만, 이전에 웹퍼블리싱이나 비전공자로써 깃허브를 처음 들어보시는 분들에게는 정말 생소한 단어일 수도있죠. 정말 간략하게 설명한다면 오픈소스 프로젝트에 아주 유용하게 활용된다고 보시면됩니다. 특히나 비지니스에서 업무용으로 없어서는 안될 시스템인데요, 수많은 개발업무를 하며 이전으로 돌아가 일부 수정을 해야할 부분이 있다고하면, 깃허브를 통하여 그 시점, 즉 원하는 시점으로 돌아가 전체적으로 원활하게 관리할 수 있도록 해주는 도구라고 보시면 될 것 같아요. 그러다보니 결국은 업무중에 대량의 소스코드를 서로 일일히 주고받을 필요없이 깃허브를 통하여 주고받을 수 있으며 결국 다른 개발자들과 협업하는데도 정말 큰 도움이 된다고 보시면 됩니다. 

이렇게 깃허브에대해 간단하게 설명을 드려보았는데요 깃허브에있어서 중요한 몇가지가 있습니다. 

먼저, Git repository를 생성하고 사용하는 방법

새로운 Branch를 생성하고 관리하는 방법 

임의의 파일을 수정한 후 변경사항을 Commit하고 깃허브 Github로 Push하는방법

Pull request를 open하고 merge하는 방법으로 정리해볼 수 있습니다.

1 STEP: Repository 생성하는 법 

먼저 깃허브를 열게되면 repository는 단일 프로젝트 조직에 이용되며 폴더와 파일, 스프레드시트, 데이터셋, 이미지와 비디오에 필요한 것을 포함할 수 있습니다. 이 과정에서 프로젝트에 관한 정보가 있는 파일을 올려놓는게 중요하며 깃허브에서는 새로운 repository를 만드는 동시에 추가하기도 쉬운 장점이 있습니다. 하므로 아래와 같은 방식으로 진행해보도록 하겠습니다. 

ⓐ 우측상단의 (+)표시 클릭 -> [New repository]선택 

ⓑ [Repository name]설정 -> Ex.[Git_Tutorial]로 선택 

ⓒ [Description] 부분 간단하게 채우기

ⓓ [Initialize this repository with a README] 선택

2 STEP: Branch 생성하는 법

Branch를 통하여 이전에 상단에서 진행하였던 repository에 대한 다양한 버전의 work를 동시에 진행할 수 있어습니다. 상단 이미지에 나와있는 것처럼 master라는 branch가 있는데 보통 commit하기전에 테스트 혹은 수정할 때 사용됩니다. 예를들면 branch에서 작업하는 동안 master branch에 타인에의해 변경사항이 생긴하면 업데이트 된 사항을 pull할 수 있다는 특징이있습니다.

ⓐ [Repository]로 이동하기 

ⓑ [Branch: master]라고 표시된 드롭다운 메뉴 클릭

ⓒ 새 [Branch]이름 지정하기 

ⓓ 하단에 파란 [Create branch]버튼 클릭 

이러한 과정을 모두 거치면 branch가 master와 방금 생성한 'readme-edits'가 생성됩니다.

3 STEP: 변경사항 commit 하기 

master의 복사본 readme-edits branch가 생겼으니 변경사항을 만들고 저장하게될 단계입니다. 깃허브에서는 변경사항을 저장하는 것을 commit이라고 합니다. commit에는 변경사항에대한 간략한 설명을 담은 commit message가 있는데 이 단계에서 실행단계를 알아보려합니다. 

ⓐ [README.md]파일 클릭하기

ⓑ 편집을위해 우측상단 코너 연필모양 아이콘 클릭하기

ⓒ 에디터 본인에대해 간단설명하기

ⓓ 변경사항설명 [commit message]에 남기기

ⓔ [commit changes] 버튼 클릭하기

4 STEP: Pull Request 열기(Open) 

여기에서는 이제 pull request를 open할 수 있습니다. pull request를 통해 자신의 변경사항을 요청하면 pull request를 통해 merge를 할 수 있는 것이죠. 여기서 변경사항이나 추가사항 혹은 삭제된 사항이면 초록색과 빨간색으로 표시됩니다. commit을 하면 코드가 끝나지않아도 바로 pull request를 open하고 토론을 시작할 수 있어요. 게다가 사용자가 pull request message를 하면 특정사람에게 피드백 또한 요청할 수 있습니다.

ⓐ Pull request 탭을 누르고 페이지에서 초록색 [New pull request]버튼 눌러주기

ⓑ Examble Comparison박스에서 readme-edits branch 선택 후 master branch와 비교하기

5 STEP: Pull Request Merge하기 까지하여 모든 과정이 정리가됩니다. 

카카오톡을 이용하시면서 업무적이나 지인들에게 사진을 전송하게될 일들이 많이 생깁니다. 하지만 정말 흔한일이라고 볼 수 있는데, 이미지 사진 등을 전송할때에 원본사진은 정말 괜찮다가도 이상하게 카카오톡으로 전송하는 즉시 갑자기 용량도 줄어들고 픽셀이 깨지는 현상이 발생하곤 하죠. 저 또한 이상하게도 이메일로 전송하는것보다도 더 깨지는 걸 경험한 적이 많았어요. 그래서 이 부분을 어떻게하면 해결할 수 있을까 싶어서 방법을 이번에 공유하려고해요. 

PC버전

먼저 카카오톡 PC버전이에요. PC버전에서의 설정방법또한 정말 간단합니다. 톱니바퀴의 모양 [설정]을 클릭하여 설정창에 들어가주세요. 들어가시면 아래와같이 [채팅]이라는 메뉴가 보이실거에요. 여기서 보이는 이미지와 같이 [채팅]을 클릭해주세요. 그러면 우측의 화면처럼 동일하게 창이 넘어갈텐데요. 하단부에 보시면 [동영상 원본으로 보내기]가 있어요. 여기서 원본으로 보내야 픽셀이 깨지지 않다보니 체크를 해주시면 마무리가 됩니다. 

모바일버전 

그리고 두번째로는 PC보다 모바일로 카카오톡을 사용하는일이 거의 대부분 다반사라고 보시면되는데요. 여기서도 간단합니다. [톱니바퀴]의 모양을 클릭해주시면 하단부에 [전체설정]이라고 나옵니다 눌러주세요. 두번째 이미지에서 보이는대로 [채팅]을 눌러주세요. 세번째 이미지처럼 [사진화질]을 눌러주세요. 보시면 확인가능하시겠지만 현재 일반화질로 되어있어요. 이 부분이 문제가 되었던 것 같아요. 여기서 일반화질이아닌 원본으로 되어있어야 원본사진 그대로 픽셀이 깨지지않고 그대로 전송이되거든요. 그러므로 여기서 [원본]으로 체크를 해주실게요. 그렇게되면 마무리가 됩니다. 정말 생각보다 간단한 방법이니, 필요시에 망설이지 마시고 위의 2가지 방법에 맞추어 사용하시면 될거에요.