생각 작업실 The atelier of thinking

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 (..

지난 회차에 그리드 레이아웃에 대해 알아봤습니다. 이번회차에는 그리드 레이아웃을 이용해 간단한 포토 갤러리를 만들어 보겠습니다. 1. HTML 구문 Gallery 1 Gallery 2 Gallery 3 Gallery 4 Gallery 5 Gallery 6 Photo Gallery with Grid Layout 6개의 메뉴와 6개의 사진으로 구성했습니다. 사진은 https://unsplash.com/ko 에서 골라봤습니다. https://unsplash.com/ko 아름다운 무료 이미지 및 사진 | Unsplash 어떤 프로젝트를 위해서든 다운로드 및 사용할 수 있는 아름다운 무료 이미지 및 사진입니다. 어떤 로열티 프리 또는 스톡 사진보다 좋습니다. unsplash.com 사진의 갯수는 추가로 더 늘릴 ..

웹페이지를 만드는 여러가지 목적이 있겠지만, 효율적인 정보 전달은 가장 큰 목적 중에 하나일 것입니다. 이러한 정보 전달을 위해 필요한 작업 중에 하나가 레이아웃 입니다. layout의 사전적 의미는 구성, 배치 등으로 해석할 수 있습니다. 웹페이지를 잘 구성하고 배치하게 되면 내용을 전달하는 데 훨씬 효과가 커질 것입니다. 앞서 시맨틱 태그와display, float 등을 이용하여 레이아웃을 작성해봤습니다. 이번 회차에는 웹페이지를 위한 강력한 레이아웃 시스템을 제공하는 기술인 CSS Grid Layout에 대하여 알아보겠습니다. 이를 사용하면 복잡한 레이아웃을 효과적으로 구성할 수 있으며, 행과 열의 구조를 통해 요소를 배치할 수 있습니다. 1. HTML 구문 grid layout 이란 큰 틀 안에 ..

지난 회차에는 레이아웃의 종류 및 구성 요소 등에 대해서 알아봤습니다. 이번 회차에는 직접 레이아웃을 작성해보겠습니다. 레이아웃을 작성할 때 알아두면 좋은 HTML의 시맨틱 태그(Semantic Tag)에 대해서 먼저 간단히 알아보겠습니다. 1. 시맨틱 태그(Semantic Tag) 시맨틱 태그는 문서 구조와 의미를 명확하게 전달하는 역할을 하는 태그들을 말합니다. 시맨틱 태그는 웹페이지의 구조를 이해하고 해석하는 데 도움을 주며, 검색 엔진 최적화(SEO)나 웹 접근성을 향상시키는 데에도 기여합니다. 시맨틱 태그를 사용하면 코드의 가독성을 높이고 유지보수를 용이하게 할 수 있습니다. [ 시맨틱 태그 예시 ] , Header Link Link Link Column 1 Content Column 2 Mai..