생각 작업실 The atelier of thinking

앞서 JavaScript의 변수에 대해서 알아봤습니다. 이번 회차에는 JavaScript 함수에 대해 알아보겠습니다. 1. 함수(Function)란 ? 함수란 특정 작업을 수행하도록 설계된 코드블록을 말합니다. 이러한 함수는 필요한 작업에서 호출할 때 실행됩니다. 함수는 우리가 수학에서 만나봤을 겁니다. "함수는 입력값에 따라 출력값을 만들어 내는 블랙박스와 같다." 이 말은 JavaScript 함수에도 똑같이 적용됩니다. 그뿐아니라, 거의 모든 프로그래밍 언어에 함수라는 도구를 사용합니다. 자바스크립트에서 함수는 코드를 재사용하고 구조화하기 위한 핵심적인 구성 요소입니다. 함수는 일련의 작업을 수행하는 코드 블록이며, 이를 호출하여 코드를 실행할 수 있습니다. 함수는 매개변수(parameter)를 받아..

1. 모달의 부분 2024.03.05 - [웹(Web) 이야기] - 24. 예제 - 모달 Modal 24. 예제 - 모달 Modal 지금까지 HTML, CSS에 이어 JavaScript를 HTML에 연결시키는 방법에 대해 알아봤습니다. 처음 JavaScript를 접했을 때 제일 어려웠던 부분이 변수, 객체, 배열, 반복문, 조건문 등등 생소한 용어들인데다 thinking-atelier.tistory.com 위 코드의 핵심은 모달 부분의 CSS display 속성을 클릭때마다 "block"과 "none"으로 바꿔서 요소를 나타내고 사라지게 하는 것입니다. JavaScript의 기본 문법과 구문을 통하여 알아보겠습니다. 2. JavaScript Inline JavaScript inline 은 JavaScri..

1. 모달의 부분 2024.03.05 - [웹(Web) 이야기] - 24. 예제 - 모달 Modal 24. 예제 - 모달 Modal 지금까지 HTML, CSS에 이어 JavaScript를 HTML에 연결시키는 방법에 대해 알아봤습니다. 처음 JavaScript를 접했을 때 제일 어려웠던 부분이 변수, 객체, 배열, 반복문, 조건문 등등 생소한 용어들인데다 thinking-atelier.tistory.com 앞서 소개했던 JavaScript 예제로 소개한 모달에서 CSS부문만 따로 떼어내서 보면 아래와 같습니다. 2. CSS display 속성 모달이 작동하는 원리 중 하나는 CSS의 `display` 속성을 이용하여 모달을 보이게 하거나 감추는 것입니다. `display` 속성은 요소의 표시 여부를 결정..

1. 모달의 부분 앞서 소개했던 JavsScript 예제로 소개한 모달에서 HTML 부문만 따로 떼어내서 보면 아래와 같습니다. 2024.03.05 - [웹(Web) 이야기] - 24. 예제 - 모달 Modal 24. 예제 - 모달 Modal 지금까지 HTML, CSS에 이어 JavaScript를 HTML에 연결시키는 방법에 대해 알아봤습니다. 처음 JavaScript를 접했을 때 제일 어려웠던 부분이 변수, 객체, 배열, 반복문, 조건문 등등 생소한 용어들인데다 thinking-atelier.tistory.com Image Modal Modal 1. HTML에 이미지와 모달창을 만든다. × 모달이 나타날 부분 모달의 원리는, 부분을 클릭하면, 부분이 큰 창으로 나타나는 것입니다. 그리고 "X" 를 클릭..

지금까지 HTML, CSS에 이어 JavaScript를 HTML에 연결시키는 방법에 대해 알아봤습니다. 처음 JavaScript를 접했을 때 제일 어려웠던 부분이 변수, 객체, 배열, 반복문, 조건문 등등 생소한 용어들인데다 이것이 어떤 원리로 웹페이지에 작동하는 지에 대해 모르는 상태에서 코드를 혼자 만들어 보려하니 막막하기만 하고 한 줄 작성하기 힘들었던 것이었습니다. 도움이 되었던 것은 이미 만들어진 코드를 보면서 하나씩 어떻게 연결되는 지 어떤 원리로 작동하는 지 찾아보는 것이었습니다. 처음부터 JavaScript의 모든 문법 및 구문을 다 배우고 난 후에 코드를 작성하는 것은 너무나 어려운 일 입니다. 이미 만들어진 코드를 보면서 그것에 대한 문법과 구문을 이해하는 것이 더 효율적이라 생각합니다..

앞서 HTML과 JavaScript를 연결하는 첫단계로 Script 태그와 HTML 안에서 JavaScript를 실행시킬 연결고리로 input 태그와 event 속성에 대해서 알아봤습니다. 이번 회차에는 JavaScript에서 HTML 문서 내의 특정 요소를 선택하는 방법에 대하여 알아보고자 합니다. CSS 의 선택자는 HTML의 특정 요소에 스타일 적용 시키기 위한 것처럼 JavaScript를 HTML의 특정 요소에 적용시키려면 CSS의 선택자와 같은 역할을 하는 메서드가 있습니다. 1. getElementById getElementById 메서드는 문서 내에서 특정 ID를 가진 요소를 찾아 반환합니다. ID는 문서 전체에서 고유해야 합니다. 반환 값은 해당 ID를 가진 요소이며, 일치하는 요소가 없으..

1. HTML과 JavaScript 연결 HTML 파일 내에서 이 예시에서 onclick 속성은 사용자가 버튼을 클릭했을 때 실행될 JavaScript 함수인 myFunction()을 호출합니다. 사용자가 버튼을 클릭하면 해당 함수가 실행되어 경고창이 표시됩니다. 이와 같이 이벤트 속성을 사용하여 특정 동작에 대응하여 JavaScript를 실행할 수 있습니다. 특정 동작 또는 상황을 만드는 JavaScript 코드를 HTML에서 실행하기 위해서 트리거 역할을 하는 태그 중에 하나가 input 태그 입니다. 특히 onclick 속성값으로는 JavaScript 가 와야합니다. 2. HTML - 태그 태그는 웹 페이지에서 사용자로부터 정보를 입력받기 위한 요소로 매우 중요하며 다양한 종류의 입력을 처리할 수 ..

기본적으로 JavaScript는 HTML 위에서 작동하는 언어이기 때문에 이 둘을 연결하는 것은 가장 기초적이고 중요한 작업입니다. CSS는 태그를 이용하여 연결하였다면, JavaScript는 태그를 이용하여 연결합니다. 또한, style 태그 안에서는 CSS를 사용한 것 처럼 script 태그 안에서는 JavaScript를 사용해야합니다. HTML 파일과 JavaScript를 연결하는 방법은 여러 가지가 있습니다. 1. HTML 파일 안에서 직접 코드 작성하여 연결 HTML 파일 내에서 - 외부 파일을 네트워크로 연결 JavaScript 코드를 별도의 외부 파일로 분리하고 HTML에서 이 파일을 로드할 수 있습니다. 이는 코드의 재사용성을 높이고 유지보수를 용이하게 만듭니다. ▶ myscript.js ..

만약에 자바스크립트(JavaScript)에 대해 알아보고자 할 때, 가장 처음 그리고 가장 많이 접하는 것이, " HTML은 내용을 작성하는 정보의 역할을, CSS는 디자인을 담당하고, JavaScript로는 동작을 구현한다." 라는 말 일 것입니다. 자바스크립트(JavaScript)는 정적인 웹페이지를 동적으로 움직이게 할 수 있는 역할을 담당합니다. 앞서 살펴본 HTML과 CSS 만으로도 웹페이지는 충분히 작성할 수 있습니다. 하지만, 역동적인 웹페이지를 위해서는 웹개발 프로그래밍이 필요합니다. 여러 프로그래밍언어가 있지만, 자바스크립트(JavaScript)는 웹 브라우저에서 실행되는 등의 웹 개발에 특화되어 있습니다. 1. HTML vs CSS vs JavaScript " HTML은 내용을 작성하는..

앞서 display, float를 이용한 레이아웃과 그리드 레이아웃에 대해서 알아봤습니다. 이번회차에는 Flexbox를 이용하여 웹페이지 레이아웃을 작성해보겠습니다. Flexbox는 요소 간의 공간 배분 및 정렬을 효과적으로 다룰 수 있는 강력한 레이아웃 모델을 제공합니다 아이템들 사이에 공간 배분과 정렬 기능 제공합니다. 그리드 레이아웃은 2차원 레이아웃 모델인 것에 반에 Flexbox는 1차원 레이아웃 모델입니다. 아이템들 배치를 행 또는 열로 배치하게 됩니다. Flexbox 레이아웃은 플렉스 컨테이너와 플렉스 아이템으로 구성됩니다. Flex Container (플렉스 컨테이너)는 Flexbox 레이아웃이 적용되는 부모 요소를 말합니다. display: flex;로 설정합니다. Flex Items (..