상단 베너 꾸미기를 할당 받았다.
git hub를 통해 협업을 시작했다.
git hub를 처음 접해본 나로써는 main 폴더를 만들어두고 branch를 만들어서 작업하는 환경 자체가 힘든 하루였다.
- git의 리눅스 명령어는
git bash 로 터미널 실행(window 환경 한정)
1. pwd (print working directory) - 현재 내가 작업하는 폴터를 보여줘, ~ 모양은 홈 경로임
2. ls (list) 내 폴더 안에 있는 폴더 & 파일 내역을 보여줘
3. ls -a (list all) 숨긴 파일 모두 보여줘
4. cd (change directory) is 명령어에서 확인된 폴더로 이동 가능!
ex) cd desktop -> 데스크탑으로 이동됨
5. clear . 지저분해진 터미널을 깔끔하게!
6. cd 폴더명 (change 폴더명)
7. .. (한 단계 위로) ex) cd ..
8 mkdir 폴더명 ( make directory ) 폴더 만들기
9 touch 파일명
- git 명령어
1. git init -> 코드 관리를 시작하는 명령어
(initialize) -> 초기 세팅하다! (딲 한 번만 입력한다) + 정확한 프로젝트 폴도 위치에서 입력해야 함
pwd
폴더 안에 .git 이라는 숨겨진 폴더가 생성 ( ls -a) .git 폴더의 코드 변경점을 git에서 추적하는 거임.
2. git add & commit
저장 명령어
git add 파일명 (저장하기 전 저장할 파일을 지정),
git commit -m "메세지 작성" (실제로 저장하는 명령어)
who r u? -> config 계정 설정 !
저장 여부 확인 명령어
git status
한 번에 저장하기
git add .
3. git log 저장 내역을 확인하는 명령어 위에 꺼가 최신꺼
git hub 백업 공유 협업
백업하기
대쉬보드 만들기 repository name 쓰고 create. 하기
git push orgin main
git hub 협업 하기 + 충돌 해결 하기
git clone 코드 가져오는 명령어 (주소 .)
git pull -> git push 해야 함
vim 에디터 뜰떄
esc : wq enter
이런것도 기본적으로 많이 사용하였지만,
git hub를 통해 코드를 가져오는 환경에서는 git pull 로 메인에 올라간 자료를 가져오고 git chekout (브랜치명) 을 통해 개인 브랜치에서 작업 수행을 하고 add commit push 과정을 거쳤던거 같다.
여기까지가 git 과 github에 관한 내용이였고, 각설하고 오늘 미니 프로젝트 진행도에 관해 til 해 보자.
메인 베너에 슬라이드로 이미지가 넘어가는 코드와 css 를 통해 코틀린 로그와 우리 팀 맴버들의 zep 사진을 삽입해야했다.
일단 메인 베너의 코드이다.
<div class="banner" id="home">
<div class="slideshow-container">
<div class="slides active-slide">
<img src="resources/image/메인화면 1.png" alt="Slide 1">
</div>
<div class="slides active-slide">
<img src="resources/image/스터디룸 3.png" alt="Slide 2">
</div>
<div class="slides active-slide">
<img src="resources/image/1111111.png" alt="Slide 3">
</div>
<div class="slides active-slide">
<img src="resources/image/1234444.png" alt="Slide 4">
</div>
</div>
<div class="banner-content">
<img src="resources/image/코틀린-removebg-preview (1).png" style="max-width: 300px; height: auto;">
</div>
</div>class 설정을 베너로 해주고 id를 홈으로 부여해 주었다.
그리고 슬라이드 효과가 필요했기 때문에 slideshow 에 관한 컨테이너도 부여하였다.
또한 코틀린 이미지 파일에 스타일을 따로 부여해서 크기의 조절을 고정값으로 부여하였다.
/* 배너 및 슬라이드쇼 스타일링 */
.banner {
position: relative;
width: 100%;
height: 400px;
overflow: hidden;
text-align: center;
color: whitesmoke;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.288);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.slideshow-container {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.slides {
display: none;
width: 100%;
height: 100%;
object-fit: cover;
}
.active-slide {
display: block;
}
.banner-content {
position: absolute;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
padding: 0px;
border-radius: 10px;
background: none;
}
.banner-content img {
max-width: 60%;
height: auto;
margin: 0 auto;
display: block;
}
.banner h1 {
font-size: 5rem;
margin: 0;
}
.banner p {
font-size: 1.5rem;
margin: 10px 0;
}css 파일이다. 하나하나 구글링해서 찾아본거 같다. 어려운 일이였다.
좀더 코틀린 로그를 왼쪽 상단에 집어 넣고 싶은데 , banner content 의 top 과 left 를 0으로 두어도 더이상 가지 않는다 배경을 제거 하고 넣은 사진이지만 더 갔으면 좋았을 텐데 문구로 하기엔 디자인을 딴거라 아쉽다.