Mini Project : 프로필 페이지 만들기(CSS:2일차 과제)+@

HTML & CSS

Mini Project : 프로필 페이지 만들기(CSS:2일차 과제)+@

Chansman 2025. 3. 31. 14:49

*{
    text-align: center;
}

html{
    background-color: #b3a194;
    font-size: 16px;
}

body{
    width: 640px;
    margin: auto; /* 너비에서 남는 여백을 동일하게 분배 */

}

h1{
    font-size: 48px;
}

img{
    width: 200px;
    height: 200px;
    border-radius: 100px;
}

p{
    font-size: 1.2rem;
}

Upgrade:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-align: center;
}

html {
    background-color: #f0f0f0;
    font-size: 16px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    width: 640px;
    margin: 50px auto; /* 자동 여백으로 중앙 정렬 */
    background-color: #ffffff;
    padding: 20px;
    border-radius: 15px; /* 둥근 모서리 */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* 그림자 효과 */
}

h1 {
    font-size: 3rem;
    color: #4a90e2; /* 블루 색상 */
    font-weight: 600;
    margin-bottom: 20px;
    font-family: 'Roboto', sans-serif;
}

img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* 애니메이션 효과 */
    margin-bottom: 20px;
    border: 5px solid #ffffff; /* 흰색 테두리 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 기본 그림자 */
}

img:hover {
    transform: scale(1.1); /* Hover 시 크기 증가 */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* Hover 시 그림자 확대 */
}

p {
    font-size: 1.2rem;
    color: #333333; /* 어두운 회색 */
    line-height: 1.6;
    font-family: 'Arial', sans-serif;
    margin-bottom: 20px;
}

button {
    padding: 10px 20px;
    background-color: #4a90e2;
    color: #fff;
    font-size: 1rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #357ab7; /* 버튼 hover 색상 */
}

.card {
    background-color: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    padding: 30px;
    margin-top: 20px;
}

.card h2 {
    font-size: 2rem;
    color: #2d2d2d;
    margin-bottom: 15px;
}

.card p {
    font-size: 1rem;
    color: #666666;
    line-height: 1.5;
}

@media (max-width: 768px) {
    body {
        width: 90%;
    }
    h1 {
        font-size: 2.5rem;
    }
    img {
        width: 150px;
        height: 150px;
    }
    p {
        font-size: 1rem;
    }
}

**1. 기본 스타일 설정 (* 셀렉터)**

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-align: center;
}

* 셀렉터는 모든 요소에 적용됩니다.
margin: 0: 모든 요소의 외부 여백을 0으로 설정하여, 기본 여백을 없앱니다.
padding: 0: 모든 요소의 내부 여백을 0으로 설정합니다.
box-sizing: border-box: 요소의 너비와 높이에 패딩과 보더를 포함시켜, 레이아웃을 계산할 때 더 예측 가능하게 만듭니다.
text-align: center: 페이지 내 모든 텍스트가 중앙 정렬되도록 합니다.

2. HTML 기본 스타일 (html 태그)

html {
    background-color: #f0f0f0;
    font-size: 16px;
    font-family: "Single Day", 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

background-color: #f0f0f0: 페이지의 배경색을 밝은 회색(#f0f0f0)으로 설정합니다.
font-size: 16px: 기본 글꼴 크기를 16px로 설정합니다.
font-family: "Single Day", 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif: 첫 번째 글꼴로 "Single Day"를 사용하고, 해당 글꼴이 없으면 Segoe UI 등 다른 시스템 글꼴을 사용하도록 설정합니다.

3. 본문 스타일 (body 태그)

body {
    width: 640px;
    margin: 50px auto;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

width: 640px: 본문 영역의 너비를 640px로 설정하여 고정 크기를 지정합니다.
margin: 50px auto: 상단에 50px의 여백을 주고, 좌우 여백을 자동으로 설정하여 가로 중앙 정렬을 합니다.
background-color: #ffffff: 본문 배경색을 흰색으로 설정합니다.
padding: 20px: 본문 내용의 내부 여백을 20px로 설정합니다.
border-radius: 15px: 본문 영역의 모서리를 둥글게 만듭니다.
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1): 본문에 부드러운 그림자 효과를 주어 입체감을 줍니다.

4. 헤더 스타일 (h1 태그)

h1 {
    font-size: 3rem;
    color: #4a90e2;
    font-weight: 600;
    margin-bottom: 20px;
    font-family: 'Roboto', sans-serif;
}

font-size: 3rem: h1 제목의 글꼴 크기를 상대적인 크기(rem)로 설정합니다. 이 값은 기본 글꼴 크기(16px)의 3배인 48px입니다.
color: #4a90e2: 제목 텍스트 색상을 파란색(#4a90e2)으로 설정합니다.
font-weight: 600: 텍스트를 굵게 설정합니다.
margin-bottom: 20px: 제목 아래에 20px의 여백을 설정합니다.
font-family: 'Roboto', sans-serif: 'Roboto' 글꼴을 사용하며, 해당 글꼴이 없으면 sans-serif 글꼴로 대체됩니다.

5. 이미지 스타일 (img 태그)

img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    margin-bottom: 20px;
    border: 5px solid #ffffff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

width: 200px; height: 200px: 이미지의 너비와 높이를 200px로 설정하여 정사각형 형태로 만듭니다.
border-radius: 50%: 이미지를 원형으로 만듭니다.
transition: 애니메이션 효과를 적용하여 이미지에 마우스를 올릴 때 크기나 그림자가 부드럽게 변화하도록 합니다.
border: 5px solid #ffffff: 이미지에 흰색 테두리를 추가합니다.
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1): 이미지를 둘러싼 부드러운 그림자 효과를 추가합니다.

6. 이미지 Hover 효과 (img:hover)

img:hover {
    transform: scale(1.1);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

transform: scale(1.1): 이미지를 10% 확대하여 hover 상태에서 크기가 커지도록 합니다.
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2): Hover 상태에서 그림자를 확대하여 입체감을 더합니다.

7. 문단 스타일 (p 태그)

p {
    font-size: 1.2rem;
    color: #333333;
    line-height: 1.6;
    font-family: 'Arial', sans-serif;
    margin-bottom: 20px;
}

font-size: 1.2rem: 문단 글꼴 크기를 기본 크기의 1.2배로 설정합니다.
color: #333333: 텍스트 색상을 어두운 회색으로 설정합니다.
line-height: 1.6: 줄 간격을 1.6배로 설정하여 텍스트가 읽기 쉽게 만듭니다.
font-family: 'Arial', sans-serif: Arial 글꼴을 사용하고, 해당 글꼴이 없으면 sans-serif로 대체됩니다.

8. 버튼 스타일 (button 태그)

button {
    padding: 10px 20px;
    background-color: #4a90e2;
    color: #fff;
    font-size: 1rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

padding: 10px 20px: 버튼의 내부 여백을 10px, 20px로 설정하여 버튼이 충분히 클릭하기 쉽도록 만듭니다.
background-color: #4a90e2: 버튼 배경색을 파란색으로 설정합니다.
color: #fff: 버튼 텍스트 색상을 흰색으로 설정합니다.
border-radius: 5px: 버튼의 모서리를 둥글게 만듭니다.
cursor: pointer: 버튼에 마우스를 올리면 손 모양의 커서로 바뀝니다.
transition: background-color 0.3s ease: 버튼 배경색이 바뀔 때 부드럽게 변하도록 애니메이션 효과를 추가합니다.

9. 버튼 Hover 효과 (button:hover)

button:hover {
    background-color: #357ab7;
}

background-color: #357ab7: 버튼에 마우스를 올리면 배경색이 어두운 파란색으로 변경됩니다.

10. 카드 스타일 (.card 클래스)

.card {
    background-color: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    padding: 30px;
    margin-top: 20px;
}

background-color: #f9f9f9: 카드 배경색을 밝은 회색으로 설정합니다.
border-radius: 10px: 카드 모서리를 둥글게 만듭니다.
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1): 카드에 그림자 효과를 주어 입체감을 더합니다.
padding: 30px: 카드 내부 여백을 30px로 설정하여 내용이 여백 안에 적절히 배치됩니다.

11. 카드 내부 제목 스타일 (.card h2)

.card h2 {
    font-size: 2rem;
    color: #2d2d2d;
    margin-bottom: 15px;
}

font-size: 2rem: 카드 제목 글꼴 크기를 상대적인 크기(2배)로 설정합니다.
color: #2d2d2d: 제목 색상을 어두운 회색으로 설정합니다.
margin-bottom: 15px: 제목 아래에 여백을 추가하여 요소들 간의 간격을 만듭니다.

12. 카드 내부 문단 스타일 (.card p)

.card p {
    font-size: 1rem;
    color: #666666;
    line-height: 1.5;
}

font-size: 1rem: 카드 내부 문단의 글꼴 크기를 기본 크기(16px)로 설정합니다.
color: #666666: 문단 텍스트 색상을 중간 회색으로 설정합니다.
line-height: 1.5: 줄 간격을 1.5배로 설정하여 가독성을 높입니다.

13. 반응형 디자인 (@media)

@media (max-width: 768px) {
    body {
        width: 90%;
    }
    h1 {
        font-size: 2.5rem;
    }
    img {
        width: 150px;
        height: 150px;
    }
    p {
        font-size: 1rem;
    }
}

화면 너비가 768px 이하일 때 적용됩니다. (즉, 모바일 화면에서)
body: 본문 너비를 90%로 설정하여 화면에 맞게 조정합니다.
h1: 제목 글꼴 크기를 2.5rem으로 축소합니다.
img: 이미지를 150px로 축소합니다.
p: 문단 글꼴 크기를 1rem으로 줄입니다.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>이상인의 프로필</title>
        <link href="profile.css" rel="stylesheet">
        
        <!-- 외부 글꼴 로딩 -->
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&family=Single+Day&display=swap" rel="stylesheet">

        <!-- CSS 파일 연결 -->
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <h1 title="찬희 아빠인 상인의 프로필 페이지">이 상 인</h1>
        <img src="images/image.jpg" alt="아들 찬희와 여행 중">

        <div class="card" id="introduce">
            <h2>기본 정보</h2>
            <p>
                부산에 살고 있으며, 9살 아들 <strong>이찬희</strong>의 아빠입니다.<br>
                뉴질랜드에서 거주하다가 최근 한국으로 돌아왔습니다.<br>
                매력적인 <strong>개발자</strong>라는 꿈을 향해 도전하고 있습니다.
            </p>
        </div>

        <hr>

        <div class="card" id="character">
            <h2>성격</h2>
            <p>
                MBTI는 ENFP와 INFP 사이를 왔다 갔다 해요.<br>
                에너지 넘치고 감성적인 성향을 가지고 있어요.
            </p>
        </div>

        <hr>

        <div class="card" id="interest">
            <h2>취미와 관심사</h2>
            <p>
                운동을 좋아하고, 기타를 치며 힐링합니다.<br>
                무엇보다 아들과 함께 여행하는 것을 정말 좋아해요!
            </p>
        </div>

        <hr>
        
        <button>소개하기</button>

        <span>&copy; 이상인</span>
    </body>
</html>