z-index 값은 적지 않으면 0으로 취급한다.
hidden과 none의 차이점
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>visibility 프로퍼티</title>
<style>
span{
visibility: hidden;
/*
display: none;
: 스타일을 가진 태그가 공간이 할당되지도 않고 보이지도 않는다.
visibility : hidden;
: 스타일의 경우 태그의 공간은 할당되고 보이지만 않는다.
*/
}
</style>
</head>
<body>
<h3>다음 빈 곳에 숨은 단어?</h3>
<hr>
<ul>
<li>I (<span>love</span>) you.</li>
<li>CSS is Cascading (<span>Style</span>) Sheet.</li>
<li>응답하라 (<span>2022</span>)</li>
</ul>
</body>
</html>| hidden | none |
 |
 |
overflow
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>overflow</title>
<style>
p{
width: 15em;
height: 3em;
border: 1px solid lightgray;
}
.hidden{overflow: hidden;}
.visible{overflow: visible;}
.scroll{overflow: scroll;}
</style>
</head>
<body>
<h3>overflow 프로퍼티</h3>
<hr>
<p class="hidden">overflow 에 hidden 값을 적용하면 박스를 넘어가는 내용이 잘려 보이지 않는다.</p>
<p class="visivle">overflow 에 visivle 값을 적용하면 값을 넘어가면 박스를 넘어가서도 출력된다.</p>
<p class="scroll">overflow 에 scroll 값을 적용하면 박스에 크스롤바를 붙여 출력한다. </p>
</body>
</html>
리스트
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>리스트로 메뉴만들기</title>
<style>
#menubar{
background: olive;
}
#menubar ul{
margin: 0;
padding: 0;
width: 567px; /*모든 아이템<li>를 한줄에 품을수 있는 폭*/
}
#menubar ul li{
display: inline-block; /*새 줄로 넘어가지 않게 */
list-style-type: none; /*마커 삭제*/
padding: 0px 15px; /*위아래 , 좌우*/
}
#menubar ul li a{
color: white;
text-decoration: none; /*링크 보이지 않게 */
}
#menubar ul li a:hover{
color: violet; /*마우스 올라갈때 색*/
}
#menubar_1{
background: darkorange;
border: 8px dotted white;
}
#menubar_1 ul{
margin: 10px;
padding: 20px;
width: 567px; /*모든 아이템<li>를 한줄에 품을수 있는 폭*/
}
#menubar_1 ul li{
display: inline-block; /*새 줄로 넘어가지 않게 */
list-style-type: none; /*마커 삭제*/
padding: 0px 15px; /*위아래 , 좌우*/
}
#menubar_1 ul li a{
color: white;
text-decoration: none; /*링크 보이지 않게 */
}
#menubar_1 ul li a:hover{
color: royalblue; /*마우스 올라갈때 색*/
}
</style>
</head>
<body>
<nav id="menubar">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">Espresso</a></li>
<li><a href="#">Cappuccino</a></li>
<li><a href="#">Cafe Latte</a></li>
<li><a href="#">F.A.Q</a></li>
</ul>
</nav>
<br>
<nav id="menubar_1">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">Espresso</a></li>
<li><a href="#">Cappuccino</a></li>
<li><a href="#">Cafe Latte</a></li>
<li><a href="#">F.A.Q</a></li>
</ul>
</nav>
</body>
</html>
마커 :
리스트 만들면 동그라미 나오는거 없앨라고 없애줌
# : 달아준 링크가 없을때는 그냥 # 처리함
<nav> 태그는 다른 페이지 또는 현재 페이지의 다른 부분과 연결되는 네비게이션 링크(navigation links)들의
집합을 정의할 때 사용한다.
<nav> 요소를 사용하는 일반적인 예로는 메뉴, 목차, 인덱스 등이 있습니다.
글을 읽지 못하는 사용자를 위한 스크린 리더기와 같은 브라우저는 <nav> 요소를 사용하여 해당 콘텐츠의 초기 렌더링을 생략할지 여부를 결정합니다.
html5에서 <nav> 태그는 현재 웹 사이트에서 주요한 지점으로 이동할 수 있는 네비게이션(NAVigation) 역할을 담당하고 있는 태그이다. 예전에는 메뉴든 뭐든 전부다 div에 넣는 것이 일반적이었지만, 이제 div는 일반적으로 떠다니는 내용을 넣을 때의 역할을 하는 경우가 많아졌고, html5에서는 각 영역별로 그 의미를 나타내기 위하여 <nav> 태그와 같은 특정 태그를 사용하게 되었다.
표꾸미기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>표 응용</title>
<style>
table{
border-collapse: collapse; /*이중 테두리 제거*/
/*collapse : 표 테두리와 셀 테두리 사이의 간격을 없앤다. 겹치는 선은 한줄로 나타낸다.*/
}
td,th{
text-align: left;
padding: 5px;
height: 15px;
width: 100px;
}
thead,tfoot{ /*thead, tfoot의 모든 셀에 적용*/
background: darkgray;
color: yellow;
}
tbody tr:nth-child(even){ /*짝수 tr에 적용*/
background: #cccc66;
}
tbody tr:hover{
background: pink;
}
</style>
</head>
<body>
<h3>1학기 성적</h3>
<hr>
<table>
<thead>
<tr><th>이름</th><th>HTML</th><th>CSS</th></tr>
</thead>
<tfoot>
<tr><th>합</th><th>310</th><th>249</th></tr>
</tfoot>
<tbody>
<tr><td>고유탁</td><td>80</td><td>70</td></tr>
<tr><td>김기우</td><td>95</td><td>99</td></tr>
<tr><td>김남혁</td><td>85</td><td>90</td></tr>
<tr><td>김민준</td><td>40</td><td>50</td></tr>
</tbody>
</table>
</body>
</html>odd : 홀수 / even : 짝수
 |
 |
폼에 스타일 주기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>폼 스타일주기</title>
<style>
input[type=text]{ /*텍스트창에만 적용*/
color: red;
}
input:hover, textarea:hover{/*마우스가 올라올때*/
background: #cccc66;
}
input[type=text]:focus, input[type=email]:focus{
/*포커스 받을때*/
font-size: 120%;
}
label{
display: block; /*새라인에서 시작*/
padding: 5px;
}
lable span{
display: inline-block;
width: 90px;
text-align: right;
padding: 10px;
}
</style>
</head>
<body>
<h3>CONTACT US</h3>
<hr>
<form >
<label >
<span>Name</span><input type="text" placeholder="Korea">
</label>
<label>
<span>Email</span><input type="email" placeholder="Korea@naver.com">
</label>
<label>
<span>Comment</span><textarea placeholder="메시지를 남겨주세요" ></textarea>
</label>
<label><span></span><input type="submit" value="submit"></label>
</form>
</body>
</html>| 실행시 모습 | 마우스를 올리면 색이변함 | 포커스를 주면 120%로 커짐 |
 |
 |
 |
애니매이션 효과들
애니매이션 효과 주기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>애니메이션</title>
<style>
@keyframes bomb {
from{font-size:500%;}
to{font-size:100%;}
}
/*
애니매이션 효과를 적용하기 위해 애니매이션에 대한 키 프레임(@keyframes)을 정의해야 한다.
키 프레임의 from에 처음 스타일을 정의하고, to에 마지막 스타일을 정의한다.
또는 %를 이용해 세부적으로 스타일을 정의할수 있다.
(시작 0% ~ 종료 100% )
*/
h3{
animation-name: bomb; /*사용자가 지정한이름, @keyframe 가 적용될 애니메이션 이름*/
animation-duration: 3s;
/*
타임 프레임의 길이, 키 프레임이 동작하는 시간을 설정할때 사용
초(S) 단위 또는 밀리초(ms)단위
default 값은 0초로 설정
*/
animation-iteration-count: infinite;
/*
반복횟수 지정
infinite : 무한반복 | 숫자 : 숫자만큼 반복 | default : 1
*/
}
</style>
</head>
<body>
<h3>꽝!</h3>
<hr>
<p>
꽝! 글자가 3초동안 500%에서 시작하여 100%로 바뀌는 애니매이션 입니다. 무한반복합니다.
</p>
</body>
</html>@keyframes small{
from{font-size: 100%; color: blue;}
to{font-size: 500%; color: red;}
}이런식으로 색변화도 가능
이미지 사이즈 변화주는 애니매이션 만들기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>애니메이션</title>
<style>
@keyframes imm{
from{ width: 100%; height: 100%;}
to{width: 50%; height: 50%;}
}
.ss{
animation-name: imm;
animation-duration: 2s;
animation-iteration-count: infinite;
}
</style>
</head>
<body>
<img src="../dog/dog2.jpg" alt="개" class="ss">
</body>
</html>
transition
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>전환</title>
<style>
span{
transition: font-size 5s;
/*
transition 는 속성의 변경이 있었을때 일정 시간에 속성을 변경시키는기능
키프레임 애니매이션을 적용하지 않기 때문에, 미세한 움직임의 에니메이션을
구현보다는 간단한 움직임의 애니매이션을 구현할때 이용
*/
}
span:hover{
font-size: 500%; /*5초에 걸쳐 500%까지 글자 키우는 전환 효과*/
}
</style>
</head>
<body>
<h3>font-size에 대한 전환</h3>
<hr>
<p><span>꽝!</span>글자에 마우스를 올려보세요.</p>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>전환</title>
<style>
span {
transition: font-size 5s;
/*
transition 는 속성의 변경이 있었을때 일정 시간에 속성을 변경시키는기능
키프레임 애니매이션을 적용하지 않기 때문에, 미세한 움직임의 에니메이션을
구현보다는 간단한 움직임의 애니매이션을 구현할때 이용
*/
}
span:hover {
font-size: 500%;
/*5초에 걸쳐 500%까지 글자 키우는 전환 효과*/
}
span#small:hover {
font-size: 20%;
}
span#big:hover {
font-size: 500%;
}
</style>
</head>
<body>
<h3>font-size에 대한 전환</h3>
<hr>
<p><span>꽝!</span>글자에 마우스를 올려보세요.</p>
<p><span id="big">커지기</span> <span id="small">작아지기</span></p>
</body>
</html>
다양한 변환
| transform function | 설명 | 단위 |
| translate(x,y) | 요소의 위치를 X축으로 x만큼 Y축으로y만큼 이동시킨다. | px,%,em 등 |
| translateX(n) | 요소의 위치를 X축으로 x만큼 이동시킨다. | px,%,em 등 |
| translateY(n) | 요소의 위치를 Y 축으로 y 만큼 이동시킨다. | px,%,em 등 |
| scale(x,y) | 요소의 크기를 X축으로 x배 Y축으로 y배 확대 또는 축소 시킨다. | 0과 양수 |
| scaleX(n) | 요소의 크기를 X축으로 x배 확대 또는 축소 시킨다. | 0과 양수 |
| scaleY(n) | 요소의 크기를 Y축으로 y배 확대 또는 축소 시킨다. | 0과 양수 |
| skew(x-angle,y-angle) | 요소를 X축으로 x각도만큼 Y축으로 y각도만큼 기울인다. | +/- 각도(deg) |
| skewX(x-angle) | 요소를 X축으로 x각도만큼 기울인다. | +/- 각도(deg) |
| skewY(Y-angle) | 요소를 Y축으로 y각도만큼 기울인다. | +/- 각도(deg) |
| rotate(angle) | 요소를 angle 만큼 회전시킨다. | +/- 각도(deg) (시계방향이 양수) |
활용 예시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>다양한 변환</title>
<style>
div{
display: inline-block;
padding: 5px;
color: white;
background: olivedrab;
}
/*변환*/
div#rotate{transform: rotate(20deg);}
div#skew{transform: skew(0deg,-20deg);}
div#translate{transform: translateY(100px);}
div#scale{transform: scale(3,1);}
/*마우스 올릴 때 추가 변환*/
div#rotate:hover{transform: rotate(80deg);}
div#skew:hover{transform: skew(0deg,-60deg);}
div#translate:hover{transform: translate(50px,100px);}
div#scale:hover{transform: scale(4,2);}
/*마우스 누를때 추가 변환*/
div#scale:active{transform: scale(5,1);}
</style>
</head>
<body>
<h3>다양한 transform</h3>
아래는 회전(rotate),기울임(skew),이동(transform),확대/축소(scale)가 적용된 사례이다.
또한 마우스를 올리면 추가적 변환이 일어난다.
<hr>
<div id="rotate">rotate(20deg)</div>
<div id="skew">skew(0,-20deg)</div>
<div id="translate">translateY(100px)</div>
<div id="scale">scale(3,1)</div>
</body>
</html>
transition : 속성을 서서히 변화시킨다.
[전환 효과들 ]
| linear | 전환 효과(transition)가 처음부터 끝까지 일정한 속도로 진행된다. |
| ease | 기본값/ 전환 효과가 천천히 시작되어 그다음에는 빨라지고 마지막에는 다시 느려진다. |
| ease-in | 전환 효과가 천천히 시작된다. |
| ease-out | 전환효과가 천천히 끝난다. |
| ease-in-out | 전환 효과가 천천히 시작되고 끝난다. |
| cubic-bezier(n,n,n,n) | 전환효과가 시작되어 사용자가 정의하 cubic-bizer 함수에 따라진행된다. |
| prev~ sibling | prev 다음 요소 |
(예)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>transition</title>
<style>
#tran {
transition: width 2s; /*넓이라는 속성에 2초를 주겠다 라는말*/
/*transition : 속성을 서서히 변화시키는 속성*/
}
#tran:hover {
width: 100%; /*폭을 화면크기의 100% 까지 늘리겠다 */
}
</style>
</head>
<body>
<h3>마우스를 올려봐요</h3>
<hr>
<img id="tran" src="../images/spongebob.png" width="100" height="100" alt="animation">
</body>
</html> |
 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Test</title>
<style>
.jb {
box-sizing: border-box;
width: 64px;
height: 64px;
margin: 10px 0px;
background-color: orange;
border-radius: 100%;
transition: all ease 2s 0s;
}
input:checked~.jb { /*checked 다음의 모든 jb들을 지정함*/
width: 100%;
height: 150px;
border-radius: 20%;
background-color: red;
}
</style>
</head>
<body>
<input type="checkbox">
<div class="jb"></div>
</body>
</html> |
 |
'KH > CSS' 카테고리의 다른 글
| CSS_애니매이션2 / list (0) | 2022.09.19 |
|---|---|
| CSS_ 마우스 이벤트/ 목록 꾸미기 (0) | 2022.09.16 |
| CSS_ 스타일시트의 기본적인 모습들 (0) | 2022.09.15 |
| CSS_스타일시트의 종류 (0) | 2022.09.14 |