본투비곰손

시맨틱 태그란? 개발자들이 원하는 이름(id,class)으로 코딩을 진행하면 제3자가 웹사이트를 유지보수 할 때 문제가 될 수 있어서 웹사이트의 공간을 분할하여 태그화 시켜서 구분지어 누구나 유지보수 할 때 수정할 부분을 알아보기 쉽게 만든 태그이며 속성은 display:block이다. 1. header 웹사이트에서 로고를 포함한 부분으로 가장 위쪽에서 한눈에 사이트의 이름을 알 수 있어야한다. 2. nav 웹사이트의 메뉴들을 담아두는 영역 3. main header,nav,footer 을 제외한 모든 시맨틱 태그들이 있는 영역 3-1. aside 사이트 한쪽 측면에 광고등을 담아두는 영역 3-2. section 본문 내용 전체를 담아두는 영역 (ul태그와 비슷하다.) 3-3. article 본문 내용의..

Front-end/HTML 2023. 5. 26. 22:14

1. box-sizing content-box : 대상태그를 기준으로 입력해둔 width,height 값이 대상에 고정되고 padding ,border 값에 따라 전체 가로 세로 값이 늘어난다. boder-box : 대상태그를 기준으로 입력해둔 width,height 값이 전체에 고정 padding,boder 값에 따라 대상의 가로세로 값이 줄어든다. 2. 고정값 과 유동값 일반적으로 고정값인 px를 사용하여 크기의 값을 정하여 고정시킨다. 유동값은 %를 사용하여 크기가 유동적으로 변경되는데 기준이 되는 크기 값은 웹사이트의 가로 해상도 이다. 감싸고있는 태그에 가로값이 정해져있다면 유동적으로 변하며 감싸고 있는 태그 역시 %로 가로 값이 들어가 있어야 한다. 세로값은 세로값이 정확하게 정해져있지 않다면..

Front-end/HTML 2023. 5. 25. 23:04

목록태그 사이트 상에서 목록으로 볼 수 있는 존재들을 만들때 사용하는 태그 비슷한 형태의 존재가 3개 이상일 경우 목록으로 볼 수 있다.(항상 예외는 존재 한다!!!) , 사용시 하위 목록에 태그를 사용하여 나열한다. 태그는 순서가 없는 태그이고 은 순서가 있는 태그이다. 예) 사과 딸기 포도 키위 을 사용하면 아래와 같이 출력된다. ●사과 ●딸기 ●포도 ●키위 1번손님 2번손님 3번손님 4번손님 을 사용하면 아래와 같이 출력된다. A.1번손님 B.2번손님 C.3번손님 D.4번손님 li 속성에 list-style:none를 넣어주면 목록을 없애 줄 수 있다. 여백계산법 웹사이트의 한정된 공간에서 동일한 가로 길이와 여백울 줘서 깔끔하게 태그들을 배치 시켜주기위한 방법 (총 가로의 길이 - 여백의 갯수 *..

Front-end/HTML 2023. 5. 25. 23:03

display 1. display : block 의 특징 -width ,height 속성이 적용된다. - 연속으로 사용 할 경우 세로 정렬이 된다. - 가로 값을 넣어주지 않으면 현재 웹사이트의 길이에 맞춰진다. 만약에 감싸는 부모 태그가 있다면 그 부모태그의 가로값으로 설정된다. - 세로 값을 넣어주지 않으면 태그안의 내용물에 따라 자동으로 늘어나거나 줄어든다. 2. display : inline 의 특징 - width, height 속성이 적용되지 않는다. - 연속으로 사용 할 경우 가로 정렬이 된다. 3. display : inline-block 의 특징 - width, height 속성이 적용된다. - 연속으로 사용 할 경우 가로 정렬이 된다. - margin:0 auto로 중앙정렬 되지 않는다...

Front-end/HTML 2023. 5. 24. 22:23

클라이언트 사이드 렌더링 (CSR) 렌더링하는 주체가 클라이언트(브라우저) 처음에 비어있는 HTML을 내려 받고 링크된 자바스크립트를 다운받은 후 클라이언트 쪽에서 자바스크립트와 함께 동적으로 화면을 구성하여 사용자에게 최종적으로 화면을 보여준다. 장점 한번 로딩 되면 이후에는 빠른 UX제공 서버의 부하가 적음 단점 페이지 로딩시간이 오래 걸림 자바스크립트 활성화가 필수 SEO최적화가 어려움 보안에 취약 CDN에 캐시되지 않음 스태틱 사이트 제너레이션 (SSG) 렌더링하는 주체자가 서버이고 빌드할때 렌더링되어 렌더링된 화면을 클라이언트에서 다운만 받고 사용자에게 최종적으로 보여준다. 장점 페이지 로딩시간이 빠름 자바스크립트 활성화 되지 않아도 됨 SEO최적화에 좋음 보안이 뛰어남 CDN에 캐시 됨 단점 ..

Front-end/NEXT.JS 2023. 4. 15. 21:42

1. 조건문 if if(조건){} if(조건){}else{} if(조건1){} else if(조건2){} else{}... 2. 삼항 연산자 A === B ? {코드1} : {코드2} A가 B가 맞으면 코드1실행 아니면 코드2 실행 3.조건문 switch 1) switch(조건){ case 값1: 코드1 break; case 값2: 코드2 break; } 조건이 값1이면 코드1 실행 후 값을 반환 값2 면 코드2 실행하고 값을 반환 2) switch(조건){ case 값1: case 값2: 코드2 break; case 값3: 코드3 break; } 조건이 값1 이거나 값2 면 코드 2실행 값3이면 코드3 실행 3) switch(조건){ case 값1: case 값2: 코드2 break; case 값3: ..

Front-end/JavaScript 2023. 1. 5. 23:55

1. 대입 연산자 let b; b = 1; console.log(b); 1 b=3 console.log(b); 3 2. 산술 연산자 기본적인 사칙연산자 (+, -, *, /) 에 % 나눈 숫자의 나머지 ** 제곱 정상 계산 '숫자' - 숫자 = 숫자, '숫자' * 숫자 = 숫자, '숫자' / 숫자 = 숫자 단, '숫자' + 숫자 = 문자 console.log( '35 '+ 11) 3511 3. 단항 연산자 +(양수), -(음수) , !(부정) 숫자가 아닌 타입에 +(양수) 기호를 사용하여 숫자로 변환해 볼 수 있다. console.log(+false); // 0 console.log(+null); // 0 console.log(+''); // 0 console.log(+true); // 1 console..

Front-end/JavaScript 2023. 1. 4. 23:58

원시 타입 메모리의 data, stack 에 저장 원시타입은 값이 복사되어 전달 되는 특징이있다. 1. 숫자 정수, 음수, 실수 숫자를 0으로 나누면 Infinity 숫자를 -0으로 나누면 -Infinity 숫자를 문자로 나누면 NaN (Not a Number) bigInt 엄~~~~ 청 큰숫자 뒤에 n 을 붙여서 나타낼 수 있다. 2. 문자열 ' ' 또는 " " 안에 숫자 또는 문자를 입력하면 문자열로 인식한다. ` 문자 ${변수} ` 를 사용하여 안에 문자 와 변수(함)를 같이 사용할 수 있다. // 템플릿 리터럴 3. 참과 거짓(논리 값) //Falshy 항상 거짓인 값 console.log(!!0); console.log(!!-0); console.log(!!''); console.log(!!nu..

Front-end/JavaScript 2023. 1. 4. 22:53