WEB기초5 [간단한 웹] 라이브러리 없이 TODOlist 만들기 웹계의 Hello World! 라고 불리는 To Do List를 만들어보았다. 사용한 언어는 HTML, CSS, Javascript 1. HTML My To Do List - 태그로 먼저 제목이 될 부분 (정적인 부분)과 리스트를 포함할 부분(동적인 부분)을 CSS로 처리하기 쉽도록 나눴다. - 제목이 될 부분에는 제목과 텍스트박스, submit 버튼을 넣어주고 'title'이라는 classname을 정했다. 텍스트박스의 경우 placeholder를 써야 텍스트박스에 힌트처럼 흐릿한 글씨, 클릭하면 없어지는 글씨를 넣을 수 있다고 한다. - 리스트가 될 부분은 body라는 classname을 정하고 태그를 넣어 'list'라는 idname을 넣었다. 2. Javascript submitClicked = .. 2020. 6. 10. JavaScript의 기초2(웹브라우저의 제어, 요소가져오기, 속성변경) * 웹브라우저의 제어 - querySelector() 함수를 사용할 경우 1. 제어할 태그 선택하기 var a = document.querySelector('선택자'); //'선택자' 자리에는 태그 선택자, 클래스 선택자, ID선택자가 들어간다. 2. 선택한 선택자에 css 속성을 추가하기 var a = document.querySelector("#apple") //apple이라는 이름을 가진 클래스 선택자 선택 a.style.color("green"); //apple이라는 클래스에 속한 모든 태그의 텍스트 색깔을 초록색으로 바꿈 - getElementByID() / getElementsByClassName() / getElementsByTagName() 함수를 사용할 경우 getElementByID().. 2020. 5. 22. JavaScript의 기초1 (이벤트, 콘솔, 데이터타입, 변수) JavaScript HTML을 동적으로 제어하는 프로그래밍 언어이다. HTML의 태그 안에 들어간다. * 이벤트 HTML과 JavaScript가 정보교환을 할 수 있도록 만드는 html의 input 태그의 attribute(속성)이다. * 콘솔 웹브라우저에서 검사 또는 F12를 누르고, esc를 누르면 생기는 창이 콘솔창이다. 콘솔을 통해 그 페이지의 html코드에 대해 JavaScript의 코드를 작성해서 사용할 수 있다. 예) 텍스트 크롤링 * 데이터 타입 1. 문자열(string)과 숫자(number) //콘솔창에 해보세요 console.log(typeof(1)) //number console.log(typeof("1")) //string console.log(typeof(1+1)) //2 cons.. 2020. 5. 21. CSS의 기본 문법 정리(선택자, 효과, 박스모델, 그리드, 미디어쿼리) 코딩을 하는 데에 있어서 영어로 구글링하는 것은 필수적이다. 하나부터 열까지 모든 것들을 '기억'하겠다는 생각보다는, 내가 원하는 것을 다시 검색해서 찾을 수 있도록 핵심 문법을 검색용어로 사용할 수 있도록 익혀두는 것이 중요하다. * CSS (Cascading Style Sheet) HTML로 작성된 문서가 '어떻게 표현'할 지 방법을 정해주는 언어이다. * 기본 문법 의미 : a태그들에 대하여 텍스트의 색깔을 빨간색으로 만든다. * 선택자(Selector) css를 적용할 태그를 선택하는 문법이다. 대표적으로 태그 선택자, ID 선택자, 클래스 선택자가 있다. 1. 태그 선택자 우리는 어떤 특정한 태그들에 대해서만 한꺼번에 css코드를 적용하고 싶을 때가 있는데, 그 때 사용하는 것이 ID, clas.. 2020. 5. 17. HTML의 핵심 용어와 문법을 정리해보자(태그, 속성, 선택자) 코딩을 하는 데에 있어서 영어로 구글링하는 것은 필수적이다. 모든 것들을 '기억'하겠다는 생각보다는, 내가 원하는 것을 다시 검색해서 찾을 수 있도록 핵심 검색용어들만 익혀둔다면, 코딩이 어렵지 않을 것이다. * HTML HyperText Markup Language html은 웹 브라우저를 통해 사람들에게 정보를 제공하기 위해 만들어진 마크업 언어이다. 코드의 순서배치와 논리의 흐름으로 작성하는 다른 프로그래밍 언어와 다르기 때문에, 프로그래밍 언어가 아닌 마크업 언어라고 말한다. * 태그(Tag) Syntax content HTML을 구성하는 가장 기본적인 문법이다. h1~6 : 큰 제목 ~ 작은 제목 p : paragraph 문단 a : anchor 링크 div : css와 연계하여 여러 문서 '형.. 2020. 5. 17. 이전 1 다음
