yh-jeon Full stack

CSS 문법은 선택자와 선언부로 구분합니다.선택자 : CSS 스타일을 적용할 HTML(요소)를 선택하는 영역선언부 : 선택자에서 선택한 태그에 적용할 스타일을 작성하는 영역, 중괄호({}) 내부에 작성합니다!h1 { color: red;}선택자 { 속성: 값;}줄 바꿈과 들여쓰기css 코드를 작성할 때 필수는 아니지만 글의 가독성을 위해 작성하는 것이 좋습니다!주석 - 코드에 설명을 남기는 것 / ctrl + //* 주석 내용 */css 적용하기 - css 문서를 html 문서에 적용시키는 방법1) 내부 스타일 시트 사용하기head>  meta charset="UTF-8">  meta http-equiv="X-UA-Compatible" content="IE=edge">  meta name="viewpor..

텍스트 작성하기 태그 : 제목이나 주제를 나타내는 텍스트를 표현 (헤딩 태그)제목 hn 태그는 h1부터 h6 태그까지 총 6개가 존재하는데, 중요도가 가장 높음 h1 부터 중요도가 가장 낮은 h6 까지 숫자가 커질수록 글자의 크기가 점점 작아집니다.※ 웹 브라우저의 검색 엔진에서 h1부터 탐색하다가 h1,h2,h3,h5 이렇게 작성하게 되면 중간에 h4 태그가 존재학지 않으므로 h4 뒤인 h5,h6를 탐색하지 않고 종료합니다. 이러한 특징으로 헤딩 태그를 사용할 때는 차례대로 사용하여야 합니다.  태그 : 본문의 문단을 작성할 때 사용 (Paragraph)하나의 문단을 작성할 때는 p 태그를 사용합니다. HTML에서는 제목이나 주제 텍스트가 아니면 대부분 본문이기에 p태그를 자주 사용합니다.  태그 : ..

// 매개변수 패턴// 기본값(Default value)function sum(a,b) {  return a + b}console.log(sum (1,2)) // 3console.log(sum(7)) // 7 + undefined = NaN function 함수의 매개변수로 sum함수를 설정하고 콘솔 창에 지정된 값을 대입하여 결과를 연산하여 반환합니다. 이때, 마지막 콘솔 창에 a의 데이터 값만 지정되고 b의 데이터 값은 지정되지 않아 undefined와 숫자 7을 더한 NaN이 출력되게 됩니다.# 기본값// 매개변수 패턴// 기본값(Default value)function sum(a,b = 1) {  return a + b}console.log(sum (1,2)) // 3console.log(sum(..

// 함수 선언문(Declaration)function hello ( ) {}// 함수 표현식(Expression)const hello = function () {}// 호이스팅(Hoisting) - 함수 선언부가 유효범위 최상단으로 끌어올려지는 현상 / 함수 선언문에서만 사용가능, 표현식 x # 함수 선언문// 호이스팅(Hoisting)hello();function hello() {  console.log("Hello~");} 함수가 선언이 아래쪽에 있지만 함수 선언을 할 때 작성한 선언문을 함수 선언문에 끌어올려져서 동작하는 것 hello()const world = function world() {  console.log('Hello~')} 이렇게 작성하게 될 경우 함수 표현식에서 기존 함수 명을 h..

While 문// While 반복문 -> 조건이 참이면 계속 반복하는 구문let n = 0;while (n 4) {  console.log(n);  n += 1;} while (조건문) { } - 조건문 속 조건이 참일 경우에는 계속하여 조건이 출력됨, 여기서 조건문이 거짓이 될 때까지 { } 객체 데이터 내부 과정은 계속하여 실행됩니다.일반적인 반복문을 사용할 때 사용합니다. (거의 대부분 사용)Do While 문// Do While 반복문let n = 0;while (n) {  console.log(n);} 여기서 숫자 0 값은 조건이 거짓이기에 콘솔 창에는 아무것도 출력되지 않습니다. // Do While 반복문let n = 0;// while (n) {//   console.log(n);// }..

For 반복문// For 반복문for (초기화; 조건; 증감) {   반복 실행할 코드 }for (let i = 0; i 10; i++) {  console.log(i);} // For 반복문// for (초기화; 조건; 증감){//   // 반복 실행할 코드// }for (let i = 9; i > -1; i -= 1) {  if (i 4) {    break;  }  console.log(i);} 숫자 9에서부터 시작하여 출력되다가 i가 숫자 4보다 작으면 출력되지 않으므로 콘솔 창에는 9~ 4까지 출력됨 continue 키워드 : 현재 반복을 종료하고 다음 반복으로 넘어감// For 반복문// for (초기화; 조건; 증감){//   // 반복 실행할 코드// }for (let i = 9; i ..

데이터가 존재하지 않는 경우에 ?. 을 사용하여 뒤쪽 내용을 실행시키지 않고 undefined를 반환시키는 것// 선택적 체이닝(Optional Chaining)const user = {}console.log(user?.name)  // user 객체 데이터 내부 name 검색 => 출력 : undefined // 선택적 체이닝const userA ={  name: Yonghak,  age: 23,  address: {    country: 'Korea',    city : 'Seoul',  }}const userB = {   name: 'John',  age: 24}function getCity(user) {  return user.address.city  ( undefined - falsy 데이터) ..

// 구조 분해 할당const arr = [1, 2, 3];// const a = arr[0];// const b = arr[1];// const c = arr[2];const [a, b, c] = arrconsole.log(a, b, c); 배열에 정해진 값 1,2,3 을 각각의 변수 값을 배열을 a, b, c로 분해하여 할당하는 것 // 구조 분해 할당const arr = [1, 2, 3];const [a, rest] = arr;console.log(a, rest); 이렇게 작성하면 콘솔 창에 1 과 2만 출력됨 배열의 1을 제외한 나머지 전부를 출력하고자 할 때는 전개 연산자를 사용함// 구조 분해 할당const arr = [1, 2, 3];const [a, rest] = arr;console.lo..

웹 페이지는 줄바꿈 처리를 인식하지 않습니다.블록(상자) 요소 ~ : 특별한 의미가 없는 구분을 의한 요소 (Division) ~ : 제목을 의미하는 요소 (Heading)- 1~ 6 번까지 있으며 숫자가 커질수록 글자의 크기가 작아짐 / 숫자가 작을수록 더 중요한 제목을 정의 : 문장을 의미하는 요소 (Paragraph) ~ : 순서가 필요없는 목록의 집합 (Unordered List) ~ : 순서가 필요한 목록의 집한 (Ordered List) ~ : 목록 내 각 항목 (List Item)※ 태그와 태그는 하나의 쌍으로 작성, 단독 사용 불가! # ul>li*(추가할 li태그의 개수) & tab => 그만큼 생성함 사과 딸기 수박 오렌지 인라인(글자) 요소 ~ : 이미지를 삽입하는..

HTML은 태그와 속성으로 문법을 구성 / 문법은 크게 콘텐츠가 있는 문법 or 콘텐츠가 없는 문법으로 구성되어져 있음 콘텐츠가 있는 문법내용  - : 시작(열린) 태그- : 종료(닫힌) 태그- 내용 : 요소의 내용(Contents)속성명="속성값"> 이때, 속성값이 여러 개인 경우에 하나의 큰 타옴표 안에 ,(쉼표)로 구분하여 값을 나열하면 됩니다.HTML 기본 구조DOCTYPE html>html lang="en">  head>    meta charset="UTF-8" />    meta name="viewport" content="width=device-width, initial-scale=1.0" />    title>Documenttitle>  head>  body>body>html> 1. ..