코드 색상 질문드립니다! | 스파르타 커뮤니티

커뮤니티

포인트

쿠폰

내 강의실

국비 신청 내역

증명서

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

코드 색상 질문드립니다!

인생사진 쏙쏙 코딩네컷 v0

1주차

박*지

・

추천

・

조회수

답변 완료

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

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

튜터님이 작업하고 계신 화면에는

class, id 작성한 내용별로 색상이 구분되어나오는데요.

제 화면에서는 헤드부분 폰트 내용 복붙한 부분은 컬러구분이 정상적으로 반영되었으나

바디부분에 작성한 내용은 span을 제외하고는 모두 흰색으로만 작성이 되어있더라구요.

잘못작성한게 아닐까 싶었는데, 결과물 출력은 튜터님과 동일하게 보입니다! (정상작동중)

색상이 들어간 것이 구조를 파악하기가 훨씬 용이해보는데, 잘못작성한 부분이 있을지 아니면 따로 설정하는 방법이 있는지 궁금해요.

작성한 코드 및 에러 메세지

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

<!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>Document</title>
    <style>
        /* 이서윤체 폰트 적용을 위한 코드 */
      @font-face {
        font-family: "LeeSeoyun";
        src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2202-2@1.0/LeeSeoyun.woff")
          format("woff");
        font-weight: normal;
        font-style: normal;
    </style>
</head>
<body>
    <div class="container">
        <div class"photos">
            <div id="image1" class="photo-frame">
                <span id="desc1" class="photo_description">
                    첫번째 이미지 설명
                    </span></div>
            <div id="image2" class="photo-frame">
                <span id="desc2" class="photo_description">
                    두번째 이미지 설명
                    </span></div>
            <div id="image3" class="photo-frame">
                <span id="desc3" class="photo_description">
                    세번째 이미지 설명
                    </span></div>
            <div id="image4" class="photo-frame">
                <span id="desc4" class="photo_description">
                    네번째 이미지 설명
                    </span>
                </div>
            </div>
        <div class="footer"></div>
            <p class="f-title">Happy Lunch Time</p>
            <p class="f-date"> 2023.02.11 </p>
    </div>
</body>
</html>

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

댓글 알림