본문 바로가기

분류 전체보기

 (290)
변수&기본연산 let a = 2 🌐 변수 & 기본연산 프로그래밍 언어는 기계와 사람이 소통하기 위해 만든 언어로 사람이 썼기 때문에 우리 눈에 친숙하게 쓰여있다. 변수 대입( a = 2 )의 의미: "오른쪽에 있는 것을 왼쪽에 넣는 것!" (2를 a라는 변수에 넣는다) let으로 변수를 선언한다. let a = 2 let b = 3 console.log(a+b) let a = '대한' let b = '민국' // 문자열은 작은 따옴표로 감싸준다. console.log(a+b) // 변수는 값을 저장하는 박스. // 처음 변수를 저장하려면, let을 앞에 붙여준다. // 한 번 선언했으면 다시 선언하지 않고 값을 넣는다. # 사칙연산, 그리고 문자열 더하기가 기본적으로 가능
부트스트랩(bootstrap) : CSS 꾸러미 ✅ 부트스트랩 시작 탬플릿 : index.html 파일 >> meta와 title 사이 코드들 doctype html> 스파르타코딩클럽 | 부트스트랩 연습하기 이걸로 시작! Primary ✅ 부트스트랩 컴포넌트 5.0 https://getbootstrap.com/docs/5.0/components/buttons/ Buttons Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more. getbootstrap.com body에 넣어준다 >> Primary
Javascript / alert / console.log Javascript 는 웹을 움직이게 하는 코드 jQuery는 html 뼈대를 선택해서 쉽게 조작할 수 있는 코드모음, 라이브러리 Fetch는 짧은 코드로 서버에 요청을 보내고 받아올 수 있다. 자바스크립트(Javascript)란? 프로그래밍 언어 중 하나로 브라우저가 알아들을 수 있는 표준언어 기초문법은 자바스크립트 뿐만이 아니라 개념자체는 어느 프로그래밍 언어나 거의 비슷하다. 클라이언트가 서버에 요청하면 서버가 클라이언트에게 HTML+CSS+Javascript를 준다. 모든 브라우저는 기본적으로 Javascript를 알아 듣게 설계되어 있고, 모든 웹서버는 HTML+CSS+Javascript를 주게 되어있다. ✅ 자바스크립트 기초 # 자바스크립트 - HTML 연결. 버튼을 클릭하면 경고창이 뜨게하기..
github_웹 페이지 배포 ✅ Github은 인터넷에서 코드를 업로드 할 수 있는 사이트 ✅ 동시에 이 코드를 배포해서 마치 홈페이지처럼 접속할 수 있다. 1️⃣ 저장소 생성 Create Repository 선택 >> 저장소 이름 적고, public을 클릭 2️⃣ 파일 업로드 >> Upload Exsiting Files 클릭 >> finder 혹은 윈도우 탐색기 index.html 파일 드래그앤드롭으로 업로드 3️⃣ 배포 저장소에서 settings로 들어간다 >> settings 화면 왼쪽 아래 부분에서 Pages를 찾아 클릭 >> Deploy from a branch를 선택 >> Branch Name을 main으로 설정하고 save 버튼 클릭 1~5분 기다리다가 >> 새로고침 하면 >> 화면 위에 주소 노출 https://web..
포스팅 박스 만들기 1. 우선 색깔 박스로 씌우기 >> 영화URL 영화 감상평 기록하기 닫기 2. 안쪽으로 띄우기: padding: 20px; >> 그림자 효과: box-shadow: 0px 0px 3px 0px gray; > background-color: green; 없애기 .mypost { background-color: green; width: 500px; margin: 20px auto 20px auto; padding: 20px 20px 20px 20px; box-shadow: 0px 0px 3px 0px gray; } .mybtn { display: flex; flex-direction: row; align-items: center; justify-content: center; margin-top: 20px; ..
부트스트랩 카드 붙이기 doctype html> 스파르타코딩클럽 | 부트스트랩 연습하기 @import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap'); * { font-family: 'Gowun Dodum', sans-serif; } .mytitle { background-color: green; color: white; height: 250px; display: flex; flex-direction: column; align-items: center; justify-content: center; background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url..
페이지 박스 만들기_div / CSS doctype html> 스파르타코딩클럽 | 부트스트랩 연습하기 .mytitle { background-color: green; color: white; height: 250px; } 내 생애 최고의 영화들 영화 기록하기 display: flex; flex-direction: column; // 내용물 세로 정렬, row 가로정렬 align-items: center; justify-content: center; div 안 내용물 정렬에 코드 4세트 사용 >> 버튼 투명하게 / 실선 적용 .mytitle > button { width: 250px; height: 50px; background-color: transparent; border: 1px solid white; color: white; borde..
파일 분리 방법 1. 파일 분리 부분이 너무 길어지면 코드를 한눈에 보기가 어렵다. 이럴 땐 파일을 분리해주는 것이 좋다. style.css파일을 만들어 login.html에 있는 style을 style.css파일에 옮겨주고 >> login.html에는 // 넣어준다. Document 2. 라이브러리 : 인터넷에 있는 파일(코드 조각) 가져오기
코드_주석 달기 ✅ 주석 사용 1. 필요없어진 코드를 삭제하는 대신 임시로 작동하지 못하게 하고 싶을 때 .wrap { /* width: 300px; margin: 20px auto 0px auto; */ } 2. 코드에 대한 간단한 설명을 붙여두고 싶을 때 사용! * { /* 폰드 미정입니다 */ font-family: 'Do Hyeon', sans-serif; 주석을 붙여놓으면, 브라우저/컴퓨터가 읽지 않는다. 즉, 개발자 본인 또는 동료를 위해 붙여두는 것! ✅ 단축키: 주석처리하고 싶은 라인들을 선택 → ctrl(또는 command) + / (슬래시) 또는 //
구글 웹폰트_코드 적용 ✅구글웹폰트 https://fonts.google.com/?subset=korean 원하는 폰트 클릭 >> select Regular 400+ 클릭 >> 오른쪽에 @import 로 code copy >> vs code에 시작 라인에 코드 넣어준다.>> CSS rules to specify families도 >> vs code에 * { } 안에 넣어준다.(*은 모두 다 적용) @import url('https://fonts.googleapis.com/css2?family=Do+Hyeon&family=Dongle&family=East+Sea+Dokdo&family=Gugi&family=Hi+Melody&family=Nanum+Pen+Script&family=Noto+Sans+KR:wght@700&family..

티스토리툴바