[CSS-07] 기존 CSS 수정, 프로필

🎯 CSS 덮어쓰기의 중요성

실무에서는 업무의 절반 이상이 기존 CSS 수정입니다. 원본 CSS를 직접 수정할 수 없는 경우가 많아 새로운 CSS로 덮어써야 합니다.

📋 CSS 우선순위 규칙

1. 작성 순서에 따른 우선순위

/* 같은 파일 내에서 */
.box {
  background: red;
}

.box {
  background: blue;  /* 이게 적용됨 (나중에 작성) */
}

<!-- 여러 CSS 파일 -->
<link href="main.css" rel="stylesheet">
<link href="main2.css" rel="stylesheet">  <!-- 이게 우선 적용 -->

2. 선택자 우선순위

선택자	점수	예시
태그	1점	div, p, h1
클래스	10점	.box, .container
ID	100점	#header, #main
인라인 스타일	1000점	style="color: red"
!important	10000점	color: red !important

3. Specificity (구체성) 점수 계산

/* 22점: div(1) + .container(10) + div(1) + .box(10) */
div.container div.box {
  color: red;
}

/* 21점: div(1) + .container(10) + .box(10) */
div.container .box {
  color: blue;
}

/* 위 예제에서는 22점인 첫 번째가 적용됨 */

🛠️ CSS 덮어쓰기 방법

방법 1: 하단에 동일한 클래스 작성

/* 기존 스타일 */
.button {
  background: blue;
  color: white;
}

/* 덮어쓰기 스타일 - CSS 파일 하단에 작성 */
.button {
  background: red;  /* 이게 적용됨 */
  border-radius: 10px;  /* 추가 스타일 */
}

방법 2: 구체성 점수 높이기

/* 기존: 10점 */
.button {
  background: blue;
}

/* 덮어쓰기: 11점 */
div.button {
  background: red;  /* 이게 적용됨 */
}

/* 더 구체적으로: 21점 */
.container .button {
  background: green;  /* 이게 최종 적용 */
}

방법 3: !important 사용 (비추천)

.button {
  background: blue !important;  /* 최우선 적용 */
}

⚠️ 주의: !important는 나중에 수정하기 어려워지므로 되도록 사용하지 않는 것이 좋습니다.

💡 좋은 CSS 코드 작성 원칙

1. 수정과 관리가 쉬운 코드

/* 좋은 예: 간단하고 명확 */
.button {
  background: blue;
  padding: 10px;
}

/* 나쁜 예: 너무 구체적 */
div.container div.wrapper div.button {
  background: blue;
  padding: 10px;
}

2. 확장성이 좋은 코드

/* 재사용 가능한 컴포넌트 */
.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.btn-primary {
  background: #007bff;
  color: white;
}

.btn-secondary {
  background: #6c757d;
  color: white;
}

3. 간결한 코드

/* 중복 제거 */
.text-center { text-align: center; }
.text-bold { font-weight: bold; }
.mb-20 { margin-bottom: 20px; }

🎨 프로필 페이지 제작 실습

1. 기본 설정

배경색 설정

body {
  background: #f7f9fc;
  margin: 0;
  font-family: 'Arial', sans-serif;
}

재사용 가능한 하얀 박스

.white-box {
  background: white;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0.5px 0.5px 2px 1px #eee;
  margin-bottom: 20px;
}

box-shadow 속성 설명:

• 첫 번째 값: X축 이동량
• 두 번째 값: Y축 이동량
• 세 번째 값: blur 정도
• 네 번째 값: spread 정도
• 마지막 값: 색상

2. 프로필 영역 레이아웃

HTML 구조

<div class="container white-box">
  <div class="row">
    <div class="col-md-8">
      <!-- 사진과 이름 영역 -->
      <div class="d-flex">
        <div class="flex-shrink-0">
          <img src="img/author.png" class="profile-img">
        </div>
        <div class="flex-grow-1 ms-3">
          <h3>Killian Sven</h3>
          <p class="text-muted">Front-end Designer</p>
          <button class="btn btn-primary">연락하기</button>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <!-- 프로필 정보 -->
      <div class="row">
        <div class="col-6">
          <p class="info-label">Location</p>
        </div>
        <div class="col-6">
          <p class="info-value">서울 근무</p>
        </div>
        <div class="col-6">
          <p class="info-label">Age</p>
        </div>
        <div class="col-6">
          <p class="info-value">28</p>
        </div>
        <div class="col-6">
          <p class="info-label">Experience</p>
        </div>
        <div class="col-6">
          <p class="info-value">5년</p>
        </div>
      </div>
    </div>
  </div>
</div>

CSS 스타일

.profile-img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}

.info-label {
  color: #6c757d;
  font-weight: 500;
  margin-bottom: 5px;
}

.info-value {
  font-weight: bold;
  margin-bottom: 15px;
}

3. 하단 3개 박스 레이아웃

<div class="row">
  <div class="col-md-3">
    <div class="white-box">
      <h5>Skills</h5>
      <!-- 스킬 내용 -->
    </div>
  </div>
  <div class="col-md-6">
    <div class="white-box">
      <h5>About Me</h5>
      <!-- 자기소개 내용 -->
    </div>
  </div>
  <div class="col-md-3">
    <div class="white-box">
      <h5>Contact</h5>
      <!-- 연락처 내용 -->
    </div>
  </div>
</div>

4. 알약(Pill) 디자인

HTML

<div class="skills-container">
  <span class="pill">HTML</span>
  <span class="pill">CSS</span>
  <span class="pill">JavaScript</span>
  <span class="pill">React</span>
  <span class="pill">Vue.js</span>
  <span class="pill">Bootstrap</span>
</div>

CSS

.pill {
  display: inline-block;
  border: 1px solid #e9ecef;
  border-radius: 100px;
  padding: 5px 15px;
  margin-right: 8px;
  margin-bottom: 8px;
  background: #f8f9fa;
  color: #495057;
  font-size: 14px;
  transition: all 0.2s ease;
}

.pill:hover {
  background: #007bff;
  color: white;
  border-color: #007bff;
}

.skills-container {
  margin-top: 10px;
}

5. 추가 스타일링

테두리 효과

.info-section {
  border-left: 3px solid #007bff;
  padding-left: 15px;
}

버튼 커스터마이징

.btn-contact {
  background: linear-gradient(45deg, #007bff, #0056b3);
  border: none;
  padding: 10px 25px;
  border-radius: 25px;
  color: white;
  font-weight: 500;
  transition: transform 0.2s ease;
}

.btn-contact:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}

🔧 반응형 최적화

모바일 대응

@media (max-width: 768px) {
  .white-box {
    padding: 15px;
    margin-bottom: 15px;
  }
  
  .profile-img {
    width: 60px;
    height: 60px;
  }
  
  .pill {
    font-size: 12px;
    padding: 4px 12px;
  }
}

태블릿 대응

@media (max-width: 992px) {
  .col-md-4 {
    margin-top: 20px;
  }
  
  .info-label,
  .info-value {
    text-align: center;
  }
}

💡 개발 팁

CSS 디버깅

/* 개발 중 레이아웃 확인용 */
.debug {
  border: 1px solid red;
}

.debug-blue {
  border: 1px solid blue;
}

클래스명 규칙

/* BEM 방식 */
.profile__image { }
.profile__name { }
.profile__description { }

/* 컴포넌트 방식 */
.card { }
.card-header { }
.card-body { }
.card-footer { }

가이드를 정하여 유지보수하기 쉽고 확장 가능한 프로필 페이지를 제작할 수 있습니다