IntelliJ IDEA로 HTML, CSS 만을 사용하여 정적 웹 페이지 만들기

백엔드

IntelliJ IDEA로 HTML, CSS 만을 사용하여 정적 웹 페이지 만들기

Onluvo 2025. 3. 28. 13:42

✅ 1. IntelliJ에서 새 프로젝트 생성

먼저 저는 JDK 22 버전을 다운받아서 실행했어요

IntelliJ IDEA 실행
"New Project" 클릭
"Empty Project" 선택 후 "Next" 클릭
프로젝트 이름 설정 (예: HTMLProject)
"Create" 클릭해서 프로젝트 생성

name 을 입력해주고 Gradle 을 선택해주고 저는 jdk22 버전으로 실행했어요 !

여기서 Build system 은

간단한 Java 프로젝트 → IntelliJ
실무용/대규모 프로젝트 (Spring Boot, Kotlin, 라이브러리 설치가 필요한 프로젝트 ) → Gradle

프로젝트가 커질 경우 Gradle이 더 효율적

Gradle은 build.gradle 파일에서 의존성을 자동으로 관리

플러그인/라이브러리 추가할 일이 많다면 Gradle 필수!

저기에 src>main>resources>static>card.html 이렇게 파일을 만들었어요

그리고 아래의 코드를 입력하여 정적 페이지를 만들어보았어요 !

<!DOCTYPE html>

<head>

<style>

body {

font-family: 'Arial', sans-serif;

background-color: #f4f4f4;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

}

.card {

background: white;

padding: 20px;

border-radius: 10px;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

width: 350px;

text-align: center;

}

.name {

font-size: 24px;

font-weight: bold;

color: #333;

}

.role {

font-size: 18px;

color: #777;

margin-bottom: 10px;

}

.slogan {

font-style: italic;

color: #555;

margin-bottom: 15px;

}

.contact {

font-size: 14px;

color: #444;

line-height: 1.6;

}

.hobby {

margin-top: 15px;

font-size: 14px;

color: #666;

}

</style>

</head>

<body>

<div class="role">백엔드 개발자 | AI Enthusiast</div>

📧 Email: <a href="mailto:***이메일">****이메일**/a> <br>

📞 전화번호: 010-*******<br>

⚙️ 관심 분야: 백엔드 개발, AI

</div>

🎨 취미: 혼자 카페 다니기, 산책하기, 빵 먹기

</div>

</body>

</html>

간단하게 코드에 대해서 살펴보자면

1. <!DOCTYPE html>

HTML 문서가 HTML5 문서임을 선언하는 문구입니다.

2. <html lang="ko">

이 태그는 HTML 문서가 한국어(ko)로 작성되었음을 나타냅니다.

3. <head>

웹 페이지의 메타 정보가 들어가는 부분입니다.
- <meta charset="UTF-8">: 문자 인코딩을 UTF-8로 설정하여 다양한 문자(한글 포함)가 제대로 표시되도록 합니다.
- <meta name="viewport" content="width=device-width, initial-scale=1.0">: 화면 크기에 따라 웹 페이지가 적절하게 표시되도록 반응형 디자인을 지원합니다.
- <title>장** | **이 명함</title>: 브라우저 탭에 표시될 제목을 설정합니다.

4. <style>

웹 페이지의 스타일을 지정하는 CSS 코드입니다.
- body: 전체 페이지의 기본 스타일을 설정합니다. 배경색을 연한 회색(#f4f4f4)으로 설정하고, 콘텐츠가 화면 가운데 정렬되도록 설정합니다.
- .card: 명함처럼 보이게 하기 위한 박스를 설정합니다. 배경을 흰색으로, 테두리는 둥글게 만들고, 그림자 효과를 주어 입체감을 줍니다.
- .name: 이름 부분의 글꼴 크기를 24px로 설정하고, 두껍게 표시하며, 어두운 색으로 설정합니다.
- .role: 직책(백엔드 개발자 등)을 18px로 설정하고, 연한 회색으로 표시합니다.
- .slogan: 슬로건을 이탤릭체로 표시하고, 색상을 좀 더 연한 회색으로 설정합니다.
- .contact: 연락처 정보를 표시하는 부분으로, 글꼴 크기 14px로 설정하고 줄 간격을 설정하여 가독성을 높입니다.
- .hobby: 취미를 나타내는 부분으로, 다른 요소들과 구분되도록 스타일을 설정합니다.

5. <body>

이 부분은 실제로 웹 페이지에 보이는 콘텐츠를 포함하는 곳입니다.
- <div class="card">: 명함의 형태를 만드는 박스를 설정합니다.
- <div class="name">장** (**이)</div>: 이름을 표시하는 부분입니다.
- <div class="role">백엔드 개발자 | AI Enthusiast</div>: 직책을 표시하는 부분입니다.
- <div class="slogan">💡 데이터를 흐르게 하고, 세상을 연결한다.</div>: 슬로건을 표시하는 부분입니다.
- <div class="contact">: 이메일, 전화번호, 관심 분야를 표시하는 부분입니다. 이메일 링크는 클릭 시 이메일 클라이언트를 열어주는 mailto: 링크입니다.
- <div class="hobby">: 취미를 표시하는 부분입니다. 예시로 혼자 카페 다니기, 산책하기, 빵 먹기 등이 나옵니다.

간단하게 요약하자면

헤드 부분: 문자 인코딩, 반응형 디자인 설정, 페이지 제목 정의.
스타일: 페이지 중앙에 명함처럼 보이는 박스를 만들고, 이름, 직책, 슬로건, 연락처, 취미 등을 스타일링.
본문: card라는 박스 안에 이름, 직책, 슬로건, 연락처, 취미를 나열.

'백엔드' 카테고리의 다른 글

CRUD 구현/ CR 기능에 대해 (1)	2025.05.04
[Spring MODEL 구현/MVC 패턴] (1)	2025.04.05
[Spring Boot 구조] (1)	2025.04.05
백엔드란? (0)	2025.03.28
서버와 클라이언트의 관계 (0)	2025.03.28

현재글IntelliJ IDEA로 HTML, CSS 만을 사용하여 정적 웹 페이지 만들기

🌠 ONLUVO world 🍀 ⭐ 🌟🪄 ☆ ⋆ ★ ✧

Onluvo 님의 블로그 입니다.

Today :
Yesterday :

🌠 ONLUVO world 🍀 ⭐ 🌟🪄 ☆ ⋆ ★ ✧