기타
-
5. [HTML+CSS+JS] 계산기 만들기 (1)기타/1인 1프로젝트 2022-06-28
※ 이 글은 유튜버 '수코딩' 님의 '[HTML+CSS+JS] 계산기(calculator) 만들기(with grid) / 웹 코딩 / HTML 코딩' 영상을 보고 똑같이 만들며 실습한 내용이며, 학습 목적으로 만들어 보고 그 경험을 공유하고자 작성하게 된 것이니 참고하시길 바랍니다. 실습 환경 OS : Windows 10 실습 에디터 : Visual Studio Code 🛫 계산기 기본 틀 제작 먼저 계산기의 기본 틀을 제작하기 위해 에디터에서 calculator.html이라는 문서를 만들어주고 ! 를 입력해준다. 입력하게 되면 다음과 같이 밑에 공구 아이콘같은게 뜨고, 그대로 엔터를 입력해주면 아래처럼 미리 만들어져 있는 기본 서식이 작성된다. 기본 서식을 로드했다면 영상에 나온것과 같이 수정하여 똑같..
-
4. HTML 학습 생활코딩 (3)기타/1인 1프로젝트 2022-06-23
HTML 실습 환경 OS : Windows 10 실습 에디터 : Visual Studio Code 🤔 태그로는 다 표현하지 못할 때, 속성의 등장 이제 또 새로운 태그가 등장한다. 바로 태그. 이 태그는 이미지(image)를 표현할 때 쓰게 된다. 페이지에 이미지를 넣고 싶어서 이 태그를 사용했다고 하자. 코드대로라면 저 Language (HTML) 뒤에 이미지가 삽입되었어야 하는데 보이지 않는다. 왜 그럴까? 그것은 어떤 이미지를 불러와야 하는지에 대한 정보가 부족하기 때문이다. 다시 코드를 고쳐서 이렇게 작성해보자. 그냥 라고 썼던 것에 태그 안쪽에 src="~~"를 덧붙였다. src는 source의 줄임말이고, 옆에 붙은 주소는 불러올 이미지의 주소이다. 태그 안에 src라는 '속성'을 추가함으로써..
-
3. HTML 학습 (생활코딩) (2)기타/1인 1프로젝트 2022-06-14
저번 글을 쓰고 정리글을 바로 올릴 수 있을 줄 알았는데 지필고사와 6월 모의고사 등 여러 일정이 겹쳐 많이 늦어졌다. 아래 내용은 생활코딩 WEB1 강의를 학습하고 여러 강의를 합쳐 재구성한 내용이며, 정리하다보니 내용이 꽤 방대해서 두 편으로 나눠서 올리려고 한다. HTML 실습 환경 OS : Windows 10 실습 에디터 : Visual Studio Code 🤔 HTML이란? HTML이란 Hyper Text Markup Language 약어로 웹 페이지의 문서와 다른 웹 페이지 문서를 링크로 연결하여 이동할 수 있는 Hypertext 기능을 가진 문서를 만드는 언어다. 웹 페이지를 구성하는 기본 뼈대라고 할 수 있는 이 HTML은 이것 하나로는 현재 넘쳐나는 많은 사이트들처럼 멋진 그래픽에 다양한..
-
2. HTML 학습 (생활코딩) (1)기타/1인 1프로젝트 2022-04-21
계획에 적힌 대로 지금까지 생활코딩을 통해 HTML, CSS, JS의 기본 문법들을 어느 정도 학습할 수 있었다. 사실 나는 HTML을 아예 모르는 상태는 아니지만, 고1 때 처음 접할 때도 생활코딩을 읽어보면서 배웠고 다시 읽어보면 또 도움이 되지 않을까 싶어서 WEB1을 쭉 본 상태다. 보면서는 내용보다는 부가적인 말들이 더 눈에 들어왔는데, 그 중 기억에 남는 말이 있다. '어려운 것은 중요한 것이고, 쉬운 것은 사소한 것'이라는 해로운 인식 다시 보면서, 쉬운 내용들이니까 스크롤만 죽죽 넘기고 있었는데 그런 나를 반성하게 되는 순간이었다. 사실 HTML이라는 이 언어에서 '태그'라는 개념을 안다는 것은 처음 배울 때는 잘 몰랐지만 지금 생각하면 생활코딩에서 표현한 것처럼, 태그를 알기 전과 후로 ..
-
1. 연구 계획기타/1인 1프로젝트 2022-03-15
연구 주제 웹페이지 화면 구현 및 웹 개발 기초 학습 방향성 공유 선정이유 프로그래밍을 배우면서 처음 생각했던 것과는 다르게 투박한 프로그래밍 코드와 터미널 창에서 아쉬움을 느끼고 꼭 화면 구현을 해보고 싶었는데, 화면 구현을 하기에 가장 접근성이 좋은 것이 웹 개발이라고 생각했기 때문. 연구내용 - HTML, CSS, JS 기본 문법 학습 - 계산기, 타이머, 영단어 깜빡이등의 화면 구현 - 블로그를 통해 구현 중 알게 된 지식 나눔 연구 방법 생활코딩 홈페이지를 통해 웹 개발에 필요한 기초 지식 학습 후 계산기 구현 코드를 클론 코딩해보며 웹 개발 심화 학습 진행. 구현 중 겪은 시행착오를 블로그로 공유하며 지식 나눔. 연구 일정 (3)월 생활코딩 홈페이지를 통한 웹 개발 기초지식 학습 선행 및 기초..
-
0. 연구 주제 정하기기타/1인 1프로젝트 2022-03-14
학교 수업 교육과정의 일환으로 1인 1프로젝트를 진행하게 되었다. 주제는 지식공유의 목적으로 어떤 분야에서든 자유 주제 선택. 자신이 평소 관심 있었던 분야, 도전해보고 싶었던 것들 중에서 선택하면 되고, 방향도 자율적으로 정해서 연구하면 된다고 한다. 나는 고민하다 평소 꼭 해보고 싶었던 웹 개발 쪽으로 연구를 진행해보기로 했다. 전부터 터미널 창에 투박하게 결과가 뜨는 것보다는 우리에게 친숙한 GUI 환경으로 화면 구현을 꼭 해보고 싶었는데 화면 구현을 하기 위해서 그나마 쉽게 다가갈 수 있는 부분이 웹이라고 생각했다. HTML, CSS, JS... 이런 것들에 대해 막연한 궁금증도 있었고 작년에 어설프게나마 티스토리 기본 제공 테마를 내 스타일대로 이곳저곳 삽질도 하며 변경해보면서 웹 개발에 대한 ..
-
001. 글기타/글쓰기 2021-02-01
나는 글이 참 좋다. 책 읽는 것도 좋아하고, 여가 시간에는 자주 인터넷 창을 켜서 여러 가지 글들을 끊임없이 읽는다. 어떨 땐 인생을 바꾸는 방법이라는 거창한 글이거나 요리 레시피, 사진 찍는 방법 같은 설명글. 혹은 최근 이슈 되는 사건에 대한 각자의 생각이라던지, 기행문, 시 등등. 읽고 또 읽는다. 또 공감하고, 이해한다. 어떤 글을 읽던지 하나씩 내 안에 쌓여간다는 그 느낌이 좋다. 그래서 나에게 있어서 글이란 그리 간단한 의미를 갖지 않는다. 글은 내게 단순한 정보의 나열이나 활자가 아니라 세상을 알아가는 방법이고 사람들과 소통하는 창이다. 나는 어렸을 때부터 책을 끼고 살았다. 원래부터 글이 좋았고 이야기를 사랑했다. 한글을 배우고 나서는 집에 있던 전래동화 전집을 수십 번 읽었고, 동화책을..