HTML | 메타데이터 : 검색 최적화, 문자 인코딩, 모바일 반응성, 오픈 그래프(The Open Graph protocol)
⭕ HTML | 메타데이터 : 검색 최적화, 문자 인코딩, 모바일 반응성, 오픈 그래프(The Open Graph protocol)➡️ 좋은 메타데이터란?웹 페이지의 내용을 정확하게 반영하고, 사용자가 검색할 만한 키워드를 포함하는 것다양한 레퍼런스를 살펴보면, 사용자가 클릭할 만한, 너무 길지 않은 등의 요소가 중요하다는 점을 강조함결론적으로 정답이 있다기보다는, 정확하고 사용자의 이목을 끌 만한 키워드가 포함되어야 한다고 생각됩니다. ✨ ➡️ 문자 인코딩문자 인코딩을 UTF-8로 설정함UTF-8은 대부분의 문자를 표현할 수 있는 인코딩 방식으로, 글로벌 콘텐츠에 권장함 ➡️ 모바일 뷰포트모바일 장치의 뷰포트를 설정함반응형 디자인에 필수적임 ➡️ 파비콘(favicon)프로젝트 루트 폴더에 favico..
2024. 5. 16.
CSS | CSS 선택자 : 기본 선택자, 복합 선택자, 동작 기반 가상 클래스 선택자, 가상 클래스 선택자, 가상 요소 선택자, 속성 선택자
⭕ CSS | CSS 선택자 : 기본 선택자, 복합 선택자, 동작 기반 가상 클래스 선택자, 가상 클래스 선택자, 가상 요소 선택자, 속성 선택자➡️ 기본 선택자전체 선택자 (*)모든 HTML 요소* { margin: 0; padding: 0; }모든 요소의 마진과 패딩을 0으로 적용함태그 선택자지정된 태그를 의미p { font-size: 16px; }모든 태그에 16픽셀의 글꼴 크기를 적용함클래스 선택자 (.)지정된 클래스를 가진 모든 요소.menu { background-color: blue; }menu 클래스에 파란색 배경을 적용함ID 선택자 (#)특정 ID를 가진 단일 요소자주 사용하지는 않음#header { height: 100px; }header ID에 높이를 100픽셀로 적용함 [프론트엔드..
2024. 5. 16.
CSS | position 위치 속성: Static, Relative, Absolute, Fixed, Sticky
⭕ CSS | position 위치 속성: Static, Relative, Absolute, Fixed, Sticky요소의 위치 지정 기준 ➡️ static (기본 값)요소를 문서 흐름에 따라 배치합니다.positon 설정이 없는 것과 같다.position: static; ➡️ relative (거의 사용하지 않음) static 위치를 기준으로, top, right, bottom, left 값을 사용하여 배치합니다. position: relative;top: 40px; left: 40px; ➡️ ⭐ absolute일반 문서 흐름에서 요소를 제거하고, 위치상 부모 요소를 기준으로 배치합니다.position: absolute;top: 40px; left: 40px; ➡️ fixed일반 문서 흐름에서 요소를..
2024. 5. 14.
웹 구조 Web | 프론트엔드 개발 기술 목록: HTML, CSS, JavaScript(JS)
⭕ 웹 구조 Web | 프론트엔드 개발 기술 목록: HTML, CSS, JavaScript(JS) ➡️ HTML: 구조 역할: 웹 페이지의 기본 구조를 제공함 기능: 제목, 문단, 표, 이미지, 동영상 등 페이지의 구조적 요소를 정의함 비유: 얼굴에서 눈, 코, 입과 같은 구체적인 부분을 형성함 ➡️ CSS: 스타일 역할: 웹 페이지의 시각적 스타일을 담당함 기능: 색상, 크기, 폰트, 레이아웃 등을 조정하여 콘텐츠의 시각적인 표현을 정의함 비유: 구조적으로 설정된 눈, 코, 입의 위치와 모양, 색상 등을 정의함 ➡️ JavaScript(JS): 동적 처리 역할: 웹 페이지의 동적 기능을 구현함 기능: 사용자의 입력에 반응하거나, 페이지의 콘텐츠를 실시간으로 변경하고 움직임을 추가함
2024. 4. 22.
자바스크립트 JavaScript | 구문과 표기법: 전개 구문 (Spread Syntax), 객체 리터럴 표기법, 구조 분해 할당 (Destructuring Assignment)
⭕ 자바스크립트 JavaScript | 구문과 표기법: 전개 구문 (Spread Syntax), 객체 리터럴 표기법, 구조 분해 할당 (Destructuring Assignment)➡️ 전개 구문 (Spread Syntax)전개 구문은 배열이나 객체의 요소를 여러 개의 개별 요소로 "전개"하는 데 사용됩니다. 이 구문은 함수 호출에 인수를 전달하거나, 배열을 다른 배열에 병합하거나, 객체를 다른 객체와 병합할 때 유용하게 사용할 수 있습니다.// 배열 전개let numbers = [1, 2, 3];let moreNumbers = [...numbers, 4, 5];console.log(moreNumbers); // [1, 2, 3, 4, 5]// 객체 전개let person = { name: "Alice"..
2024. 3. 9.
자바스크립트 JavaScript | 기본 구성 요소: 변수, 함수, 조건문, 삼항연산자, 반복문, 배열
⭕ 자바스크립트 JavaScript | 기본 구성 요소: 변수, 함수, 조건문, 삼항연산자, 반복문, 배열React 프로젝트 진행을 위한 자바스크립트 기본 구성 요소를 정리합니다. ➡️ 변수데이터를 저장하는 데 사용되는 이름이 붙은 저장소let, const, var 키워드를 사용하여 변수를 선언함let name = "John";const age = 30; ➡️ 함수즉시실행함수정의되자마자 즉시 실행되는 함수주로 초기화 코드에 사용함(function() { console.log("즉시 실행!");})();파라미터 기본값 설정함수에 파라미터를 전달하지 않았을 경우 기본값을 설정할 수 있음function greet(name = "Guest") { console.log(`Hello, ${name}!`);}gr..
2024. 3. 9.
