IT/생활코딩
-
[WEB2] JavaScript : 12.제어할 태그 선택하기IT/생활코딩 2020. 12. 4. 23:00
■ 들어가기 - 생활코딩 내 강의(https://youtu.be/5tqfbgfA1LY) 를 들으며 정리하는 블로그 1. 목표 - 버튼 클릭 이벤트 발생 시 태그 내 style 속성을 동적으로 생성 2. 관련 명령어 - document.querySelector(selector) 3. 해설 - HTML 문서 내에서 파라미터로 전달된 특정 선택자(selector)와 일치하는 "첫 번째" 원소(element)를 가져옴 - 일치하는게 없으면 null 반환 (참고: MDN문서) [잠깐] CSS 선택자(selector) - 여기 참고!
-
[WEB2] JavaScript : 9.CSS 기초IT/생활코딩 2020. 12. 3. 00:47
■ 들어가기- 생활코딩 내 강의(https://youtu.be/HQgNj50Xt9g) 를 들으며 정리하는 블로그 1. style 속성- HTML 특정 태그 내 디자인적으로 변경하고 싶은 경우, 해당 태그에 style 애트리뷰트(속성)을 추가하고 속성값으로 CSS 문법을 사용 2. 특정 정보 제어- HTML 본문 내 특정 문구를 변경하고 싶은 경우 태그를 사용한다.- 태그는 어떠한 기능/의미 없음. 다만, CSS 혹은 JavaScript를 통해 제어하고 싶을 때 사용하는 태그- 다만 태그는 태그 등과 마찬가지로 줄바꿈이 되어진다. => 이를 대체하기 위해서는 태그를 사용! 3. 선택자- 태그 내 class 속성을 지정한 후 태그 내 해당 클래스를 지정하면 CSS를 일괄적으로 적용 가능!- 선택자를 통해 C..
-
[WEB2] JavaScript : 8.웹브라우저 제어IT/생활코딩 2020. 12. 3. 00:39
■ 들어가기- 생활코딩 내 강의(https://youtu.be/S62m_ddSls4) 를 들으며 정리하는 블로그 1. 웹브라우저 제어- HTML에서 배경화면과 글자색 설정을 위해서는 태그 내에 선택자를 통해 정의하며 CSS 코드로 작성 - HTML 태그 내 style 속성(애트리뷰트)에 CSS 코드로 작성 가능한데, 이때 작성된 CSS값은 변경이 불가한 정적인 데이터이다.- 버튼 클릭 시 배경화면과 글자색을 변경하는 이벤트를 생성하고자 하는 경우, 이벤트 제어코드(ex. onclick, onchange..) 를 통해 CSS 코드를 동적으로 설정 가능! 2. CSS- 다음 강의를 통해 아래 내용을 배울 수 있다CSS는 어떤 목적의 언어인가요?CSS를 웹페이지에 삽입하는 방법은 무엇인가요?style 속성은 ..
-
[WEB2] JavaScript : 6.데이터타입 - 문자열과 숫자IT/생활코딩 2020. 12. 3. 00:21
■ 들어가기 - 생활코딩 내 강의(https://youtu.be/P8C8VNiM33A) 를 들으며 정리하는 블로그 1. 데이터 타입 - JavaScript에는 6개의 데이터 타입과 '객체'가 있다 (참고: mzl.la/36x4EyQ) -> Boolean, Null, Undefined, Number, String, Symbol 2. 연산자 - 산술연산자 : 수학기호(ex.+, -, *, /)를 사용해서 왼쪽과 오른쪽 값을 계산 -> 1+1, 2-1, 2*4, 6/3 -> 단, 숫자와 숫자와의 연산은 '숫자'가 나오며 문자와 문자와의 연산은 '문자'가 나온다. - 문자열 : ''(작은 따옴표), ""(큰 따옴표)로 묶어서 문자열을 표시 -> 'Hello world!', "Hello World!" - 문자열 ..
-
[WEB2] JavaScript : 5.HTML과 JavaScript의 만남2 (콘솔)IT/생활코딩 2020. 12. 3. 00:01
■ 들어가기 - 생활코딩 내 강의(https://youtu.be/-VKIqaEdDVU) 를 들으며 정리하는 블로그 1. 콘솔 띄우기 - 크롬 브라우저에서 [ 우클릭 > 검사 ] 선택 시 나타나는 개발자 도구에서 - Console 탭 선택으로 간단한 JavaScript를 수행할 수 있다 2. 간단한 명령어 - 문자 세기 : JavaScript에서는 문자열을 ''(작은 따옴표)로 감싸며, length를 호출해서 문자 개수를 확인 가능 ex. 'abc'.length
-
[WEB2] JavaScript : 4.HTML과 JavaScript의 만남2 (이벤트)IT/생활코딩 2020. 12. 2. 23:45
■ 들어가기 - 생활코딩 내 강의(https://youtu.be/Ru5zGHkOgic) 를 들으며 정리하는 블로그 1. 버튼 삽입 - HTML 문서 내 버튼은 태그 내 type="button" 애트리뷰트로 설정 가능 - 글씨를 넣고 싶으면 value 애트리뷰트에 값을 지정 2. 경고창 삽입 - 버튼 클릭 시 경고창을 띄우기 위해서는 alert 메서드를 사용하면 된다. (참고: bit.ly/3ojw7Kq) - 코드 1 cs - onclick 애트리뷰트(속성)에 alert() 메서드를 사용 - 속성 값은 반드시 JavaScript를 사용해야 함 - 이벤트 : 웹 브라우저 상에서 발생하는 사건(일) - ex. onclick, onchange, ..
-
[WEB2] JavaScript : 3.HTML과 JavaScript의 만남1 (script태그)IT/생활코딩 2020. 12. 2. 23:25
■ 들어가기 - 생활코딩 내 강의(https://youtu.be/Ru5zGHkOgic) 를 들으며 정리하는 블로그 1. JavaScript란 - 기본적으로 HTML언어 위에서 작동하도록 만들어진 언어 - HTML 언어 내에서 JavaScript를 사용하기 위해서는 태그 내에 코드를 작성하면 된다. 2. 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 JavaScript document.write('hello world') ; HTML hello world cs 3. 결과 - JavaScript는 document.write() 메서드에 입력할 값을 넣어 출력하며 - HTML은 태그 내에 그대로 작성