김기지의 코딩노트

띵동코딩의 로그인 페이지를 만들어보자. 기본적인 틀과 이미지 파일이 들어있는 뼈대는 코드스니펫을 사용했다. 여기서부터 시작!! 구역을 나누어보자. 이미지의 위치와 크기는 지정되어있으므로 건들이지 않고 1번 구역부터 꾸며주자. 우선 텍스트가 왼쪽에 몰려있으므로 오른쪽에서 여백을 쭉 밀어준다. 문단 사이의 간격을 떨어뜨리고 글자의 크기를 키워준다. .wrap > p { margin-right: auto; font-size: 24px; line-height: 35px; font-weight: 450; margin-top: 10px; } 얼추 비슷한거같으니 버튼을 꾸며보자. 버튼의 크기를 맞춰준 후 배경색과 글자의 속성을 바꾼다. 테두리는 없애주고 모서리도 둥글게 맞춰주고 상단 여백도 띄어주자. 버튼에 커서를 ..

오늘 배울것은? 1) 함수 2) 조건문 3) 반복문 1) 함수 -함수 만들기 function 함수이름(받을 미지수) { 실행 되길 원하는 동작 작성 } (콘솔에서 작성 시 줄바꿈은 shift+enter) -함수 호출하기 함수이름(미지수) ex) console.log가 먼저 돌고 return이 나중에 입력되었다. 함수를 설정한 후 변수값을 주어 안의 미지수값을 다르게 하면 console.log값이 result안에 들어가고 result값을 출력하면 7이 나온다. 2) 조건문 -조건문 입력하기 if (조건) { 위 조건을 충족한다면, 해당 문이 실행됨 } else if (조건) { 위 조건을 충족한다면, 해당 문이 실행됨 } else { 위 조건들을 만족시키지 못한다면, 해당 문이 실행됨 } ex) 함수에 조..

◎자바스크립트 : 웹페이지를 움직이게 하는 근육. (웹페이지의 동작을 만들수있음) ● 자바스크립트 맛보기 자바스크립트를 사용하려면 동작을 실행시킬 공간이 필요함. (전에 만든 로그인 페이지를 가져와 실행했다.) -버튼을 누르면 메세지창이 뜨게하기 먼저 자바스크립트는 안의 버튼을 클릭했을 때 실행이 되도록해야하기때문에 에 onclick="hey()"를 넣어준다. 저장 후 페이지를 띄워 버튼을 누르면? 메세지창이 뜬다. 여기서 마우스 오른쪽을 누르고 검사에 들어가면 '콘솔'이라는 창이 있는데, 이 곳은 자바스크립트와 이어진 곳으로 자바스크립트를 설정할때 마다 창을 새로고침해서 테스트를 하는 번거로움을 덜어주기 위한 곳이다. 그럼 콘솔창을 통해 기초적인 문법 연습을 하자. ○ 자바스크립트 문법 기초 1) 변수..

오늘 만들어볼 것은 (((파타고니아 클론코딩))) 파타고니아의 메인 페이지를 클론코딩해보자!! 클론코딩을 하기 전 계획을 세워보자. 1. 구역 계획하기 → 2. 부트스트랩 요소 찾아서 복사 붙여 넣기 → 3. HTML, CSS 수정하기 1. 구역 계획 크게 ①gnb구역 ②main구역 ③items구역 으로 나누었다. 구역을 나누었으니 ①gnb구역부터 시작하자. ①gnb구역 상단 메뉴바를 보면 구역이 2개로 나누어져있고, 이미지, 텍스트, 검색바, 아이콘으로 이루어져있다. 텍스트는 클릭이 되었을 때 다른곳으로 이동이 되어야한다. (여기서는 이동하지 않음) 그렇다면 태그를 사용하자. 먼저 html 요소를 배치한다. 우선 메뉴바의 위쪽을 배치하면 Climat Goals 푸른 심장 Worn Wear | 더보기 아..

이번 강의에서는 '부트스트랩'을 활용해보았다. ◎ 부트스트랩이란? html, css, javascript 작업의 부담을 덜기 위해, 트위터 개발자들이 만들어 놓은 프론트엔드 모음집 ○ 장점 - 복붙하면 사용할 수 있음 (개발 시간을 줄일 수 있다.) - 핸드폰, 태블릿, 컴퓨터에 따라 화면 크기가 자동으로 변함 ○ 단점 - 페이지 로딩 속도가 조금 느려질 수 있음 - 커스터마이징은 힘듬 부트스트랩을 둘러보자. → https://getbootstrap.kr/docs/5.1/getting-started/introduction/ 시작하기 세계에서 가장 인기있는 프레임워크인 Bootstrap으로 반응형, 모바일 우선 사이트를 jsDelivr와 스타터 페이지 템플릿을 통해 시작해보세요. getbootstrap.k..

오늘은 그동안 배운 HTML과 CSS를 복습했다. '온라인 청첩장' 만들기~~ 내가 만들어 볼 결과물은 바로.. (https://bumkyulee20220610.github.io/mypage/index.html) 길이감에 압도를 당해버렸ㄷ... 뼈대는 띵동코딩에서 제공한 코드니스니펫(폰트, 가로길이 등 기본적인 속성이 입력되어 있음)으로 했다. cssc를 들어가기 전 세 가지 고려사항이 있다. 1. 구역을 먼저 계획할것. 2. 배경색, 폰트는 PINK 3. 자간 간격 설정은 letter-spacing을 사용할 것. 먼저 구역을 설정해보자. 크게 5가지로 나누었다. 우선 안에 들어갈 내용물을 에 넣어주자. 영희와 철수의 첫 시작을 축하해주세요 Save The Date 12.31.SUNDAY.PM.12:30..

◎브라우저의 역할 : 요청을 보내고 받은 HTML파일을 그려주는 일 오늘 만들 것 → 띵동코딩 로그인 페이지 클론 코딩을 하기 전 계획을 세우는게 좋다. 1. 구역 계획하기 → 2. HTML 쓰기 → 3. CSS설정하기 1. 구역을 나누어보자 -GNB : 어느 페이지에 들어가든 공통적으로 사용할수 있는 메뉴 바 -Main : 본문의 주 컨텐츠 -CTA : 사용자의 반응을 유도 하기 위한 버튼이나, 배너(하단에 고정되어 있음) 여기에 쓰일 태그를 매칭해보자 태그를 사용하는 이유? → 글자단위를 묶는 태그로 줄바꿈이 일어나지 않는다. 1) GNB구역 구역을 나누었으니 부분에 들어갈 내용물을 적어준다. css를 설정해야 하므로 명칭을 달아주자. 로그인 저장 후 출력해보면 이미지와 글자가 왼쪽에 붙어있다. 우선..

웹 서비스의 동작원리 : 브라우저가 서버에 요청을 보내고 서버의 응답을 출력한다. ◎기본 구조 -HTML : 뼈대 -CSS : 살(꾸미기) -Javascript : 근육(움직임) ●HTML -기본적으로 와 로 이루어져있다. 에는 웹페이지에 보이는 내용을 넣고 에서는 의 내용물에 대한 설정을 한다. ●주요태그 살펴보기 로그인 페이지를 만들어보자! 우선 만들고자 하는 결과물을 보면서 따라하자 1. 제목 만들기 '로그인페이지'가 제목이므로 에 태그로 넣어준다. 로그인 페이지 2. ID,PW 넣기 주요태그 목록에 있는 태그를 사용하자. 여기서 PW입력칸의 내용을 안보이게 하고 싶다면 type=password를 사용한다. ID PW 3. 버튼 넣기 태그를 사용하자. 로그인하기 여기까지 한 걸 출력해보면? 을 제외..

◎ Subquery : 쿼리 안의 쿼리. 코드를 편하고 간단하게 하기 위해서 사용한다. ● WHERE절에 들어가는 서브쿼리 : where 필드명 in (서브쿼리) ● SELECT절에 들어가는 서브쿼리 : select 필드명, 필드명(서브쿼리) from 필드 ● FROM절에 들어가는 서브쿼리 : inner join (서브쿼리) a on ● where절 카카오페이로 결제한 유저정보 출력하기 - ① orders테이블과 users테이블을 묶어줌 : select * from users u inner join orders o on u.user_id = o.user_id ② 결제수단이 카카오페이인 경우만 나오게하기 : where payment_method = 'kakaopay' 합치면 select u.user_id ..

● JOIN : 테이블과 테이블을 붙이는 것. 두 테이블이 공통된 정보(key값)를 가지고 있어야함. 종류 : Left join, Inner join -Left join : a테이블을 기준으로 b를 붙인다. ex) users테이블에 point_users테이블 붙이기 1. 각 테이블을 실행시킨다. 2. 두 테이블이 공통적으로 갖고있는 필드를 찾는다. 3. 공통필드로 붙여준다. selesct * from users u (별칭 붙여주기) left join point_users pu on u.user_id = pu.user_id →pu의 user_id를 u의 user_id에 이어준다 left join은 두 테이블의 공통 부분을 붙여주기 때문에 결과값이 없는 경우도 있다. (NULL) ● Inner join : ..