분류 전체보기305 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. HTML 요소 HTML Element HTML element는 무엇인가? HTML element 는 start tag, some content, end tag로 정의된다. 내용 HTML element는 start tag 부터 end tag의 모든 것이다. My First Heading My first paragraph. Start tag Element content End tag My First Heading My first paragraph. none none 은 내용이 없기에 안 닫아도 되어서 end tag가 없다. 중첩된 HTML Elements HTML element들은 중첩될 수 있다. element가 다른 element를 포함할 수 있다. HTML document들은 중첩된 HTML element들로 구성된다. 4개의 HTML e.. 2023. 9. 4. HTML은 무엇인가? What is HTML? HTML은 무엇인가? HTML 은 Hyper Text Markup Language 이다. HTML 은 Web pages를 만들기 위한 standard markup language 이다. HTML 은 Web page의 구조를 기술한다. HTML 은 elements 로 구성된다. HTML elements는 브라우저에게 내용물을 어떻게 보여줘야 하는지 알려준다. HTML elements는 내용이 어떤 부분인지를 명명한다. such as "this is a heading", "this is a paragraph", "this is a link", etc. My First Heading My first paragraph. HTML5 document 인 것을 나타냄 HTML page의 root element HTM.. 2023. 9. 4. 이전 1 ··· 27 28 29 30 31 32 33 34 다음
