IR(image replacement)기법은 검색 최적화를 위해 텍스트를 HTML에 작성하고 CSS를 활용하여 배경 이미지로 대체하는 기법이다.
전통적으로는 내부의 텍스트를 안보이도록 하기 위해 text-indent 속성을 많이 활용했다.
.logoa{
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(0000);
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 태그에 배경을 지정했다.
피그마활용 웹디자인 & 웹퍼블리싱 강의를 그린컴퓨터아트학원(종로점)에서 재직자 수업(일반도 신청가능)으로 진행합니다.
강의는 오프라인으로 학원에 등원하거나 zoom을 통한 온라인 수강도 가능합니다.
하루 3시간, 총 약12일간 피그마를 활용한 웹디자인 기초와, 완성된 피그마 파일을 참조로 HTML, CSS, jQuery(javascript)등을 활용하여 웹페이지를 구현, 반응형 구현의 강의를 진행합니다. 또한 모바일 디자인을 참조하여 웹과는 다른 모바일의 환경에 최적화된 쇼핑몰을 구현합니다.
전반 5일은 디자인 파트는 디자인 초보자도 가능하지만, 7일간 코딩 파트의 강의내용은 html, css, script를 한번이라도 학습한 분을 대상으로 하기 때문에 기초가 부족한 분은 수업이 어려울 수 있습니다.
기초는 있지만 종합적으로 적용이 어려운 분,반응형이 힘든 분,모바일 전용 쇼핑몰 구현이 궁금한 분
피그마활용 웹디자인 & 웹퍼블리싱 강의를 그린컴퓨터아트학원(종로점)에서 특강형식으로 진행합니다.
강의는 오프라인으로 학원에 등원하거나 zoom을 통한 온라인 수강도 가능합니다.
하루 3시간, 총 약12일간 피그마를 활용한 웹디자인 기초와, 완성된 피그마 파일을 참조로 HTML, CSS, jQuery등을 활용하여 웹페이지를 구현, 반응형 구현의 강의를 진행합니다. 또한 모바일 디자인을 참조하여 웹과는 다른 모바일의 환경에 최적화된 쇼핑몰을 구현합니다.
전반 5일은 디자인 파트는 디자인 초보자도 가능하지만, 7일간 코딩 파트의 강의내용은 html, css, script를 한번이라도 학습한 분을 대상으로 하기 때문에 기초가 부족한 분은 수업이 어려울 수 있습니다.
기초는 있지만 종합적으로 적용이 어려운 분,반응형이 힘든 분,모바일 전용 쇼핑몰 구현이 궁금한 분
피그마활용 웹디자인 & 웹퍼블리싱 강의를 그린컴퓨터아트학원(종로점)에서 특강형식으로 진행합니다.
강의는 오프라인으로 학원에 등원하거나 zoom을 통한 온라인 수강도 가능합니다.
하루 4시간, 총 약13일간 피그마를 활용한 웹디자인 기초와, 완성된 피그마 파일을 참조로 HTML, CSS, jQuery등을 활용하여 웹페이지를 구현, 반응형 구현의 강의를 진행합니다. 또한 모바일 디자인을 참조하여 웹과는 다른 모바일의 환경에 최적화된 쇼핑몰을 구현합니다.
약 4일간의 디자인 파트는 디자인 초보자도 가능하지만, 6일간 코딩 파트의 강의내용은 html, css, script를 한번이라도 학습한 분을 대상으로 하기 때문에 기초가 부족한 분은 수업이 어려울 수 있습니다.
기초는 있지만 종합적으로 적용이 어려운 분,반응형이 힘든 분,모바일 전용 쇼핑몰 구현이 궁금한 분