Front-End Study89 Google 시작 홈페이지 만들어보기 홈페이지 제작 연습 겸 Google 시작 홈페이지를 만들어보았다. 개발자 도구도 뜯어보고 직접 클릭도 해보며 이 간단해보이는 화면도 정말 디테일적이고 구현되어 있는 요소가 많다는 것을 느끼고 아직 한참 부족하다는 생각이 들었다… 정진해야지 🙂 1. 헤더 처음 구글 홈페이지를 켰을 때 나오는 화면 중 최상단 부분 구현 Google 정보 스토어 Gmail 이미지 .header{ display:flex; justify-content:space-between; width:100%; } .header ul{ display:flex; flex-direction: row; margin: 10px 20px; } .header ul li{ display:flex; justify-content: center; align-.. 2024. 1. 15. 메이플스토리 홈페이지 로그인 화면 만들어보기 요즘 여기저기서 말이 많긴 한데… 나름 애정하는 게임이라 연습겸 로그인 페이지를 만들어보았다. /* 기본 CSS */ *{ margin:0; padding:0; box-sizing: border-box; } a{ text-decoration: none; color:#8f8e91; } body{ font-family: 'Noto Sans KR', sans-serif; background:#2f2c34; height:100vh; } 1. 헤더 및 제목 맨 위 아이콘들과 메이플스토리 로고, 제목을 구현 메이플스토리 로그인 .container header{ display: flex; justify-content: space-between; /*아이콘과 로고가 반대위치인 것을 고려*/ } .container he.. 2024. 1. 9. 나만의 페이지 만들기 최근 코딩 자율학습단 5기를 끝마침과 더불어 직접 무언가를 만들어보고 싶지만 아직 초짜라는 것을 잘 알기에 간단한 것부터 차근차근 해보고싶어 만들어보았다. CSS 적용 시 편의성을 위하여 방법론 중 하나인 컨테이너와 콘텐츠의 분리(OOCSS)를 최대한 생각 하며 작성하고자 했다. /* 기본 CSS */ *{ padding:0; margin:0; box-sizing: border-box; } body{ margin : 0 auto; width : 100%; background-repeat: no-repeat; background-attachment: fixed; background-position: center; background-size: cover; color : white; } 1. 시계 Text .. 2024. 1. 7. [코딩 자율학습] HTM+CSS+JS 학습 후기 안녕하세요!! 이번에 코딩 자율학습단 5기 신청하고 학습하면서 느낀점과 후기를 작성해보려 합니다😊 저는 대학교 전공이 소프트웨어지만 아직 어떤 분야로 가고싶은지, 어떻게 공부해야하는지 갈피를 잡지 못하던 와중에 우선 뭐라도 해보자 라는 마음으로 무작정 학습단 신청을 하게 되었습니다. 이런 학습단같은 스터디를 따로 해본적이 없어서 잘 따라갈 수 있을지, 걱정도 많이 했었지만 체계적인 구성과 유튜브 강의, 깃허브에 업로드 되어있는 교재관련 자료 등과 더불어 공부일에 맞춰 진도를 맞춰주는 코딩 자율학습 카카오톡 채널 알림 등 다양한 디테일적 요소들을 통해 재미있고, 쉽게 끝까지 할 수 있었다고 생각합니다👍👍 더불어 일단 프론트부터 해보자라는 다소 계획적이지 않은 결정이었음에도 불구하고, 교재에 대한 학습을 다.. 2023. 12. 18. 13장_HTML+CSS+JS로 완성하는 최종 프로젝트_5 13.10 자바 스크립트 적용하기 텍스트 타이핑 효과 구현하기 (function () { // span 요소 노드 가져오기 const spanEl = document.querySelector("main h2 span"); // 화면에 표시할 문장 배열 const txtArr = ['Baby Front-End Developer.', 'Clone Coding Master.']; // 배열의 인덱스 초기값 let index = 0; // 화면에 표시할 문장 배열에서 요소를 하나 가져온 뒤, 배열로 만들기 let currentTxt = txtArr[index].split(""); function writeTxt(){ spanEl.textContent += currentTxt.shift(); if(currentT.. 2023. 12. 15. 13장_HTML+CSS+JS로 완성하는 최종 프로젝트_4 13.8 섹션 영역 만들기 : Contact HTML 코드 작성하기 왼, 오른쪽 영역을 구분하여 작성(div 태그 class명을 left, right로 분할) CONTACT CONTACT WITH ME phone 010-1234-5678 e-mail jungwk1020@gmail.com address 86 MILLER ANGOLA NY 14006-1028 USA name e-mail messege send CSS 코드 작성하기 section.contact .contact-me::after{ content:""; display:block; clear:both; } section.contact .contact-me .left{ width:30%; float:left; } section.contact .con.. 2023. 12. 15. 이전 1 ··· 8 9 10 11 12 13 14 15 다음
