지난번 HTML로 간단한 자기소개 페이지를 만들어 봤었음

그걸 이제 CSS를 추가해서 꾸며보겠음

이게 지난번 결과임

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>이도서의 간단한 자기소개 페이지 만들기</title>
  </head>
  <body>
    <h2>안녕하세요 이도서입니다.</h2>

    <h3>자기소개</h3>
    <p>저는 React 개발자를 꿈꾸는 개발자입니다.</p>

    <h3>보유 기술</h3>
    <ul>
      <li>Swift</li>
      <li>Flutter</li>
      <li>HTML 학습중</li>
      <li>JavaScript 학습중</li>
      <li>React 학습중</li>
    </ul>

    <h3>연락처</h3>
    <p>Email : <a href="이메일 비공개">이메일 비공개</a></p>

    <!-- 이미지는 구현 x -->
    <h3>프로필 사진</h3>
    <img src="profile.jpg" alt="내 사진" width="200" height="300" />

    <h3>노션 링크</h3>
    <a
      href="노션링크 비공개"
      target="_blank"> <!-- 새 탭에서 이동 -->
      내 노션 링크</a>
  </body>
</html>

그럼 한번 해보겠음

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>이도서 - 프론트 엔트 개발자</title>
    <link rel="stylesheet" href="introduce_style.css" />
  </head>

우선 `link`로 css파일을 불러오도록함

그 후 아래에 내용을 작성해보겠음

<body>
    <div class="container">
      <!-- 프로필 섹션 -->
      <div class="profile-section">
        <img src="./src/profile.jpeg" alt="프로필 사진" class="profile-img">
        <h1>이도서 (Lee doseo)</h1>
        <p class="intro">React 개발자를 꿈꾸는 프론트엔드 개발 지망생</p>
      </div>

      <!-- 연락처 섹션-->
      <div class="section">
        <h2>연락처</h2>
        <ul>
          <li>Email: kmgwhn@gmail.com</li>
          <li>Github: https://github.com/Leedoseo</li>
          <li>Phone: 010-0000-0000</li>
        </ul>
      </div>

      <!-- 기술 스택 섹션 -->
      <div class="section">
        <h2>기술 스택</h2>
        <ul>
          <li>Swift</li>
          <li>Flutter</li>
          <li>HTML / CSS</li>
          <li>JavaScript</li>
        </ul>
      </div>

      <!-- 목표 섹션 -->
      <div class="section">
        <h2>목표</h2>
        <p>
          2026년 2월까지 React 포트폴리오 완성 후 프론트엔드 개발자로 취업하기!
        </p>
      </div>
    </div>
  </body>

css가 들어가지 않은 상태에서는 이미지 크기가 매우 크고 아래 내용이 이전과 달라진게 없음

여기서 css를 추가해 보겠음

/* 전체 페이지 스타일 */
body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f5f5f5;
  margin: 0;
  padding: 20px;
  line-height: 1.6;
  color: #333;
}

/* 메인 컨테이너 */
.container {
  max-width: 600px;
  margin: 0 auto;
  background-color: antiquewhite;
  padding: 40px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0, 1);
}

/* 프로필 섹션 */
.profile-section {
  text-align: center;
  margin-bottom: 40px;
  padding-bottom: 30px;
  border-bottom: 2px solid white;
}

.profile-img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px, solid #0066cc;
}

h1 {
  font-size: 28px;
  margin: 10px 0;
  color: #222;
}

.intro {
  font-size: 16px;
  color: brown;
  margin-top: 10px;
}

/* 각 섹션 */
.section {
  margin-bottom: 30px;
}

h2 {
  font-size: 20px;
  color: #0066cc;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 2px solid white;
}

/* 리스트 스타일 */
ul {
  list-style: none;
  padding: 0;
}

li {
  padding: 8px 0;
  padding-left: 20px;
  position: relative;
}

li:before {
  content: "💁🏻";
  position: absolute;
  left: 0;
}

/* 링크 스타일 */
a {
  color: #0066cc;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

프로필 사진은 동그랗게 나왔고 지난번보다 깔끔하게 보임

 

부족한 부분은 다음 진도를 나가면서 찾아보면서 공부해보겟음 끝!

'React > HTML & CSS' 카테고리의 다른 글

[HTML/CSS] 네비바, 카드 레이아웃 만들어보기  (0) 2025.11.26
[HTML/CSS] CSS 정리  (0) 2025.11.26
[HTML] form태그와 input태그  (0) 2025.11.21
[HTML] div, span 태그 & 클래스와 아이디  (0) 2025.11.21
[HTML] 간단한 자기소개 페이지 만들어보기  (0) 2025.11.20

티스토리툴바