보통 사이트의 로고에 이미지를 적용하는데 아래와 같이 이미지를 넣는 방법과 배경으로 처리하는 방법이 있겠습니다.
|
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;
}
|
POSITION Sample : https://codepen.io/alikerock/pen/zadQQW
FLEX 활용 Sample : https://codepen.io/alikerock/pen/Yvxbb
- Position
- Flex 컨텐츠의 양이 적어도 푸터를 하단에 고정하는 방법 2가지
#css #position #flex
구독하기(subscribe now) : https://bit.ly/30wbC1y
오프라인 수업 문의: ezwebpub@gmail.com
주말반 수강신청: https://alikerock.tistory.com/notice/165
| IR기법 2가지 - 네이버, 애플 로고 텍스트를 이미지로 교체하 (0) | 2022.03.30 |
|---|---|
| 네이버와 애플의 로고에 쓰인 IR 기법 (0) | 2022.03.28 |
| CSS3 - 86 [ position:sticky ] script 없이 순수 CSS로 스크롤을 할 때 요소를 고정하기 (0) | 2019.11.20 |
| CSS3 - 85 [ CSS ANIMATION ] 공지 카드 애니메이션, card notification css animation (0) | 2019.10.27 |
| CSS3 - 84 [ CSS ANIMATION ] 토글 슬라이드 버튼 애니메이션, form, flex, position, transition, css3 animation (0) | 2019.10.27 |
Sample Link : https://codepen.io/alikerock/pen/ZEzVJdL
- CSS Position
- IE Polyfill
Positon: sticky 지원현황 보기
https://caniuse.com/#search=sticky
플렉스 레이아웃 보기: https://youtu.be/_PSy66fkQ7U
패키지 매니져 Yarn : https://youtu.be/7g21TUOkSLM
Position Sticky Pollyfill : https://github.com/wilddeer/stickyfill
#css #position #pollyfills
구독하기(subscribe now) : https://bit.ly/30wbC1y
오프라인 수업 문의: ezwebpub@gmail.com
평일반 수강신청: https://alikerock.tistory.com/notice/295
주말반 수강신청: https://alikerock.tistory.com/notice/165
Sample Link : https://codepen.io/alikerock/pen/GBzzoX
- CSS Animation
- Cubic Bezier
#css #animation
홈페이지 : http://alikerock.tistory.com/
구독하기(subscribe now) : https://bit.ly/30wbC1y
오프라인 수업 문의: ezwebpub@gmail.com
평일반 수강신청: https://alikerock.tistory.com/notice/295
주말반 수강신청: https://alikerock.tistory.com/notice/165
Sample Link : https://codepen.io/alikerock/pen/RBvEvx
- 토글 슬라이드 버튼 애니메이션,
- checkbox form,
- flex 레이아웃,
- position 설정하기,
- transition
#css #animation #checkbox
홈페이지 : http://alikerock.tistory.com/
구독하기(subscribe now) : https://bit.ly/30wbC1y
오프라인 수업 문의: ezwebpub@gmail.com
평일반 수강신청: https://alikerock.tistory.com/notice/295
주말반 수강신청: https://alikerock.tistory.com/notice/165
Sample Download: http://bit.ly/2SUvLMc
#cssgrid #flex #반응형
Blog : http://alikerock.tistory.com/
Twitter : eztoweb
구독하기(subscribe now) : https://bit.ly/30wbC1y
오프라인 수업 문의: ezwebpub@gmail.com
Sample Link : https://codepen.io/alikerock/pen/LBObbX
- display: grid로
레이아웃 설정하기
에디터: visual studio code
트위터: #eztoweb
#css grid #display:grid
구독하기(subscribe now) : https://bit.ly/30wbC1y
오프라인 수업 문의: ezwebpub@gmail.com
Sample Link : https://bit.ly/2ZuRRXs
- SVG Hover Animation
- SVG Click Animation
에디터: visual studio code
티스토리 : http://alikerock.tistory.com/
트위터: #eztoweb
#css animation, #css, #animation, #animate
Sample Link : http://bitly.kr/LZ59xz
stroke-dasharray
https://codepen.io/alikerock/pen/WpPMyb
stroke-dashoffset
https://codepen.io/alikerock/pen/PpVQdv
에디터: visual studio code
티스토리 : http://alikerock.tistory.com/
트위터: #eztoweb
#css animation, #css, #animation, #animate