분류 전체보기307 [내일배움캠프][미니프로젝트] 발표회 후기 그냥 일기입니다 결과물 : https://bmdk9.github.io/IntroTeam/ 메인페이지 TODAY 2002 | TOTAL 118 I-world 참고: https://www.cyworld.com 홈 김성훈 김민선 유민아 이예진 방명록 bmdk9.github.io 미니프로젝트를 하면서 배우거나 느낀 점 : 팀원 중 한 분이 만들어주신 템플릿을 활용해서 개인페이지를 만들었다. 개인페이지를 만들면서 ,,,등의 html에 대해 익히고 사진을 넣으면서 사진 넣기, 하이퍼링크 넣기, 배경 이미지 넣기, display:flex , flex-direction 으로 내부 항목을 정렬하는 방법, 부트스트랩 등 css에 관련된 전반적인 사용법도 익힐 수 있었다. 방명록 페이지를 만들면서 html의 구조와 요소들에.. 2023. 10. 11. [내일배움캠프][미니프로젝트]메인페이지에서 방명록 3줄 띄우기 개발일지 . 메인페이지는 firestore database를 이용하고 나는 방명록을 realtime database를 이용해서 만들었는데 realtime database랑 firestore database랑 한 파일 안의 script에서 같이 쓸 수 없는 것 같았다. (어제 시도했는데 configuration이랑 app이랑 뭔가 조금씩 겹치는게 달라서 쓸 수가 없었다.) 그래서 방명록은 그냥 한줄만 띄울거니 그냥 페이지간 데이터 전송을 해보기로 함 local storage로 이용해보겠다. //메인페이지에 보이게 하기 위해 저장 localStorage.setItem('content', content); localStorage.setItem('name', name); //메인페이지 저장 부분 끝 이런식으로 했었는데 .. 2023. 10. 10. 2023-10-10, Today I Learned 1. html 에서 js 파일을 분리시킬때 index.html에 db관련해서 import하는 부분은 중복해서 남겨두어야 했다 빠지면 동작하지 않음 메인페이지 2. js파일로 분리했을 때 onclick() 이 작동하지 않아 $(document).on("click"으로 바꿔야 한다. 3. Javascript에서 랜덤 함수 사용해서 배열중의 하나를 선택하는 효율적인 방법 let profiles = ['apeach','muzi','neo','prodo','ryan']; var random_index = Math.floor(Math.random() * profiles.length); var pfp = profiles[random_index]; 2023. 10. 10. [내일배움캠프][미니프로젝트]방명록 페이지 개발일지 해야할 일은 다음과 같다 1. 방명록 페이지 로딩시 db에서 불러오기 2. 내용 입력받아 db에 방명록 등록 3. 삭제 버튼 클릭시 해당하는 방명록 db에서 삭제 목표는 아래의 페이지를 구현하는 것! 일단 입력 창과 버튼들과 스크롤 바를 제일 먼저 만들었다 overflow: auto 하위 콘텐츠의 길이가 컨테이너의 길이를 초과했을 때 스크롤을 생성합니다. (초과하지 않으면 생성하지 않음) 그리고 이거 추가해서 등록버튼 오른쪽으로 밂 style="float:right" 등록버튼이 오른쪽으로 간 것을 볼 수 있다 이렇게 떴는데 div를 span으로 바꾸니까 옆에 가서 얌전히 붙었다 2023.10.05 김이름 삭제 내용 내용 내용 내용내용 내용 내용 내용내용 내용 내용 내용내용 내용 내용 내용내용 내용 내용 .. 2023. 10. 7. 2023-10-07, Today I Learned 1. LocalStorage를 이용하면 브라우저 자체에 저장해서 html 페이지간 정보를 전송할 수 있다 //메인페이지에 보이게 하기 위해 저장 localStorage.setItem('content', content); localStorage.setItem('name', name); //메인페이지 저장 부분 끝 2. js파일을 html 의 3. css파일을 html의 에서 분리하려면 html에 다음과 같이 연결해주면 된다. 4. flex: direction으로 2단으로 요소들을 쌓을 수 있다 2중으로 flex를 column, row로 지정하고 가로 flex 박스의 안에 flex:1인 요소들을 배치해서 해결했다 .photos { flex-direction: column; } .photorow{ flex-d.. 2023. 10. 7. 2023-10-06, Today I Learned 1. DataSnapshot.forEach() 를 사용하면 Datasnapshot의 하위 항목이 쿼리 순서대로 반복됨 child가 하위 항목임 const dbRef = database.ref('logs'); dbRef.on("value", (snapshot) => { snapshot.forEach((child) => { const object = child.val(); if (id == child.ref.key) { if (object.pw == password) { dbRef.child(id).remove(); } else { alert("잘못된 비밀번호"); } } }); }); 명시적인 orderBy() 메서드를 사용하지 않으면 결과가 키순으로 반환됨 내 db에 'ups'가 존재하지 않아서 그냥 생.. 2023. 10. 6. [내일배움캠프][미니프로젝트] 개인페이지 만들기 사진을 2열로 글자랑 같은 공간을 차지하게 배치하는 것이 생각보다 까다로웠다 쉴 때는 침대에 누워서 주로 아이패드로 영어공부를 합니다 책상에 앉아서 개발공부를 합니다 자주 가는 카페의 이 자리에 앉으면 집중이 잘 됩니다 동네 공원을 매일 산책합니다 .photos { width: 700px; height: 300px; display: flex; text-align: center; flex-direction: column; } .photo { width: 140px; height: 110px; /* object-fit: contain; */ margin-right: 5px; margin-bottom: 5px; border-radius: 20px; flex:1; text-align: center; vertic.. 2023. 10. 6. 2023-10-05, Today I Learned 1. html에서 스크롤바를 만들고 싶으면 overflow: auto를 이용한다. 하위 컨텐츠의 길이가 컨테이너를 초과했을때 스크롤을 생성해 줌 2. html 요소를 오른쪽으로 밀어서 표시하고 싶으면 float:right 속성을 부여한다 3. 말고 을 사용하면 줄바꿈이 되지 않고 다른 요소 옆에 가서 붙는다 4. JQuery 쓰려면 다음 코드를 html에 추가한다 5. Javascript에서 오늘 날짜를 이용할 때는 다음과 같이 한다 const today = new Date(); let day = today.getDate(); let month = today.getMonth() + 1; let year = today.getFullYear(); let date = `${year}-${month}-${day.. 2023. 10. 5. Html 속성 Html Attributes HTML 속성 모든 HTML 요소는 속성을 가질 수 있다. 속성들은 요소에 대한 추가 정보를 제공한다. 요소들은 항상 시작 태그에 명세된다. 요소들은 항상 이름과 값의 쌍으로 존재한다 name="value" href 속성 tag 는 하이퍼링크이다. href 속성은 링크가 가리키는 페이지의 URL 을 나타낸다. Visit my tistory Visit my tistory src 속성 태그는 HTML 페이지에 이미지를 삽입하기 위해 사용된다. src 속성은 나타낼 이미지의 경로를 기술한다. The src Attribute HTML images are defined with the img tag, and the filename of the image source is specified in the src at.. 2023. 9. 6. 이전 1 ··· 27 28 29 30 31 32 33 ··· 35 다음
