CSS
<html>
<head>
<title></title>
<style>
/* 주석 */
#p1 {
width:100px;
height:100px;
background(배경색상):rgb(255, 215, 222);
}
</style>
</head>
<body>
<p>a</p>
<p style="font-size(폰트사이즈): 40pt; color(폰트색상): blue; font-weight(폰트굵기): bold; font-style(기울임체여부):italic; text-decoration(밑줄):underline; text-shadow(그림자) : 5px(수평거리) 7px(수직거리) 3px(퍼짐정도) #ffffff(색상);">폰트관련</p>
<p style="text-align(텍스트정렬):center; width(문단가로지정):단위숫자; height(문단세로지정):단위숫자; padding(안쪽여백):단위숫자; margin(바깥쪽여백):단위숫자;">문단관련</p>
<p style="border-style(테두리선 스타일):solid; border-width(테두리선두께):단위숫자; border-color(테두리선 색): 색상; border:굵기 모양 색상; border-radius(반지름값을 넣어 둥근 경계선):좌상 우상 우하 좌하;">경계선관련</p>
<table border(표 경계선)=1 style="border-collapse(셀 경계선):seperate(각 셀마다 경계선 그림), collapse(경계선 1개로 그림);>
<h1> test 입니다.</h1>
<div id=“p1”> aaa</div>
</body>
</html>Z-index
z-index:숫자(숫자가 작을수록 밑에 위치
z-index:0~n
Style 태그 선택자
<html>
<head>
<style>
/* 전체선택자 */
* {background: aqua;}
/* 태그선택자 */
p {background: blue; color:white;}
/* id선택자 */
#test {background: pink; color:brown}
/* class선택자 */
.class_test {background:darkred; color:white}
h3.class_1 {background: greenyellow; color:black}
/* 그룹선택자 */
h5, h6 {background: yellow;}
</style>
</head>
<body>
전체선택자입니다.<br>
<p>p에 대한 text입니다.</p>
<p id = "test">id선택자 text입니다.</p>
<p class ="class_test">class1 선택자</p>
<p class ="class_test">class2 선택자</p>
<h3 class="class_1">abc</h3>
<h5>h5테스트</h5>
<h6>h6테스트</h6>
</body>
</html>애니메이션 - hover
태그:hover {
전환명령
transition-duration(~초 동안에 전환): 초(s, ms);
transition-delay(~초 이후에 전환시작): 초(s, ms); ←
transition(한꺼번에 가능): 속성이름 지속시간 타임함수 지연시간;
}애니메이션-keyframes(전환기능으로, 기능 추가 / 이걸 사용할 때 hover는 animation-이름 으로 해야함)
:hover {
animation-duration: 지속시간
animation-delay: 지연시간
animation-name:이름
animation-iteration-count: 숫자 <- 반복횟수
}
@keyframes 이름 {
from {시작속성}
중간% {중간속성}
to {끝 속성}
}
나는 여니