HTML CSS JavaScript Web Page-Table of Contents

#목차 #css #HTML #Javascript-자바스크립트

날짜 2023-10-18 22:42

참고/연관된 기록 =>

행동에 대한 이유/근거 =>

ㅡ

ㅡ

Second-Brain

Pasted image 20231218132304.png

<HTML-CSS-JavaScript-웹 페이지 구축>

ㅡ Part 1 - Web 소개-HTML

전체적인 내용 키워드 기록=>

html 처음 공부했을 때 오해했던 부분

html 태그 다양하다.
어떻게 다 외우지? (X)

html이든 다른 내용이든 모든 내용을 암기하는게 아니다. 단지 머리속에 얕게 + 전체적인 내용이 대략적으로 들어있으면 됨.

그렇게되면 모르는 부분이 나왔을 때 대략적인 키워드로 검색을 하면서 내용을 채워가면 됨.

ㅡ Part2 - CSS

ㅡ Part3 - Javascript

ㅡ HTML

ㅡ MDN-웹표준기술서-개념서

: 모르는 부분이 생겼을 때 검색 키워드로 "~ mdn" 을 붙인다.

ㅡ ✏️코드펜(CodePen)
인코딩-디코딩-유니코드" tabindex="-1">ㅡ 인코딩-디코딩-유니코드

ㅡ HTML-뼈대태그-핵심태그

ㅡ img요소-예시코드

ㅡ h태그-헤더태그

ㅡ HTML-Hyper Text Markup Language-의미

ㅡ HTML문법-요소-태그-속성-속성값

ㅡ html-레이아웃-semantic-태그

ㅡ div-span태그

ㅡ HTML-display속성-블록-인라인

ㅡ meta태그-charset속성-문자 인코딩방식

ㅡ 이미지삽입-svg-img태그-상호작용

ㅡ form태그-html입력폼

유튜브 웹 페이지-구조분석" tabindex="-1">ㅡ 유튜브 웹 페이지-구조분석

ㅡ CSS

Note

ㅡ
css에서는 태그! 라는 표현이 아니라 선택자! 라는 표현을 사용
ㅡ
레이아웃 - 내용이 들어가는 구역-공간
ㅡ
배치하다 = 정렬된다.

ㅡ
css 속성 = 기능 단위 = css 코드
속성을 작성하다 = css코드 작성하다 = 기능을 설정하다

css속성을 잘 이해하기 위해 css 레이아웃에서 자주 사용되는 용어에 대한 정확한 이해가 필요 > 용어를 이해하면 속성명을 보고 대략적인 기능 파악 가능

ㅡ 크롬-CSS확인방법-환경설정-왓폰트

ㅡ CSS문법-선택자-선언-속성-속성값-세미클론

ㅡ 브라우저-기본스타일시트-user agent stylesheet

ㅡ CSS-크기단위-%-em-px

ㅡ css-크기단위-em-rem-상대적인 단위

ㅡ CSS-박스모델-content-패딩-border-마진-이미지

ㅡ CSS-선택자-우선순위

ㅡ CSS-전체-직접-태그-id-class-그룹-선택자

ㅡ 가상선택자-hover-active-focus-nth-child(n)

ㅡ CSS-직계자식선택자

ㅡ CSS-width-height속성--inline-block속성값

ㅡ css-position속성-정적-고정-절대-상대위치

ㅡ box-sizing속성-요소크기 설정

ㅡ CSS-vh크기단위-상대적인-뷰포트높이

ㅡ CSS-Flex-레이아웃-구조-컨테이너-아이템

ㅡ flex-메인축-수직축-row-column-베이스라인

ㅡ flex-display속성-flex-inline-flex-속성값

ㅡ flex-direction속성-배치방향

ㅡ flex-wrap속성-줄넘김-flex-flow-단축속성

ㅡ Flex-정렬-justify-align 속성

ㅡ flex-justify-content속성

ㅡ flex-정렬-align-items속성

ㅡ flex-정렬-align-content 속성

ㅡ flex-z-index속성

ㅡ flex-order속성

ㅡ flex-align-self속성-align-items속성

ㅡ flex-(단)축약속성

ㅡ flex-shrink속성-줄이기-기능

ㅡ flex-grow속성-여백-비율차지

ㅡ flex-basis속성-아이템 기본크기 설정

ㅡ JS

ㅡ JS-프로그래밍언어-객체-의미

ㅡ JS-null-undefined

ㅡ JS-변수 선언-const-let-var

ㅡ JS-변수참조순서-스코프-유효범위

ㅡ JS-while-반복문

ㅡ JS-dowhile-반복문

ㅡ JS-for반복문

ㅡ JS-생성자함수-new-function-this

ㅡ JS-조건문-switch문-break

ㅡ JS-삼항연산자-문법

ㅡ JS-문자열-비교연산자-동등-일치

ㅡ JS-HTMLCollection-유사배열-특징-진짜배열

ㅡ HTMLCollection-NodeList-공통점-차이점

ㅡ JS-DOM-객체출력-노드출력

ㅡ JS-DOM이용한 html 작업(제어)예시

ㅡ document객체-HTML요소선택-메서드

ㅡ
dom에서 객체를 출력하다! 표현

<div id="exampleDiv">This is a div element</div>

ㅡ
dom에서 노드를 출력하다! 표현

This is a div element

ㅡ
Document객체를 이용해 html요소/태그 선택하는 메서드

메서드를 호출해 html요소 선택 시 1개 일 때 반환출력되는 값/형태

<li id="even" style="color: red;">두 번째 아이템이에요!</li>

ㅡ
메서드를 호출해 html요소 선택 시 2개 이상일 때 반환출력되는 값/형태

1. HTMLCollection(3)

1. 0: li.odd
2. 1: li.odd
3. 2: li.odd
4. length: 3
5. [[Prototype]]: HTMLCollection

ㅡㅡㅡ
객체 
{
    "0": {},
    "1": {},
    "2": {}
}

=>
즉 기본적으로 메서드를 호출하고 반환/출력되는 값은 객체임

1개면 요소 객체를 반환/출력
2개 이상이면 배열 자료구조에 담아서 반환/출력 = DOM(Document Object Model)에서 선택한 요소들은 유사 배열 자료구조로 반환

ㅡ JS-document.getElementsByTagName(태그이름)

ㅡ JS-document.getElementById(아이디)

ㅡ JS-document.getElementsByClassName(클래스이름)

ㅡ JS-document.getElementsByName(name속성값)

ㅡ JS-document.querySelectorAll(선택자)

ㅡ JS-html요소생성-내용출력-변경 방법

ㅡ JS-html요소-이벤트핸들러-추가방법

ㅡ JS-HTML객체집합-선택방법

ㅡ DOM-노드의미-트리구조-이미지

노드관계-부모-자식-형제-조상-자손" tabindex="-1">ㅡ 노드관계-부모-자식-형제-조상-자손

노드종류-문서-요소-속성-텍스트-주석" tabindex="-1">ㅡ 노드종류-문서-요소-속성-텍스트-주석

노드접근방법-노드간관계이용-프로퍼티이용" tabindex="-1">ㅡ 노드접근방법-노드간관계이용-프로퍼티이용

ㅡ Event-이벤트

이벤트핸들러-기능-용어이해-익명-콜백함수" tabindex="-1">ㅡ 이벤트핸들러-기능-용어이해-익명-콜백함수

ㅡ 이벤트(event)용어-핸들러-리스너

이벤트리스너-등록-삭제방법-프로퍼티-메서드" tabindex="-1">ㅡ 이벤트리스너-등록-삭제방법-프로퍼티-메서드

이벤트리스너-등록메서드-전파방식" tabindex="-1">ㅡ 이벤트리스너-등록메서드-전파방식

ㅡ 이벤트리스너-프로퍼티로-등록-JS변수-html속성