2022/05/26

1) 학습한 내용

어제 수업에 진행하다 시간 관계상 미완성된 부분에서 다시 이어서 작성한 코드다.

크기를 늘리기 전에 웹페이지 모습으로 사이드바가 아래에 위치에 있다.

여기에 크기를 늘리면 사이드바가 본문 옆으로 위치를 옮기긴다. 여기에, footer 영역도 추가한다.

HTML

<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="footer-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>©️ 2022 Cat Blog</small></p>
    </footer>
</body>
</html>

CSS

/****** aside ******/
aside{
    margin-top:1rem;
}
.side-box{
    margin-bottom: 4rem;
    border:1px solid #ccc;
    outline: 2px solid #ccc;
    outline-offset: 4px;
    border-radius: 6px;
    padding: .875rem;
    position:relative;
}

.side-box:before{
    display: block;
    width:2rem; /* 16px * 2 */
    height:2rem;
    text-align: center;
    background-color: #fff;
    position: absolute;
    top:-1rem;
    left:0;
    right:0;
    margin:auto;
}
.side-box a:hover{
    color: #7ac69f;
}
.side-box h3{
    font-family: 'Amatic SC', cursive;
    font-size: 1.875rem;
    letter-spacing: .1rem; /*글자 사이의 간격*/
    text-align: center;
    margin: .875rem 0 1.125rem;
}
/****** 목록 ******/
.side-box li{
    border-bottom: 1px dashed #ccc; /*글자 밑부분*/
    padding: 1rem .25rem; /*글자 간의 간격*/
    display:flex;
}
.side-box li:last-child{
    padding-bottom: .5rem;
    border-bottom: 0;
}
.side-box li:first-child{
    padding-top:0;
}
.side-box li:before{
    display: inline-block;
    content:'';
    background-color: #93d8d0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin: 6px 10px 0 0;
}
.side-box li a{
    flex:1;
    line-height: 1.4;
}

/****** 폼 ******/
.newsletter-form{
    display:flex;
    margin-top:1.5rem;
}
.newsletter-form input[type='email']{
    border: 2px solid #ccc;
    border-radius: 10px 0 0 10px;
    background-color: #fff;
    padding: 1rem;
    width: 75%;
}
.newsletter-form input[type='email']:placeholder{
    color:#ccc;
}
.newsletter-form input[type='submit']{
    background-color: #eda1a1;
    border-radius: 0 10px 10px 0;
    color: #fff;
    cursor:pointer;
    padding: 1.1rem;
    margin-left: -5px;
}
.newsletter-form input[type='submit']:hover{
    background-color: #e38787;
}

/****** popular Posts ******/
.popular-posts{
    margin-bottom: 2rem;
}

/****** footer ******/
footer{
    background-color: #949087;
    text-align: center;
    padding: 3rem;
}
footer ul{
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
}
footer li{
    margin: 0 12px;
}
footer a{
    color: #fff;
}
footer a:hover{
    color: #c7c3ba;
}
footer small{
    color: #c7c3ba;
    font-size: .875rem;
}


/* Desktop size */
@media (min-width: 600px){
    .container{
        display: flex;
        justify-content: space-between;
        margin-bottom: 4rem;
        padding: 1rem 2.5rem 2.5rem;
    }
    header{
        height: 190px;
    }
    .page-title{
        margin: 1rem 0 2rem;
    }
    .page-desc{
        font-size: 1.125rem;
        margin-bottom: 4rem;
    }

    section{
        width: 68%;
        margin-bottom:0;
    }
    .post-thumb{
        margin: 0 1rem 1rem 0;
        shape-outside: circle();
        float:left;
    }
    .post-img{
        width: 220px;
        height: 180px;
    }
    aside{
        width: 26%;
    }
    .popular-posts{
        position: sticky; /*해당 클래스를 고정시킨다.*/
        top: 1rem;
    }
}

tip : 1rem 당 16px이다.

CSS라이브러리

코딩을 하면은 간혹 빨리 코딩을 끝내고 싶다는 생각을 하는 경우가 있는데, 단축키를 제대로 숙지하고 있다면 코딩을 빠른 시간 내로 끝낼 수가 있다. 아래는 Visual Studio Code를 기준으로 작성한 것이다.

HTML코딩

사용법		예시
태그 이름		p
태그 이름 + class이름		p.text
태그 이름 + id이름		p#text
자식 요소가 있는 태그		ul>li
여러 태그 반복 입력	+[tab키]	ul>li * 3
같은 계층 입력		div+p
한 단계 상위계층 입력		ul>li^div
텍스트 입력		p{텍스트}
일련번호 붙이기		li.menu$ * 3

CSS 코딩

사용법			자동완성
	m		margin: ;
	mb		margin-bottom: ;
	w100		width: 100px ;
	w100p		width: 100% ;
	w100r		width: 100rem ;
	w100e		width: 100em ;
	c#0bd		color: #0bd ;
p{	m10-20-15-20	+[tab키] 또는 [Enter키]	margin: 10px 20px 15px 20px ;
	h		height: ;
	fz		font-size: ;
	bg		background:#000 ;
	bd		border:1px solid #000 ;
	df		display:flex ;
	ta		text-align:left ;

calc 함수로 계싼식 사용하는 법

• 크기를 정할때 사용

div{
	background: #0db;
    width: calc(100%/3);
    height: 100px;
    padding: 16px;
}

연산자 앞 뒤에 꼭 공백 넣어야 하며, 사용 가능한 연산은 +, -, * , /이다.

• calc 함수는 계산 단위가 달라도 사용이 가능하다.

div{
	background: #0bd;
    height: calc(100vh - 100px)
    padding: 16px;
}

• 커스텀 속성(변수)과 조합

div{
	--number: 500;
    width: calc(var(--number) * 1px);
    background: #0bd;
    padding: 16px;
}

CSS변수(혹은 캐스케이드 변수를 통해서 나타낼 수가 있다.)

a{
color:#4db1ec;
}
.btn{
background-color: #4db1ec;
}
.border{
border: 1px solid #4db1ec;
}
.title{
color: #4db1ec;
}

위의 코드를 아래 형식으로 바꿀수도 있다.

:root {
--main-color: #4db1ec;
}
a{
color:var(--main-color);
}
.btn{
background-color: var(--main-color);
}
.border{
border: 1px solid var(--main-color);
}
.title{
color: var(--main-color);
}

커스텀 속성 주의점

• 커스텀 속성을 사용 시에는 대소문자 구분을 확실해야 한다.
• 커스텀 속성에 속성명을 넣을 수 없다.
• 커스텀 속성을 호출한 뒤 단위를 덧붙이면 적용되지 않는다.
• CSS 함수를 사용하면 CSS 속성의 값으로 계산식을 지정할 수 있다.

단위로는 %,px, em 등 모두 사용가능하지만, 상대단위로 사용해야 적용이 가능하다.

중요한 것은 계산식을 쓸때 공백을 꼭 띄워줘야 적용이 된다
calc 함수는 주로 전체 document에서 양쪽 패딩값을 줄 때 가장 많이 사용한다. 동일한 퍼센티지의 값을 줄때도 많이 사용되며, 중첩사용도 가능하다.

Sass

Sass는 syntactically awesome stylesheets의 약자로 햄튼 캐틀린이 설계하고 나탈리 바이첸바움이 개발한 스타일시트 언어이다.

Sass는 CSS를 보조하는 새로운 도구로 파일 확장자로는 .scss, .sass를 사용한다.

Sass의 장점으로는
1. 셀렉터 부모 자식 관계를 네스트로 구현
2. 변수로 값 다시 사용하기
3. 파일을 분할하여 관리

Sass 사용의 좋은 예

.main-menu{
	margin: 10px;
    nav{
    	background: #ddd;
    }
    ul{
    	display:flex;
    }
    li{
    	margin:5px;
    }a{
    	color:#0bd;
    }
    span{
    font-size: .85rem;
    }
} //.main-menu

SVG

SVG는 화질에 영향을 받지 않는 벡터 이미지로 스타일 수정이 용이하며 xml 기반의 문서로 애니메이션, css3 효과 적용이 가능하다.

SVG의 용도는 주로 로고와 아이콘에 데이터 시각화(시각화 프레임워크에 사용된다.)

SVG사용법은 SVG 파일은 이미지이기 때문에 일반적인 이미지를 삽입할 때처럼 태그를 사용해 삽입할 수 있다. 이미지를 삽입할 때와 마찬가지로 태그의 width 속성과 height 속성으로 크기를 지정할 수 있다.

CSS 라이브러리들

Animate.css

• 사용하기 쉬운 CSS 애니메이션 라이브러리
• https://animate.style/

imagehover CSS

• https://imagehover.io/

loading.io

• 로딩 화면, 로딩 프로그래스
• https://loading.io/

힌트(Hint.cm)

• https://kushagra.dev/lab/hint

getskeleton.com/

• http://getskeleton.com/

ps. 라이브러리와 프레임워크의 차이점

라이브러리와 프레임워크의 차이는 제어 흐름에 대한 주도성이 누구에게/어디에 있는가에 있다. 즉, 어플리케이션의 Flow(흐름)를 누가 쥐고 있느냐에 달려 있다.

프레임워크는 전체적인 흐름을 스스로가 쥐고 있으며 사용자는 그 안에서 필요한 코드를 짜 넣으며 반면에 라이브러리는 사용자가 전체적인 흐름을 만들며 라이브러리를 가져다 쓰는 것이라고 할 수 있다.
즉, 라이브러리는 라이브러리를 가져다가 사용하고 호출하는 측에 전적으로 주도성이 있으며 프레임워크는 그 틀안에 이미 제어 흐름에 대한 주도성이 내재(내포)하고 있다.

Web Club:티스토리

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

이번 수업은 그 동안 미완성되었던 고양이 블로그를 완성시키고 거기에 적용될 CSS 미디어쿼리를 마저 넣었고 이후에는 CSS 프레임워크에 관한 설명을 들었다. 이번 수업은 간만에 긴장이 조금 놓였다. 하지만, CSS에 관해서는 좀 더 복습하고 공부를 해야 할 필요가 있으며 복습을 해야 할 필요가 있다.

3) 해결방법

이번 수업은 고양이 블로그를 마무리 짓고 이후 들은 수업이 CSS 라이브러리라서 조금 긴장이 놓였지만 유튜브에 있는 미디어쿼리랑 CSS 적용법에 관한 걸 보면서 다시 복습해야 할 필요가 있다.

4) 학습소감

5월 30일은 연말 평가를 치를 날이다. 나는 그 동안 들었던 수업 녹화 영상을 보면서 다시 복습해야 한다. 그리고, 동시에 유튜브로 CSS 적용법을 보면서 따라해야 할 필요가 있다.

ps. 그리고 며칠 전에 언급했던 더 나은 커피 하우스 웹페이지 소스코드를 해당 링크로 올려보기로 했다.

커피 하우스