소상공인 감자네

웹페이지를 풍성하게 만드는데 필요한 것 중 하나가 바로 JavaScript 이다.우리가 흔히 웹사이트에서 하는 행동들은 거의 대부분 자바스크립트를 이용한다고 생각하면 될 정도. 어떤 영역을 클릭하면 나오는 반응이나 현상, 움직이는 이미지나 계속 롤링되는 페이지 등.많은 영향을 주는 것이 바로 자바스크립트다. 쉽게 웹사이트의 구조를 설명하자면, HTML 은 큰 뼈대와 틀을 의미하고CSS 는 모양과 색감을 다양하게 만들어 주며JavaScript 가 페이지를 살아 움직이게 한다. 라고 볼 수 있다. 결국 웹페이지를 우리가 생각하는 웹페이지로 완성시키는게 자바스크립트라고 볼 수 있다.만약 자바스크립트가 없다면 웹페이지는 단순 정적인 문서에 불과할 것이다.어떤 버튼을 눌러도 동작하지 않고, 사진도 움직이지 않을 ..

웹페이지를 메모장과 텍스트 편집기를 통해 직접 만들어 봤다면,이번에는 정말 편리한 도움을 주는 편집기를 이용해서 웹페이지를 만들어 보자. 가장 대중적으로 많이 사용되고 있는 비주얼스튜디오코드(Visual Studio Code)를 활용할 예정이다.VScode 설치가 안되어 있다면 아래를 보고 설치를 먼저 하자. *윈도우버전 윈도우 환경에서 Visual Studio Code 설치하기개발업무를 접하게 되거나 본격적으로 개발을 하게 되면 편집기를 필수적으로 사용하게 된다.또한 개발을 하지 않더라도 요즘은 개인 쇼핑몰을 하거나 사업하는 많은 소상공인들이 본인들의vellod.tistory.com* 맥버전 맥 환경에서 Visual Studio Code 설치하기많은 개발자들이 맥환경에서 일하기도 하고,또 더 많은 사람..

대 인터넷의 시대.너도나도 웹 시장으로 뛰어드는 시기에 그래도 기본적인 웹페이지를 알면 좋지 않을까?물론 요즘은 인공지능(AI)을 통해 더 쉽게 접근한다고 한다. 하지만 개인적으로는 기초정도는 알아야 더 잘 AI를 활용하고 잘 쓰지 않을까 싶기도 하다.그래서 쌩초보들을 위한 완전 기초적인 개념부터 정리해볼까 한다. 일단 목표는 하나의 웹페이지를 만들어서 배포를 해보는 것까지.초보자도 나만의 웹페이지를 완성시켜보도록 하는 것이다. 그 첫걸음으로 HTML 을 하나 만들어 보자. 가장 기초적인 HTML 설명이 필요하다면 한 번 읽어 보고 오면 이해에 도움이 된다. 완전 초보 첫 HTML 맛보기인터넷을 사용하다 보면 HTML(Hyper Text Markup Language)이란 걸 많이 접하게 된다.하지만 “그..

웹에 대해 기초적인 정보를 알아가다 보면 필연적으로 HTML과 HTML을 구성하는 태그(tag)를 알게 된다.웹페이지는 HTML 안에서 태그를 사용해 영역을 만들고 기능을 불어 넣어 구성된다.하지만 보통 영역을 나눌 때 큰 의미가 없는 태그 중복하여 사용해왔다.그렇게 되면 해당 영역이 어떤 용도로 사용되고 있는지 확인하려면 내용을 자세히 들여다 봐야만 했다. 하지만 HTML5가 등장하면서 변화가 생겼는데 그것이 바로 "시멘틱(Semantic) 태그"이다.시멘틱(Semantic)은 "의미가 있는"이라는 뜻을 가졌다.그래서 시멘틱 태그를 "의미를 알 수 있는"태그 정도로 생각하면 된다.말 그대로 태그 자체가 의미를 내포한다고도 볼 수 있는데,웹페이지에서 머릿말, 본문, 네비게이션 등 영역을 나눌 때 기존에..

웹페이지의 뼈대를 이루는 HTML이 있다면,뼈대에 살을 붙이고 색칠을 해 더욱 풍성하게 만들어주는 것이 바로 CSS다. CSS(Cascading Style Sheets)Cascading 는 '계층적'이라는 의미를 하는데, 우리가 뼈대로 살펴본 HTML과 유사한 구조를 가지고 있다고 보면 좋다. 계층 구조html 구조에서 p 태그는 b 태그의 부모격이라고 보면 되는데, 이런 구조를 계층적 구조라고 설명할 수 있다. 이런 계층적 구조를 CSS 에서도 가져간다는 의미인데,Style Sheets 라는 말 그대로 스타일을 정리한 시트라고 보면 된다. 그래서 CSS를 '계층적 구조를 가진 스타일 시트' 라고 단어적 의미를 알 수 있다. 그럼 단계별로 HTML에 스타일을 입혀보자.1. 인라인 스타일로 태그에 직접 꾸..

HTML을 이해함에 있어 가장 중요한 것이 바로 태그(Tag).과연 태그가 어떤 역할을 하고 어떤 것인지 알아보자. 태그(Tag)란?- 웹페이지를 이루는 HTML에서 구조를 만들고 내용을 정의하는 것이라 볼 수 있다. 우리 일상생활에서도 쉽게 들을 수 있는것이 바로 태그(Tag)일 것이다.물건을 사면 물건의 가격이나 정보가 붙어 있는 라벨을 보통 우리는 태그라고 불리는데,이와 비슷한 의미로 웹페이지에서도 HTML의 태그가 하나하나 컴퓨터에게 이건 '제목'이야, 이건 '이미지' 야. 이런 식으로 알려주는 것이라고 생각하면 된다. 우리들이야 "제목입니다." 라는 글을 작성하면 '제목' 이라는 단어를 보고 '아 이건 제목이구나' 라는 생각을 자연스럽게 가질 수 있지만,컴퓨터는 이건 단순한 문자 내지는 글자라고..

인터넷을 사용하다 보면 HTML(Hyper Text Markup Language)이란 걸 많이 접하게 된다.하지만 “그게 뭔데?” 라는 생각을 해도 크게 관심을 두지 않는게 일반적이다. 여기서 HTML이 뭔데? 하며 궁금증을 해결하고 싶어하는 사람과 별 관심 없는 사람들이 구분될텐데,아마 이 글을 읽는 사람이라면 웹개발에 대한 관심을 가진 분이거나다양한 이유로 웹에 대한 기초지식이 필요하신 분일거라 생각된다. 그래서 비전공자였던 내 경험을 빗대어 조금 더 현실적으로 혹은 가볍고 쉽게 설명하려 한다.좀 더 전문적인 지식이나 깊은 이해는 중간중간 참고 할 수 있는 곳을 첨부할 예정이다.이미 어느정도 지식을 가지신 분 보다는 정말 기초적인 지식과 이해가 필요하신 분께 도움이 되길 바란다. HTML(Hyper ..