본문 바로가기

전체 글282

1주차_ HTML/CSS/JS로 만드는 스타벅스 웹사이트 강의 개요 프론트엔드 개발: HTML, CSS, JS를 사용해 데이터를 그래픽 사용자 인터페이스(GUI)로 변환하고 그것으로 사용자와 상호 작용할 수 있도록 하는 것. 사용자는 자신이 사용하는 컴퓨터를 가지고 있고 컴퓨터에는 웹페이지를 볼 수 있도록 여러 프로그램들을(크롬, 폭스, 엣지 등) 통해서 특정사이트에 접속하게 되고 접속한 사이트를 사용자가 보는 구조 프론트엔드는 사용자의 앞에 보이는 웹사이트 웹사이트를 프론트 엔드만으로는 만들 수 없기 때문에 실제로 보안을 요구하는 여러 데이터들이나 기타 비즈니스 로직(웹 사이트가 동작하는데 필요한, 핵심 처리를 수행하는 알고리즘 등) 등은 백엔드에서 개발이 됨 프론트 엔드를 개발하는 사람을 프론트 엔드 개발자, 백엔드를 개발하는 사람을 백엔드 개발자, GUI.. 2022. 12. 1.
3주차_서버 만들기 데이터 다루기_ 배울 것들 웹사이트에 글을 쓰고 저장버튼을 누르면 저장이 됨. 다음에 웹사이트에 돌아왔을때 쓴 글이 남아 있음 글이 남아 있다는 것은 결국 어딘가에 그 글이 저장되어 있다는 것 저장 버튼을 눌렀을 때 입력한 정보들을 백엔드 라고 부르는 프로그램으로 전달해줌 여기서 백엔드는 python으로 작성되어 있음 백엔드 코드는 제목, 내용 등의 정보를 전달하게 되면 전달된 값을 확인하고 데이터베이스라는 공간에다가 저장 나중에 화면에 다시 들어왔을 때 데이터베이스에서 데이터를 꺼내서 보여주는 코드도 백엔드에 작성이 됨 HTML, CSS, JS 코드들은 화면 구성만 할 수 있는 코드이고 데이터에 대한 코드를 작성할 때는 백엔드 프로그램을 작성해야함 데이터 다루기_Python 기본 Python 기본: 변.. 2022. 11. 30.
2주차_서버와 통신하기 3 jQuery indicator 심화 전체선택자("*"): 모든 요소를 선택 클래스 선택기(".class"): 주어진 클래스의 모든 요소를 선택 요소선택기("element"): 주어진 태그 이름을 가진 모든 요소를 선택 ID 선택자("#id"): 주어진 id 속성을 가진 단일 요소를 선택 다중 선택기("selector1, selector2, selectorN"): 지정된 모든 선택기의 결합된 결과를 선택 즉 선택기가 하나라도 만족하면 해당되는 것 여러개의 선택기를 모두 만족하게 하는 indicator을 작성하고 싶다면 $("selector1selector2")로 이어쓰면 됨 class속성은 css을 태그에 적용할때 이름을 이용해서 사용(태그에 스타일을 지정할때 사용) id는 태그에 고유한 값을 지정할때 사.. 2022. 11. 30.
2주차_서버와 통신하기 2 Ajax 연습하기 $.get(url).then(function (data) { console.log(data); }); -$.get함수 사용시 점(".")을 꼭 사용해야 함 ajax요청 중에 데이터를 가지고 오는 것은 get요청, get 요청을 만들 때 뒤에 주소를 쓰면 주소에 결과를 가지고 옴 결과를 사용할때는 .then을 연결해서 사용할 수 있음 -.then부분 작성시 괄호가 많아 제대로 작성하기 어려울 수 있음. 주의요망 위 코드의 내용은 데이터를 다 가져왔으면 then(그러면), then절이 console.log로 데이터를 출력 $.get(url).then(function (data) { for (let i = 0; i < data.length; i++) { $("#titles").text(dat.. 2022. 11. 30.
2주차_서버와 통신하기 jQuery 시작 jQuery는 빠르고 작고 기능이 풍부한 JavaScript 라이브러리 다양한 브라우저에서 작동하는 사용하기 쉬운 API를 사용하여 HTML 문서 순회 및 조작, 이벤트 처리, 애니메이션 및 Ajax와 같은 작업을 훨씬 더 간단하게 만듬 라이브러리란? 다 직접 개발하는것이 효율적이지 않으니 전세계의 많은 개발자들이 써보라고 공개를 해놓은 코드 jQuery 공식홈페이지: https://jquery.com/ jQuery What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handli.. 2022. 11. 28.
1주차_화면만들기 3 HTML 상세 label: 입력을 하는 태그들을 좀 더 쉽게 사용할 수 있도록 도와주는 태그 figure: 웹페이지로부터 독립적인 콘텐츠 표현 CSS 상세 가이드문서 링크: https://developer.mozilla.org/ko/ 부트스트랩 확장 href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" cdn: 기술적으로 최적화를 통해서 빠르게 접근해 주게 할 뿐만 아니라 어떤 서비스에서 다운로드 받았을 적에 그대로 활용 할 수 있는 장점이 있음 -외부의 있는 서비스를 이용할 때에는 cdn을 사용할 것을 권장 부트스트랩 링크: https://getbootstrap.kr/ 2022. 11. 23.
1주차_화면만들기 2 파일 관리하기 css파일과 html파일을 분리해서 관리 - 파일의 경로를 표현할때 현재 디렉토리를 표현하는 점(.)과 슬래시(/)를 꼭 포함하여 작성해야함 게시판 리스트 만들기 클래스는 각 값에 띄어쓰기로 구분, 새로운걸 넣고 싶다면 띄어쓰기를 하고 넣어주면 됨 Javascript 기본 웹사이트 안에서 어떤 동작을 만들어 낼때는 자바스크립트 사용 사용자와 상호작용하는 웹사이트를 만들때 필요 Javascript 기본문법 : 변수 let a = 10; console.log(a); - 대부분의 코드는 각 줄 마지막에 세미콜론(;)을 생략해도 동작하지만 생략하지 않는 것을 권장 지시자를 쓰고 변수명을 쓰고 변수에 들어갈 값을 씀 ex) let 변수명 = 값; Javascript 기본문법: 제어문(1) 조건문 조.. 2022. 11. 21.
1주차_화면만들기 웹 사이트의 구성원리 사용자가 브라우저를 켜서 주소를 입력 브라우저는 알파벳으로 되어있는 네이버 주소를 실제 숫자로 이루어져 있는 주소로 변경 숫자주소를 가지고 실제 네이버에게 컨텐츠 요청 이때 웹페이지를 요청하게 되면 네이버서버에서 브라우저에게 코드를 전달 브라우저가 받은 코드를 해석해서 사용자에게 페이지를 보여줌 웹사이트를 만든다는 것은 코드를 작성하는 것 위 이미지로 보면 웹사이트를 만든다는 것은 네이버가 전달해주는 코드를 작성하는 일을 말함 게시판 리스트 만들기 - 대부분의 태그는 여는태그()와 닫는태그(/)로 이루어져 있음 - 스타일 부분에 클래스 이름을 지정해서 스타일을 지정할 수 있음 클래스를 생성하여 CSS를 적용할때는 .classname {} 형태로 작성해야 함 클래스 의미를 가진 태그는.. 2022. 11. 16.
<13> HTML & CSS [속성 - 박스모델] width: 요소의 가로 너비를 지정 값: auto - 브라우저의 너비를 계산(기본값: auto, 블록요소: 100%, 인라인요소: 가로세로넓이x 글자특화) 단위 - px, em, cm등 단위로 지정 height: 요소의 세로 너비를 지정 값: auto - 브라우저의 너비를 계산(기본값: auto, 블록요소: 0, 인라인요소: 가로세로넓이x 글자특화) 단위 - px, em, cm등 단위로 지정 max-width, min-width: 요소의 최대 가로 너비를 지정, 요소의 최소 가로 너비를 지정 값: auto - 브라우저의 너비를 계산 단위 - px, em, %등 단위로 지정(기본값: none(없다)) 값: auto - 브라우저의 너비를 계산 단위 - px, em, %등 단위로 지정(.. 2022. 8. 17.

티스토리툴바