etc...

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

이번 시간부터는 스타벅스 예제를 만들기 전에 자바 스크립트를 선행해보자! 가장 먼저 표기법에 대해 알아보자. 크게 4가지로 구분할 수 있다. dash-case(kebab-case) : 단어 사이에 대쉬 기호(-)를 사용하는 표기법. 대쉬로 연결한 단어들은 프로그램이 하나의 단어로 이해한다. html과 css에서 많이 사용한다. ex) the-quick-brown-fox ... snake_case : 단어 사이에 언더바 기호(_)를 사용하는 표기법. 마찬가지로 html과 css에서 많이 사용한다. ex) the_quick_brown_fox ... camelCase : 첫 단어는 소문자로 시작하고 뒤 단어부터는 대문자로 시작한다. js에서 많이 사용한다. ex) theQuickBrownFox ... Pasc..

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

조건문, if문에 대해 알아보자! 다른 언어 배우면서 숱하게 배웠다. 먼저 if문이란 주어진 조건에 따라 다른 실행이 이루어 지도록 구현되어있다. if-else 문으로 이루어져 있으며 조건식이 참일 경우엔 if문 다음의 코드가, 거짓일 경우엔 else문 다음의 코드가 실행된다. 만약 조건이 여러개일 경우엔 어떻게 해야할까? if(조건식1){ 수행문1; // 조건식1이 '참'인 경우 수행하고 전체 조건문을 빠져나감 } else if(조건식2){ 수행문2; // 조건식2이 '참'인 경우 수행하고 전체 조건문을 빠져나감 } else if(조건식3){ 수행문3; // 조건식3이 '참'인 경우 수행하고 전체 조건문을 빠져나감 } else{ 수행문4; // 위 조건이 모두 해당되지 않는 경우 수행됨 (디폴트 조건)..

패스트캠퍼스 챌린지 21일차 - Part1. Ch8

이번시간에는 이제까지 배운 내용을 바탕으로 간단하게 예제를 만들어보자! 오버워치의 캐릭터 선택 화면을 만들어 볼 예정이다. 먼저 오버워치 폴더를 VSCode에서 열고, index.html 파일과 main.css 파일을 생성한다. 언어는 ko로 변경하고, reset css 코드와 main.css 파일의 경로를 추가해준다. 다음으로 body 태그에 코드를 작성하는데 .container 와 같이 입력하고 Tab 키를 누르면 container 클래스를 가진 div 태그가 자동으로 생성된다. 캐릭터가 32개인데 코드를 32번 붙여넣기 할 필요 없이 .hero*32>.image 와 같이 입력하고 Tab키를 누르면 .image 클래스의 div 태그를 자식으로 가진 .hero 클래스가 32개 생성된다. 그리고 캐릭터 ..

패스트캠퍼스 챌린지 20일차 - Part1. Ch8

이제 css의 변환 효과에 대해 살펴보자. transform : 요소의 변환 효과 지정 속성. 띄어쓰기로 구분해서 [ transform: 변환함수1 변환함수2 변환함수3 ...; ] 와 같이 여러 함수를 한번에 사용할 수 있다. transform에 사용할 수 있는 변환 함수는 크게 2D 변환 함수와 3D 변환 함수로 나뉜다. 각각 살펴보자! 2D 변환 함수 translate(x, y) : x축과 y축 이동. translateX(x) 나 translateY(y)와 같이 한 쪽 축으로만 이동시킬 수 있다. 참고로 함수의 소괄호 사이에 작성하는 x, y 값 등을 인수(=인자, Argument) 라고 한다. scale(x, y) : 크기를 배로 늘려줌. rotate(deg) : 요소를 회전시킴(각도). skew..

패스트캠퍼스 챌린지 19일차 - Part1. Ch8

요소의 전 상태와 후 상태의 중간 단계를 자연스럽게 만들어주는 것을 전환 효과라고 한다. 이번 시간에는 전환 효과에 대해 살펴보자! transition : 요소의 전환(시작과 끝) 효과를 지정하는 단축 속성이다. [ transition : 속성명(property) 지속시간(duration) 타이밍함수(timing-function) 대기시간(delay) ] 과 같이 입력해준다. 여기서 지속시간은 필수 속성이다. transition에 시간 값이 하나만 들어있으면 지속시간이고, 두 개가 들어있으면 앞에 값이 지속시간, 뒤에 값이 대기시간이다. transition의 개별 속성들에 대해 살펴보자. transition-property : 전환 효과를 사용할 속성 이름을 지정한다. 기본값은 모든 속성에 적용하는 al..

패스트캠퍼스 챌린지 18일차 - Part1. Ch8

이제 container가 아니라 item에 부여하는 flex 관련 속성들에 대해 알아보자. order : Flex Item의 정렬 순서를 부여한다. 기본값은 순서가 없는 0이고, 숫자값이 작을 수록 먼저 정렬된다. flex-grow : Flex Item의 증가 너비 비율을 결정하는 속성. 기본값은 0이고 숫자값을 통해 증가 비율을 지정해 줄 수 있다. 간단하게 실습으로 알아보자! 예를 들어 아래와 같이 요소들이 있을 때, 1번 요소에 flex-grow 값을 1을 주면, 2 3번 요소는 증가 비율이 0인 상태이므로 나머지 공간을 1번 요소가 모두 차지한다. 2번 요소에 값을 2를 주고 3번 요소에 1을 주면, 증가 비율이 0인 1번 요소를 제외한 나머지 공간을 2와 3번 요소가 2대 1의 비율로 차지하게 ..