최원종의 개발 블로그

HTML_CSS 4강(CSS 선택자 & 박스모델) 본문

HTML_CSS/HTML_CSS

HTML_CSS 4강(CSS 선택자 & 박스모델)

chl6698 2026. 4. 21. 17:38

4강에서 사용하는 개념

개념 설명 프로필 카드에서
CSS 연결 <link> 태그로 외부 CSS 파일 연결 style.css 파일 분리
class 선택자 .클래스명 으로 특정 요소만 선택 .card, .badge 구분
박스모델 padding(내부여백), margin(외부여백), border(테두리) 카드 레이아웃
border-radius 모서리 둥글게 프로필 사진, 뱃지
색상 HEX 코드 (#4F46E5) 브랜드 컬러 적용

완성 목표 시안

실습코드

 

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="./css/style.css" />
  </head>
  <body>
    <div class="card">
      <div class="card-top">
        <img
          class="avater"
          src="https://picsum.photos/seed/profile/100/100"
          alt=""
        />
        <h2>최코딩</h2>
        <p class="role">Frontend Developer</p>
      </div>
      <div class="card-stats">
        <div class="stat">
          <span class="stat-number">42</span>
          <span class="stat-lavel">프로젝트</span>
        </div>
        <div class="stat">
          <span class="stat-number">128</span>
          <span class="stat-lavel">커밋</span>
        </div>
        <div class="stat">
          <span class="stat-number">7</span>
          <span class="stat-lavel">팔로워</span>
        </div>
      </div>
      <div class="card-skills">
        <span class="badge">HTML</span>
        <span class="badge">CSS</span>
        <span class="badge">JavaScript</span>
      </div>
      <button class="follow-btn">팔로우</button>
    </div>
  </body>
</html>

CSS 코드

/* 1단계: 브라우저 기본 스타일 초기화 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* border + padding + 컨텐츠 다 포함 계산 */
}

body {
  background-color: #caced3;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  font-family: Arial, Helvetica, sans-serif;
}

.card {
  background-color: #fff;
  width: 320px;
  border-radius: 16px;
  padding: 30px 24px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  /* x축 y축 번짐정도 색상 */
}

.avater {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.name {
  font-size: 20px;
  margin-top: 6px;
  color: #12293b;
}

.role {
  font-size: 14px;
  color: #646464;
  margin-top: 20px;
  margin-bottom: 20px;
}

.card-stats {
  display: flex;
  justify-content: space-around;
  padding: 16px 0;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid#e2e8f0;
  margin-bottom: 20px;
}
.stat-number {
  display: block;
  font-size: 20px;
  font-weight: bold;
}
.stat-label {
  font-size: 12px;
  color: #94a3b8;
}

.card-skills {
  display: flex;
  justify-content: center;
  /* flex container에서 사용할 수 있는 여백 값 */
  /* 첫 태그 시작 왼쪽 마지막 태그 오른쪽은 포함 안됨 */
  gap: 8px;
  margin-bottom: 15px;
}
.badge {
  background-color: #eef2ff;
  color: #6b7adb;
  padding: 4px 23px;
  border-radius: 20px;
  font-size: 13px;
}

.follow-btn {
  width: 100%;
  padding: 12px;
  background-color: #6b7adb;
  border: none;
  border-radius: 10px;
  color: white;
  font-size: 15px;
  cursor: pointer;
}

.follow-btn:hover {
  background-color: #1e33d3;
}
더보기

결과화면

 

'HTML_CSS > HTML_CSS' 카테고리의 다른 글

HTML_CSS 6강 (Flexbox & 배경)  (0) 2026.04.22
HTML_CSS 5강 (핵심 개념 - CSS 5단계 설계 순서)  (0) 2026.04.21
HTML_CSS 3강(display, 단위, 색상)  (0) 2026.04.20
HTML_CSS 2강 (인스타그램 프로필 만들기)  (0) 2026.04.20
HTML_CSS 1강 (모든 요소는 박스)  (0) 2026.04.20
'HTML_CSS/HTML_CSS' Related Articles more