[TIL] Day 01 — HTML/CSS 기초 및 개발 환경 설정

[TIL] Day 01 — HTML/CSS 기초 및 개발 환경 설정

날짜: 2025-10-20
기술 스택: HTML CSS VS Code
부트캠프: DevOps 개발자 부트캠프 1주차

---

개발 환경 구성 (커리큘럼 전체 스택)

분야	주요 도구
프론트엔드 (HTML/CSS/JS/React)	VS Code
Java	Eclipse
JSP	Eclipse
Spring Framework	STS(Eclipse)
Spring Boot	IntelliJ
Python / Django	VS Code, Anaconda

VS Code 한글팩
확장 ID: MS-CEINTL.vscode-language-pack-ko

---

컴퓨터 기초 — 데이터 단위

단위	크기	계산 기준
bit	0 또는 1	최소 단위
byte	8bit	00000000 ~ 11111111
KB	1,024 byte	2¹⁰
MB	1,024 KB	2²⁰
GB	1,024 MB	2³⁰
TB	1,024 GB	2⁴⁰

단위가 2의 거듭제곱인 이유: 컴퓨터가 이진법(0/1) 기반으로 동작하기 때문

---

진법 체계 정리

진법	사용 범위	실제 활용 사례
2진법	0, 1	CPU 내부 연산, 비트 플래그
8진법	0~7	Unix 파일 권한 (chmod 755)
10진법	0~9	일반적인 수 표현
16진법	09, AF	CSS 색상코드(#FFFFFF), 메모리 주소

16진법 핵심 변환

• A=10, B=11, C=12, D=13, E=14, F=15
• 2진수 4자리 = 16진수 1자리 (예: 1010 → A, 1111 → F)
• CSS #FF0000 → RGB(255, 0, 0) → 빨간색

2진수 → 10진수 변환 원리

• 1010(2) = 1×2³ + 0×2² + 1×2¹ + 0×2⁰ = 8 + 0 + 2 + 0 = 10(10)
• 자릿수별 2의 거듭제곱을 곱해 합산하면 된다.

10진수 → 2진수 변환 원리

• 10을 2로 나눠가며 나머지를 역순으로 읽는다.
• 10 ÷ 2 = 5 나머지 0 → 5 ÷ 2 = 2 나머지 1 → 2 ÷ 2 = 1 나머지 0 → 1 ÷ 2 = 0 나머지 1
• 역순: 1010(2)

---

추천 학습 자료

유형	자료명
도서	자바의 정석 (남궁성)
유튜브	남궁성의 정석코딩
도서	이것이 자바다
유튜브	한빛미디어 자바 기초 강의 (202강)
도서 (심화)	윤성우의 열혈 Java 프로그래밍
플랫폼	인프런

---

더 알아볼 것

• Linux/Unix 파일 권한(chmod 755)과 8진법의 실제 연결 구조
• CSS hex 색상코드 ↔ RGB 변환 공식 및 브라우저 처리 방식
• HTML 시맨틱 태그(header, main, section, article, footer)와 SEO 영향
• VS Code 필수 단축키 목록 정리 (멀티커서, 터미널 토글 등)
• 전자정부 표준프레임워크(eGovFrame)가 무엇인지, 실무에서 어떻게 쓰이는지

---

참고 링크

• 전자정부 표준프레임워크 eGovFrame
• NIA 한국지능정보사회진흥원
• 인프런
• VS Code 한글팩 마켓플레이스