html - SVG scroll animation 효과 - 특별한 포트폴리오를 위한 그림 15종 증정
두노피
svg를 이용하여 간단한 그림을 그리고 사이트에 적용시킵니다. 포트폴리오에 적용하면 돋보이는 페이지가 됩니다.
초급
HTML/CSS, JavaScript
이 강의를 통해 웹디자인개발기능사 A3, B4, C1, D3, E4, F3 문제를 display:flex로 풀이하는걸 배우실 수 있습니다. 작업 속도가 빠릅니다. 멈추면서 보아요
html, css, jquery
웹디자인개발기능사
이 강의는 웹디자인기능사 실기시험을 준비하는 수험생과 같이 풀어본 영상입니다.
HTML, CSS, jQuery 세 가지 기술을 모두 통합적으로 활용해야 하는 과제입니다.
먼저 HTML 파트에서는 문서의 기본 구조를 설정하는 방법과 함께, 시험에서 자주 등장하는 태그들(예: header
, nav
, section
, footer
,등)의 사용법을 소개합니다. 특히 실기에서는 <ul>
리스트, <a>
링크, <img>
이미지 삽입과 같은 기본 요소들을 정확하게 사용하는 것이 중요한데, 본 강의에서는 이들 요소를 어떻게 정확히 배치하고 속성을 주는지 예시를 통해 차근차근 알려줍니다.
이어서 CSS 영역에서는 외부 스타일시트를 연동하고, 다양한 선택자 사용법과 스타일 속성 설정 방법을 다룹니다. 예를 들어 position
, flex
, margin
, padding
, text-align
, font
속성 등 핵심 스타일 속성들을 실제 예제를 통해 설명합니다. 또한 실기시험에서 자주 출제되는 스타일 구성 방식(상단 메뉴, 배너, 콘텐츠 박스, 푸터 등)에 대한 구현 전략도 함께 다루며, CSS로 어떻게 시안을 구현해내야 하는지에 대한 감각을 길러줍니다.
마지막으로 jQuery 파트에서는 시험에서 주로 요구되는 동적 기능 구현을 설명합니다. jQuery는 HTML 요소의 보이기/숨기기(toggle), 보이고 숨기는 효과(show, hide), 탭 메뉴, 이미지 변경, 클래스 추가/제거 등 간단한 인터랙션을 빠르게 구현할 수 있는 장점이 있습니다. 강의에서는 jQuery의 기본 문법부터 시작하여 $(document).ready()
를 활용한 기본 구조 세팅, 버튼 클릭 시 이벤트 처리, 특정 영역의 동적 제어 등 실기시험에서 바로 적용할 수 있는 코드를 함께 다루고 있습니다.
이 영상은 단순한 설명을 넘어, 시험장에서 요구하는 실전 감각과 코딩 순서를 실시간으로 보여주는 데 중점을 두었습니다. 초보자도 이해할 수 있도록 친절하고 단계적으로 설명했으며, 코드를 한 줄씩 짚어가며 어떤 의도로 작성되는지를 설명하기 때문에 학습 효율이 매우 높습니다. 실제 시험과 유사한 예제도 함께 구성되어 있어 복습용으로도 활용이 가능합니다.
이번 강의를 통해 자신감을 가지고 시험에 임할 수 있도록 도와드릴 것이며, HTML 구조 작성 → CSS 스타일링 → jQuery 동작 구현까지의 전체 흐름을 익힐 수 있습니다. 실기시험에서 고득점을 목표로 한다면, 꼭 끝까지 시청해 주세요!
학습 대상은
누구일까요?
display:flex로 풀고 싶으신분
자격증 시험에 합격하고 싶으신분
선수 지식,
필요할까요?
html 기초지식
css 기초지식
jquery 기초지식
전체
19개 ∙ (8시간 30분)
해당 강의에서 제공:
2. A3 레이아웃 제작
07:06
3. A3 헤더 제작
29:18
6. A3 섹션
41:16
7. A3 푸터
07:50
8. A3 팝업
10:50
10. B4 유형 풀이영상
01:15:47
11. 꼼수
16:04
15. D3 유형 풀이영상
01:28:45
17. E4 유형 풀이영상
01:08:51
19. F3 유형 풀이영상
01:27:26
지식공유자의 깜짝할인 중 (1일 남음)
₩37,130
24%
₩49,500
지식공유자님의 다른 강의를 만나보세요!
같은 분야의 다른 강의를 만나보세요!