정리정돈 개발블로그~
[45일차] 국비교육 본문
<position속성>
fixed : 요소를 기본 흐름에 벗어나 절대적인 좌표 위치에 따라 배치, 스크롤해도 해당 위치에 고정
sticky : 요소를 static 값처럼 기본 흐름에 따라 배치하지만, 지정한 좌표의 임계점에 이르면 fixed 값 처럼 화면에 고정
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>Postion</title>
</head>
<body>
<div id="container">
<div></div>
<div></div>
<div class ="box">나는 fiexed 박스이다.</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>#container {
background-color: azure;
left :20px;
top : 20px;
position : relative;
height: 500px;
}
div{
width: 100px;
height: 50px;
margin-bottom : 20px;
background-color: orange;
}
.box{
background: royalblue;
position : sticky;
color : white;
top : 0px;
}
<시맨틱 태그>
section : 웹페이지에서 논리적으로 관련 있는 내용 영역을 구분할때 사용
article : 웹페이지에서 독립적인 영역 구분
<예제1>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style3.css">
<title>Document</title>
<style>
#container{
width: 350px;
margin: 30px auto;
}
/*box-shadow : 수평거리 수직거리 흐림정도 번짐정도 색상*/
img{
border : 1px solid #ccc;
border-radius: 50%; /*원형이 됨*/
box-shadow: 2px 2px 30px 5px #000;
}
</style>
</head>
<body>
<div id="container">
<img src="/images/bear.jpg" alt="곰인형 사진">
</div>
</body>
</html><예제2>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style3.css">
</head>
<body>
<section>
<h2>강아지 용품 준비하기</h2>
<article>
<h3>강아지 집</h3>
<p>강아지가 편히 쉴 수 있는 포근한 집이 필요합니다.
강아지의 집은 강아지가 다 큰 후에도 계속 쓸 수 있는 집으로
구입하세요 집을 구입하실 때는 박음질이 잘되어 있는지 세탁이 간편한
제품인지 꼭 확인하시고 고르시는 것이 좋습니다.
</p>
</article>
<article>
<h3>강아지 먹이</h3>
<p>강아지의 먹이는 꼭 어린 강아지용으로 나와있는 사료를 선택하세요.
강아지들은 사람에 비해 성장속도가 8배정도 빠르답니다. 따라서
강아지에게는 성장속에 맞는 사료를 급여하셔야 합니다. 사람이 먹는 음식을
먹게 되면 양념과 향신료에 입맛이 익숙해지고, 비만이 될 가능성이 매우 높아집니다.
강아지용 사료는 생후 12개월까지 급여하셔야 합니다.
</p>
</article>
<article>
<h3>밥그릇, 물병</h3>
<p>밥그릇은 쉽게 넘어지지 않도록 바닥이 넓은 것이 좋습니다. 물병은 대롱이 달린 것으로 선택하세요
밥그릇에 물을 주게 되면 입 주변에 털이 모두 젖기 때문에 비위생적이므로 대롱을 통해서 물을 먹을
수 있는 물병을 마련하시는 것이 좋습니다.
</p>
</article>
<article>
<h3>이름표, 목줄</h3>
<p>강아지를 잃어버릴 염려가 있으니 산책할 무렵이 되면 이름표를 꼭 목에 걸어주도록 하세요.
그리고 방울이 달린 목걸이를 하고자 하실때는 신중하셔야 합니다. 움직일 때마다 방울이 딸랑 거리면
신경이 예민한 강아지들에게는 좋지 않은 영향을 끼칠 수 있기 때문입니다.
</p>
</article>
<footer>
<p>boxmodel 연습하기</p>
</footer>
</section>
</body>
</html>
/* rem : html 태그의 텍스트 크기에 상대적인 크기를 가짐 */
section{
width: 800px;
margin: 0 auto;
}
/* 반응형 ui를 만들 때 em단위로 하면 부모만 바꾸면 변경됨 */
h2{
font-size: 1.5em;
/*부모의 (정의가 되어있지 않다면 body태그(16px))1.5배가 됨*/
}
h3{
font-size: 1.0em;
}
p{
padding-top : 20px;
font-size: 12px;
}
article{
float: left;
width :350px;
height: 200px;
margin: 10px;
padding : 10px;
border: 1px solid darkgray;
}
footer{
clear: left;
width: 96%; /* 부모(section)의 100%*/
height: 50px;
background-color: #222;
margin-left : 10px;
}
/* footer의 자식 요소 p */
footer > p{
color: #eee;
font-size: 0.9em;
text-align: center;
}
<예제3>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style4.css">
</head>
<body>
<nav>
<ul>
<li><a href="#">메뉴1</a></li>
<li><a href="#">메뉴2</a></sp>
<li><a href="#">메뉴3</a></li>
<li><a href="#">메뉴4</a></li>
</ul>
</nav>
</body>
</html>ul{
list-style: none;
}
ul li{
float: left;
}
/* block : 항상 가로 한줄을 다 차지하는 것 */
/* inline : span, a 태그 등을 사용 했을 때 요소의 너비를 컨텐츠 크기
만큼 차지하는 성격 */
a{
display: block;
padding : 10px 20px;
background-color: #ccc;
}
a:link, a:visited {
color: black;
text-decoration: none;
}
a:hover{
background-color: #000;
color:#fff;
}
<css 전환 효과 적용>
transition-property: 대상을 지정
.red-box{
width: 100px;
height: 100px;
background-color: orangered;
color: palegreen;
transition-property: background-color, color, width;
transition-duration: .8s;
transition-delay: .3s;
}
/* 동적 가상 선택자 */
.red-box:hover{
background-color: royalblue;
color : yellow;
width : 300px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="red-box">
</div>
</body>
</html>| 종류 | 설명 |
| transition-property | 트랜지션의 대상을 지정 |
| transition-duration | 실행할 시간을 지정 |
| transition-timing-function | 실행형태를 지정 |
| transition-delay | 지연시간을 지정 |
| transition | 속성을 한꺼번에 지정 |
| transition-timing-funtion 속성 | 전환효과의 진행속도를 지정 |
<예제>
#container {
width: 1000px;
margin: 20px auto;
}
ul{
list-style: none;
padding: 0;
}
/* overflow: 벗어나는 영역을 지움 */
li{
float: left;
padding: 0px;
margin: 10px;
position: relative;
overflow: hidden;
}
img{
margin: 0px;
padding: 0px;
z-index: 5;
float: left;
}
/* opacity : 숨겨져있는 정도의 값 */
li .caption {
position: absolute;
top: 200px;
width: 300px;
height: 200px;
padding-top: 20px;
background-color: rgba(0, 0, 0, .6);
opacity: 0;
transition: .8s .2s ease-in-out;
z-index: 10;
}
li:hover .caption {
opacity: 1;
transform: translateY(-200px);
}
.caption h2, .caption p {
color: white;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style3.css">
<title>Document</title>
</head>
<body>
<div id="container">
<h1>신상품 목록</h1>
<ul>
<li>
<img src="/images/prod1.jpg" alt="상품1">
<div class="caption">
<h2>상품 1</h2>
<p>상품 1 설명 텍스트</p>
<p>가격 : 12,345원</p>
</div>
</li>
<li>
<img src="/images/prod2.jpg" alt="상품2">
<div class="caption">
<h2>상품 2</h2>
<p>상품 2 설명 텍스트</p>
<p>가격 : 12,345원</p>
</div>
</li>
<li>
<img src="/images/prod3.jpg" alt="상품3">
<div class="caption">
<h2>상품 3</h2>
<p>상품 3 설명 텍스트</p>
<p>가격 : 12,345원</p>
</div>
</li>
</ul>
</div>
</body>
</html><애니메이션 효과>
/* 애니메이션 : CSS3 추가된 기능이며 전환 효과 보다 정확하고 부드럽게 전환 됨 */
/* @keyframes <키 프레임명> */
/* animation-name : <키 프레임명>; */
/* animation-duration : <지속 시간>; */
div {
width: 100px;
height: 100px;
border-color: red;
animation-name: bgchange;
animation-duration: 5s;
}
@keyframes bgchange{
0%{ background-color: red;}
25%{ background-color: orange;}
50%{ background-color: yellow;}
100%{ background-color: green;}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div id="container">
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
</div>
</body>
</html>/* 애니메이션 : CSS3 추가된 기능이며 전환 효과 보다 정확하고 부드럽게 전환 됨 */
/* @keyframes <키 프레임명> */
/* animation-name : <키 프레임명>; */
/* animation-duration : <지속 시간>; */
#container{
width: 500px;
margin: 20px auto;
}
.box{
width: 100px;
height: 100px;
float: left;
margin: 50px;
}
/* transparent : 완전 투명 */
#box1{
background-color: lightgreen;
border: 1px solid transparent;
animation-name: shape;
animation-duration : 3s;
}
#box2{
background-color: purple;
border: 1px solid transparent;
animation-name: rotate;
animation-duration: 3s;
}
@keyframes shape {
from {
border: 1px solid transparent;
}
to{
border: 1px solid black;
border-radius: 50%;
}
}
@keyframes rotate{
from{
transform: rotate(0deg);
}
to{
transform: rotate(45deg);
}
}
/* animation-fill-mode : 애니메이션이 끝난 후 원래 상태로 돌아가지 않고
현재 상태로 유지하고 싶을때 사용 */
/* none : 실행 전 상태로 돌아 감 */
/* forward : 종료시점의 스타일을 유지 */
div{
width:100px;
height:100px;
background-color:orangered;
position:relative;
animation-name:move;
animation-duration:10s;
animation-fill-mode:forwards;
animation-play-state:paused;
}
@keyframes move{
from{
left:0;
}
to{
left:300px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div id="container">
<div class="bar">linear</div>
<div class="bar">ease</div>
<div class="bar">ease-in</div>
<div class="bar">ease-out</div>
<div class="bar">ease-in-out</div>
<div class="bar">커스터마이징</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div></div>
</body>
</html>
/* transform : 물체의 크기나 형태, 위치를 바꾸는 것 */
/* 2d 및 3d도 지원 함 */
/* translate(x, y), translateX(n), translateY(n) : 이동에 관련 */
/* scale(x, y), scaleX(n), scaleY(n): 확대 및 축소 */
/* skew(xdeg, ydeg), skewX(deg), skewY(deg) : 기울임 정도 */
/* rotate(deg) : 주어진 각도 만큼 회전 */
/* transform-orgin :<x축의 위치><y축의 위치> */
div{
width: 100px;
height: 100px;
margin: 100px;
background: linear-gradient(45deg, rgb(187, 54, 165), rgb(53, 34, 163));
transition: 2s, .2s;
}
div:hover{
/* transform: translate(100px, 200px); */
/* transform : scale3d(2,2,2); */
/* transform: skewX(-30deg); 한 쪽 축만 사용하는 경우가 많음 */
transform: rotate(90deg);
transform-origin: bottom left;
}
<웹 폰트와 사용하기>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<h1 class="nanum-font">나눔펜 폰트를 사용해 볼께요^^^</h1>
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap');
.nanum-font {
font-family: 'Nanum Pen Script', cursive;
}'국비학원 교육 일지' 카테고리의 다른 글
| [47일차] 국비 교육 (0) | 2022.09.26 |
|---|---|
| [46일차] 국비 교육 (1) | 2022.09.23 |
| [44일차] 국비 교육 (1) | 2022.09.21 |
| [43일차] 국비 교육 (0) | 2022.09.20 |
| [42일차] 국비 교육 (1) | 2022.09.19 |
'국비학원 교육 일지' Related Articles
more
