요약
이 자바스크립트 튜토리얼에서는, 숫자가 올라가는 애니메이션을 순수 자바스크립트로 구현하는 방법을 알려줍니다.
하이라이트
💡 숫자가 프로르 캐서 올라가는 애니메이션을 자바스크립트로 구현해 보세요.
강조점
💡 자바스크립트를 이용하여 애니메이션을 구현합니다.
💡 HTML 요소에 숫자를 바꾸는 함수를 적용합니다.
💡 setInterval 함수를 사용하여 일정 시간마다 숫자를 증가시킵니다.
💡 숫자가 일정 값에 도달하면 애니메이션을 멈춥니다.
💡 숫자가 바뀌는 원리를 이해하면 쉽게 구현할 수 있습니다.
Summary
이번 강의에서는 자바스크립트로 쉽게 아코디언을 구현하는 방법을 배웠습니다.
Highlights
🎉 아코디언 구현: 자바스크립트로 아코디언을 구현해 보았습니다.
📚 HTML 구조: 아코디언을 구현하기 위해 HTML 구조를 만들었습니다.
💻 CSS 스타일링: CSS를 사용하여 패널의 바디를 숨기는 스타일링을 했습니다.
⚙️ 스크립트 기능: 클릭 이벤트를 사용하여 액티브한 패널만 보이도록 구현했습니다.
🖱️ 클릭 이벤트: 클릭한 패널의 액티브 클래스를 추가하고 다른 패널의 액티브 클래스를 제거하는 기능을 구현했습니다.
🧩 배열 요소 처리: 배열로 들어오는 패널 요소를 처리하여 클릭 이벤트를 적용했습니다.
요약
자바스크립트를 사용하여 순수 자바스크립트로 라이트박스 모달을 구현하는 방법에 대해 알려드립니다.
하이라이트
🖼️ 라이트박스 효과는 이미지를 강조하는 효과를 만들어줍니다.
강조 포인트
🌟 라이트박스는 이미지를 검게 처리하고 원하는 이미지만 강조합니다.
🌟 라이트박스는 포트폴리오, 로그인 및 회원가입 페이지 등 다양한 곳에서 활용할 수 있습니다.
🌟 사용자가 클릭한 이미지를 크게 보여주는 효과를 구현할 수 있습니다.
🌟 라이트박스 오버레이에 이미지를 추가하여 원하는 위치에 큰 이미지를 보여줄 수 있습니다.
🌟 CSS를 사용하여 라이트박스 오버레이의 스타일을 설정할 수 있습니다.
🌟 라이트박스 오버레이에 링크 이벤트를 추가하여 이미지 클릭 시 다른 페이지로 이동할 수 있습니다.
🌟 라이트박스 모달을 구현하기 위해 순수 자바스크립트를 사용합니다.
자바스크립트 핵심 리뷰 #2에서는 CSS 변경, 이벤트 연결, DOM 조작 등에 대해 다루었습니다.
Highlights
🎨 CSS 변경: 메뉴 안의 li 요소들의 색상을 파란색으로 변경하는 방법을 배웠습니다.
🖱️ 이벤트 연결: 선택한 요소에 이벤트를 연결하여 원하는 동작을 수행할 수 있습니다.
🧱 DOM 조작: DOM 요소를 선택하고 조작하여 화면을 동적으로 변경할 수 있습니다.
Bullet Points
🔍 선택자와 반복문을 이용하여 메뉴 안의 li 요소들의 색상을 파란색으로 변경할 수 있습니다.
📝 객체의 속성을 활용하여 선택한 요소의 색상을 변경할 수 있습니다.
🚀 반복문을 활용하여 여러 개의 요소에 동일한 작업을 반복적으로 수행할 수 있습니다.
🕹️ 이벤트를 연결하여 요소에 클릭, 마우스 오버 등의 동작을 추가할 수 있습니다.
⚡ 코드를 최적화하여 사이트의 속도를 높일 수 있습니다.
🌈 배열과 객체를 효율적으로 활용하여 코드를 작성할 수 있습니다.
💡 메뉴를 동적으로 변경하거나 화면을 업데이트할 때 DOM 조작을 활용할 수 있습니다.
Summary
이번 동영상은 자바스크립트의 핵심인 선택자와 반복문에 대해 알려줍니다.
Highlights
🎯 선택자는 자바스크립트에서 가장 중요한 요소입니다.
📝 선택한 요소의 CSS를 수정하거나 이벤트를 연결할 수 있어야 합니다.
🔂 반복문은 선택한 요소들을 배열에서 처리하기 위해 필요합니다.
🍏 프로트 엔드 개발에서 자주 사용되는 반복문은 for문입니다.
🍒 선택한 요소를 리스트 형식으로 출력하는 예제를 실습합니다.
📜 선택자와 반복문을 통해 요소들을 동적으로 조작할 수 있습니다.
보통 사이트의 로고에 이미지를 적용하는데 아래와 같이 이미지를 넣는 방법과 배경으로 처리하는 방법이 있겠습니다.
|
1번: <h1><a href=""><img src="images/logo.png" alt="ezweb"></a></h1>
2번: <h1><a href="">ezweb</a></h1>
|
위에서 검색엔진 최적화 차원에서 검색이 잘되는 방법은 2번입니다.
그러면 글씨는 검색차원에서 남겨두고 디자인 차원에서는 이미지가 나타나도록 하는 방법을 전통적인 방법부터 최근 방법을 소개합니다.
아래 영상을 참조해주세요.
https://www.youtube.com/watch?v=tvHlVNFEgg4
IR(image replacement)기법은 검색 최적화를 위해 텍스트를 HTML에 작성하고 CSS를 활용하여 배경 이미지로 대체하는 기법이다.
전통적으로는 내부의 텍스트를 안보이도록 하기 위해 text-indent 속성을 많이 활용했다.
|
.logo a{
width: 100px;
height:50px;
background:url(../images/logo.png) no-repeat;
text-indent: -9999em;
display: block;
overflow: hidden;
}
|
하지만 최근에는 rect 속성을 이용하여 글씨 부분에 마스크를 적용하여 가리는 추세인 것 같다. 최근에 네이버와 애플의 로고 방식이 아래와 같이 변경되었다.
[ 네이버 로고 - HTML ]
a태그에는 특별한 속성이 없고 ::before요소에 로고 이미지를 배경으로 처리했다. 배경을 sprite 이미지로 로고 부분이 보이도록 background-position으로 위치를 잡아주었다.
|
#header .logo_default .logo_naver:before {
display: inline-block;
width: 222px;
height: 52px;
background-position: 0 -158px;
background-repeat: no-repeat;
vertical-align: top;
content: '';
}
|
핵심은 span태그를 어떻게 보이지 않도록 했느냐이다.
|
.blind {
position: absolute;
clip: rect(0 0 0 0);
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
}
|
클래스명 blind요소에 clip을 이용하여 마스크를 적용하고 있다. clip 속성은 반드시 position 속성의 값이 absolute로 되어 있어야 작동한다. 크기를 1px만 주고 margin을 -1px로 주어 바깥 방향으로 내용이 나가도록 하고 overflow:hidden을 이용하여 넘치는 부분을 보이지 않도록 했다.
clip:rect(0 0 0 0)까지만 작성했을 때는 아래와 같이 span 태그의 공간이 나타난다. 이부분을 너비를 1px만 주고 보이지 않도록 축소한 것이다.
애플의 로고의 경우도 naver와 마찬가지로 a 태그 안에 span 태그로 텍스트를 표시하고, a 태그에 배경을 지정했다.
|
#ac-globalnav .ac-gn-link-apple {
background-size: 14px 44px;
background-repeat: no-repeat;
background-image: url(../../en_US/images/be15095f-5a20-57d0-ad14-cf4c638e223a/globalnav_apple_image__b5er5ngrzxqq_large.svg);
background-position: center center;
width: 14px;
}
|
- 적절한 대체 텍스트 제공
- 명도 대비
- 자동 재생 금지
- 콘텐츠 간의 구분
시작예제는 www.ezwebpub.com 에서 구매, 또는 실버회원, 골드회원 공유폴더에서 다운로드 하실수 있습니다.
#웹접근성 #accessibility #wcag
홈페이지 : http://ezwebpub.com/
구독하기(subscribe now) : https://bit.ly/30wbC1y
멤버쉽 가입하기: https://www.youtube.com/channel/UCax1DP6hqZowNWF2lquKk0w/join
**가입후 반드시 유튜브 닉네임과 gmail주소를 ezwebpub@gmail.com으로 보내주세요. 등급별 자료폴더의 권한을 드립니다.
| [ 출간 ] 웹디자인 & 웹퍼블리싱을 위한 피그마 완벽 활용서가 출간되었습니다. (1) | 2021.07.28 |
|---|---|
| [웹퍼블리셔 수강생 모집 ] 전액국비지원 웹표준 반응형 웹퍼플리셔 과정 - 제대로 가르쳐드립니다! 과정소개 시작합니다. (0) | 2020.01.28 |
| ETC 26 [ Web Accessibility ] 웹표준 & 웹접근성 준수하기, 한국형 웹 콘텐츠 접근성 지침 24 항목 (0) | 2019.11.26 |
| ETC 25 [ Github ] 깃허브로 소스 버전관리하기, 기초 명령어 add, commit, push (0) | 2019.11.20 |
| ETC 24 [ Storyboard ] 웹개발 설계도 - 스토리보드 작성하기, 기획자, 퍼블리셔, 개발자와의 소통의 채널 (0) | 2019.11.20 |
피그마의 기초에서 피그마를 이용한 웹디자인 까지.
더불어 피그마로 디자인한 것을 바탕으로 모바일 쇼핑몰, 반응형 포트폴리오 구현까지 모두 수록했습니다.
[ 판매처 ]
예스 24: http://www.yes24.com/Product/Goods/102591441
교보문고: http://www.kyobobook.co.kr/product/detailViewKor.laf?ejkGb=KOR&mallGb=KOR&barcode=9791165920739
알라딘: https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=275035527
홈페이지 : http://ezwebpub.com/
구독하기(subscribe now) : https://bit.ly/30wbC1y
| ETC 39 [ 웹접근성 가이드 ] 웹접근성 준수 코딩하기 - 24가지 규칙중 첫번째 인식의 용이성 (0) | 2021.07.28 |
|---|---|
| [웹퍼블리셔 수강생 모집 ] 전액국비지원 웹표준 반응형 웹퍼플리셔 과정 - 제대로 가르쳐드립니다! 과정소개 시작합니다. (0) | 2020.01.28 |
| ETC 26 [ Web Accessibility ] 웹표준 & 웹접근성 준수하기, 한국형 웹 콘텐츠 접근성 지침 24 항목 (0) | 2019.11.26 |
| ETC 25 [ Github ] 깃허브로 소스 버전관리하기, 기초 명령어 add, commit, push (0) | 2019.11.20 |
| ETC 24 [ Storyboard ] 웹개발 설계도 - 스토리보드 작성하기, 기획자, 퍼블리셔, 개발자와의 소통의 채널 (0) | 2019.11.20 |
CMS 12번째부터의 연재 영상입니다.
- wordpress 설치 참조(Basic 테마 개발 영상) : https://youtu.be/8TwBZIpSuT8
- 테마개발 참조 매뉴얼 : https://codex.wordpress.org/Theme_Development
- 인덱스 루프: https://codex.wordpress.org/The_Loop
#wordpress #portfolio #php
홈페이지 : http://ezwebpub.com/
구독하기(subscribe now) : https://bit.ly/30wbC1y
오프라인 수업 문의: ezwebpub@gmail.com
완료본 소스 구매하기(buy final source) : http://ezwebpub.com/product-category/source/