커뮤니티
포인트
쿠폰
내 강의실
국비 신청 내역
증명서
계정
로그아웃
학습 질문
개발 일지
나의 활동
답변 완료
늦었지만 여쭤봅니다
undefined주차
북마크
김*경
댓글
1
추천
0
조회수
11
조회수
11
답변 완료

* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.

* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.


.msg {

            color: tomato;

            font-size: 50px;

                       

        }


------------------------------


    .bucket {

            width: 160px;

            height: 160px;

            font-size: 50px;

        }

-----------------------

상기와 같이 msg의 폰트색일 tomato로 bucket의 폰트 사이즈를 변경하고자 하는데 변경이 되지 않습니다. 어떻게 해야 할까요?


스파르타 즉문즉답






작성한 코드 및 에러 메세지


<!DOCTYPE html>

<html lang="en">


<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>2023년 버킷리스트</title>

    <style>

        @import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap');


        * {

            font-family: 'Nanum Pen Script', cursive;

        }


        .title {

            color: white;

            background-color: tomato;

            font-size: 70px;

            padding: 8px 16px;

            border-radius: 8px;


        }


        .bg {

            width: 360px;

            background-image: url("https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/bucketList/bg-grid.png");

        }


        .msg {

            color: tomato;

            font-size: 50px;

                       

        }


        .bucket {

            width: 160px;

            height: 160px;

            font-size: 50px;

        }


        .img1 {

            background-image: url("https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/bucketList/bucket-red.png");

            background-size: cover;

            background-position: center;

        }


        .img2 {

            background-image: url("https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/bucketList/bucket-lightred.png");

            background-size: cover;

            background-position: center;

        }

    </style>

    <link rel="stylesheet" type="text/css"

        href="https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/bucketList/sparta-bucket2.css">

</head>


<body class="bg center">

    <h1 class="title">2023 신년계획</h1>

    <p class="msg">이루자</p>

    <div class="row flex-row wrap">

        <div class="bucket img1 center">코딩공부하기</div>

        <div class="bucket img2 center">다이어트</div>

        <div class="bucket img2 center">앱 개발</div>

        <div class="bucket img1 center">영어공부하기</div>

        <div class="bucket img1 center">5</div>

        <div class="bucket img2 center">6</div>


    </div>


</body>


</html>

오류 발생 시, 작성한 코드 전체와 에러 메시지를 첨부해 주세요.

Tip 1) </> 아이콘을 눌러 코드박스를 만들어 보세요.

Tip 2) Ctrl+A(맥의 경우 Command+A) 단축키로 코드를 한 번에 선택할 수 있어요!




취소
 공유
취소
댓글 0
댓글 알림
나의얼굴