일반적인 웹페이지는 아래로 스크롤하면 웹페이지의 내용도 따라서 움직이고, 브라우저의 높이보다 내용이 길 경우 상단의 경계를 넘어간 부분은 보이지 않게 됩니다. 그렇지만 JavaScript를 활용하면 스크롤과 상관없이 화면에 계속 남아있게 할 수 있습니다. 이번 튜토리얼에선 페이지 중간에 있다가, 스크롤을 내리면서 페이지 상단에 고정되는 내비게이션 바를 만듭니다. 튜토리얼 정보 출처: JavaScript30 이름: Day 24 - Sticky Nav 언어: JavaScript, CSS 목표: 페이지 중간에 있다가, 스크롤을 밑으로 내리면 페이지 상단에 고정되는 내비게이션 바 만들기 진행 기간 2020년 5월 8일 마우스 스크롤 이벤트와 내비게이션 바 연동시키기 내비게이션 바가 스크롤에 따라 올라가다가 화면..

튜토리얼 출처: JavaScript30 튜토리얼 이름: Day 05 - Flex Panel Gallery 튜토리얼 분류: CSS, JavaScript 튜토리얼 설명: CSS Flex를 이용한 이미지 갤러리 진행기간: 2020년 4월 16일 CSS Flex의 특징 부모 요소를 Flex 컨테이너, 자식 요소를 Flex 아이템이라고도 함 Flex 컨테이너는 자손 요소로 상속되지 않으므로, 중첩해서 만드려면 자손 요소에게도 설정해줘야 함 CSS Flex 관련 속성들 display: flex 해당 요소를 Flex 컨테이너로 설정하는 속성 flex-direction Flex 컨테이너의 방향을 설정하는 속성 기본값은 가로이며, 가로 / 가로 역순 / 세로 / 세로 역순의 4가지 중 설정할 수 있음 justify-co..

튜토리얼 출처: JavaScript30 튜토리얼 이름: Day 03 - CSS Variables 튜토리얼 분류: JavaScript 튜토리얼 설명: JavaScript로 CSS 속성 값 변화시키기 진행기간: 2020년 4월 14일 CSS 변수 사용하기 :root 의사 클래스 활용하기 문서 트리의 root 요소를 선택함 HTML의 root 요소는 요소이므로, html 선택자와 동일한 역할을 함 ※ :root가 html 선택자보다 명시도가 더 낮음 전역 CSS 변수 선언에 주로 사용됨 참고자료 :root - CSS: Cascading Style Sheets | MDN 명시도 - CSS: Cascading Style Sheets | MDN 사용자 지정 속성(CSS 변수, 종속 변수) 정의하기 형태: --변수명..

튜토리얼 출처: JavaScript30 튜토리얼 이름: Day 02 - CSS + JS Clock 튜토리얼 분류: JavaScript 튜토리얼 설명: 직선 모양의 div 요소 3개를 현재 시각과 연동해 시계의 시침, 분침, 초침처럼 작동시키기 진행기간: 2020년 4월 13일 CSS transform( ) 속성의 기준점 설정하기 transform-origin 속성 활용 형태: transform-origin: x y z; x, y, z축 모두 조절할 수 있음 x축은 길이, left, right, center 키워드로 조절 y축은 길이, top, bottom, center 키워드로 조절 z축은 길이로 조절 기본값은 center 참고자료: transform-origin - CSS: Cascading Style..

강의: [edwith 부스트코스] 웹 프로그래밍 챕터 3, 웹 앱 개발: 예약서비스 1/4 학습일: 2020년 4월 12일 4. Web Animation - FE 웹 애니메이션 이해와 setTimeout 활용 애니메이션: 반복적인 움직임을 나타내는 것 웹 UI의 애니메이션은 JavaScript로 다양하게 제어할 수 있음 단순하고 규칙적인 애니메이션은 CSS3의 transition과 transform 속성으로 대부분 구현할 수 있음 CSS 방식은 JavaScript보다 더 빠른 성능을 보장하며, 특히 모바일 웹에서 성능 차이가 두드러짐 애니메이션이 단순하면 CSS로, 세밀한 조작이 필요하다면 JavaScript로 적절하게 나눠 구현해야 함 성능 비교를 통해 가장 빠른 방법을 찾는 과정도 필요함 FPS(Fr..

프로젝트: [edwith 부스트코스] 웹 프로그래밍 프로젝트 B, To-do List 만들기 진행기간: 2020년 4월 9일, 10일 Java 문자열 부분적으로 바꾸기 .replace( ), .replaceAll( ), .replaceFirst( ) 메서드를 사용해 바꿀 수 있음 참고자료: [Java] 문자열 치환(Replace) 사용법 & 예제 Java의 If ... Else 구문에서 ==로 비교했는데 오류가 발생할 때 해결 방법 조건식에 string == "문자열" 대신 string.equals("문자열") 사용 ==는 타입까지 비교하므로, 값이 같은데도 오류가 발생할 수 있음 참고자료: How do I compare Strings in Java? - Stack Overflow HTML form 요소..