2023-10-05 본 캠프 2일차 / 20일차 TIL

2023-10-05 본 캠프 2일차 / 20일차 TIL

팀 프로젝트 : 팀 소개 페이지 제작

진행사항

- firestorage 로컬이미지 추가, 불러오기

// Firebase 라이브러리 import
import {initializeApp} from "https://www.gstatic.com/firebasejs/10.3.1/firebase-app.js";
// FireStorage 라이브러리 import
import {getDownloadURL, getStorage, ref, uploadBytes} from "https://www.gstatic.com/firebasejs/10.3.1/firebase-storage.js";

// firebase 인스턴스 초기화
const firebaseConfig = {
// 개인 firebase 정보
}
const app = initializeApp(firebaseConfig);

// firebase-storage 인스턴스 초기화
const storage = getStorage(app);
// storage 내부 경로 설정
const storageRef = ref(storage); // storage 내부 루트 경로 지정
const imagesRef = ref(storageRef, 'images'); // storage 루트/images 경로 지정 

// 업로드 이벤트 생성
document.getElementById('클릭이벤트를 부여할 대상').addEventListener('click',function(){
	// 선택한 로컬 이미지 정보 가져오기
    const image = document.getElementById('파일을 지정한 input id').files[0];
    // storage 루트/images/image.name 경로 지정 
    const finalRef = ref(imagesRef, image.name);
    // 업로드
    uploadBytes(finalRef,image).then((snapshot) =>{
    	console.log('upload Success!');
    });
});

기능 병합 (깃)

https://github.com/kms99/IntroduceTeam

GitHub - kms99/IntroduceTeam: 내일배움캠프 4조 팀 소개 페이지입니다.

현재까지 결과물

프로젝트 예정

- 반응형 디자인 구현

- 시연 영상 제작

- GitHub Repository ReadMe 작성

---

유데미 : CSS 완벽 가이드 (Flex, Grid & Sass 포함)

- body에는 기본적으로 margin 값이 생겨있다.
- Margin Collapsing
인접한 두 요소간 마진이 겹칠 시 겹치는 부분에 대해 더 큰 마진이 적용된다
- 축약 프로퍼티
css에서는 축약 프로퍼티를 사용할 수 있다.
주요한 항목으로는 background, border, margin, padding 등이 있다.
ex)
border-color : black;
border-width : 1px;
border-style : solid;
> border : black 1px solid;

margin-top : 5px;
margin-right : 10px;
margin-bottom : 1px;
margin-left : 7px
> margin 5px 10px 1px 7px;

이와 같이 축약 프로퍼티를 사용하는 이유는 간결함 때문이다.
- blockline elements
최대 너비를 사용함 (width)
- inline elements 
요소의 크기만큼만 사용함

- box-sizing : border-box;
외부 마진을 제외한 border, padding, contents의 크기를 모두 합쳐서 요소의 크기를 결정함 (기본값, content-box)

- display 속성
display : none > 해당 요소 문서에서 삭제
display : block > 해당요소 너비 최대
display : inline > 해당 요소 너비 내부요소 크기만큼
display : inline-block > 해당 요소 너비는 기본적으로 내부요소 크기만큼이며, 요소의 너비를 직접 설정이 가능하다. 

- 의사 클래스 & 의사 요소 (pseudo classes & pseudo elements)
의사 클래스는 특수한 상태를 나타냄/:hover,:active 등/콜론 한개로 지정
의사 요소는 특정 부분을 나타냄/::first-letter, ::first-line, ::after/콜론 두개로 지정