전체 글

패스트캠퍼스 챌린지 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을 생략한 구조로, 따라서 로고를 클릭하면 메인 페이지..

정처기 2021 3회차 시험

드뎌 정처기 끝났다....... 대략 필기는 3주간 실기는 2주 정도 준비했다. 사실 실기는 준비를 늦게 시작해서 이미 글렀나 싶고 중간에 안될거 같다 생각도 들었다... 그냥 내년 1회차 시험을 준비할까 하다가 떨어지더라도 미리 공부해놓으면 내년에 편할 것 같아서 그냥 열심히 했다. 나는 전공자는 아니어도 반전공자(?)는 되니까... 열심히 하면 될것도 같았다. 필기랑 겹치는 부분이 많아서 그래도 수월하게 공부했던 것 같다. 실기 필기 모두 비슷한 방법으로 공부했다. 첫째날 수제비 정처기 인강 듣고 / 둘째날 강의 들었던 부분 PDF 필기본 1회독, 교재 1회독, 타이핑 하며 중요한 부분 정리 / 셋째날 다시 교재 1회독 이렇게 매일 반복했다. 그러니까 하루에 -> 이틀 전 공부한 부분 교재 1회독, ..

패스트캠퍼스 챌린지 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'를 콘솔 출력 : ..