목록분류 전체보기 (86)
heyday2024 님의 블로그
브라우저에 동적인 기능을 추가하기 위해 Javascript를 씀! 1) let으로 변수(와 해당하는 값) 선언, 두개에 다른 문자열 더하면 하나의 문장으로 생성 가능. 2) 리스트 [], 딕셔너리 {}let a = ['사과', '배', '수박'];console.log(a[0]);let person = {'name':'bob', 'age':30, 'height':180};let name = person['name'];console.log(name); //bob 3) 반복문(리스트와 주로 같이 쓰임), 조건문let age = 15;if(age let ages = [1,2,3,4,5,6];ages.forEach(el => {console.log(el)}); 4) 함수function hey(){alert..
오늘은 Bootstrap으로 netflix가 아닌 jiflix를 만들어봤다 ㅋㅋㅋㅋ 우선 bootstrap을 사용하기 위해 아래와 같은 코드를 헤드안에 삽입했고, 구글 폰츠에서 Gowun Dodum 폰트를 이용했다.@import url("https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap");* {font-family: "Gowun Dodum", sans-serif;} 부트스트랩에서 cards, jumbotron, buttons, floating labels 등을 검색하고 적절한 스타일을 선택했다. 그 후 각각 해당되는 코드를 가져와서 조금씩 수정함으로서 웹페이지를 만들어보았다. 굉장히 사용하기 간편했고, 웹페이지 또한 보기 좋은(..
Google fonts 사용해서 원하는 폰트 스타일 입히기.https://fonts.google.com/?preview.layout=grid Browse Fonts - Google FontsMaking the web more beautiful, fast, and open through great typographyfonts.google.com html 내부 코드에 css 코드 작성할 때 style 태그 이용.Google font에서 제공하는 @import ... 코드를 style 태그 안에 넣어주고, css에서 *는 모든 요소에 적용한다는 의미.* {안에 구글 폰트에서 제공하는 font-family 코드} 이용해서 모든 font에 스타일 적용. Bootstrap: 오픈 소스 프론트엔드 프레임워크로, 글..
프론트엔드(frontend): 사용자가 보는 부분을 만드는 영역 (클라이언트)UI 구현동적 웹 기능 구현API 요청 및 데이터 처리사용자 경험 개선 백엔드(backend): 사용자가 봐야할 부분을 제공해주는 영역. (서버/데이터)웹 서버 로직 구현API 구현 및 데이터 반환DB 구축 [API(Application Programming Interface)를 활용해서 클라이언트와 서버는 서로 데이터를 주고 받음. ] HTML, CSS, JS로 화면을 만드는데, 이 서비스가 커질수록 느려지고 복잡해진다. 그래서 더 빠르고 효율적인 기술을 활용하기 위해 사용하는 자바스크립트 라이브러리 중에 하나가 React 이다. 웹개발을 위해 발전된 프론트엔드 기술들1세대: HTML/CSS, JS, DOM, Event |..
프로그램이란? 사용자가 컴퓨터에게 일을 시킬 때 (명령할 때), 정해진 순서대로 일을 하는 것.(ex) 엑셀, 파워포인트... 사람이 사용하는 언어가 따로 있듯이, 컴퓨터도 컴퓨터가 해석하고 처리할 수 있는 언어가 따로 있다. 컴퓨터가 사용하는 언어인 기계어는 이진 숫자로 구성되어 있다. 인간의 입장에서는 이런 이진 숫자로 이루어진 기계어는 상당히 난해😵😵하기 때문에, 조금 더 개발자들이 프로그래밍을 쉽게 그리고 편리하게 할 수 있도록 만들어주는 언어가 존재한다. 바로 Java, Python, C++ 등의 우리가 흔히 알고 있는 프로그래밍 언어 (high level programming language) 이다.(참고로, 우리가 외국인들과 대화할 때 외국어를 번역하기 위해 번역기를 쓰듯이, high..