소개하는 거북이

안녕하세요! 소개하는 거북이입니다. 이 페이지에 들어오실 때, 위에 뜨던 상태창을 보셨나요? 이번에는 유명한 게임인 리그오브레전드의 챔피언이 킬을 했을 때 나오는 킬 상태창을 모티브로 미니 킬 상태 창을 제작 해봤습니다. 새로 고침을 하면 매번 다른 내용이 나온답니다! 자바스크립트를 이용했고, alert를 이용해 이 페이지에 들어오면 볼 수 있게끔 제작하였습니다. 이것은 그냥 제가 배운 내용을 토대로 제작한 코딩 초보의 결과물이니 오해없으시길 바라겠습니다. 이게 제가 만든 미니 킬 상태 창 코드입니다. See the Pen mdOMpPE by JaeyongLee (@jaeyonglee960212) on CodePen. - 절차 - 1. 형용사 목록을 만듭니다. 2. 칭호 목록을 만듭니다. 3. 챔피언 목..

이번 장에서는 CSS의 선택자 (Selector)에 대해서 알아보겠습니다! 일단, 선택자의 정의에 대해 알아보겠습니다. ◈ 선택자 (Selector) -> CSS를 적용시키기 위해 요소(대상)를 지정할 때 사용하는 것입니다. 선택자에는 다양한 종류가 있는데 저희는 이번 장에서 제일 기본이 되는 선택자들에 대해 학습해보겠습니다. 처음 배울 선택자는 전체 선택자입니다. ◈ 전체 선택자 -> 모든 요소를 선택하는 선택자 기본 구조 : * { contents; } 전체 선택자는 말 그대로 모든 요소를 선택하게 됩니다. 전체 선택자를 이용해 모든 요소에 teal이라는 색을 입혀보도록 하겠습니다! See the Pen QWGgXrv by JaeyongLee (@jaeyonglee960212) on CodePen. ..

Title : Bunker ( 변경 가능 ) Purpose : 한 때, 게임이 취미였었다. 게임을 자주 했고, 게임을 돌리게 되면 대기 시간이 존재하게 되는데 그 대기 시간에 할만한 마땅한 것이 없었다. 그래서 html과 css를 배운 시점에 문득 생각이 떠올랐다. "게임 대기 시간에 할만한 종합 커뮤니티 사이트를 만드는 건 어떨까?"라는 생각이 말이다. 그래서 기획하게 된 것이 이 프로젝트이고, 목적은 게임을 하는 모든 사람들이 대기 시간에 짧게 즐길 수 있는 커뮤니티 사이트 제작이다. Progress : 현재, 4 번째 페이지까지 어떻게 제작할지 구상을 마쳤고, 첫 번째 페이지에 대한 코딩 작업이 들어갔다. 첫 번째 페이지의 경우 40% 정도의 완성도를 보이고 있고, 다음 주가 되기 전에, 두 번째 ..

이번 장에서는 HTML의 태그에 대해 알아보겠습니다! 저번 시간에 다양한 종류의 태그 그리고 그 기능에 대해서 배웠었죠? 이번 시간에는 태그 그중에서, 안에 들어가는 태그에 대해 배워보도록 하겠습니다! 안에는 다양한 태그가 들어갈 수 있는데, 우리는 그중 대표적인 3가지에 대해서만 보도록 하겠습니다. 첫 번째 태그는 바로 태그입니다. ◈ -> 문단을 나타내는 태그입니다. 블록 특성을 가지고 있습니다. 기본 구조 : ~ 말 그대로 문단을 나눌 수 있습니다. 내가 원하는 주제의 내용이 끝났을 때 또 다른 태그를 이용하면 다음 줄에 다음 주제에 관한 내용이 표출되는 것입니다. 간단하게 보여드리겠습니다! See the Pen jOVmzgp by JaeyongLee (@jaeyonglee960212) on Cod..

이번 장에서는 CSS를 이용해 색깔을 입히는 방법에 대해 알아보겠습니다! CSS를 이용해 색을 입히기 위해서는 색을 입힐 대상이 필요한데 그 대상을 HTML로 작성해보도록 하겠습니다. See the Pen OJbpqBx by JaeyongLee (@jaeyonglee960212) on CodePen. 짜잔! 간단하게 HTML 파일을 작성해보았습니다. 이제, 각 요소들에게 색을 입혀줄텐데 저는 color, background-color 속성을 이용해서 넣어주겠습니다. 우선, color와 background-color를 어떻게 사용하는지 보여드리겠습니다. ◈ color -> 색을 입히고자 하는 것(클래스, 아이디, 태그 등) { color : 원하는색; } ◈ background-color -> 배경색을 입..

이번 장에서는, javascript의 자료형과 변수에 대해 다뤄보도록 하겠습니다. 자료형을 알려면 일단 데이터에 대해 알고 있어야 합니다. ◈ 데이터란? -> 컴퓨터 프로그램에 저장된 정보, 즉 프로그램에 속해 있는, 사람이 해독할 수 없는 형태의 파일 그리고 이러한 데이터의 타입을 뜻하는 것이 바로 자료형 (데이터 타입)입니다. 자바스크립트의 자료형은 숫자, 문자열, 그리고 불리언 이렇게 세 가지의 기본 자료형이 존재합니다. 첫 번째로 숫자 자료형에 대해 알아보겠습니다. 숫자 자료형은 말 그대로 수를 표현하는 데이터입니다. 자바스크립트에서 숫자 자료형을 출력하면 다음과 같은 형태로 출력됩니다. 두 번째로 문자열 자료형에 대해 알아보겠습니다. 문자열 자료형은 다양한 텍스트(글자)를 나타냅니다. 자바스크립..

이번 장에서는 HTML 파일에 CSS를 적용하는 방법에 대해 알아보겠습니다! 들어가기에 앞서, HTML에 CSS를 적용하는 방법은 3가지가 있는데, 첫 번째는 태그 안에 style 속성을 넣어 적용시키는 방법 두 번째는 태그 안에 기입해서 적용시키는 방법 세 번째는 CSS파일을 작성해 HTML 파일에 연결하는 방법 이렇게 총 3가지가 있습니다. 우리는 3가지 방법 중 가장 효율적이고 많이 사용하는 방법인 세 번째 방법을 채택하여 배워보겠습니다. 먼저, Visual Studio Code를 이용해 HTML 파일을 하나 작성합니다. 2장. HTML의 기본 구조 및 태그 기능 저번에 HTML의 정의에 대해 간략하게 알아봤다면, 이번에는 HTML의 기본 구조 및 각 태그의 기능에 대해 알아보..

저번에 HTML의 정의에 대해 간략하게 알아봤다면, 이번에는 HTML의 기본 구조 및 각 태그의 기능에 대해 알아보겠습니다! 위의 사진은 Visual Studio Code를 이용해 작성한 HTML의 기본 틀입니다. 작성 방법은 Visual Studio Code에서 ~.html 파일을 만들고 ! + Enter를 누르면 됩니다! 이제 기본 틀 안에 존재하는 다양한 태그들이 어떤 의미를 가지고 있는지에 대해 알아보겠습니다! -> 태그는 이 문서가 어떤 형식의 문서인지 정의해주는 태그입니다. -> 태그는 HTML 문서의 루트를 나타내며, 루트 요소라고도 불립니다. 태그 안에는 1개의 태그와 1개의 태그를 삽입할 수 있습니다. -> 태그는 컴퓨터가 이해할 수 있는 문서의 정보를 입력하는 태그입니다. 대표적인 정보..

Javascript에 관한 내용을 다루기 이전 Javascript가 무엇인지에 대해 간단하게 정의해보겠습니다. ♣ Javascript -> 1995년 라이브스크립트라는 이름으로 처음 Netscape사의 Brendan Eich에 의해 최초로 개발되었고, Netscape사의 Navigator 2.0 브라우저에 탑재되었습니다. 이후, IE 3.0부터 마케팅 차원에서 자바스크립트로 변경 되었습니다. -> 컴파일 단계가 존재하지 않기 때문에, 마크업, 이미지, 스타일스트 등과 같은 다른 요소들과 동시에 네트워크를 통해 해석된다는 장점이 있습니다. -> HTML, CSS와 달리 인터프리터, JIT 컴파일 프로그래밍 언어로, 웹 페이지 관련 유일무이한 프로그래밍 언어라고 봐도 무방합니다. HTML으로 기본 구조를 짜..

CSS 관련 내용을 다루기 이전 CSS가 무엇인지 간단하게 정의해보겠습니다. CSS(Cascading Style Sheets) -> HTML, XML로 작성된 문서에 다양한 스타일을 입힐 수 있는 언어로 HTML, XML에 존재하는 다양한 요소들이 어떻게 보여지는지에 대해 작성할 수 있습니다. 즉, CSS는 웹페이지를 꾸미기 위해 작성하는 코드라는 것입니다. 하지만, CSS는 프로그래밍 언어도 아니고 마크업 언어도 아닌 Style sheet라는 언어입니다. CSS는 문서에 스타일을 적용할 수 있지만, 문서가 존재하지 않는다면 CSS 코드는 의미가 없게 되는 것입니다. 혼자 쓸 수 없는 코드라는 뜻이죠. 그렇다면, 왜 이러한 CSS를 사용하는 것일까요? 그 이유는 바로 다양한 디자인으로 웹을 디자인할 수 ..