2022-05-26
적응형 웹 예제1 블로그
우측 카테고리를 width 700px 이하일 때 아래로 떨어지게 하는 적응형 블로그를 만들었다. 구조를 바꾸는 데에는 다양한 방법이 있는데, 나는 flex로 써보았다. Grid로도 할 수 있다고 한다.
요렇게 된다.
예제1 블로그 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 rel="shortcut icon" href="./images/favicon.png">
<link href="https://fonts.googleapis.com/css?family=Amatic+SC|M+PLUS+Rounded+1c:400,500&display=swap" rel="stylesheet">
<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" alt="">
<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="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>예제1 블로그 CSS
<style>
@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: .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, .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%;
}
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;
}
/*** 인용문 ***/
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;
}
/****** 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;
}
}
</style>CSS 라이브러리 소개
기초가 어느 정도 준비 되었다면 코드를 빠르게 완성할 수 있는 라이브러리를 익히는 것도 좋을 것이다. 다양한 라이브러리 중에서도 많이 쓰는 것들 위주로 알아보자.
emmet (자동 완성)
html의 emmet들
제일 기본적으로 ! html5 밑작업을 태그를 대신 깔아준다
아래를 입력하고 탭키를 누르면 태그를 자동으로 생성한다!
CSS의 emmet들
https://emmet.io/
여기서 더 많은 것들을 볼 수 있다
calc 함수
크기를 정할 때 사용한다.
만약에 화면 비율을 나눠야하는데, 이전에는 수동으로 33.3333%(ㅠㅠ)으로 나누어 줬다면, calc(100% / 3)으로 쓰면 되는 것.
1) 연산자는 + - * / 가능
2) 연산자 앞 뒤에 공백을 넣어야 함
<style>
div {
background: #0bd;
width: calc(100% / 3);
height: 100px;
padding: 16px;
}
</style>3) 계산 단위가 달라도 사용 가능하다
<style>
div {
background: #0bd;
height: calc(100vh / 100px);
padding: 16px;
}
</style>4) 커스텀 속성(변수)와도 조합 가능
<style>
div {
--number: 500;
width: calc(var(--number) * 1px);
background: #0bd;
padding: 16px;
}
</style>변수란?
변수란 다른 값을 넣을 수 있는 공간이다.
단, 한 번에 하나의 값만 가지고 있을 수 있다.
공간, 값, 1개를 기억하자.
커스텀 속성
'css변수'와 '캐스케이드 변수'
커스텀 속성의 주의점
1) 대소문자를 구분한다.
2) 커스텀 속성에 기본 속성명을 넣을 수는 없다.
3) 커스텀 속성을 호출한 뒤 단위를 덧붙이면 적용되지 않는다.
Sass
CSS를 보조하는 도구로, 파일 확장자에는 .scss, sass가 있다.
Sass 기능으로는
1) 셀렉터 부모 자식 관계를 네스트로 구현한다
2) 변수로 값을 다시 사용한다
3) 파일을 분할해서 관리할 수 있다
style.css : css파일
style.css.map : css 파일을 합치기 위한 소스맵
style.min.css : 들여쓰기(공백), 줄바꿈, 주석이 모두 제외된 파일
style.scss : scss파일
과도한 네스트 사용은 금물.
Patial : 분할된 파일. 파셜 파일.
style.scss 에 속하지만 분할되어있는 파일을 _header.scss 와 같은 식으로 언더바를 이름 앞에다 붙이면 파셜 파일이다.
mixin
mixin은 미리 저장한 스타일을 필요한 곳에서 불러와 재사용하는 기능이다.
폰트의 표시 단위
폰트의 단위를 설정하는 데에는 px을 주로 썼는데, em이라는 것도 있다.
em은 상대적 크기라는 특성을 지녔는데, 기준은 부모 요소의이다.
여러 부모 요소 안에 있을 경우 더블, 트리플로 속하게 되므로 글씨가 점점 커지는 것.
이를 원치 않을때 rem, 즉 Root em을 써주면 그 특성을 무시할 수 있다.
SVG
화질에 영향을 받지 않는 벡터 이미지의 파일이다
1) 스타일 수정이 용이하고
2) xml 기반의 문서이며
3) 애니메이션, css3 효과 적용이 가능하다
주로 로고와 아이콘에 쓰고, 데이터 시각화에도 쓰인다. 흔히 데이터에 애니메이션 같은 움직임(프레임워크)이 들어가있으면 svg 파일을 썼을 것.
https://material/io/icons
머터리얼 svg 아이콘을 다운받을 수 있는 곳
svg는 img 태그를 쓴다.
<img src="./images/account_circle_black_24dp.svg" width="48" height="48"><svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24
24" height="24px" viewBox="0 0 24 24" width="24px"
fill="#000000"><g><rect fill="none" height="24"
width="24"/></g><g><path d="M12,2C6.48,2,2,6.48,2,12s4.48,10,10,10s10-
4.48,10-10S17.52,2,12,2z M12,6c1.93,0,3.5,1.57,3.5,3.5S13.93,13,12,13
s-3.5-1.57-3.5-3.5S10.07,6,12,6z M12,20c-2.03,0-4.43-0.82-6.14-
2.88C7.55,15.8,9.68,15,12,15s4.45,0.8,6.14,2.12
C16.43,19.18,14.03,20,12,20z"/></g></svg>
이 밖에 도움되는 라이브러리 사이트
Animate.CSS
imagehover CSS
로딩 화면 아이콘들
Hint.css
skeleton
뼈대 잡아주는 느낌
http://getskeleton.com/
어려웠던 점
블로그로 들어가면서 복잡해져서 제대로 쓴 것 같은 것들이 결과를 보면 꼬여있음.
- CSS 연결이 안되었었으나.
해결 방법
rel을 ref으로 쓰는 오타가 있었다.
오타 파악이 빠르도록 작업환경의 폰트를 바꿀 예정이다.
소감
갑자기 엄청나게 많은 라이브러리들을 알게 되었다. 아직 뒤죽박죽이라 기초 정리가 필요해보인다.
+어제 어려웠던점~소감까지 내용을 길게 수정했는데 다 날아가있다.. 서버 다운 시키고 업데이트를 진행한 모양이다. 에혀 ㄱ-
제로부터 시작하는 프로그래밍&코딩