Computer-Science

HTML, CSS, JavaScript

<script>
  document.addEventListener("click", function () {
    alert("Clicked!");
  });
</script>

<hn>
- 제목을 나타나 낼 때 사용하면 h1~h6까지 존재
<b>, <strong>
- Bold체를 지정, 의미론적(Semantic) 중요성을 가진다면 <strong>을 권장(웹 표준)
<p>
- 단락(paragraphs)을 지정
<br>
- 개행을 지정하며, 종료태그가 없음 => <br> 단독으로 사용
<a>
- 한 텍스트에서 다른 텍스트로 건너뛰어 읽기(하이퍼텍스트) – href 어트리뷰트 사용
<link>
- 외부 리소스와의 연계 정보를 정의하며 주로 외부 CSS 파일을 연계
<ol>
- 순서 있는 목록
<ul>
- 순서 없는 목록
<li>
- 목록 요소
<img>
- 이미지 삽입
- 예시)

<img src=“경로/dog.jpg” alt=“이미지가 없습니다.”>

CSS(Cascading Style Sheets)는 HTML의 각 요소(Element)의 style(design, layout etc.)을 정의하여 화면(Screen) 등에 어떻게 렌더링하면 되는지 브라우저에게 설명하기 위한 언어

참고 : https://www.w3schools.com/css/css_intro.asp

참고 : https://www.w3schools.com/css/css_syntax.ASP

참고 : https://www.w3schools.com/css/css_boxmodel.asp

<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons"
  rel="stylesheet"
/>

const
- 상수 선언 (var는 더 이상 사용하지 않음), 함수를 포함한 대부분의 선언은 const를 사용함
- 변수가 필요한 경우만 let 사용

const pi = 3.14;

let days = 1;
days = 2;

비교연산자
- === : 두 값이 타입까지 완전히 일치하는지 확인
- == : 타입은 검사하지 않음
- !== : 두 값이 일치하지 않는 확인

const num = 1;
const str = "1";

if (num === str) {
  console.log("true");
} else {
  console.log("false");
}

const num = 1;
const str2 = 3;

if (num == num2) {
  console.log("true");
} else {
  console.log("false");
}

function hello(name) {
  console.log(`Hello, ${name}!`);
}

hello("World!");

const hello = (name) => console.log(`Hello, ${name}!`);

hello("World!");

IDE(VS Code)에서 Javascript 실행
- 파일 확장자는 .js
- 터미널 창에서 node 명령어로 실행 (node [파일명.js])

$ node practice.js

Dom
- The Document Object Model(DOM) 은 HTML, XML 문서의 프로그래밍 interface
- DOM은 문서의 구조화된 표현(structured representation)을 제공
- 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공
- 문서 구조, 스타일, 내용 등을 변경할 수 있게 함
document.getElementById(아이디)
- html에서 해당 아이디를 가진 태그를 선택
getElementsByClassName(클래스), getElementsByName(이름), getElementsByTagName(태그)
- html에서 각각 해당 클래스, 네임, 태그명을 가진 태그를 선택
- 여러개 선택되기 때문에 항상 배열
document.querySelector(선택자)
- css 선택자로 선택할 (아이디는 #, 클래스는 .)

This site is open source. Improve this page.