본문 바로가기

달밤에 코딩하기

 (74)
헥사(HEX) 투명도(%) 적용하기 컬러에 투명도를 적용할 때 아래와 같이 두 가지로 작성할 수 있다. 물론 Opacity도 있지만 이는 자식 요소의 투명도에도 영향을 미치기 때문에, 컬러의 투명도만 조정하려는 의도면 아래 두 가지만 사용한다. .p1{color : rgba(255, 255, 255, 0.5);} .p2{color : #ffffff80;} p1과 p2는 모두 흰색, 투명도 50%를 뜻한다. p1의 경우, RGB 값을 알아야 하므로, 투명도는 쉽게 쓸 수 있지만 컬러값을 적기가 번거롭다. p2의 경우는 헥사코드에 투명도 값을 넣는 것이기 때문에, 자주 투명도를 표기하는 것이 아니라면 이가 더 편리하다. #ffffff80에서 80은 50%를 뜻하며, 각 투명도를 아래에 표기했다. 이제 원하는 헥사코드 뒤에 아래 번호 2자리를 ..
깃 CLI로 실행하기 깃 실행하기 깃은 아래와 같은 순서로 실행한다. 1_폴더 생성 및 코딩 깃과 연결할 폴더를 생성한 후, 해당 폴더 하위에 파일을 생성하여 코딩한다. 2_로컬 저장소 설정 위에서 생성한 폴더에서 깃을 사용할 것이라고 설정해주어야 하며, 이를 로컬 저장소 설정이라고 한다. 로컬 저장소에는 버전 정보나 원격 저장소 주소 등이 저장되며, 한 폴더에 하나의 로컬 저장소만 유지해야 한다. 해당 섹션에서 사용하는 명령어는 최하단에 별도로 정리했다. 2-1_로컬 저장소 폴더 진입 로컬 저장소 설정할 폴더 경로로 터미널을 통해 진입해야 한다. terminal.app을 실행한 뒤, pwd를 입력하여 현재 위치를 확인한다. ls를 입력하여 현재 위치에 있는 폴더 및 파일을 확인한다. cd 폴더 명을 입력하여 폴더 경로로 진..
Git 설치하기 깃(Git)이란? git은 소스 버전을 관리할 수 있도록 도와주는 소프트웨어다. 자세한 설명은 이전 포스팅을 통해 확인하자. #11-깃(git)과 깃헙(GitHub) #11-깃(git)과 깃헙(GitHub) git과 GitHub 구분하기 git은 소스 버전을 관리할 수 있도록 도와주는 소프트웨어다. GitHub은 Git 호스팅을 지원하는 웹서비스이다. git 깃은 앞서 말했듯이 소스 버전을 관리할 수 있도록 도와주는 소 rosakim90.tistory.com 깃(Git)을 사용하는 방법 깃은 terminal에서 명령어를 입력하거나, 소스트리 앱에서 UI를 통해 사용할 수 있다. 여기서 terminal을 통해 사용자와 컴퓨터가 상호작용하는 방식을 CLI (Command-line interface)라고 한다..
#11-깃(git)과 깃헙(GitHub) git과 GitHub 구분하기 git은 소스 버전을 관리할 수 있도록 도와주는 소프트웨어다. GitHub은 Git 호스팅을 지원하는 웹서비스이다. git 깃은 앞서 말했듯이 소스 버전을 관리할 수 있도록 도와주는 소프트웨어다. 버전 관리를 할 경우 위와 같이 버전이 분리되었다가, 합쳐질 수도 있다. 여기서 사용하는 단어들이 별도로 존재하며, 자세한 사항은 아래와 같다. 용어 내용 커밋 (Commit) 변경점을 기록하는 행위를 커밋이라고 한다. 위 이미지의 경우, 네모 박스(버전)이 변경점이 될 수 있다. 커밋 로그 (Commit Log) 커밋 내용에 대해 기록된 정보를 말한다. 채크아웃 (Checkout) 현재 기록된 지점을 벗어나는 것을 말한다. 이전에 기록한 특정 변경점으로 돌아갈 때 사용한다. 브랜..
#10-프레임워크와 라이브러리 프레임워크와 라이브러리란 이 주제에 대해서는 부트스트랩 쪽에서 이미 알아보았다. 때문에 자세한 사항은 하단 링크를 통해 알아보자. 구분 내용 프레임워크 하나의 애플리케이션을 구축할 때, 모든 애플리케이션의 공통적인 개발 환경을 제공해 주는 것. 개발에 필요한 화면 구현, DB 연동, 개발 환경들에 공통적인 부분을 제공함으로써, 개발 시간과 리소스 비용을 절감해 생산성을 높여주는 것. 코드와 라이브러리의 집합체. 라이브러리 소프트웨어를 개발하기 쉽게 기능을 제공하는 도구. 톱, 망치, 삽 같은 연장과 같음. 어떤 도구를 사용하든, 사용자가 원하는 것을 만들어 주는데 집중하는 것. #1-Bootstrap이란? #1-Bootstrap이란? Bootstrap을 알기 전, 라이브러리와 프레임 워크를 알아보자. 라..
#9-DB (Database, 데이터베이스) DB DB는 데이터베이스(database)의 줄임말이다. 이는 여러 사람이 공유하여 사용할 목적으로, 체계화/통합하여 관리되는 데이터 집합이다. 데이터를 관리하는 방법은 여러 가지가 있는데 가장 대표적인 것이 '관계형 데이터베이스'이다. 관계형 데이터 베이스 - DB관리 방법론 위의 이미지를 보자. 사용자/제품 표를 분리하여 ID로 관리하고, 사용자 ID와 제품 ID는 주문 표와 관계를 맺어 사용된다. 이 관계에서 각각을 지칭하는 용어가 별도로 존재하며, 자세한 내용은 아래와 같다. 그렇다면 개발자들은 왜 관계형 데이터베이스를 사용할까? 이를 알기 위해서는 데이터의 무결성에 대해 먼저 짚고 넘어갈 필요가 있다. Table : 각각의 표를 말한다. Datatbase : 사용자/주문/제품 table의 데이터..
#8-애플리케이션과 웹 애플리케이션과 웹 앞서 애플리케이션과 웹에 대해 알아봤다. 내용이 헷갈린다면 애플리케이션과 웹에 대한 글을 보고 오자. 특징 비교 애플리케이션 웹 실행 형식 서버에 있는 앱을 다운받아 클라이언트에 설치하는 형식 서버에 있는 원본 HTML/CSS/Javascript의 사본을 클라이언트 화면에 띄워 주는 형식 원본 위치 클라이언트 서버 수정 어려움 쉬움 앱스토어에 수정된 앱을 등록해 심사를 받아야 하고, 사용자가 이를 업데이트하는 과정을 거쳐야 하기 때문에 어려움 서버에 있는 원본을 수정하고, 사용자가 새로고침(페이지 이동, 탭 종료도 새로고침에 포함)만 하면 수정이 가능 네트워크 영향 적게 받음 많이 받음 데이터를 클라이언트 디바이스에 주로 저장하기 때문에 네트워크에 영향을 적게 받음 네트워크가 원활하지 ..
#7-웹 Web 웹을 구성하는 3요소 웹은 HTML, CSS, Javascript로 구성되어 있다. 아래 내용을 통해 각각 웹에서 어떤 일을 하는지 살펴보자. HTML HTML은 Hyper Text Markup Language의 약자다. HTML은 운영체제나 프로그램에 상관없이 언제나 동일하게 보이도록 하기 위해 '팀 버너스리'가 고안했다. 때문에 HTML 문서는 운영체제에 상관없이 브라우저만 있으면 어디서든 동일한 정보를 볼 수 있다. Hyper Text Markup Language의 Markup이란, "태그를 이용하여 문서나 데이터의 구조를 표현하는 것"을 말한다. 그래서 HTML 작업을 '마크업 / 마크업 개발 / 마크업 디자인 / 마크업 작업'이라고 하며, 작업자를 '마크업 개발자'라고 한다. 태그는 HTML을 ..

티스토리툴바