패스트캠퍼스

패스트캠퍼스 챌린지 30일차 - Part1. Ch10

이제 헤더 오른쪽 상단의 서브 메뉴를 작업해보자. 수평 정렬 되어있는 네 개의 메뉴 사이에 미세하게 구분선이 있고 오른쪽의 돋보기를 클릭하면 검색창이 뜨는 모습을 확인할 수 있다. 먼저 google material icons 에서 search를 검색해서 원하는 돋보기 아이콘을 가져온다. 가져올 때 해당 코드를 전부 복사해와도 되지만, material-icons 클래스를 생성하고(div 태그든 span 태그든 상관없음) 여기에 해당 아이콘이 가진 이름만 복사해와도 된다. 내가 사용할 돋보기 이름은 search이므로 이것만 복사해오면 된다. 다음으로 서브 메뉴들을 li 태그 안에 a 태그로 생성한다. 만약 a 태그 안에 연결할 링크 주소가 준비되어 있지 않을 때 입력할 수 있는 방법이 2가지 있다. # 이라..

Java & SpringBoot로 시작하는 웹프로그래밍 : 자바 인강 - Ch.3

변수의 자료형은 기본 자료형(int, float, double 등)과 참조 자료형(String, Date 등)으로 나뉜다. 참조 자료형은 클래스형으로 변수를 선언하며, 클래스에 따라 사용하는 메모리의 크기가 다르다. 또한 해당 변수에 대해 생성해야 사용할 수 있다.(String 클래스는 예외적으로 생성하지 않고 사용가능!!) ex) Subject korea = new Subject(); [subject 클래스형으로 선언 / new 로 생성] 접근 제어 지시자(access modifier)는 클래스 외부에서 클래스의 멤버 변수, 메서드, 생성자를 사용할 수 있는지 여부를 지정하는 키워드이다. private : 같은 클래스 내부에서만 접근 가능 아무것도 없음 (default) : 같은 패키지 내부에서만 접근..

패스트캠퍼스 챌린지 29일차 - Part1. Ch10

이제 스타벅스 예제의 헤더 부분을 만들어보자. 왼쪽에 로고와 오른쪽에 서브메뉴, 메인메뉴로 나뉘어 있다. 여기를 확대해보면 헤더 부분의 내용이 확대되다가 일정 이상 확대되면 왼쪽을 기준으로 오른쪽이 잘리기 시작하고, 일정 이상 축소하면 헤더의 내용이 중앙에 몰려있게 된다. 기억하고 시작해보자! 먼저 바디 태그에 header 태그를 만든다. 실질적으로 어떤 기능을 수행한다기 보다는 단순하게 사이트의 헤더 영역이라는 기본적인 의미만 가지고 있는 태그이다. 안에 inner 클래스를 가진 디브 태그를 만들고, a 태그 안에 이미지 태그를 만들어 로고를 넣어준다. a 태그의 경로로는 / 만 넣어준다. 도메인/index.html 에서 도메인과 index.html을 생략한 구조로, 따라서 로고를 클릭하면 메인 페이지..

패스트캠퍼스 챌린지 28일차 - Part1. Ch10

이제 스타벅스 예제를 만들어 볼 시간!!! >_ Getting started 접속 후 CDN 아래에 link 태그 하나만 보이는 부분을 mian.css 링크 위에 붙여넣기 해준다. (main.css 파일이 가장 아래쪽에 오도록 해주자) 그런다음 icons 메뉴로 돌아가서 arrow 라고 검색해보면 화살표와 관련된 아이콘들이 검색된다. 필요한 아이콘을 선택 후 아래쪽에 뜨는 태그를 body 태그 안에 넣어주면 아이콘이 출력되는 것을 확인할 수 있다. body 태그에 입력했던 색상이 적용되어있다. 기본 크기는 24px로 되어있으며, 크기를 키울 때는 가로 세로 사이즈가 아니라 font-size 속성을 이용해 변경해주어야 한다. 즉 아이콘도 하나의 글씨처럼 취급된다!! ※ 본 포스팅은 패스트캠퍼스 환급 챌린지..

패스트캠퍼스 챌린지 27일차 - Part1. Ch9

메소드 체이닝이란 자바 스크립트에서 메소드를 체인처럼 연결해서 쓸 수 있는 기능이다. const b = a.split('').reverse().join(''); 코드를 보면 split, reverse, join 메서드를 붙여서 사용했다. 조건들이 있긴 하지만 이렇게 메서드를 연결해서 사용하는 것을 메소드 체이닝이라 한다. 참고로 더 자세한 개념은 뒤에 부분에서 배울 것!! 다음으로는 자바 스크립트에서 선행하며 배운 내용을 떠올리며 정리해보도록 하자! The quick brown fox를 낙타 표기법으로 작성 : theQuickBrownFox (소문자로 시작하고 다음 단어는 대문자로 시작) let fruits = ['Apple', 'Banana', 'Cherry']; 에서 'Banana'를 콘솔 출력 : ..

패스트캠퍼스 챌린지 26일차 - Part1. Ch9

이번에는 DOM API에 대해 알아보자. 여기서 DOM은 Document Object Model의 약어이다. Document란 HTML에 들어있는, Object Model이란 대표적으로 DIV나 SPAN 요소, INPUT 요소 등 을 의미한다. API란 Application Programming Interface로 웹 사이트가 동작하기 위해서 입력하는 프로그래밍 명령이라고 생각하면 된다. 즉 DOM API란 자바 스크립트에서 HTML을 제어하는 명령들이라고 보면 된다. body 태그에 box클래스를 가진 div 요소를 추가하고, js파일에 다음과 같이 코드를 추가해주었다. 참고로 html 파일에 js 코드 경로를 추가할 때 defer 를 추가해주어야 정상적으로 작동한다. 1번 줄의 코드는 .box 라는 ..