전체 글

1. 데이터베이스 개요 1) database VS file system 지금까지는 우리가 input에 입력을 해도 f5를 누르면 value가 사라졌었죠.. 이제는 데이터 베이스를 연결해서 사라지지 않도록 해볼겁니다! 우선 데이터 베이스가 뭔지부터 알아야 겠죠? 데이터베이스란? 데이터를 저장하는 구조/자료의 모음을말합니다. 우리는 자료를 저장할 떄 주로 microsoft exel에 표 형태로 데이터릉 저장했었죠? 그런 웹사이트에서는 파일을 통해서 데이터를저장하지 않고 왜 데이터베이스를 사용할까요? 바로 파일 시스템의 단점 때문입니다. 파일시스템 •단점1. 데이터 중복이 생길 수 있다. •단점2. 데이터 공유에 있어서 제한이 존재한다. •단점3. 구현과 유지보수에 시간이 오래 걸린다. 이러한 단점이 있습니다..

1. 폼 유효성 검사 console.log(form.name.checkValidity()) 어떤 요소를 선택해서 checkValidity()매서드를 사용하면 작성되었는지 않았는지 확인가능 이름 성별 남 여 async function axiosGet() { console.log('axiosGet 함수 호출!'); const form = document.forms['register']; const data = { name: form.name.value, gender: form.gender.value, }; console.log(form.name.checkValidity()); //같은 name으로 묶인 radio button은 하나만 선택되더라도 true를 반환 console.log(form.gender[0..

오늘은 드디어 백엔드에 대해서 배웠습니다...! 사실 프론트엔드를 하면서 조금 포스팅이 밀렸는데 이번주 내로 다 정리해서 올리는 것을 목표로... 그 전에 까먹지 않도록 이번주에 배운 내용부터 포스팅을 하도록 하겠습니다! 1.서버와 백엔드 우선 서버... server 많이 사용하는 말인데 어떤 의미일까요? 서버란 클라이언트에게 네트워크를 통해 서비스를 제공하는 "컴퓨터"를 의미합니다! 그래서 클라이언트는 프론트엔드, 서버는 백엔드라고 간단하게 생각해 볼 수 있어요! 클라이언트는 사람이 될수도, 컴퓨터가 될수도 있어요. 서버 하나에 여러개의 클라이언트가 연결되어있을 수 있습니다. 클라이언트(프론트엔드)와 서버(백엔드)는 어떤 관계일까요? 한번 회원가입을 하는 상황을 예를들어서 설명해보도록 하겠습니다. 위의..

이번 포스팅부터는 Javascript에 대해서 정리해보도록 하겠습니다! 그 전에! javascript가 어떤 역할을 하는지 알아야 잘 사용할 수 있겠죠? 프론트엔드에서 HTML로 뼈대를 만들고, CSS로 디자인을 했다면 Javascript는 html과 css로 꾸며놓은 웹 페이지에 동작을 불어넣는 역할을 한다고 보면 됩니다. 그럼 javascript 어떻게 사용할 수 있는지 한번 알아보도록 하겠습니다! script를 HTML에 불러오는 방법 방법1. head태그>script태그 안에 작성 방법2. head태그>script태그의 src속성에 js 파일 경로 작성 방법1과 2의 경우 모두 head태그 안에 태그를 넣는 방법인데요, 이 경우 웹페이지를 불러오기 전에 이미 동작하게됩니다. head태그 안의 내용..

이번 포스팅에서는 CSS속성 중에서 Animation에 대해서 알아보도록 하겠습니다! 우선 CSS에서 애니메이션을 사용하려면 사용하려는 대상이 있어야겠죠? 그리고 그 대상에 어떤 애니메이션을 줄 것인지가 지정되어야 합니다. 그래서 링크방식을 사용하려면 HTML에서 요소를 선택해서 그 안에 animation-name:입히고 싶은 애니메이션 이름;이 있어야하고, 해당 CSS파일 내에 @keyframe 입히고 싶은 애니메이션이름{...} 이렇게 두 줄이 필수적으로 있어야 합니다! 또한 animation속성에는 - animation-name: @keyframes 애니메이션 이름 지정 - 시작: from or 0% - 중간: 0~100% - 끝: to or 100% - animation-duration: 한 사이..

벌써 2주차가 되었네요..! 이번에는 display속성에 대해서 알아보도록 할 거에요!(조금 밀렸지만 그만큼 꼼꼼하게 다뤄보도록 하겠습니다) display속성들간의 차이점을 알아두는 것이 중요하고 특히 그 중에서도 flex가 중요하니 잘 알아두도록 합시다!! display 속성의 종류에는 inline block inline-block flex grid 등이 있습니다! 그럼 하나하나 알아보도록 할까요? 1. display: block, display: inline, display:inilne-block 먼저, display속성은 어떻게 사용하는 것인지? 사용하는 목적은 무엇인지 부터 알아야겠죠? https://developer.mozilla.org/ko/docs/Web/CSS/display display ..

이번에는 CSS의 transfrom이라는 속성에 대해서 알아보도록 할게요! 이건 입체적으로 생각해주면 조금 쉽고, 제 기준에서는 position보다는 확실히 더 쉬웠습니다! 1. transfrom transform은 요소에 이동(translate), 회전(rotate), 확대축소(scale), 비틀기(skew)효과를 부여히기 위한 함수를 제공합니다. 1) skew: 기울 2) roatate: 회전 3) translate:이동 .beach1{ /* 원래위치를파악하기 위한 배경색 */ background-color:aliceblue; width:400px; height:250px; position: absolute; top: 200px; left:200px; } img{ /* 크기의 단위로 %를 사용 :부모..

이번 포스팅에서는 다소 복잡하고 헷갈릴 수 있는 CSS속성인 position에 대해서 알아보도록 하겠습니다! 저도 이번 파트는 헷갈리는 부분도 많고 어떻게 적용되는건지 이해하는데 시간이 좀 걸렸기에 코드를 보면서 어떻게 적용되는 것인지 잘 생각하면서 따라오면 좋을 것 같습니다! position속성은 단어에서도 알 수 있듯이 위치를 설정하는 속성으로, HTML에서 어떤 요소의 원래 위치를 바꿀 때 사용하는 속성입니다. position속성에서 위치 지정 방식에는 static, relative, absolute, fixed 등이 있는데, ⚠️여기에서 주의해야할 점은 position속성이 먼저 선언 되어야 static, relative, absolute, fixed 이들 코드를 CSS파일에 입력했을 때 유의미하..