1. 학습한 내용
- 각종 참고 사이트들
1) 유니코드 참고 사이트 : https://home.unicode.org/
2) 에밋(빠르게 코딩할 수 있는 방법을 알려주는 사이트) : https:/emmet.io/ + 그 외의 입력 방법 : https://docs.emmet.io/cheat-sheet/
3) Sass : 코드를 작성할 떄 간략하게 작성하는 것이 도움(대부분 개발자들이 사용하며 편리함)(https://www.sass-lang.com/)
4) material SVG 아이콘 다운로드 가능 사이트 : https://material.io/icons
5) font 관련 구글 사이트 : https://fonts.google.com/icons?selected=Material+Icons
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
shape-outside: circle();
float: left;→ cirlce 모양으로 정의해줌
position: sticky; → 세로폭이 남아있는데, 스크롤을 내리다가 sticky 영역을 만나게 된다면, 화면에 맞게 같이 내려옴
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
0526 / responsive / blog / index.html
<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>© 2022 Cat Blog</small></p>
</footer>
</body>
0526 / responsive / blog / css / stye.css
/* 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;
}
}→ 결과(아래 사진)
→ shape-outside: circle(); 을 통해서, 브라우자 창의 크기가 작아지면서 post-thumb 부분이 옆 부분인 텍스트와 자연스럽게 circle 모양으로 어우러지게 됨
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
0526 / responsive / etc / index.html
<style>
/* 전역 선언 */
:root{--number: 500;
}
div { background: #0bd;
height: calc(100vh -100px);
width: calc(var(--number) * 1px);
padding: 16px}
p{
/* --number: 500; number라는 변수를 선언, 지역 선언 */
width: calc(var(--number) * 1px);
background-color: red;
padding: 16px;
}
</style>
<body>
<div></div>
<p></p>
</body>
→ 커스텀 속성을 사용해서 반복작업 불필요하게 만들기
→ --number : 500; 을 뒤에 계속 사용! (Key : Value)와 같은 의미이고, 그냥 변수라고 생각하셈
0526 / responsive / etc / sample
<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>
.wrapper{
font-size: 16px;
}
h1{
font-size: 3em;
}
p{
font-size:1.5em;
}
div{
font-size: 1.5em;
}
.rem-test{
font-size: 1.5rem; /* 16px x 1.5 */
font-size: 24px;
}
svg{fill:blue;
height: 64px;
width: 64px;}
.animate{}
</style>
</head>
<body>
<h1 class="animate">Animate.CSS</h1>
<img src="./thumb_up_black_24dp.svg" width="48"
height="48">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z"/></svg>
<div class="wrapper">
<h1>3em 크기의 제목</h1>
<p>1.5em 크기의 텍스트</p>
<div>16px 크기의 텍스트입니다.</div>
</div>
<div class="wrapper">
<div>3em 크기의 제목
<div>1.5em 크기의 텍스트
<div>16px 크기의 텍스트입니다.</div>
</div>
</div>
</div>
<div class="wrapper">
[test text]
<div class="rem-test">3em 크기의 제목
<div class="rem-test">1.5em 크기의 텍스트
<div class="rem-test">16px 크기의 텍스트입니다.</div>
</div>
</div>
</div>
</body>
</html>→ 결과(아래 그림)
<img src="./thumb_up_black_24dp.svg" width="48"
height="48">→ 엄지척 그림을 불러오는 코드(관련 사이트는 위에도 있음 : https://material.io/icons
→ 또는 밑에처럼 파일을 다운받아서, visual studio로 연결한다면, 관련 코드를 볼 수 있음!
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M1
21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-
1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5
1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z"/></svg>2. 학습한 내용 중 어려웠던 점 또는 해결못한 것들
1) 이번 수업은... 뭐 딱히 어려웠던 것은 없고, 새롭게 배웠던 것들에 대한 익숙함?
3. 해결방법 작성
1) 이전에 어려웠던 것들을 더 해결하는 것이 좋을 듯!
4. 학습 소감
1) 다양한 꿀팁들을 알 수 있는 수업 내용이였고, 하나하나 적용해보면서 사이트를 이쁘게 꾸밀 수 있고, 유용하게 구성할 수 있도록 공부해야겠다.
초급 개발자