[CSS] MBTI 테스트 웹사이트-2

📝 CSS 파일 수정하기

✔️ 버튼 스타일링 변경

☑️ #submit-button 버튼이 Hover(마우스 오버) 상태일 때, 버튼의 배경색이 더 진한 파란색이 되도록 수정한다.

---

#submit-button {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 10px 15px; 
    font-size: 14px; 
    border-radius: 5px;
    cursor: pointer;
    margin-top: 15px; 
    transition: background-color 0.3s ease;
}

#submit-button:hover {
    background-color: #0056b3; /* Hover 시 더 진한 파란색 */
}

✔️ 라디오 버튼 Hover 스타일링

☑️ 라디오 버튼에 마우스를 올렸을 때 커서가 pointer로 바뀌도록 스타일링을 추가하자

input[type="radio"] {
    margin-right: 5px; 
}

/* 라디오 버튼 Hover 스타일 */
input[type="radio"]:hover {
    cursor: pointer;
}

✔️ 결과 숨기기 기능 구현

☑️ CSS 파일에 .hide 선택자를 추가하고 display: none;으로 설정해 결과를 숨길 수 있도록 하자.

styles.css

/* 결과 숨기기 기능 */
.hide {
    display: none;
}

---

💻 완성 코드

body {
    font-family: 'Arial', sans-serif;
    background-color: #f0f2f5;
    color: #333;
    text-align: center;
    margin: 0;
    padding: 20px;
}

.container {
    max-width: 700px;
    margin: 20px auto;
    padding: 30px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

h1 {
    font-size: 26px;
    margin-bottom: 10px;
    color: #444;
}

.question {
    margin-bottom: 20px;
    text-align: left;
}

.question p {
    font-size: 16px;
    margin-bottom: 10px;
    font-weight: 500;
}

label {
    display: inline-block; 
    font-size: 14px; 
}

input[type="radio"] {
    margin-right: 5px; 
}

/* 라디오 버튼 Hover 스타일 */
input[type="radio"]:hover {
    cursor: pointer;
}

/* 버튼 스타일 개선 */
#submit-button {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 10px 15px; 
    font-size: 14px; 
    border-radius: 5px;
    cursor: pointer;
    margin-top: 15px; 
    transition: background-color 0.3s ease;
}

#submit-button:hover {
    background-color: #0056b3; /* Hover 시 더 진한 파란색 */
}

/* 결과 숨기기 기능 */
.hide {
    display: none;
}

#result {
    margin-top: 25px; 
    padding: 15px; 
    background-color: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#result h2 {
    font-size: 20px;
    color: #333;
    margin-bottom: 10px;
}

#result p {
    font-size: 16px;
    color: #555;
}

---

📚 새로 공부한 내용

✔️ CSS 선택자의 기본 개념

✒️ . (클래스 선택자)

• .는 클래스(class) 속성을 가진 요소를 선택한다.

• ex) .submit-button은 class="submit-button"을 가진 요소를 선택한다.

• 특징: 여러 요소에 동일한 클래스를 적용할 수 있어, 여러 요소를 동시에 스타일링할 때 유용하다.

✒️ # (아이디 선택자)

• #는 아이디(id) 속성을 가진 요소를 선택한다.

• ex) #submit-button은 id="submit-button"을 가진 요소를 선택한다.

• 특징: 아이디는 HTML 문서 내에서 고유해야 하며, 한 요소만 선택한다.

✔️ 언제 #과 .를 사용할까?

• 아이디(#)는 한 번만 사용되는 고유한 요소에 적합하다.

  • ex) 특정 버튼, 헤더, 고유한 섹션 등.

• 클래스(.)는 공통 스타일을 여러 요소에 적용할 때 적합하다.

  • ex) 여러 버튼, 카드 레이아웃, 리스트 스타일 등.