[개발일지 5월 25일] 반응형 웹 소개와 실습-반응형 웹 사이트 만들기2 / 김희연 강사님

박재준·2022년 5월 25일
0

1. 학습한 내용

0525 / resonsive / blog / index.html

<!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>고양이가 최고!!</title>
    <link href="https://fonts.googleapis.com/css?family=Amatic+SC|M+PLUS+Rounded+1c:400,500&display=swap" rel="stylesheet">
    <link rel="icon" type="image/svg+xml" href="./images/favicon.png">
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <header>
        <h1 class="page-title">Cat Blog</h1>
        <p class="page-desc">고양이 기르는 방법과 반려묘에 대한 이야기</p>        
    </header>
    <div class="container">
        <section>
            <article>
                <div class="post-title">
                    <h2><a href="#">처음 고양이 키울 때 필요한 것!</a></h2>
                </div>
                <div class="post-thumb">
                    <p class="post-date"><span>2021</span><span>12/18</span></p>
                    <img class="post-img" src="./images/cat1.jpg" alt="">
                </div>
                <p>
                    처음 고양이를 키운다면 우선 무엇이 필요할까요? 꼭 필요한 물품과 사두면 편리한 물품에 대해 소개합니다. 고양이는 앞으로 약 10년간 함께 살아가는 가족입니다. 함께하는 생활을 기분좋게 시작하기 위해서 미리 제대로 준비해둡시다! 추천하는 고양이 사료 랭킹도 정리해보았습니다!
                </p>
                <h3>고양이를 처음 기를 때 필수 아이템</h3>
                <ul>
                    <li>고양이 간식</li>
                    <li>화장실, 화장실 모래</li>
                    <li>식품</li>
                </ul>
                <img src="./images/cat5.jpg" atl="">
                <h4>추천하는 고양이 자료</h4>
                <ol>
                    <li>건식 사료A</li>
                    <li>습식 사료B (C배합) </li>
                    <li>건식 사료D 닭고기 맛</li>
                </ol>
                <h5>고양이 사료를 고르는 포인트</h5>
                <p>사람이 먹는 음식이 아닌 꼭 고양이용 건식, 습식 사료를 준비해야합니다.
                    <strong>종합영양식</strong>이라고 쓰여있는 것으로 준비해주세요.
                    <a href="#">건식 사료와 습식 사료는 함께 급여</a>해도 됩니다.
                </p>
                <h6>고양이의 귀여운 제품</h6>
                <blockquote>
                    <p>쉬고 있는 고양이의 눈은 아주 부드럽습니다. 적재적이지 않고 상대방에게 호의가 있을
                        때에는 눈을 가늘게 뜨거나 깜빡거립니다. 가끔 윙크를 할 떄도 있습니다.
                        
                    </p>
                </blockquote>
            
            </article>
        </section>
        <aside>
            <div class="side-box">
                <h3>Category</h3>
                <ul>
                    <li><a href="#">고양이 종류</a></li>
                    <li><a href="#">식사사료</a></li>
                    <li><a href="#">건강질병</a></li>
                    <li><a href="#">고양이 생태</a></li>
                    <li><a href="#">고양이와 함께 사는법</a></li>
                </ul>
            </div>
            <div class="side-box">
                <h3>Newsletter</h3>
                <p>고양이와 애완동물에 대한 최신 정보와 공지사항 전달! 부담없이 등록하세요!</p>
                <form class="newsletter-form">
                    <input type="email" placeholder="abc@example.com">
                    <input type="submit" value="등록">
                </form>
            </div>
            <div class="side-box popular-posts">
                <h3>Popular Posts</h3>
                <ul>
                    <li><a href="#">처음 고양이를 병원에 데려갈 떄의 마음가짐</a></li>
                    <li><a href="#">고양이 발바닥 젤리로 알아보는 반려묘 성격</a></li>
                    <li><a href="#">움직이는 고양이 사진 찍는 팁</a></li>
                    <li><a href="#">추천하는 고야잉 사료는/</a></li>
                    <li><a href="#">고양이에게 목걸이를 채워도 괜찮을까? 조심해야 할 5가지</a></li>
                    
                </ul>
            </div>
        </aside>
    </div>
    <footer>
        <ul class="fotter-nav">
            <li><a href="#">Twitter</a></li>
            <li><a href="#">Facebook</a></li>
            <li><a href="#">Youtube</a></li>
            <li><a href="#">Instagram</a></li>
        </ul>
        <p><small>&copy; 2022 Cat Blog</small></p>
    </footer>
</body>
</html>

→ blockquote 인용문을 사용하는 것!(아래 그림 참고)

0525 / resonsive / blog / css / style.css 중

/*** 인용문 ***/
article blockquote{
    position: relative;
    padding: 1rem 3rem;
    margin-bottom: 1rem;
}

article blockquote::before,
article blockquote::after{
    font-size:6rem;
    font-family: 'Noto Sans KR', sans-serif;
    color:#ccc;
    position: absolute;
    line-height: 0;
}
article blockquote::before{
    content:'\201C';
    top: 2.5rem;
    left:0;
}
article blockquote::after{
    content:'\201D';
    bottom: .5rem;
    right: 0;
}

→ 위의 index.html의 blockquote랑 연계(아래 사진 참조)

→ 최종 결과(아래 사진)

2. 학습한 내용 중 어려웠던 점 또는 해결못한 것들

1) 여전히 div, article 등 포함 관계들에 대해서 이해하고 블록을 어떻게 설정하고, position에 익숙하지 않고 그런 것들...

3. 해결방법 작성

1) 이전에 적었던 것처럼, 많이 사용해보기...

4. 학습 소감

1) 전에 배웠던 것들을 토대로, 계속 수업을 이어나가다보니, 새로운 것보단 익숙해지기 위함이라 어렵지는 않았음

profile
초급 개발자

0개의 댓글