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/
portfolio wordpress theme #1
https://drive.google.com/file/d/1rVPU7NoWbsAUaf7u00pOEWCq1wv0azmy/view?usp=sharing
part #10 부트스트랩 + 반응형 CSS
#psdtohtml #portfolio #HTML
홈페이지 : http://ezwebpub.com/
구독하기(subscribe now) : https://bit.ly/30wbC1y
오프라인 수업 문의: ezwebpub@gmail.com
완료본 소스 구매하기(buy final source) : http://ezwebpub.com/product-category/source/
portfolio wordpress theme #1
https://drive.google.com/file/d/1rVPU7NoWbsAUaf7u00pOEWCq1wv0azmy/view?usp=sharing
part #9
CONTACT, ABOUT PAGE
HTML, CSS
#psdtohtml #portfolio #HTML
홈페이지 : http://ezwebpub.com/
구독하기(subscribe now) : https://bit.ly/30wbC1y
오프라인 수업 문의: ezwebpub@gmail.com
완료본 소스 구매하기(buy final source) : http://ezwebpub.com/product-category/source/
portfolio wordpress theme #1
https://drive.google.com/file/d/1rVPU7NoWbsAUaf7u00pOEWCq1wv0azmy/view?usp=sharing
part #8
상세페이지 HTML, CSS
#psdtohtml #portfolio #HTML
홈페이지 : http://ezwebpub.com/
구독하기(subscribe now) : https://bit.ly/30wbC1y
오프라인 수업 문의: ezwebpub@gmail.com
완료본 소스 구매하기(buy final source) : http://ezwebpub.com/product-category/source/
portfolio wordpress theme #1
https://drive.google.com/file/d/1rVPU7NoWbsAUaf7u00pOEWCq1wv0azmy/view?usp=sharing
part #8
#psdtohtml #portfolio #HTML
#psdtohtml #portfolio #HTML
홈페이지 : http://ezwebpub.com/
구독하기(subscribe now) : https://bit.ly/30wbC1y
오프라인 수업 문의: ezwebpub@gmail.com
완료본 소스 구매하기(buy final source) : http://ezwebpub.com/product-category/source/