스흐 엔지니어 이야기
1. 개요 2. 버전 3. Proxmox 네트워크 개요 3-1. 네트워크 브리지 (Network Bridge) 3-2. 본딩 (Bonding) 3-3. VLAN (Virtual Local Area Network) 4. Network Bridge 4-1. GUI 생성 4-2. GUI 삭제 4-3. CLI 생성 4-3-1. 네트워크 설정 파일 편집 4-3-2. 설정 추가 4-3-3. 네트워크 서비스 재시작 4-3-4. Bridge 생성 확인 출력 예시: 4-4. CLI 삭제 4-4-1. … 더 읽기
1. 개요 2. 버전 3. ISO 3-1. ISO 이동 3-2. ISO 확인 4. VM 생성 4-1. GUI를 이용한 VM 생성 4-2. GUI를 이용한 VM 삭제 4-3. CLI를 이용한 VM 생성 4-3-1. Storage 확인 4-3-2. VM 생성 4-3-3. VM 생성 확인 4-3-4. VM 실행 4-3-5. VM 실행 확인 4-4. CLI를 이용한 VM 삭제 4-4-1. VM 종료 … 더 읽기
웹 개발할 때 width와 padding을 설정하면 예상과 다르게 레이아웃이 깨지는 경우가 많다.예를 들어, 다음과 같이 스타일을 지정했다고 가정해보자. 이 경우 .box의 실제 너비는 얼마일까?보통 200px – 50px(좌) – 50px(우) = 100px이 될 거라고 생각할 수도 있지만,실제로는 width가 컨텐츠 영역(content box)만을 의미하기 때문에 아래처럼 계산된다. 즉, padding과 border가 width에 포함되지 않기 때문에 원하는 크기보다 커지는 문제가 … 더 읽기
1. position: absolute란? CSS에서 position: absolute를 적용하면 해당 요소는 문서 흐름에서 제거되며, 특정 기준점을 기준으로 배치됩니다.이때 기준점이 되는 요소는 가장 가까운 position이 지정된(즉, relative, absolute, fixed 중 하나인) 부모 요소입니다. 만약 부모 요소가 position: static(기본값)이라면, absolute 요소는 <html> 요소(즉, 문서 전체)를 기준으로 배치됩니다. 이 경우 .child 요소는 문서 전체를 기준으로 top: 50px, left: 50px 위치에 … 더 읽기
1. 개요 Proxmox는 다양한 스토리지 방식을 지원하며, 목적에 맞게 선택할 수 있습니다.본 가이드에서는 디스크 설정 방법과 각 방식의 특징을 설명합니다. 2. Proxmox 버전 본 문서는 Proxmox 8.2 기준으로 작성되었습니다. 3. 디스크 스토리지 방식 설명 3-1. LVM (Logical Volume Manager) LVM은 여러 개의 물리 디스크를 하나의 논리 볼륨 그룹으로 관리하는 방식입니다.디스크 확장이 용이하며, 유연한 파티션 관리가 가능합니다. 3-2. LVM-Thin … 더 읽기
1. 개요 2. Proxmox 8.2 버전 기준 3. Subscription 경고 확인 및 제거 방법 3-1. Subscription 경고 메시지 확인 3-2. Subscription 경고 제거 방법 3-2-1. Subscription 설정 변경 1️⃣ Proxmox 웹 인터페이스에서 설정 변경 2️⃣ No-Subscription Repository 추가 3-2-2. 경고 메시지 완전 제거 (JavaScript 수정) 1️⃣ Proxmox 쉘(Shell) 실행 🔹 백업 생성: 원본 파일을 백업합니다. 2️⃣ JavaScript 파일 수정 3️⃣ 경고 … 더 읽기
CSS Reset이란? 왜 필요한가? 웹사이트를 제작할 때 브라우저마다 기본적으로 제공하는 스타일이 다릅니다. 이러한 차이를 해결하기 위해 사용하는 것이 바로 CSS Reset입니다. CSS Reset을 적용하면 모든 브라우저에서 동일한 초기 스타일을 유지할 수 있어 일관된 디자인을 만들 수 있습니다. 이 글에서는 CSS Reset의 필요성, 주요 방법, 그리고 가장 많이 사용되는 CSS Reset 코드를 소개합니다. CSS Reset이 필요한 이유 1. … 더 읽기
개요 웹사이트에서 멋진 폰트를 사용하고 싶다면 Google Fonts를 활용하는 것이 가장 좋은 방법입니다.Google Fonts는 무료로 제공되며, CSS에 간단히 추가할 수 있어 많은 개발자들이 애용합니다.이 글에서는 Google Fonts를 HTML과 CSS에 적용하는 방법을 두 가지 방식으로 소개하겠습니다. 1. <link> 태그를 사용한 적용 방법 가장 일반적인 방법은 HTML의 <head> 태그에 <link>를 추가하는 것입니다. 사용 방법 예제 코드 아래는 Roboto 폰트를 적용하는 예제입니다. 📌 font-family: ‘Roboto’, sans-serif; 를 추가하면 글꼴이 적용됩니다!이 … 더 읽기
1. 개요 2. Proxmox란? Proxmox 기능 3. Proxmox 8.2 설치 방법 3-1. Proxmox 설치 과정 ① Proxmox VE 설치 시작 ② Proxmox 설치 진행 4. 설치 후 확인 방법 4-1. 정상 부팅 화면 4-2. 웹 인터페이스 접속 확인
개요 🔹 BEM이란? 1️⃣ Block (블록) 2️⃣ Element (요소) 3️⃣ Modifier (수정자) 🔹 BEM 클래스 네이밍 규칙 📌 BEM 적용 예제 ✅ HTML 코드 ✅ CSS 코드 🎯 BEM을 사용해야 하는 이유 ✅ 클래스 이름 충돌 방지 전역적으로 사용되는 스타일 클래스와 충돌할 위험이 줄어듭니다. ✅ 유지보수와 확장성 향상 클래스 구조가 명확해지므로 스타일 변경 및 추가가 … 더 읽기