생각 작업실 The atelier of thinking

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

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

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

지금까지 CSS를 가지고 웹페이지를 어떤 식으로 디자인하는지 하나하나 어떻게 색상 부분을 조절한다든가 텍스트의 크기를 크게 하거나 작게 조절한다거나 하는 등에 대해서 살펴봤습니다. 이번회차에는 CSS의 개별적인 속성들이 실제 웹페이지로 만들어지는 과정은 어떻게 되는지, 전체적인 웹페이지의 구성은 어떻게 하는지, 그리고 개별적인 요소들이 어떻게 어우러지는지 살펴보겠습니다. 1. 웹페이지 레이아웃이란? 웹페이지의 목적은 다양하며, 각각의 웹페이지는 특정한 목표를 달성하기 위해 설계됩니다. 웹페이지는 정보제공, 상품 또는 서비스 판매, 교육, 엔터테인먼트 등 다양한 목적이 있는데, 이 목표를 달성하기 위해서는 구성을 사용자 중심의 디자인과 효율적인 정보 전달이 될 수 있도록 하여야 합니다. 출처 : GS SH..

지금까지 태그를 이용하여 웹페이지를 만들어 봤습니다. 텍스트관련 태그, 태그, 태그, 태그 등을 이용해서 웹페이지를 작성할 수 있습니다. 하지만, 태그만으로는 뭔가 아쉬움이 있습니다. 웹페이지를 보다 풍성하게 꾸미기 위해서는 CSS의 도움이 필요합니다. 1. CSS의 유래 초기 웹 문서는 HTML만을 사용하여 구조를 정의했으며, 디자인이나 레이아웃과 관련된 기능은 HTML에 내장되어 있었습니다. 이로 인해 HTML 문서의 구조와 디자인이 강하게 결합되어 있었고, 웹 페이지의 디자인을 변경하려면 모든 페이지의 HTML을 수정해야 했습니다. CSS는 이러한 구조와 디자인을 분리하고자 하는 요구에 응답하기 위해 개발되었습니다. 1996년에 W3C(World Wide Web Consortium)에서 CSS Le..

코딩을 시작할 때 'HTML'를 추천하는 이유는 우리가 매일 접하는 인터넷 사용과 밀접한 관계가 있기 때문에 접근하기가 쉽다는 것이 가장 큰 부분입니다. 우리가 인터넷에서 가장 많이 접하는 것인 웹(Web)이라 할 수 있습니다. 사실 웹(Web) 이란 말은 처음에 익숙하지는 않았습니다. 우리가 "인터넷에서 찾아봐" 혹은 "홈페이지에 들어가봐" 라고 말하지 웹사이트를 찾아봐, 웹페이지를 확인해봐 등 웹이란 말은 잘 사용하지 않았던 것 같습니다. 'HTML' 은 이 웹페이지를 만드는 가장 기초적인 언어입니다. 우리가 매일 접하고 있는 웹페이지의 한꺼플 아래 위치해 있습니다. 즉, 우리는 매일 HTML을 접하고 있다고 할 수 있습니다. 이러한 이유로 HTML로 코딩을 시작한다면 쉽게 입문할 수 있을 것입니다...

코딩이라는 세계에 들어서기 시작한 것이 어느덧 2년이 지나가고 있습니다. 처음에 코딩이라는 것을 배우고 싶은데 무엇부터 시작해야 할지 몰라 한참을 헤매며 이것 저것 코딩 강의라는 것을 들어봤는데 무슨 외계어를 듣는 듯 이해하기가 너무 버거워 그만둘까 생각도 했었는데, 우연히 한 유튜브 동영상에서 HTML부터 시작하는 것이 가장 쉽게 적응할 수 있다는 것을 보고난 후 시작한 것이 HTML로 웹페이지를 만들어 보는 것이었습니다. 그 후에 HTML로 시작하여 CSS,JavaScript 까지 배워가며 웹페이지를 만들면서 코딩에 재미를 좀 느끼기 시작했습니다. 그 후에 서버쪽으로 PHP 도 좀 배워보고, 데이터 베이스 SQL도 뭔지 알아보기도 하고 최근 유행이라는 Python도 열심히 공부중에 있습니다. 지금도 ..