공부/웹개발 종합(사전준비) 8

CSS기초(띵동코딩)3

1. momentum 페이지 만들기 1 ⅰ. 기본 틀 momentum_first.html 파일 생성후 아래 코드 작성하기 더보기 모멘텀앱 - 따라만들기 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap'); * { font-family: 'Poppins', sans-serif; } body, h1, h2, h3, p, div, a { margin: 0px; padding: 0px; text-decoration: none; font-weight: normal; 1 } $(document).ready(function () { renderGalleryItem() }); //배경 사진 함수 function ren..

CSS기초(띵동코딩)2 - 3

1. Netflix 클론코딩 ⅰ. 기본 html 틀 홈 TV프로그램 영화 내가 찜한 콘텐츠 오늘의 영화 토르: 러브 앤 썬더 오늘 한국의 Top 10 영화 오늘 한국의 추천 영화 ⅱ. 메뉴바 부분 만들기 . . body { background-color: black; } .gnb { display: flex; flex-direction: row; justify-items: center; align-items: center; padding: 20px } .gnb > a { margin: 0px 40px; color: white; } .gnb > a:last-child { margin-right: auto; } ...... ⅲ.main 구역 html + css 만들기 ........ .gnb > a:last..

CSS기초(띵동코딩)2 - 2

1. jQuery 란? 웹사이트에 자바스크립트를 쉽게 활용할 수 있도록 도와주는 오픈소스 기반의 자바스크립트 모음집의 형태 장점 코드의 가독성이 좋음 자바스크립트를 모두 알 필요 없이도 웹 사이트 제작을 용이하게 해줌 사용하는 방법 JQuery 사용을 선언하고 이름표를 붙여주고 이름을 가리키고 원하는 동작을 입력하면됨 1. jQuery CDN 부분을 참고해서 미세먼지 정보 지역별 용산구 : 80 동작구 : 29 도봉구 : 58

CSS기초(띵동코딩)2 - 1

1. 자바스크립트란? 자바스크립트는 프로그래밍 언어로 웹페이지의 동적인 동작을 만들 수 있음 웹페이지에 생동감을 불어넣기 위해 만들어진 프로그래밍 언어 자바스크립트로 작성한 프로그램을 스크립트(script)라고 부름 => 웹페이지의 HTML 안에 작성할 수 있고 웹페이지를 불러올 때 스크립트가 자동으로 실행됨 스크립트는 특별한 준비나 컴파일 없이 보통의 문자 형태로 작성할 수 있고 실행할 수 있음 2. 자바스크립트 기초 지식 쌓기 ⅰ.경고창 뜨게 하기 alert를 사용하여 경고창을 뜨게 할 수 있음 // 함수 만들기 function hey() { alert("안녕"); } // button 함수에 연결하기 로그인하기 // onclick : 버튼을 눌렀을때 실행됨 ❌ 콘솔창 여는 방법 ✔ 기본방법 - 마우..

CSS기초(띵동코딩) 1 - 2

1. 부트스크랩이란? ⅰ. 부트스트랩이란? https://getbootstrap.kr/docs/5.1/getting-started/introduction/ 시작하기 세계에서 가장 인기있는 프레임워크인 Bootstrap으로 반응형, 모바일 우선 사이트를 jsDelivr와 스타터 페이지 템플릿을 통해 시작해보세요. getbootstrap.kr html, css, javascript 작업의 부담을 덜기 위해, 트위터 개발자들이 만들어 놓은 프론트엔드 모음집 장점 복분으로 쉽게 할수 있음 => 개발 시간을 줄일 수 있음 휴대폰, 테블릿, 컴퓨터에 따라, 화면 크기가 자동으로 변함 단점 페이지 로딩 속도가 조금 느릴 수 있음 생긴 대로 가져다 쓰면 편하지만, 커스터마이징을 할 경우 새로 만드는 게 좋음 boots..

CSS기초(띵동코딩) 1 - 1

1. 웹 서비스 기초 ⅰ. 웹 서비스의 동작원리 브라우저가 하는 일은 요청을 보내고 요청 받은걸 그대로 그려주는 역할을 함 이때, 요청 받은 내용에 들어있는 것이 HTML, CSS, Javascript HTML은 뼈대, CSS는 꾸미기, Javascript는 움직이기 => 눈에 보이는 부분을 프론트엔드라고 함 ⅱ. HTML, CSS, Javascript 세 가지를 집 짓는 것에 비교한다면 집의 골조를 세우는 것은 html의 역할이고, 인테리어 하듯 홈페이지를 꾸며주는 것이 css의 역할, 불을 켜고 끄는 등 홈페이지의 동적인 역할은 javascript 2. VS Code VS Code(Visual Studio Code)란? ✔ Microsoft사가 개발해 무료로 제공하는 개발환경으로, 세계에서 가장 많이..

웹 개발 종합 2주차

1. JavaScript ⅰ. JavaScript란? 프로그래밍 언어 중 하나로 브라우저가 알아들을 수 있는 언어 역사적인 이유와 이미 만들어진 표준이기 때문에 모든 브라우저는 기본적으로 JavaScript를 알아듣게 설계되어있고, 모든 웹서버는 HTML + CSS + JavaScript를 주게됨 HTML은 뼈대, CSS는 꾸미기, JavaScript는 웹을 움직이게 하는 코드 ⅱ. JavaScript 기초 JavaScript 선언 JavaScript는 내부와 외부에 선언할 수 있음 JavaScript 선언문의 형태 . . . 버튼 console.log() ▶ 코딩한 것이 맞게 출력되는지 확인하기 위해 사용하는 명령어가 console.log() ▶ 윈도우는 F12, 맥은 fn + F12를 눌러서 개발자도..

웹개발 종합 1주차

1. 웹 브라우저 원리 브라우저는 도메인값을 사용자가 입력하고 요청하는 순간 어떠한 컴퓨터에 요청을 보내고 요청받은 내용을 그 컴퓨터에서 가져와서 보여주는 것이 브라우저의 역할 사용자가 보는 웹 페이지는 모두 서버에서 미리 준비해 두었던 것을 받아서 브라우저에서 우리가 볼 수 있도록 그려주는 역할을 수행함 ▶ 브라우저는 요청을 보내고, 요청의 답으로 받은 HTML 파일을 그려주는 일을 함 브라우저가 요청을 보내는 곳은? ▶ 서버가 만들어 놓은 API라는 창구에 미리 정해진 약속대로 요청을 보냄 ▶ 우리가 웹을 쓰는 동안 주소 창에 주소를 입력하고 엔터를 입력하면 서버로 요청을 보내게 됨 ▶ ex) http://naver.com - 이것은 "naver.com"이라는 이름의 서버에 있는 "/"라는 주소 창구..