2022/05/25

1) 학습한 내용

고양이 블로그 만들기
이번 수업에 들었던 것은 고양이 블로그 만들기를 통해서 반응형 웹페이지를 만드는 것을 했다. 소스코드는 HTML과 CSS를 공개할 것이다.

HTML

 <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>

CSS

@charset "utf-8";
*{
    box-sizing: border-box;
}
html{
    font-size: 100%; /* 16px*/
    line-height: 1.15; /*배수, %,px 가능*/
}
body{
    color:#949087;
    font-family: sans-serif;
    background: #faf6ed url("../images/bg.png");
    margin:0;
}
ul, ol{
    margin:0;
    padding:0;
    list-style: none;
}
a{
    background-color: transparent;
    text-decoration: none;
}
button, input{
    border:0;
    outline:0;
}
p{
    line-height: 1.6;
}
.container{
    max-width: 1000px;
    margin:0 auto;
    padding: 1.5rem; /*16px x 1.5*/
    background: #fff;
    border-radius: 0 0 10px 10px;
}
img{ border-style: none; vertical-align: bottom;}
h1, h2, h3, h4, h5, h6{margin:0;}
/****** Header ******/
header{
    max-width:1000px;
    margin:2.5rem auto 0;
    height: 170px;
}
.page-title{
    font-size:3.75rem;
    font-family: 'Amatic SC', cursive;
    margin: 1rem 0;
    padding-top:2rem;
}
.page-desc{
    font-size:1rem;
    margin-bottom: 0;
}
.page-title, .page-desc{
    text-align: center;
}

/****** Section ******/
section{
    margin-bottom: 3rem;
    display:block;
}
.post-title{
    padding-bottom:10px;
    background-image:linear-gradient(45deg, #fff 30%, #ccc 30%, #ccc 50%, #fff 50%, #fff 80%, #ccc 80%, #ccc 100%);
    background-size: 6px 6px;
    margin-bottom: 1.5rem;
}
.post-title h2{
    background-color: #fff;
    padding: 0 0.5rem 0.875rem;
    font-family: "NOTO Sans KR", sans-serif;
    font-weight: 500;
    line-height: 1.5;
}
.post-title a{
    color:#949087;
}
.post-title a:hover{
    color: #605c55;
}
.post-thumb{
    margin: 0 0 1rem 0;
    position: relative;
}
.post-date{
    position: absolute;
    left:0;
    top:-10px;
    font-size:1.5rem;
    letter-spacing: 0.1rem;
    font-family: 'Amatic SC', cursive;
    background: #93d8d0;
    width:80px;
    height:80px;
    text-align:center;
    color:#fff;
    border-radius: 30% 60% 50% 70% / 50%;
}
.post-date span{
    font-size:1rem;
    border-bottom: 2px rgba(255, 255, 255, 0.5) dotted;
    display: block;
    margin: 8px auto 0; /* 4px auto 0*/
    padding-bottom:2px;
    width:60%;    /* width:100%; */
    /* background-color: red; */
}
.post-date span:last-child{
    border-bottom: none;
}

.post-img{
    width: 100%;
    height: 260px;
    object-fit: cover;
    border-radius: 40% 70% 50% 30%/50%;
}

헤더 구간 꾸미기

header{
    max-width:1000px;
    margin:2.5rem auto 0;
    height: 170px;
}
.page-title{
    font-size:3.75rem;
    font-family: 'Amatic SC', cursive;
    margin: 1rem 0;
    padding-top:2rem;
}
.page-desc{
    font-size:1rem;
    margin-bottom: 0;
}
.page-title, .page-desc{
    text-align: center;
}

헤더 구간을 꾸미는 데에 사용된 CSS 코드다. 최대 크기를 1000px으로 정하고 margin을 2.5rem auto 0으로 정하고 난 이후, 높이를 170px로 정한 다음에 .page-title 클래스의 폰트 사이즈를 3.75rem으로 글꼴을 'Amatic SC'에 cursive를 한다. 그 다음에 margin: 1rem 0을 한 뒤에 padding-top으로 2rem을 넣는다. page-desc는 폰트 사이즈를 1rem으로 정하고 margin-botto을 0으로 제시한다. 그리고, .page-title,과 .page-desc 클래스를 통해 text-align을 중앙으로 정렬한다.

HTML

<h3>고양이를 처음 기를 때 필수 아이템</h3>
                <ul>
                    <li>고양이 간식</li>
                    <li>화장실, 화장실 모래</li>
                    <li>식품</li>
                </ul>
                <img src="./images/cat5.jpg" alt="">

CSS

article h3,article h4, article h5, article h6{
    font-family: "Noto Sans KR", sans-serif;
    font-weight:500;
    margin: 3rem 0 1rem;
}
article h3{
    font-size: 1.5rem;
    border-top: 2px dotted #ccc;
    padding: .75rem;
    line-height: 1.4;
}

article img{
    max-width:100%;
    border-radius: 50px;
}

/****** 목록 ******/
article li{
    margin: .5rem 0;
}
article ul li:before{
    content:'';
    width:8px;
    height:8px;
    background: #93d8d0;
    display: inline-block;
    margin: 0 8px 2px 0;
    border-radius: 50%;
}
article h4{
    font-size: 1.5rem;
}
article ol li{
    counter-increment: list;
}
article ol li:before{
    content:counter(list);
    color:#93d8d0;
    display: inline-block;
    margin-right: 8px;
}
article h5{
    font-size: 1.375rem;
}
article a{
    color: #93d8d0;
}
article a:hover{
    color: #7ac69f;
    text-decoration: underline;
}
article h6{
    font-size: 1.25rem;
}

HTML

<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>

CSS

article blockquote{
    position:relative;
    padding: 1rem 3rem;
    margin-bottom: 1rem;
    /* border: 1px solid red; */
}

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;
}

날짜 구간 꾸미기

고양이 블로그 만들기를 하다가 날짜 쪽의 디자인을 할 경우에는 아래의 코드를 참고하면 된다.

202112/18

위에 나오는 날짜는 이번 수업에 들었던 날짜의 공간을 복사해서 붙인 것이다. 이 소스코드는 아래와 같다.

<style>
.post-date{
    position: absolute;
    left:0;
    top:-10px;
    font-size:1.5rem;
    letter-spacing: 0.1rem;
    font-family: 'Amatic SC', cursive;
    background: #93d8d0;
    width:80px;
    height:80px;
    text-align:center;
    color:#fff;
    border-radius: 30% 60% 50% 70% / 50%;
}
.post-date span{
    font-size:1rem;
    border-bottom: 3px rgba(255, 255, 255, 0.5) dotted;
    display: block;
    margin: 4px auto 0;
    padding-bottom:2px;
    width:70%;    /* width:100%; */
    /* background-color: red; */
}
.post-date span:last-child{
    border-bottom: none;
}
</style>

<p class="post-date"><span>2021</span><span>12/18</span></p>

크기에 따라 이미지가 변하는 웹페이지

소스코드

ps. 인용문(blockquote)

blockquote는 인용문을 표시할 때 사용하는 태그로, 보통 blockquote 요소를 샇용한 곳은 들여쓰기가 됩니다. 한 줄 짜리 짧은 인용문은 q태그를 사용한다. 덧붙여서, html40.01에서 blockquote태그는 긴 인용문을 지정할 때 사용했다면, html5에서 blockquote는 다른 자원에서 인용한 일부를 지정할 때 사용한다.

<blockquote>
<p>인용문
....
....
</p>
</blockquote>

• blockquote는 cite 속성과 함께 사용할 수 있다.

2) 학습내용 중 어려웠던 점

이번 수업에서 어려웠던 것은 날짜 구간을 CSS로 꾸미는 부분이 가장 어려웠다. 특히, 단순히 단어를 작성해서 색을 넣는 것이 아니라 색의 숫자와 위치를 일일이 기억하고 정해야하는 것이 가장 어렵다. 이번 수업에서 가장 힘들었던건 RGBA와 코드를 응용하는 것이다. 게다가, CSS 이용법은 저번에도 말했지만 사용법은 쉽지만 적용시킬 명령문과 코드가 길어지면 길어질수록 오히려 머리를 감싸야할 일이 많은 영역이다.

3) 해결방법

해결방법은 결국 복습과 반복 밖에 없다. 아니면, 클론 코딩을 통해서 코딩의 흥미와 이해를 가져야 할 필요가 있다. 그리고, 배경 꾸미기에는 W3를 참고하는 것이 좋을 것이다. 또한, 이전에 만들었던 웹페이지의 소스코드를 다시 보고 웹페이지의 CSS 적용방법을 다시 파악하는 것이 중요하다.

4) 학습소감

이번 수업에서 가장 힘들었던건 RGBA와 코드를 응용하는 것이다. 왜냐하면, 내가 가장 약한 부분은 바로 응용성이다. 단순히 문제를 풀어야하는 것과 CSS 명령문을 응용해서 웹 페이지를 구성해야 한다. 거기에다, 나중에 배울 Javascript의 구성을 알아야한다면 더더욱 머리를 한참 감싸야 할 것이다.