2일차. IT 개념정리

HTML5란?

1. 정의

HTML5는 웹 문서를 구조화하는 언어인 HTML(HyperText Markup Language)의 5번째 버전입니다.
W3C(World Wide Web Consortium)와 WHATWG(Web Hypertext Application Technology Working Group)가 함께 표준으로 만든 최신 웹 기술 규격이에요

HTML = HyperText Markup Language

1. HyperText

Hyper: "초월한, 확장된"이라는 의미
Text: "문자, 글"
→ 단순한 글(텍스트)을 넘어서, **다른 문서나 페이지로 이동할 수 있는 링크(하이퍼링크)**를 포함한 텍스트
즉, 웹에서 링크로 연결된 텍스트를 뜻함.
이동하는 문자:HyperText, 이동하지 않는 문자:Text (이미지도 text, 이동을 안하기 때문)
페이지를 두개 만들어야 하이퍼텍스트가 됨~!

2. Markup

Mark: "표시하다, 표시"
Up: "강조, 위로 올리다" (여기서는 단어 강조의 뉘앙스)
→ 문서 안에서 특정 부분을 **태그(tag)**로 감싸서 구조와 의미를 "표시(mark)"하는 것
예: <p>문단</p>, <h1>제목</h1> 처럼 문서 구조를 표시하는 방식

3. Language

"언어"라는 뜻
여기서는 사람의 언어가 아니라, 컴퓨터와 브라우저가 이해할 수 있는 규칙 체계라는 의미
즉, HTML은 "웹 브라우저가 읽을 수 있는 언어"임.

HTML과 CSS의 관계

HTML (HyperText Markup Language) → 웹페이지의 뼈대(구조)
CSS (Cascading Style Sheets) → 웹페이지의 옷(디자인·스타일)

👉 쉽게 말하면, HTML은 내용을 담는 그릇, CSS는 그 그릇을 예쁘게 꾸미는 방법이에요.

CSS (Cascading Style Sheets)란?

정의
- 웹 문서(HTML)의 디자인과 레이아웃을 담당하는 언어
- "Cascading"은 위에서 아래로 덮어씌우며 적용된다는 의미 (스타일 우선순위 개념)
- CSS를 사용하면 색상, 글꼴, 텍스트 크기, 요소 간 간격, 요소의 위치 및 배치 방법, 사용할 배경 이미지나 배경색, 다양한 장치와 화면 크기에 맞는 다양한 디스플레이 등을 제어할 수 있습니다!
- 팁: 캐스 케이딩(cascading) 이란 부모 요소에 적용된 스타일이 부모 요소 내의 모든 자식 요소에도 적용된다는 의미입니다. 따라서 본문 텍스트 색상을 "파란색"으로 설정하면 본문 내의 모든 제목, 단락 및 기타 텍스트 요소도 (다른 색상을 지정하지 않는 한) 동일한 색상이 적용됩니다!
주요 기능
- 글자 크기, 색상, 폰트 변경
- 배경색, 배경이미지 설정
- 레이아웃(위치, 여백, 정렬) 조정
- 버튼, 박스, 테두리 디자인
- 애니메이션, 반응형 웹 디자인까지 가능

자바에서의 Body 개념

Body는 특정 코드 블록(구역)의 실제 실행 내용을 담고 있는 부분을 말합니다.
중괄호 { } 안에 들어가는 부분이 바로 그 body예요.

✨ 예시로 보는 자바 Body

1. 클래스(class) body

public class Hello { // 이 부분이 클래스 body }

2. 메서드(method) body

public class Hello { public static void main(String[] args) { System.out.println("Hello, World!"); // ← 이 부분이 메서드 body } }

3. 조건문, 반복문 body

if (true) { System.out.println("조건이 참일 때 실행"); // ← if 문 body } for (int i = 0; i < 3; i++) { System.out.println(i); // ← for 문 body }

정리

HTML의 <body> → 웹페이지의 실제 콘텐츠(눈에 보이는 부분)
Java의 body → 중괄호 { } 안에 들어가는 실행 코드 블록

👉 둘 다 "실제 내용이 들어가는 곳"이라는 점에서 비슷하지만,
HTML은 태그 구조의 일부, Java는 실행되는 코드 블록이라는 차이가 있어요

*body 앞은 head

스프링 프레임워크(Spring Framework)

스프링 프레임워크란?

**자바(Java)**로 웹 애플리케이션(웹사이트, 서비스)을 만들 때 쓰는 **개발 도구 모음(프레임워크)**이에요.
쉽게 말하면, **자바로 웹을 편하고 체계적으로 만들 수 있게 도와주는 틀(Framework)**입니다.
html을 java로 연동해서 바꾸게 해주는 것
쉽게(x)-공학은 형용사가 필요없다. 옳고 그름의 문제임

스프링의 주요 특징

IoC (Inversion of Control, 제어의 역전)
- 객체 생성·관리를 개발자가 직접 하지 않고 스프링이 대신 관리해 줌 → 개발이 편리해짐
DI (Dependency Injection, 의존성 주입)
- 필요한 객체를 스프링이 자동으로 넣어줌 → 코드 재사용성 & 유지보수 ↑
AOP (Aspect Oriented Programming, 관점 지향 프로그래밍)
- 로그 기록, 보안 같은 공통 기능을 따로 빼서 관리 가능
MVC 구조 지원
- 웹을 만들 때 Model-View-Controller 구조를 제공해서 코드가 깔끔하고 체계적이 됨

비유로 이해하기

스프링 프레임워크는 마치 “아파트 건축 기본 설계도” 같아요.

혼자 집을 짓는다면 벽돌부터, 수도, 전기까지 전부 챙겨야 하지만,
아파트 단지에서는 **기본 구조(전기, 수도, 엘리베이터)**가 이미 다 마련돼 있어요.
👉 개발자는 그 위에 **내 집 인테리어(내 서비스 기능)**만 하면 됩니다.

정리

스프링은 자바 웹 개발을 편리하게 해주는 프레임워크
기본 기능(보안, DB 연결, 구조화)을 제공 → 개발자는 핵심 기능 구현에만 집중 가능
기업용 대규모 서비스(은행, 쇼핑몰, 공공기관 등)에서 가장 많이 쓰이는 자바 프레임워크

스프링 프레임워크의 활용 분야

1. 웹 애플리케이션 개발

온라인 쇼핑몰, 게시판, 블로그, 포털 서비스 등
예: 로그인, 회원가입, 결제, 게시판 같은 기능을 안정적으로 구현 가능

2. 기업용 시스템 (Enterprise Application)

은행, 보험, 병원, 공공기관, 대기업 사내 시스템
대규모 데이터를 처리하고, 보안·안정성이 중요한 시스템에 적합

3. API 서버 개발

모바일 앱이나 다른 웹서비스와 데이터를 주고받는 백엔드 서버
예: 카카오 로그인 API, 날씨 API, 영화 정보 제공 API 같은 서비스

4. 마이크로서비스 아키텍처(MSA)

큰 시스템을 작은 서비스 단위로 나눠서 관리할 때 사용
스프링은 MSA 구조에 강력한 지원을 제공 (스프링 클라우드 등)

5. IoT·클라우드·빅데이터 연동

단순히 웹만이 아니라,
- 스마트 기기 연동 서버
- 클라우드 서비스와 연계
- 빅데이터 처리용 백엔드
  에도 사용됨

*프레임워크-책장

*라이브러리-책

Gradle(그래들)

Gradle(그래들)이란?

**빌드 도구(Build Tool)**입니다.
우리가 작성한 **소스 코드 → 실행 가능한 프로그램(Jar, War)**으로 만드는 과정, 그리고 외부 라이브러리(의존성) 관리까지 자동으로 해주는 도구예요.
빌드 : . compile

👉 쉽게 말하면, 개발자가 코드에만 집중할 수 있게 뒷단의 귀찮은 일들을 대신 처리해주는 도우미입니다.

src란?

**Source(소스)**의 줄임말입니다.
말 그대로 개발자가 작성하는 원본 코드가 들어 있는 폴더예요.
우리가 src 폴더 안에 Java, HTML, CSS, JS 같은 파일을 넣으면, 빌드 도구(Gradle 같은 것)가 이걸 컴퓨터가 이해할 수 있는 실행 파일로 변환합니다.
자바파일 들어가 있어야함!

'Project ESG+AI > Tech Basics' 카테고리의 다른 글

[참고]계산기 코드 짠거 (0)	2025.10.15
5일차. IT 개념 정리 (0)	2025.10.15
4일차. IT 개념 정리 (0)	2025.10.14
3일차. IT 개념정리 (0)	2025.10.13
1일차. IT 개념 정리 (0)	2025.10.01

Net:SEED Lab 🌱🤍

2일차. IT 개념정리

HTML5란?

1. 정의

HTML = HyperText Markup Language

1. HyperText

2. Markup

3. Language

HTML과 CSS의 관계

CSS (Cascading Style Sheets)란?

자바에서의 Body 개념

✨ 예시로 보는 자바 Body

1. 클래스(class) body

2. 메서드(method) body

3. 조건문, 반복문 body

정리

스프링 프레임워크(Spring Framework)

스프링 프레임워크란?

스프링의 주요 특징

비유로 이해하기

정리

스프링 프레임워크의 활용 분야

Gradle(그래들)

Gradle(그래들)이란?

src란?

'Project ESG+AI > Tech Basics' 카테고리의 다른 글

티스토리툴바

2일차. IT 개념정리

HTML5란?

1. 정의

HTML = HyperText Markup Language

1. HyperText

2. Markup

3. Language

HTML과 CSS의 관계

CSS (Cascading Style Sheets)란?

자바에서의 Body 개념

✨ 예시로 보는 자바 Body

1. 클래스(class) body

2. 메서드(method) body

3. 조건문, 반복문 body

정리

스프링 프레임워크(Spring Framework)

스프링 프레임워크란?

스프링의 주요 특징

비유로 이해하기

정리

스프링 프레임워크의 활용 분야

Gradle(그래들)

Gradle(그래들)이란?

src란?

'Project ESG+AI > Tech Basics' 카테고리의 다른 글

관련글

티스토리툴바