개발새발

1. 어떤 프로그램을 만들 것인가? 메인화면에서 팝업창으로 이동해 사진을 선택하면 메인화면에 사진이 업로드 되는 프로그램 (마치라잌 프로필사진 변경) 2. 어떻게 구현할 것인가? 메인화면에서 '사진변경' 버튼을 누르면 팝업창이 활성화 된다 팝업창 내에서 파일선택을 가능하게 하고, 선택한 사진의 썸네일을 확인한다 팝업창 내에서 저장 버튼을 누르면 메인화면에 저장이 된다 3. 코드를 만들어보자! 0) 메인화면 구현 이미지 이미지추가 태그에 저장한 이미지를 추가할 예정이다 아래부터는 쭉 JavaScript 1) 이미지추가 버튼을 클릭했을 때 새 창 띄우기 id=add-post document.getElementById('add-post').addEventListener('click',()=>{ const po..

1. 어떤 프로그램을 만들 것인가? 외부 페이지에서 작성한 글이메인 페이지에 업로드 되는 프로그램 2. 어떻게 구현할 것인가? 메인페이지에서 글쓰기 버튼을 누르면 글을 작성하는 페이지로 이동한다 이동한 페이지에서 원하는 글을 쓰고, 작성완료 버튼을 누르면 ① localStorage에 작성한 글이 저장되고 ② 저장된 정보가 메인페이지에 업로드 된다 ③ 그리고 메인페이지로 자동 이동 코드를 작성해보자! 일단 페이지 구조를 먼저 짜봅시다 1. 게시판 페이지 (post-main.html) 참고로 css코드는 따로 파일을 만들어서 적용했습니다 게시판 글쓰기 2. 게시글 작성 페이지 (create-post.html) 게시글 작성 작성완료 ~~~여기서부터는 JavaScript~~~ post-main.html : 글쓰..

배웠던 CSS코드를 다시 공부하는 도중.. 눈에 띈 첫 줄 대체 이게 뭐였더라... 있어도 그만 없어도 그만일 것같은데..해서 알아보고 쓰는 글~ 그러니까 이게 뭔가 했더니 내가 지정한 요소의 크기 범위를 지정해주는 것이었다. 웹 브라우저에서 F12를 누르면 나오는 이 창의 맨 아래 알록달록한 그림을 통해 알아보자 box-sizing은 아래의 두 가지 속성을 가질 수 있는데, content-box border-box 각각이 가지는 의미는 다음과 같다 1. content-box 요소 그 자체의 사이즈로 크기가 지정됨 예를들어 내가 태그를 통해 어떤 요소의 사이즈를 아래와 같이 지정했다고 가정하자 width: 200px; height: 100px; 만약 이에 대해 box-sizing: content-box를..