본문 바로가기

전체 글

 (19)
CSS 그리드로 요소 정렬하기 CSS 그리드 플렉스 박스와 마찬가지로 그리드도 CSS에서 기본으로 제공하는 기능 중 하나이다. 즉, 따로 설치 같은 걸 하지 않아도 된다는 뜻이다. 이미 모두가 가지고 있기 때문이다. 플렉스 박스는 1차원적 레이아웃에서 빛을 발한다. 요소들을 행이나 열에 정렬할 때 사용하면 정말 좋다. 플렉스 박스와는 다르게, 그리드는 2차원적 레이아웃에서 빛을 발한다. 열과 행을 통제해야하는 레이아웃을 만들 때를 말한다. 위의 이미지는 그리드에 대해 알아보기 위해 사용한 화면이다. 기본적인 블록 요소의 정렬 방식이 적용되어 있다. 각각의 요소가 다른 하나의 밑에 위치하는 것이다. 이렇게 정렬되어 있는 블록 요소를 두 개의 열을 따라 정렬되도록 수정할 것이다. 그리드는 플렉스 박스의 핵심 이론을 따라가는데, 바로 컨테..
포지셔닝 요소 알아보기 포지셔닝 요소(positioning element) 이전 글에서 언급하진 않았지만 배경에 이미지를 추가하고 앞의 팝업 상자를 중앙으로 이동시키려 했지만 실패했다. 이번에는 그걸 가능하게 해주는 포지셔닝 요소(positioning element)에 대해 알아볼 것이다. 일반적으로 요소들은 html파일에서 작성된 순서대로 존재한다. 플렉스 박스 등으로 바꿀 수도 있지만 일반적인 문서 흐름(documnet flow)에서는 그렇다. Element 2를 다르게 위치시켜 볼건데, 몇가지 선택지가 있다. 하나는 문서 흐름이라고 불리는 것에서 위치를 바꿔주는 것이다. 문서 흐름은 HTML에서 사전 정의된 요소의 순서를 말한다. 예를 들어, 먼저 작성된 블록 요소는 위에, 나중에 작성된 블록 요소는 아래에 위치하고 이것..
이미지를 배경으로 설정하는 방법 이미지를 배경으로 설정하기 지금까지 공부한 바에 의하면 html에서 요소는 인라인 요소와 블록 요소로 나뉜다. 간단하게, 인라인 요소는 텍스트처럼 같은 줄에, 블록 요소는 하나 다음에 하나가 보여지는 것이었다. 하지만 배경에 이미지를 넣으려면 어떻게 해야할까? 이미지를 배경으로 설정한다면, 그 이미지 위에 다른 요소들이 나타나야하고, 경우에 따라선 모든 내용이 그 위에 존재할 수 있어야 한다. 그러니 인라인 요소와 블록 요소에 대한 개념으로는 배경에 이미지를 적용할 수 없다. 배경은 요소 옆에 배치하거나, 요소 다음에 배치하는 것과는 다르기 때문이다. 해결 방법은 생각보다 간단한데, CSS 코드를 이용하는 것이다. 사용하는 속성은 CSS의 backgroung-image: ; 속성이다. 값으론 url(""..
플렉스 박스 - 요소 위치 변경하기 플렉스 박스(flex box) 플렉스 박스는 따로 설치해야하거나 분리되어 있는 도구는 아니다. 그저 CSS에서 기본적으로 사용되는 것이다. 플렉스 박스(Flexible box)라는 이름에서 보여주듯이 이 개념으로 박스 안의 요소들이 정렬되거나 배치되는 방법과 공간을 관리할 수 있다. 사용할 때, 플렉스 컨테이너라고 불리는 것을 정해주어야 하며, 이 컨테이너가 플렉스 개별 항목들의 부모 역할이다. 컨테이너를 통해서 개별 항목의 레이아웃을 쉽게 관리하는 것이다. ///index.html Travel Goals Destinations About ///styles.css #container { background-color: rgb(82, 23, 81); padding: 10px; width: 600px; } ..
깃허브 - 장점, 푸시, 클론 등으로 프로젝트 관리하기 깃허브를 이용하면 로컬 영역을 벗어나 가지고 있는 로컬 레포지토리를 깃허브 클라우드에 가져올 수 있다. 주로 네 가지 주된 사용처가 있다. 1인 개발에서의 깃허브 클라우드 저장소(Cloud Storage) 먼저, 깃허브는 단체 프로젝트 전에 1인 개발에도 사용된다. 말 그대로 혼자 프로그램을 만드는 것을 말한다. 1인 개발에서 깃허브의 장점은 코드와 프로젝트를 저장하도록 돕는다는 것이다.또한, 로컬 방식으로 본인의 컴퓨터 등에 저장하는 것뿐 아니라 클라우드에 저장하는 것으로 다른 컴퓨터들에서 원하는 파일에 접근할 수 있고, 컴퓨터나 노트북 같은 하드웨어가 고장나더라도 정보를 안전하게 저장할 수 있다는 장점이 있다. 포트폴리오 페이지(Portfolio Page) 두 번째로, 우리는 깃허브를 이용해 우리를 ..
깃 - 브랜치 추가, 병합, 삭제 등으로 관리하기 git 프로젝트의 branch 여러 스냅샷과 커밋을 저장하고 레포지토리를 초기화하면 이 커밋들이 브랜치(branch)의 일부가 된다. 기본적으로 디폴트 브랜치는 'master branch'이다. 이 사실은 git status 명령어를 통해 알 수 있다. 초기화 후 브랜치에 대한 다른 설정이나 실행을 하지 않았을 때의 상황인데, On branch master 문구를 통해 현재 마스터 브랜치에 위치하고 있음을 알 수 있다. 다른 방법은 git branch 명령어이다. 실행 시, git 프로젝트 안에 있는 브랜치를 나열해준다. 녹색 글씨와 브랜치 이름 앞의 별표로 현재 속한 브랜치를 알 수 있다. 이 명령어를 통해 브랜치의 이름을 확인하고 바꾸는데 활용할 수 있다. 기본 브랜치의 이름은 마스터(master) ..
깃 - 레포지토리 초기화, 깃 개인 자격 정보 변경, 커밋 생성 레포지토리 초기화 깃을 활용하기 위해서, 터미널 또는 명령 프롬프트를 사용해야한다. vsc에서 구현된 터미널을 사용하면 간편하다. vsc에서 "Ctrl + ~"를 입력하면 터미널 패널이 나온다. 윈도우에선 터미널 패널 오른쪽의 "+" 옆에 있는 화살표를 눌러 cmd를 골라주면 된다. 이제 터미널을 현재 폴더로 연계해야하고, 첫 파일을 깃으로 관리해보자. git status로 프로젝트 정보 확인하기 먼저, 명령어를 통해 프로젝트가 깃으로 관리되는지를 확인한다. 명령어는 git status이다. git status를 통해 현재 깃 프로젝트 정보를 확인할 수 있고, 우리가 마스터 브랜치 안에 위치한 것도 확인할 수 있다. 현재는 어떤 커밋도 저장되어 있지 않다. 그리고 Untracked files 라는 문구를..
깃과 깃허브 알아보기 코드를 작성한다면 초기 코드에서 최신 코드로 오기까지 코드가 달라지는 과정이 반복된다. 코드를 수정하고 작성하는 각 단계마다 서로 다른 코드가 존재한다. 이 과정에서 코드에 버그가 생기는 등 문제가 발생할 수 있다. 하지만 코드의 진행상황을 저장하기 위해서 여러 버전의 코드를 각기 다른 폴더에 따로 저장하는 것은 효율적이지 않다. 그래서 알아야하는 것이 버전관리, 버전제어이다. 이것은 효율적인 제어와 시간 경과에 따른 코드를 추적하는데 쓰인다. 또한, 각각의 복사본을 만들지 않고, 진행 상황을 일지 않으면서 각 단계의 코드를 쉽게 저장할 수 있게 해준다. git과 GitHub는 버전제어와 관리를 하게해주는 도구이다. git git은 로컬 도구이다. 무료로 제공되며 다운로드해서 사용할 수 있다. 이 도구를..

티스토리툴바