웹디자인기능사 실기에서 HTML, CSS, JQUERY 별로 자주 쓰이는 주요 코드를 정리했습니다. 모두 좋은 결과 있으시길 기원합니다.
HTML
<!DOCTYPE html> — html 버전 선언
<meta charset="UTF-8"> — 전세계 문자와 기호 인코딩 방식
<span> — 특별한 기능없이 CSS와 함께 쓰이는 display inline 방식(줄바꿈 안됨)
<a href=""# ...> — 최상단으로 이동합니다.
CSS
1. 사이즈
line-height — 줄 높이를 정하는 속성입니다. normal | length | number | percentage | initial | inherit
box-sizing —
- content-box : 테두리와 안쪽 여백이 더해집니다.
- border-box : 테두리와 안쪽 여백이 포함됩니다.
2. 배치
display —
- none : 보이지 않게 됩니다.
- block : 가로영역을 모두 채우며, 다음 요소는 줄바꿈. div, p, h, li 태그 등
- inline : 줄바꿈이 되지 않고 width와 height를 지정할 수 없습니다. span, b, i, a 태그 등
- inline-block : 줄바꿈이 되지 않고 width와 height를 지정 가능합니다.
margin —
- 0 auto; 가운데 정렬
- left : 왼쪽으로 배치. div의 경우 가로영역을 다 차지하므로 float : left를 줄 경우 뒤에 있는 영역이 따라 올라오게 됩니다. 여러 요소를 한 줄에 배치하고자 할 경우 사용합니다.
position —
- relative : 위치 조절 가능. 자식 요소를 배치하고 싶을 때 사용합니다.
- absolute : postion이 static이 아닌 부모를 기준으로 움직입니다.
- fixed : 뷰포트를 기준으로 위치를 설정
3. 속성
cursor — 커서 모양list-style — 리스트
transition — 속성을 서서히 변화시키는 속성
overflow : hidden — 범위를 넘어가면 안 보이게opacity — 투명도 조절
z-index — 레이어 깔리는 깊이
JQUERY
1. 애니메이션
.animate ({ }, "slow"); —
- left : 좌로 위치조정
- top : 위로 위치조정
stop ( ) — 실행중인 애니메이션을 멈춥니다.
fadeIn ( ) — 선택한 요소를 서서히 나타나게
fadeOut ( ) — 선택한 요소를 서서히 사라지게
fadeToggle ( ) — 보이는 요소는 안 보이게, 안 보이는 요소는 보이게
slideUp ( ) — 선택한 요소를 위쪽으로 서서히 사라지게
slideDown ( ) —
2. 마우스
mouseenter ( ) — 마우스를 올리면
mouseleave ( ) — 마우스 포커스를 잃으면
3. 요소
addClass ( ) / removeClass ( ) — 선택한 요소에 클래스 값을 추가/삭제
index() — 선택한 요소의 인덱스값(몇 번째 요소인지)을 얻습니다.
parent ( ) — 요소의 부모를 선택합니다.
eq (num) — 형제 요소 중에 숫자를 통해 선택
first ( ) — 선택한 요소 중에서 첫 번째 요소를 선택합니다.
find ( ) — 요소를 찾습니다.
4. 기타
setInterval (function(){ }. 3000); — 3초 간격 반복적으로 작업을 실행
5. 선택자
> — 자손선택자 (direct child)
공백 — 후손선택자
+ — 다음에 나오는 요소
'컴퓨터자격증 > 웹디자인기능사' 카테고리의 다른 글
| 웹디자인기능사 실기 | 문제 풀이 A-2 (Green 복지재단) (0) | 2022.02.23 |
|---|---|
| 웹디자인기능사 실기 | 메뉴, 슬라이드, 본문 유형 (0) | 2022.02.17 |
| 웹디자인기능사 실기 | 기본적인 와이어프레임 구조 (0) | 2022.01.19 |
| 웹디자인기능사 실기 | 문제 풀이 B-1 (대한은행) (0) | 2021.08.10 |
| 웹디자인기능사 실기 | 문제 풀이 A-3 (강원천문대) (0) | 2021.08.03 |
| 웹디자인기능사 실기 | 메뉴(네비게이션) 유형별 소스 (1) | 2021.07.20 |
| 웹디자인기능사 실기 | 슬라이드 패턴 (0) | 2021.02.23 |
| 웹디자인기능사 실기 | 문제 풀이 A-1 (JUST쇼핑몰) (0) | 2021.02.08 |
댓글