코딩 공부

https://opentutorials.org/course/3085 WEB2 - JavaScript - 생활코딩 수업소개 이 수업은 https://opentutorials.org 를 만들어가면서 JavaScript에 대한 지식과 경험을 동시에 채워드리기 위한 목적으로 만들어진 수업입니다. 수업대상 이 수업은 웹 페이지를 사용자와 상호작용하게 만들고 싶은 분들을 위해서 만들어졌습니다. 게임이나 애플리케이션처럼 웹페이지를 동적으로 만들 수 있는 방법이 수업 안에 들어있습니다. html만으로 만들어진 아래의 웹페이지에 https://web-n.github.io/web1 opentutorials.org 1. Introduction HTML은 정적이며 한번 페이지에 출력되면 바꿀 수 없다. JavaScript는 ..

비교 연산자와 Boolean 데이터 타입 Boolean 데이터 타입은 숫자와 문자열과 달리 값의 종류가 true or false, 두 종료밖에 없습니다. 위 코드는 Boolean데이터 타입을 사용하는 예제입니다. a===b는 비교연산자로 a 가 b와 같다면 true, 다르다면 false입니다. 두 수를 비교하기 위해선 JS를 사용하고 true or false를 출력하기 위해서도 JS의 기능인 document.write()을 사용합니다.

제어 태그 선택 검색을 통해 하고싶은 기능을 찾습니다. 프로그램, 프로그래밍, 프로그래머 프로그램은 원래는 연주회의 순서를 부르는 단어였습니다. 그리고 이 순서를 만드는 일을 프로그래밍이라고 부르고 순서를 만드는 사람을 프로그래머라고 부릅니다. 시간에 순서에 따라 실행되어야 하는 것을 프로그래밍 언어에 따라 글로 적고 그 글을 저장해놓은 후 컴퓨터에게 실행을 요구하면 컴퓨터는 그 일을 합니다. = 프로그래밍의 본질 html - 웹 페이지 묘사 - 시간의 순서 실행 X JS - 동적 - 시간의 순서 실행 O

웹브라우저 제어 태그의 속성으로 style 뒤에는 CSS가 오게 되어있고 디자인을 담당합니다. html로 이런 디자인을 사용하면 한번 출력되었을 때 바꿀 수가 없습니다. 동적으로 디자인을 바꾸기 위해서는 JavaScript를 사용합니다. JavaScript를 이용해 바꾸고자 하는 태그를 선택하는 방법을 이제부터 배웁니다. CSS 기초 style 속성을 이용해서 CSS 사용하기 바꾸고 싶은 태그안에 style속성을 넣으면 디자인을 변경시킬 수 있습니다. e.g. html문법인 style을 이용해 CSS가 사용될 것을 알려줍니다. "color:powderblue"는 CSS의 property (속성)이라고 하는 것입니다. e.g. style 태그를 이용해서 CSS 사용하기 특정한 태그로 감싸지지않은 문자의 디..

문자열과 숫자 number = 숫자 string = 문자열 JavaScript는 6개의 데이터 타입과 객체라는 타입을 가지고 있습니다. 어떤 웹사이트에서 console을 열고 alert(1+1);을 하면 2라고 알려줍니다. alert을 사용하지 않고 1+1을 하면 console창 내에서 2라고 알려줍니다. + 는 좌 우 값을 합해주는 이행연산자, 또는 산술 연산자라고 합니다. 다른 산술연산자는 - 는 빼기 * 는 곱하기 / 는 나누기 등이 있습니다. 문자는 "로 시작해서 "로 끝나면 문자열입니다. '을 사용하려면 '로 끝내면 됩니다. 문자는 할 수 있는 기능이 엄청 많습니다. 예를 들면 str.length 등이 있는데 이런 것을 properties라고 부릅니다. methods라는 형태는 str.toUpp..

https://opentutorials.org/course/3085 WEB2 - JavaScript - 생활코딩 수업소개 이 수업은 https://opentutorials.org 를 만들어가면서 JavaScript에 대한 지식과 경험을 동시에 채워드리기 위한 목적으로 만들어진 수업입니다. 수업대상 이 수업은 웹 페이지를 사용자와 상호작용하게 만들고 싶은 분들을 위해서 만들어졌습니다. 게임이나 애플리케이션처럼 웹페이지를 동적으로 만들 수 있는 방법이 수업 안에 들어있습니다. html만으로 만들어진 아래의 웹페이지에 https://web-n.github.io/web1 opentutorials.org *이 강의를 보면서 작성한 노트입니다. 1. HTML은 정적이지만 JavaScript는 동적으로 사용자와 상호..

title 태그를 이용하여 페이지의 고유한 제목을 만드는 것 title 태그에 페이지의 콘텐츠를 정확하게 설명하는 제목을 이용합니다 제목은 간결하면서 내용을 포함해야 합니다. 메타 태그에 각 페이지의 요약 정보를 보여주기 페이지의 내용을 정확하게 요약하기 각 페이지마다 내용에 맞는 고유한 설명 사용 페이지의 URL 구조를 개선하기 URL에 단어를 사용 단순 디렉토리 구조 만들기 사이트 내 쉬운 이동 자연스러운 계층 구조 만들기 이동 경로를 위해 텍스트 링크 사용 보다 나은 앵커 텍스트 작성 내용을 함축하는 텍스트를 선택합니다 간결한 텍스트 작성 링크를 눈에 띄기 쉽게 포맷 내부 링크에 앵커 텍스트 활용을 고려하기 이미지 사용 간결하고 설명적인 파일 이름 alt텍스트 사용 이미지 사이트맵 제공하기 http..

*브라우저는 줄 바꿈을 무시합니다. 이건 제목 을 쓰면 한글이 안 깨집니다. 이 두 태그들은 태그 안에 들어갑니다. 이 태그는 브라우저에 나타나지 않는 정보를 포함합니다. 본문 이 태그는 브라우저에 보이는 본문을 나타냅니다. 와 둘 다 태그 안에 쓰입니다. 어떤 방식의 html로 작성이 됐는지 알려주기 위해 html문서의 가장 상단에 쓰입니다. 해딩 웹브라우저에서 '헤딩'이라는 글을 크게 헤딩으로 표현합니다. bold 웹브라우저에서 'bold'를 더 진하게 나타냅니다. 이건 웹페이지 '이건 웹페이지'라는 글을 하이퍼링크로 표현하고 클릭했을 때 https://helloworld-ychun0.tistory로 이동합니다. 여기서 href와 target은 a태그의 속성입니다. href는 이동하는 웹사이트를 나타..