웹개발

함수 Function 함수 = 수납상자 코드를 잘 정리정돈 하기 위한 도구 중 하나 (객체도 있음) Parameter & Argument 매개변수와 인자 함수는 입력과 출력으로 이루어짐 입력 - paremeter, argument / 출력 - return sum(2,3) 의 2,3 =Argument 인자 function sum(x,y)의 x,y = parameter 매개변수 Return 출력 return = 함수의 결과값을 돌려줌 출력까지 하지 않고 결과값을 돌려주기만 하기때문에 이렇게 색을 바꾼다든지 폰트 크기를 바꾼다든지, 함수를 다양한 용도로 활용할 수 있음. 함수의 활용 함수를 통해 코드 리팩토링! 코드를 nightDayHandler라는 함수로 정의하고 head 안에 넣고 밑에 body에서 함수를..

이번 시간에는 코딩을 시작했다~ 페이지가 총 8개라 두개씩 분담해서 작업하기로 했다. 분담 후에는 모든 페이지에 공통적으로 들어가는 요소인 네비게이션 바를 같이 제작해보았다.저번 시간 만들어놨던 깃허브 저장소에 서로 푸시 풀 해가며 작업해보면서 깃허브 사용이 좀 더 익숙해진 것 같다. HTML 코드 EWHADULE 강의실 시간표 수강신청 CSS 코드 @import url('https://fonts.googleapis.com/css2?family=Kumar+One&display=swap'); @font-face { font-family: 'NanumSquareNeo-Variable'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_11-01@..

이번 시간에는 간단하게 디자인 해놨던 UI를 거의 완성하였다. 전체적으로 배경은 이화그린, 텍스트 색상은 하얀색으로 하였다. 메인화면은 낮 시간, 저녁 시간의 캠퍼스 사진으로 하여 시간에 따라 다르게 보이게 할 것이다. 시간표에 마우스오버했을 때 로컬 내비게이션 전체가 다 보이는 방식으로 디자인했다. 특정 페이지에 들어있을 때 내비게이션 바는 이렇게 표현할 예정이다. 강의실 페이지 시간표 페이지 전공별 교과과정 페이지는 iframe 을 사용하여 학교 홈페이지에 전공별 교과과정 보는 페이지를 넣을 것이다. 필수교양정보 페이지에서는 각자 단과대학을 고르면 이수해야하는 필수교양에 대한 정보를 정리하여 보여준다. 수강신청 페이지 시간표를 만들 때 유용하게 사용할 수 있는 에브리타임의 마법사 기능을 활용하고 있지..

이번 시간에는 협업을 위해 팀원들 깃허브를 연결하는 시간을 가졌다. 팀장이 저장소를 만들고 나머지 팀원이 포크를 해서 각자 저장소로 파일을 복제를 하였다. 이후 vs code 를 실행하여 clone repository 클릭 후 포크된 깃허브 저장소 주소를 복붙하면 연결이 완료된다. 이렇게 vs code 에서 수정사항을 만들면 자동으로 왼쪽 소스제어 창에 1표시가 뜨면서 하나의 수정사항이 생겼다는 것을 알려준다. + 를 눌러 스테이징 해주고 메시지 입력후 커밋을 눌러주면 커밋이 된다 커밋 후 푸시를 해주면 깃허브에 수정사항이 올라온 것을 확인 가능하다 . pull request를 눌러 원래 소스 작성자 (팀장) 에게 수정사항을 전달하고, 팀장이 Merge 하면 수정사항이 합쳐지는 방식으로 충돌없이 협업할 ..

아이디어 우리 팀이 구상한 웹사이트는 이대생들이 시간표를 짜고 수강신청을 하기 위해 알아야 하는 정보들을 모아놓은 웹사이트이다. 새내기 시절에 첫 수강신청에 앞서 시간표를 짜는 것이 너무 어려웠던 기억이 있었다. 필수교양은 어떤 걸 들어야하는지, 졸업하기 위해 전공은 얼마나 들어야 하는지, 시간표를 짜기 위해 알아야 할 정보는 너무 많은데 그 정보들이 다 흩어져 있어서 정보를 모으는 데에만 너무 많은 시간이 걸렸다. 시간표를 짜고 수강신청을 하기까지 알아야 하는 정보들을 하나의 웹사이트에 모아놓는다면 이러한 불편함이 해결될 것이라고 생각했다. 디자인 디자인은 피그마를 이용해 팀원 다같이 진행했다. 간단하게 작성한 IA 간단하게 디자인한 화면 아직 과정중이라 대충 아이디어만 구체화한 정도로 디자인했다. 이..

수업 구성 Statement Comparison Operator, Boolean 비교연산자 === 같은지 같지 않은지 알려줌, True False 로 출력 True & False - '불리언'이라는 데이터타입 지금까지 배운 Datatype 종류 number , string = 엄청 많음 (숫자랑 글은 무한대) boolean - true, false 둘 뿐 Conditional Statement 조건문 if(){} else{} 코드 해석 value (버튼 안에 들어간 단어)가 night 인 경우, 버튼을 클릭했을 때 background = black, text = white 가 되고 value(버튼 안에 들어가는 단어)가 day로 바뀐다. else (value 가 night이 아닌경우, 즉 day로 변한 ..

Javascript = 사람들과 동적으로 상호작용하는 웹페이지를 만들고 싶다는 욕구로부터 시작됐다. 자바스크립트는 html 위에서 사용하며 html을 제어하는 언어 수업 구성 Run Javascript Event handler 이 안에 javascript코드 작성 javascript 는 1+1을 적으면 2로 출력 html에서는 1+1을 적으면 그대로 출력 Script HTML 삽입 미리보기할 수 없는 소스 코드 결과 : hi라는 글씨가 적힌 버튼 생성, 눌렀을 때 hi라고 경고창이 뜸 input = 여러 종류의 인풋 요소 만드는 HTML tag / HTML tag used to create various types of input elements type = 인풋 요소를 특정하는 속성, 여기선 버튼 va..

1. CSS의 등장 html이 생긴 후 웹페이지를 아름답게 꾸미고 싶어짐 html에 디자인 관련 태그를 생성할 때 생기는 문제: 코드에서 웹페이지에 대한 정보와 정보가 아닌 디자인에 대한 코드가 섞이게 됨 - 정보로서의 가치 떨어진다 css - 디자인에 최적화된 언어 장점: html 태그를 중복해서 써야할 것을 한번에 해결해줌 (중복의 제거) / 코드의 가독성 증가 이 안에 css코드 작성 html이 아닌 css로 해석하라는 명령 이렇게 하면 html은 정보에만 전념할 수 있다 - 정보만 보고 싶은 사람은 이 태그 안에 있는 내용은 무시하면 되니까 2. CSS 기본 문법 주석처리: / **/ (html 주석처리는 ) 웹페이지 안에 css를 사용하는 두가지 방법 1. style 태그를 쓴다 (head 태그..

1. 코딩 준비 1. visual stuio code 설치 2. File > Open file > 원하는 파일 위치 선택 3. html 파일 생성 (원하는이름.html) .html = 확장자 4. 생성된 웹 켜놓고 실행화면 같이 보면서 코딩 (저장 눌러야 반영된다!) 2. 웹 개발을 위해 기본적으로 세팅해놔야 할 것 visual studio code 에서 ! 치면 등장 html 버전이 무엇인지 알려주는선언 (html 의 버전 및 내용을 잘 출력하도록 도와주는 역할) 은 Html 5 버전을 의미 html 태그는 아님 (! 을 붙인 이유 Character set 설정 charset = character set > utf-8로 문서를 읽으라는 명령, utf-8이 가장 많이 사용 html 본문 외에 안보이는 정..