코딩팍

개발 Develop/HTML, CSS, Javascript → (7)건

자바스크립트 객체지향 프로그래밍으로 사용하기 (Object-Oriented Programming in JS)

자바스크립트는 아직까지는 좀 지저분한 언어라는 편견이 있다. 다른 언어와는 다르게 프레임워크 없이는 정리가 잘 안되 보이기 때문 일 수도 있다. 그래서 요즘에는 자바스크립트를 프레임워크와 함께 이용하는 경우가 더 흔하다. 하지만 자바스크립트 버전이 업데이트 될 수록 점점 더 정돈되고 있다. 과연 자바스크립트로도 객체지향 프로그래밍 (Object-Oriented Programming)을 이용할 수 있을까? 물론이다! 객체지향 프로그래밍 (OOP) 객체지향 프로그래밍은 오브젝트/객체의 컨셉을 이용해서 코드를 쓰는 패러다임이다 (코드를 쓰는 스타일). 객체는 데이타와 함수를 가지고있다. 객체는 앱을 만드는 조각이고 API를 통해서 상호작용한다. 궁극적으로 유지하기 쉬운 정돈된 코드를 쓰는데 도움이 된다. 객체..
개발 Develop/HTML, CSS, Javascript 2021. 1. 24. 13:07

[HTML 배우기] input 태그: 사용자 입력칸

태그는 사용자가 데이타를 입력할 수 있는 기본 입력 칸입니다. 기본적인 태그만 사용 했을 때 아래와 같이 문자를 입력할 수 있는 입력 칸을 만들 수 있습니다: See the Pen input tag by David Kijung Park (@ramiram) on CodePen. 유형(type) 태그는 type속성을 통해서 여러가지 형태로 사용할 수 있습니다. 만약 type속성이 설정 되지 않았다면 기본값으로 text가 설정됩니다. 유형 (type) 설명 예시 문자 (text) 문자를 입력 할 수 있는 입력칸. 의 기본값 버튼 (button) 누를 수 있는 버튼, 기본값은 빈칸이다. 체크박스 (checkbox) 체크박스의 값은 한개이며, 선택/해제 할 수 있다. 체크박스 날짜 (date) 날짜를 입력 할 수..
개발 Develop/HTML, CSS, Javascript 2020. 5. 23. 10:23

[할 일 목록 #3] Javascript로 버튼 누르는 기능 만들기 (To-do list)

강의 목표 저번 시간에는 css를 이용해서 할 일 목록 웹 페이지를 꾸미는 방법을 배워 봤습니다. 하지만 추가 버튼을 눌러도 아직 아무 일도 일어 나지 않습니다. 이번 시간에는 Javascript를 이용해서 추가 버튼에 기능을 넣도록 하겠습니다. 이제부터 자바 스크립트를 짧게 js로 부르도록 하겠습니다. 데모 See the Pen todo list js by David Kijung Park (@ramiram) on CodePen. JS 파일 만들기 이번 강의에 코딩할 app.js 파일을 index.html 파일 과 같은 폴더 안에 만들어 줍니다. index.html 파일이 들어있는 폴더에서 오른쪽 클릭 후 새 텍스트 파일을 만든다음에 파일 이름을 app.js 로 바꿔 주시면 됩니다. JS 파일을 html..
개발 Develop/HTML, CSS, Javascript 2020. 5. 23. 00:43

[할 일 목록 #2] CSS 로 이쁘게 꾸미기 (To-do list)

강의 목표 저번 시간에는 html을 이용해서 기본 페이지를 만들었습니다. 하지만 아직 꾸미지 않았기 디자인이 완성 되지 않은 느낌입니다. 이번 시간에는 css를 이용해서 index.html 파일을 아래와 같이 이쁘게 꾸며보겠습니다. See the Pen todo list by David Kijung Park (@ramiram) on CodePen. css 파일 만들기 먼저 이번 강의에 코딩할 style.css 파일을 저번에 만든 index.html 과 같은 폴더에 만들어 줍니다. index.html 파일이 들어있는 폴더에서 오른쪽 클릭 후 새 텍스트 파일을 만든다음에 파일 이름을 style.css 로 바꿔 주시면 됩니다. css 파일을 html 파일에 연결 하기 css 파일을 만들었으니 이제 html 파..
개발 Develop/HTML, CSS, Javascript 2020. 5. 21. 05:44

[할 일 목록 #1] HTML 으로 기본 페이지 만들기 (To-do list)

강의 목표: html으로 할 일 목록의 기본 페이지를 만들겠습니다. 이번 시간에 만들 html 페이지의 모습입니다. 처음에는 사용자 입력칸, 버튼, 제목, 리스트를 추가 하겠습니다. 완성된 모습: See the Pen todo list html only by David Kijung Park (@ramiram) on CodePen. 파일 만들기: 먼저 이번 프로젝트에 쓰일 파일들을 만들 '할 일 목록' 폴더를 만들어 줍니다. 여기에 프로젝트에 필요한 파일들을 만들 예정입니다. 폴더 안에 이번 강의에 사용할 index.html 파일을 만들어 줍니다. (보통 웹 사이트들의 시작 지점 파일은 index.html으로 이름 짓습니다.) 따라오시면서 중간중간에 index.html 파일을 크롬이나 사파리와 같은 브라우..
개발 Develop/HTML, CSS, Javascript 2020. 5. 20. 07:55

[할 일 목록 #0] 웹 사이트 만들기 프로젝트 HTML, CSS, Javascript로 할 일 목록 (To-do List) 만들기 소개

웹사이트 만들기 실전 프로젝트 웹사이트를 만들고 싶지만 어디서 시작해야 할지 모를 때, 함께 따라서 만드세요. 실제로 따라서 만들면 직접 만드는 게 보이기 때문에 재밌게 배울 수 있습니다. 기본적인 HTML, CSS, Javascript지식이 없더라도 따라올 수 있습니다. 여기서 배운 지식들을 토대로 더욱 복잡한 웹사이트도 만들 수 있게 됩니다. 미리 보기 See the Pen todo list js by David Kijung Park (@ramiram) on CodePen. 앱 기능 할 일 목록은 자신이 할일을 쉽게 추적할 수 있도록 도와줍니다. 목록 리스트 표시 항목 추가 항목 완료 표시 (심화) 항목 지우기 (심화) 목차 [할일 목록 #1] HTML 으로 기본 페이지 만들기 [할 일 목록 #2] ..
개발 Develop/HTML, CSS, Javascript 2020. 5. 20. 05:54

코딩팍과 함께 실전 코딩 배우기

코딩을 배우고 싶은데, 어디서 어떻게 시작해야 할지 막막할 때 있으신가요? 코딩 공부를 검색하면 너무 범위가 넓기 때문에 어떤 것을 찾고 있는지 조차 알 수 없을 때가 많을 텐데요. 수많은 언어와 자료들로 인해서 무엇을 봐야 할지 헷갈릴 때가 많습니다. 그렇게 때문에 일단 코딩을 배우고 싶은 목적을 정하는 것이 중요합니다. 목적이 있어야 무엇을 달성할지를 알기 때문이지요. 목적은 여러 가지가 될 수 있습니다. 예를 들면: 그냥 요즘 대세이니깐, 흥미로워 보여서 시작할 수 있습니다. 지금 하고 있는 일과 연관이 돼서 시작할 수 있습니다. 평소에 불편한 점이 있는데 만약 소프트웨어를 만들어서 쉽게 해결할 수 있을 거 같다고 생각해서 코딩 공부를 시작할 수 있습니다. 돈이나 직업군 교체가 목적이 될 수도 있겠..
개발 Develop/HTML, CSS, Javascript 2020. 5. 20. 03:12
◀ 1 ▶

티스토리툴바