프론트엔드22 [개인프로젝트] 메인화면 레이아웃 잡기(6) 어제 대충 로그인과 회원가입 부분을 완료하였고, 오늘은 메인화면 레이아웃을 잡아 볼까 계획을 잡았습니다. 사실 책상에 앉는 거까지는 많이 힘들지만, 막상 작업을 진행하니 역시 재미있네요. 전체적인 레이아웃은 티스토리 클론 코딩을 하면서 진행을 하려고 합니다. 위에 헤더, 그 아래 왼쪽에는 섹션, 오른쪽에는 네비바를 집어넣고 진행을 했습니다. 간단한 html 코드를 살펴보면 welcome 전체 메뉴 test test test 이미지 설명 이미지 설명 일단 디자인은 이런식으로 집어넣고, 네이바의 메뉴에 따라 세션의 내용이 달라지도록 구현할 예정입니다. 다음은 CSS입니다. body { margin: 0; padding: 0; font-family: Arial, sans-serif; } header { bac.. 2023. 12. 8. [개인프로젝트] 회원가입 자바스크립트 작성하기(5) 오늘은 이제 회원가입의 자바스크립트로 핸들링하는 부분을 진행했습니다. 막상 하면 재미있는데, 하는 데까지 마음먹기가 쉽지가 안군요ㅠ 일단 오늘 진행했던 코드들 입니다. const joinButton = document.querySelector(".join"); const loginWrapper = document.querySelector(".login-wrapper"); const joinWrapper = document.querySelector(".join-wrapper"); const hiddenIdName = "hidden"; const joinForm = document.querySelector(".join-form"); const joinId = document.querySelector(".jo.. 2023. 12. 7. [개인프로젝트] 회원가입 html 디자인 하기(3) 요즘 너무 이런저런 핑계로 점점 프로젝트를 못하고 있다가, 드디어 오늘 아~~~~~주 조금 진행을 했습니다. 저번에 로그인 부분을 디자인했었는데, 오늘은 회원가입 쪽을 디자인해봤습니다. 먼저 결과 물입니다. 대부분은 로그인과 비슷하게 작성을 했습니다. 이제 join의 div태그에 hidden 속성을 반영해서 지워 주겠습니다. 짠! 다시 로그인만 나왔습니다. 이제 join 버튼을 눌렀을 때 login 창이 없어지고 join만 나오게 해야겠습니다. 먼저 join의 html태그 부분입니다. join 거의 login과 비슷합니다. 하지만 일단 보이지 않게 hidden 속성을 넣어 놨습니다. hidden의 CSS속성에는 단순히 display: none 하나만 지정을 해줬습니다. 이제 join버튼을 누르면 logi.. 2023. 12. 6. [개인프로젝트] html에서 자바스크립트로 데이터 가져오기 (2) 오늘은 개인적인 사정이 있어서 코딩을 얼마 하지 못했습니다ㅠㅠ 점점 또 느슨해지기 전에 마음을 단단히 먹고 다시 시작해야겠네요. 일단 html에 자바스크립트의 경로를 추가해 줍니다. const loginForm = document.querySelector(".login-form"); const loginId = document.querySelector(".login-form > input:nth-child(1)"); const password = document.querySelector(".login-form > input:nth-child(2)") function onSubmit(e){ e.preventDefault(); console.log(loginId.value); console.log(passw.. 2023. 12. 1. [개인프로젝트] 로그인 박스만들기(html, css) 이제까지 공부했던 CSS와 자바스크립트를 활용해서 로그인 페이지를 활용하려고 한다. 일단 로그인 박스 만들기 html Login join 간단하게 컨테이너 박스를 만드록 로그인 관련 필요한 테그들을 넣었다. body{ background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ),url("../imge/2.jpg"); background-repeat: no-repeat; background-size: cover; width: 100%; height: 100%; } .container{ display: flex; justify-content: center; align-items: center; height: 100vh; } .logi.. 2023. 11. 30. [퍼블] flex 관련 명령어들 정리 flex란 디스플레이 관련 css 명령 어므로 속성들을 1차원 형식으로 배치하겠다고 선언하는 것이다. .container > * { width: 50px; height: 50px; border: 1px solid black; } .one{ background-color: black; } .two{ background-color: blue; } .three{ background-color: yellow; } .four{ background-color: green; } .five{ background-color: red; } 해당 코드를 넣으면 이런 결과가 나옵니다. 여기에서 부모 클래스에 flex 요소를 넣어보았다. .container{ display: flex; } .container > * { widt.. 2023. 11. 16. 이전 1 2 3 4 다음
