TIL/HTML CSS JS

forEach 함수를 인자로 받는 배열 메서드 const names = ['Alice', 'Bob', 'Charlie']; for (let i = 0; i {consol.log(item, index)}) // Alice 0 Bob 1 Charlie 2 map 새로운 배열을 반환. 기존의 배열을 변경하지 않고 각 요소를 가지고 새로운 배열을 만들 때 사용함 const numbers = [1, 2, 3, 4, 5]; const doubledNumbers = numbers.map((item, index) => { retu..

local Storage, Session Storage local Storage 영구적으로 데이터를 저장하는데 사용하는 방법 Session Storage 임시적으로 데이터를 저장하는 데 사용하는 방법. 데이터는 세션(Session) 동안만 유지되며, 브라우저를 닫으면 데이터가 삭제됨 관련 메소드 set Item 데이터 저장할때 사용하는 메소드 // Local Storage에 데이터 저장 localStorage.setItem('key', 'value'); // Session Storage에 데이터 저장 sessionStorage.setItem('key', 'value'); // 예시 localStorage.setItem('name', 'Lee'); localStorage.setItem('age', 20);..

제어문 if문 let x = 10, y = 20; if (x == y) { console.log("x = y") }; // 조건이 참이 아니기 때문에 실행되지 않음 if-else 문 let x = 10, y = 20; if (x == y) { console.log("x = y") } else { console.log("x != y") } // 조건이 참이 아니기 때문에 x != y 가 출력됨 else if 문 let x = 10, y = 20; if (x == y) { console.log("x = y") } else if (x < y) { console.log("x < y") } else { console.log("x != y") } // 조건이 거짓이기 때문에 x != y 가 출력됨 삼항연산자 연산자..

변수 변수 선언 const : 변하지 않는 데이터 값. 재할당을 하면 에러가 발생함 let : 변하는 데이터 값 const 변수명1 = '값 1'; let 변수명2 = '값 2'; 연산자 산술 연산자 : + , - , / , * , % , ** , ++ , -- , 할당 연산자 : = 비교 연산자 : > , = ,

JavaScript 특징 객체 기반의 스크립트 언어 타입을 명시할 필요가 없는 인터프리터 언어 Node.js 와 같은 프레임워크를 사용하면 서버픅 프로그래밍에서도 사용 가능 인터프리터 언어 C언어의 경우 파일을 컴파일(compile)하여 사용자가 실행할 수 있는 실행파일로 만들어 사용 하지만, 인터프리터 언어는 컴파일 작업을 거치지 않고 소스코드를 바로 실행할 수 있는 언어 자바스크립트는 웹 브라우저에 포함된 자바스크립트 인터프리터가 소스 코드를 직접 해석하여 실행 함 DOM (document Objects Model) HTML, XML 와 같은 문서를 프로그래밍 언어를 이용해 표현하고, 저장하고, 조작하고(문서구조 스타일 내용 등) 이러한 것을 할 수 있도록 해주는 인터페이스 Node.JS와 Web A..

박스 모델 (Box model) HTML 요소는 박스 모양으로 구성되며 이를 박스모델 이라고 부름 패딩 테두리 마진 내용 으로 구분함 요소 설명 내용(content) 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분 패딩(padding) 내용과 테두리 사이의 간격. 눈에 보이지 않음 테두리(border) 내용과 패딩 주변을 감싸는 테두리 마진(margin) 테두리와 이웃하는 요소 사이의 간격. 눈에 보이지 않음 Padding, Borders left, right, top, bottom 으로 각각 지정할 수 있음 폰트 (Font) Font-family 사용하고자 하는 폰트를 먼저 지정하고 해당 폰트가 적용 안될 경우, 그 다음 폰트를 적용 안녕하세요 Hello World! 안녕하세요 Hello Worl..

CSS (Cascading Style Sheet) 웹 문서의 전반적인 스타일을 미리 저장해둔 스타일 시트 CSS 부여 방법 인라인 스타일 (Inline style) html 태그에 붙여서 사용하는 방식 Heading 1 Heading 2 내부 스타일 시트 (Internal style sheet) head 에 집어 넣는 방식 외부 스타일 시트(External style sheet) 링크를 이용하는 방식 /* style.css 파일 */ h1 { color: blue;} 스타일 적용 우선 원칙 Inline Internal 혹은 External CSS 선택자 (selectors) 아이디 (id) 특정 요소를 선택. 특정 이름을 가지는 요소만 선택하여 적용함 Heading 1 Heading 2 태그명 (tag)..

HTML 텍스트 제목 (Heading) 페이지의 타이틀 표시 내용1 내용2 ... 내용 단락 (Paragraph) 표시할 글의 한 단락을 표시 단락 시작시 줄이 바뀌지만, 내용에서 줄을 바꿔도 변하지 않음 줄바꿈 (Line Break) 브라우저 화면 표시시 줄 바꿈. 시작 태그만 있고 종료 태그는 없음 가로선 (Horizontal Rule) 수평으로 가로선. 시작 태그만 있고 종료 태그는 없음 강조 (Boldface) 텍스트의 특정 부분 강조 이 의미적으로 보다 강조 됨 기울임 (Italic) 이탤릭체로 기울여 표시 도 기울여서 표시하나 강조(emphasize)의 의미를 지님 부등호 기호 는 태그에 이용되기에 특수한 방법으로 작성함 ＆lt; ＆gt; HTML 링크 앵커 (Anchor) '링크'..

HTML 이란 웹 문서 서식 표준 Hypertext Markup Language Hyperlink : 문서 연결 기능 Text : 웹 문서 Markup : 서식을 표현하기 위해 tag를 사용하여 표시 HTML 기본 구조 My cat is very grumpy = Opening tag, = Closing tag My cat is very grumpy = Content My cat is very grumpy = Element TCPschool.com p = 태그 이름, class = 속성명, "para" = 속성값 = Opening tag, = Closing tag TCPschool.com = Content HTML 문서 구조 # 현재 문서가 HTML5 문서임을 명시 # HTML 문서의 루트 root 요소를..