072DATA

시작하기전    시작하기에 앞서 솔직히 두 복사를 알기 위해 공부해야할 사항이 많습니다.메모리에 대한 지식이나, 원시 타입과 참조 타입 그리고 객체란 무엇인지 등 이러한 여러가지 개념들에 대해서 이해하고 있지 않다면나처럼 오랜 시간을 붙들고 있어야 할 것이며 본다고 이해가 잘 되지 않을 겁니다. 그리하여 메모리 개념과 데이터 타입에 대해 공부를 한 뒤에얕은 복사와 깊은 복사에 대한 지식을 습득하길 권장합니다. 글의 순서로는 얕은 복사, 깊은 복사 그리고두 복사의 필요성에 대해서는 짧게 작성해 보겠습니다.   얕은 복사 (Shallow Copy)     얕은 복사는 객체를 복사할 때, 그 객체 안에 있는 직접적인 속성들만 복사합니다.하지만 그 속성들이 또 다른 객체를 가리키고 있으면,그 또 다른 객체는 복..

안녕오늘은 캠프에서 개인과제( 개인 프로젝트 )로영화 정보 검색 사이트를 만들어 본 과정을 작성해 보겠습니다.개발 환경Visual Studio CodeGithub사용 기술     프론트엔드JavascriptHtml/Css 외부 API TMDB API주요 기능영화 검색영화 ID값 가져오기페이지 디자인     먼저 구조는 네비게이션바와 영화 리스트 두개의 div로 나누었습니다전체적인 분위기와 색상은 왓챠를 고려해서 비슷한 색감으로 디자인 했습니다.  네비게이션 바에서 왼쪽 상단 로고와 검색창을 같은 div로 묶고로그인/회원가입 버튼도 다른 div에 묶어서  display: flex; flex-wrap: inherit; align-items: center; justify-content: ..

안녕   이번에는 이전에 추억 앨범 페이지에 동적인 요소들을 추가하기 위해 javascript를 적용할 것이고 JQuery를 사용하여 javaScript를 더욱 간편하게 사용해 보도록 하겠습니다.     JQuery는 HTML 문서의 탐색, 이벤트 처리, 애니메이션, 그리고 Ajax 통신을 단순화하기 위해 만들어진 빠르고 간결한 JavaScript 라이브러리입니다   JQuery 문법$(document).JQuery의 메소드들  제이쿼리를 사용하면 기존 자바스크립트에서는 사용되는 문법  document.getElementById를 $표시 하나로 표현 가능합니다. 해당  문법을 참고하여 페이지를 만들어 보겠습니다. 시작!!  추억 앨범 만들기 디자인편 링크https://0723-0725.tistory.co..

안녕저는 이제 추억 앨범을 만들어 볼건데 오늘은 디자인 위주로 작성해 보겠습니다. 사실 이미 진행한 프로젝트이지만 제대로 기록하기 위해 블로그에 남겨볼까 합니다.    먼저 보면 좋은 BootStrap 활용편 링크 https://0723-0725.tistory.com/22 BootStrap을 활용하여 페이지 구성하기안녕 오늘은 CSS,HTML 및 BootStrap을 활용하여 페이지를 구성해 볼 것이다.먼저 구성할 페이지는 맛집 소개 페이지이며 JavaScript를 사용하지 않았기 때문에 기능 구현은 되어있지 않다.     초0723-0725.tistory.com시작  나만의 추억앨범 추억 저장하기      먼저 HTML의 구조를 만들고 부트 스트랩의 링크 및 폰트..

APPETIZER    이번엔 관계형 데이터베이스와 비관계형 데이터베이스의 차이점을 알아 볼거야.. 시작하기에 앞서 내가 둘의 차이를 제대로 이해하지 못했을 때 서로의 차이점은 중요한 것과 그렇게 별로 중요하지 않은 것 이라고 생각하였는데 저어어어언혀 아니더라고 현재 공부중인 캠프의 이OO 튜터님께서 말씀하셨어. " 세상에 중요하지 않은 데이터(혹은 데이터베이스)는 없다. " 튜터님의 말처럼 중요하지 않은 데이터는 없는데 나는 뭔가 비 관계형의 특징으로서 여러가지 데이터를 다룰 때 유리한 점에 있어서 뭔가 가볍게만 생각한 것 같아. 자 그러면 둘의 특징과 차이점을 한 번 같이 알아보자 !    DB? 데이터베이스?   데이터베이스란 무엇일까! 데이터가 저장된 곳? 데이터를 기록하는 곳? 전부 다 맞고 정..

안녕 오늘은 CSS,HTML 및 BootStrap을 활용하여 페이지를 구성해 볼 것이다.먼저 구성할 페이지는 맛집 소개 페이지이며 JavaScript를 사용하지 않았기 때문에 기능 구현은 되어있지 않다.     초기구성 Header와 Footer 사이에 부트스트랩을 사용하여  좌측에 있는인풋 박스를 포함한 배경 이미지를 배치할 계획이며또 각 음식에 대한 후기가 기록된 카드들을 넣어줄 것이다.        BootStrap - Jumbotron  부트스트랩 Jumbotron 링크 -https://getbootstrap.com/docs/5.3/examples/jumbotron/ Jumbotron example · Bootstrap v5.3Add borders Or, keep it light and add a..

오늘은 CSS에서 요소의 배치와 레이아웃을 조정하는 데사용되는 두 가지 속성인 Margin과 Padding에 대해서 기록해보려고 한다. 우선 두 속성을 한줄로 요약하면Margin의 경우에는 요소를 기준으로 바깥쪽에 여백을 두고 싶을 때 사용하며Padding의 경우에는 요소를 기준으로 안쪽에 여백을 넣고 싶을 때 사용한다   Margin 해당 페이지는 간단한 로그인 페이지이며 페이지 내부에 있는 요소들을 Margin을 사용하여 페이지 중심으로 옮겨 조금이나마 더 로그인 페이지처럼 보이도록 배치하려고 한다 .example { margin-top: 50px; /* 위쪽 여백 */ margin-right: auto; /* 오른쪽 여백 */ margin-bottom: 0px; /* 아래쪽 ..

font-family : 글꼴을 지정할 때 사용 글꼴테스트1 글꼴테스트2 글꼴테스트3 사용할 id의 글자{ font-family:글꼴명;} 글꼴은 컴퓨터내에 저장된 글꼴을 사용하던가 https://fonts.google.com/ 에서 다운 받음 이런식으로 링크를 추가해준 뒤 +기호가 있으면 공백으로 채워서 다음과 같이 입력한다 글꼴테스트5 #ff4{ font-family: 'Single Day';} 참고로 글꼴 제목 제데로 입력하려면 (family=)가 나온 바로 뒤의 글자부터 (&)표시가 나오기 전 글자까지 입력 후 + 기호가 있으면 공백으로 채워주고 작은 따옴표를 덮어줌 css2?family=Dokdo&family=Single+Day&display=swap (굵게 밑줄 친게 글꼴의 제목들임) 그외 글..

텍스트의 생상 지정 : color: 색상명 #c{ color: red; color: #d8add8; color: rgb(70,127,136); color: rgba(255, 15, 15, 0.399); color: hsl(210, 50%, 50%); /* h: 색상값(0~360), s:채도(%), l:명도(%)*/ color: hsla(210, 50%, 50%, 0.5); } 16진수 ex) #d8add8 rgb(x,x,x) ex) rgb(70, 127, 136) rgba (x,x,x,x(투명도)) ex) rgba(255, 15, 15, 0.399(투명도)) hsl(x,x,x) ex) hsl(210, 50%, 50%) hsla(x,x,x,(투명도)) ex) hsla(210, 50%, 50%, 0.5) 텍..

HTML의 기본구조 문서 유형 (EX/) 머리 몸체 화면에 출력해서 보여주는 모든 정보/내용 head에 들어가는 태그를 제외하고 모든 태그 사용 HTML 주의사항 태그는 대 소문자를 구분하지 않음 소문자 권장 시작 태ㅡ로 시작하면 반드시 종료태그로 종료 파일 확장자는 반드시 HTML 또는 HTM 사용 이미지 삽입 고정길이단위(px) == 기본값 : 화면 사이즈가 조정이 되어도 이미지의 크기는 변경되지 않는다. 가변길이단위(%) : 화면사이즈 또는 부모요소사이즈에 따라 이미지의 크기도 같이 변경됨 줄바꿈 태그 수평선을 넣는 태그 h 태그 관련 제목 글씨(굵은 글씨체) ctrl + k o : 별도의 브라우저 열기 shift + alt + f : 코드 정렬 브라우저 열기 : Alt + B PREVIEW : C..