0701
💡 CSS + JS
https://www.notion.so/toufulover33/0701-495a3202a1f8471db4923643e3297e2c
<html>
<head>
<meta charset="utf-8">
<title>table</title>
<style></style>
</head>
<body>
</body>
</html>
📌
- [ ] CSS 참조방식 3가지
- [ ] JS 변수선언
CSS
<srcipt> -- 선택자 선언블록{ 선언 속성: 속성값; } -- </script>
참조방식
- 외부 스타일 시트 ( External Style Sheet )
- 내부 스타일 시트 ( Internal Style Sheet )
- HTML 태그 내의 스타일 지정 ( Inline Styles )
- 인라인 > 내장 ? 링크
속성
- 많다
- color
- text-shadow
- text-decoration
- font-size, font-weight
- cursor
- border, border-style, border-radius
- background-color
선택자
- 단일 선택자
- 전체 선택자 * - 탭,마진,폰트
- 태그 선택자 - 태그 속성 지정
- Class 선택자 .class1 - 같은 속성 반복 적용
- ID 선택자 #value1 - 특정 하나에만 속성 적용
- 복합 선택자
- 복합 선택자
- **#**value1:hover {cursor:pointer;}
- 자식 선택자
- body > div - 하위자식1만 선택
- 인접형제 선택자
- h1 + ul - 다음 형제 중 1만 선택
- 일반형제 선택자
- h2 ~ h3
- 가상 선택자
- E::active{} - 활성화
- E::hover{} - 포인터
- E::focus{} - 클릭, 탭 선택시
- E::visited{} - 방문된 경로
- 조건 걸어서 선택
- E::not(XYZ)
- E: nth-child: n
- 어떤 선택자든
- 복합 선택자
Position 속성
→ 요소 배치 방식
- static
- 정적 위치 지정 방식
- top left bottom right 속성값 무시
- relative
- 상대 위치 기준 (static일때 자기자신)
- absolute
- 절대 위치 지정 방식
- (static외) 부모 중 relative 기준
- fixed
- 고정 위치 지정 방식
- static과 달리 시작이 유동적
- 뷰포트(브라우저 전체화면)기준 위치 고정
- 침범 가능
Z-index
- 번호 높은 순서대로 앞 레이어
- 양수음수 가능
- relative, absolute
static, fix
- 부모 Z-index가 무조건 먼저
Transform
.object{
transform: translate(50px,100px)
}
skew
- skewX(30deg)
rotate
- rotate(1.2turn)
scale
- scale(0.6)
translate
- px % em
display 속성
- block
- <div> 기본값
- inline
- inline-block
- 너비,높이 설정
- 여백 설정
- none
- html요소 숨기기
- flex
- 자식요소를 inline요소로 설정
visibility 속성
visible
hidden - 나타나지않지만, 레이아웃에는 존재
collapse - 동적 테이블에서만, 표 테두리 한줄만
opacity 속성
opacity: 0.0~1.0
정렬
justify-content: center; (가로축-중심축)
align-items: center; (세로축-교차축)
https://ipex.tistory.com/entry/CSS3-flex-Box-justifycontent-alignitems
animation
keyframe 이름 {
from {}
to {}
}
<html>
<head>
<meta charset="utf-8">
<title>table</title>
<style>
div{
width:100px;
height: 100px;
background-color: blue;
position: relative;
animation-name: myanimation;
animation-duration: 3s;
animation-timing-function: ease-in;
animation-iteration-count: 5;
}
@keyframes myanimation{
0% {left:0px;}
25%{left:100px;}
50%{left:200px;}
75%{left:300px;}
100%{left:400px;}
}
.div2{
animation-timing-function: ease-out;
}
.div3{
animation-timing-function: ease-in-out;
}
</style>
</head>
<body>
<div></div>
<br>
<div class="div2"></div>
<br>
<div class="div3"></div>
</body>
</html>
실습참고
JS
웹문서를 동적처리
<srcipt> ---- </script>
함수/메소드
특별한 작업 수행 위해 설계된 코드 집합
- 함수명 - 카멜표기법
- 매개변수(Parameter)
- Body, Scope
실행 func(){}
<button type="button" onclick="add(4,5)"></button>
<a href="javascript: add(2,3)"></a>
변수
선언
var
- 중복선언O
let
- 재선언X 재할당O
const
- 선언과 동시에 초기화
- 재선언X 재할당X(객체재할당O)
연결
- 문자-숫자 +
조건문 & 반복문
- if - else if - else
- switch(){default : break;
- case : break;
- for (초기화; 조건문; 증감식)
- while ()
- 비교연산자 & 논리연산자 & 삼항연산자