기본 베이스

기본적으로 변수와 상수로 구성 변수 = 어떤 관계, 범위 내에서 여러 값으로 변할 수 있는 수 상수 = 변하지 않는 일정한 값을 가진 수]선언과 할당 변수명을 지정하여 선언하고, 해당 변수에 데이터값을 할당 가능\+a) 선언 + 할당 => ex) let name = "

css선택자 전체선택 ==> \* { }TAG 선택 ==> div { }Class 선택 ==> .Class { }ID 선택 ==> CSS 파일을 만들어 불러오기 ==> <Link href = "./\~\~\~\~~" rel = "sty

HTML 이란 HyperText Markup Language로 네트워크가 연결된 웹페이지에서 문서를 작성하고, 읽고, 공유하기 위해서 만들어진 체계. HTML 언어의 본질은, 사용자간에 소통하기 위한 정해진 약속. 태그 하나의 약속 된 명령어이며 고유한 기능을 가

산술연산자 =>             +, -, \*, /, %(몫 제외한 나머지) 비교연산자 =>             <, >, <=, >=, ===(같음), !==(같지않음)\+a)엄격한 동치연산자비교연산자에는 == 과 != 도 있음이 두 연산자는

내장된 기능이 아닌 직접 만들어내는 기능ex. function game() {                                  ==>     function 함수이름 (매개변수) {         return 결과값                     

table태그는 HTML 문서에서 표를 만드는 태그행과 열을 표현하기 위해 <tr>, <td>등의 태그와 함께 작성<table> = 가장 상위 태그, border를 지정하면 전체 테두리가 생김<tr> = 가로 줄을 만드는 태그 <tr>\~\~

태그 선택자 => ex. div { }id 선택자 => ex. - class 선택자 => ex. .class {}\`\`\`그룹 선택자 => ex. div, span, p {} div, span, p 태그를 선택하여 한 번에 같은 속성을 줄 수 있다자손 선택자 => e

현재는 flex, Grid 를 혼용해서 쓰고 있으며 Float은 거의 사용되지 않음\*Float은 반응형 웹에 적합하지 않아 스마트폰 사용률이 높은 오늘 날의 기술에 적합하지 않기 때문         그래도 배워야 한다!          \*Float의 사용 코드를 읽

flex할 item이 여러 개일때 item의 줄바꿈 허용유무 결정↑ display:flex, flex-direction:row 를 준 상태로 실제 주황 박스의 너비로는 부모박스에 3칸밖에      안 들어가지만 가로로 정렬한 상태이기에 억지로 끼워져 있는 상태↑ 여기서

구체성 정도부모에게 상속받은 속성 < 전체 선택자 < 태그 선택자 < 클래스 선택자, 가상 선택자 < ID 선택자 \-나중에 선언한 스타일이 우선적용 됨 ex. 같은 선택자로 CSS 속성값을 여러 번 적용할 경우, 가장 마지막에 선언한 속성값이

transform:translate(x,y) => x축으로 x만큼, y축으로 y만큼 이동transform:translateX() or transform:translateY() => 해당 축으로 ( )값만큼 이동transform:scale() => ( )값 만큼 요소를

2차원적 구조를 가진 정렬방식 (row, column 방향 배치방식 동시에 설정 가능)flex => -작은 단위 레이아웃 구성에 적합                 \-디자인, 기획에 변경 가능성이 있는 경우 적합grid => -큰 규모의 레이아웃 구성에 적합      

접속하는 디바이스에 따라 기기의 viewport에 반응하여 레이아웃이 자동으로 변경되는 웹페이지viewport 이외에도 단말기 종류, 해상도 등을 기준으로 설정도 가능\-반응형 웹페이지의 작업 기준이 되는 중단점 \-PC, Tablet, Mobile의 기준이 되는 규격

현재 날짜, 시간을 표시하는 JS 객체new Date( ) => 로컬 컴퓨터 시간 기준으로 날짜, 시간을 표시new Date("2023-04-06") => 특정 날짜의 데이터를 표시ex. const new = new Date( )       const past = ne

HTML은 기본적으로 문서를 해석할 때 위에서 아래 방향으로 해석해석 도중에 <script> 태그를 만나면 HTML 해석을 멈추고 JS 문서 해석 시작HTML 내에 모든 tag 해석이 끝나지 않은 상태이기에 해당 태그를 DOM으로 끌고 온 경우 해석 안 됨 (

브라우저는 HTML 문서를 파싱하는 과정에서 DOM 이라는 트리(tree)구조 형태의 객체 생성트리구조 = 자료구조의 일종으로 여러개의 노드로 구성되어 있으며, 하나의 부모가 여러                   개의 자식 노드를 가지게 되는 형태 노드(node) =

지정한 Event 발생 시 작동할 기능을 설정Btn을 누를 때 마다 함수를 실행 "click" 속성 뿐 아니라, dbclick같이 다른 속성도 사용 가능addEventListener\-한 요소에 event를 설정해 줄때마다 누적되어 설정한 모든 event가 실행 됨on

API (Application Programming Interface) 어떠한 프로그램에서 제공하는 기능을 사용자가 이용할 수 있게 만들어 둔 인터페이스 API는 A프로그램에서 B프로그램의 기능을 활용할 수 있도록 중간에서 그 과정을 도와주는 중간 매개체 > [

시맨틱 태그 (Semantic Tag)는 포함된 콘텐츠의 특정 의미를 정의하고 목적을 갖는 태그 기존 HTML <div> 태그의 기능과 마찬가지로 block element이면서 사이트의 구조(레이아웃)을 설계하기 위해 존재 시맨틱 태그는 HTML의 구조를 설계하는