안녕하세요.
그런데 사이트 로고 만들고나서 적용시키니 익스플로러8에서는 좌측 #side 부분이 살짝 이상해집니다.
로고 크기에 제한이 있어서 이런건지, 해결방법이 궁금합니다.
답변 부탁드립니다.
댓글 21개
ㅋㅋㅋ
저 지금 로고 달고 있는데...
제 경험으로는 px 을 똑같이 맞춰져야 뒤틀리고 하는 일이 없습니다.
예를 들자면 <div id="logo"></div> 여기에 로고 이미지를 넣는다고 하면,
이미지의 크기가 240X80 px 다, 이러면 div 의 크기도
width:240px;
height:80px;
이렇게 맞춰주셔야 문제가 안생깁니다.
지금 다평정님은 로고 이미지를 <h1> 에 넣어 놓으셨는데, 이러면 다른 <h1> 들은 어쩌라구요....
저같으면 div 안에 로고를 넣어줄 것 같습니다.
* 물론 <h1 id="logo"> 이런식으로 id 를 줘서 하실수는 있는데... <h1> 이란건 원래 대표글, 가장 큰 글씨를 위해 지정되어 있는거라서요.. 이런식으로 <h1> 에 로고를 넣는경우는 잘 없는 것 같네요....
저 지금 로고 달고 있는데...
제 경험으로는 px 을 똑같이 맞춰져야 뒤틀리고 하는 일이 없습니다.
예를 들자면 <div id="logo"></div> 여기에 로고 이미지를 넣는다고 하면,
이미지의 크기가 240X80 px 다, 이러면 div 의 크기도
width:240px;
height:80px;
이렇게 맞춰주셔야 문제가 안생깁니다.
지금 다평정님은 로고 이미지를 <h1> 에 넣어 놓으셨는데, 이러면 다른 <h1> 들은 어쩌라구요....
저같으면 div 안에 로고를 넣어줄 것 같습니다.
* 물론 <h1 id="logo"> 이런식으로 id 를 줘서 하실수는 있는데... <h1> 이란건 원래 대표글, 가장 큰 글씨를 위해 지정되어 있는거라서요.. 이런식으로 <h1> 에 로고를 넣는경우는 잘 없는 것 같네요....
접근성을 고려한 기법입니다.
혹시 h1 이 중복된다면 아이디로 구분해주셔야 할겁니다.
<style>
#title {position:relative;width:100px;height:100px;overflow:hidden}
#title span {display:block;position:absolute;top:0;left:0;width:100%;height:100%;background:url('로고이미지경로')}
</style>
<h1 id='title'><span></span>제목내용</h1>
혹시 h1 이 중복된다면 아이디로 구분해주셔야 할겁니다.
<style>
#title {position:relative;width:100px;height:100px;overflow:hidden}
#title span {display:block;position:absolute;top:0;left:0;width:100%;height:100%;background:url('로고이미지경로')}
</style>
<h1 id='title'><span></span>제목내용</h1>
재미있는 글들이 많은데요...
http://csswizardry.com/2010/10/your-logo-is-an-image-not-a-h1/
로고는 컨텐츠다, 그리고 Content = markup 이다. 그러니까 로고는 <h1> 에 넣는게 잘못된거다. 대략 이런 얘기인데,
이런것 보다도 로고를 <h1> 에 넣으면 구글에서 페널티를 준다네요.
Google is adding text-indent to it’s no-no list of black hat techniques.
SEO 를 고려해서 꼼수로 <h1> 에 로고를 넣으면 대략 페널티를 먹는답니다. 그래서 아마 요즘에 <h1> 에 로고를 넣지 말라고 하나봅니다.
http://csswizardry.com/2010/10/your-logo-is-an-image-not-a-h1/
로고는 컨텐츠다, 그리고 Content = markup 이다. 그러니까 로고는 <h1> 에 넣는게 잘못된거다. 대략 이런 얘기인데,
이런것 보다도 로고를 <h1> 에 넣으면 구글에서 페널티를 준다네요.
Google is adding text-indent to it’s no-no list of black hat techniques.
SEO 를 고려해서 꼼수로 <h1> 에 로고를 넣으면 대략 페널티를 먹는답니다. 그래서 아마 요즘에 <h1> 에 로고를 넣지 말라고 하나봅니다.
흠 그리고 제가 위에 기술한 내용은 이미지 대체 기술로 “Web Accessibility: Web Standards and Regulatory Compliance” 라는 책에서 Richard Rutter 가 언급한 방법입니다.
웹 접근성을 고려한 방법으로 CSS는 사용하지만 Image는 사용하지 않거나, 둘 다 사용하지 않을 때 이미지에 대한 대체텍스트를 제공하는 것인데 이것 역시 black hat 으로 간주되어서 검색엔진에서 패널티를 준다는 것인가요?
음... 그렇다면 상당히 유감이네요.
웹 접근성을 고려한 방법으로 CSS는 사용하지만 Image는 사용하지 않거나, 둘 다 사용하지 않을 때 이미지에 대한 대체텍스트를 제공하는 것인데 이것 역시 black hat 으로 간주되어서 검색엔진에서 패널티를 준다는 것인가요?
음... 그렇다면 상당히 유감이네요.
네... 불행하게도... 그렇답니다. 이미지에 대한 대체 텍스트를 저도 로고 넣을때 같이 넣거든요.. 인덱스를 마이너스로 왕창줘서 방문자는 못 보지만 bot 은 로고 text 를 보게 되는 식인데... 이걸 구글에서 싫어한답니다. 사실 악의는 없는건데,....
http://webmasters.stackexchange.com/questions/30276/does-google-penalize-changed-h1-tags
H1 tag 페날티 에 관한 내용이구요, 어제 관련내용을 읽다 잘못 ctrl+c, v 를 했네요. ㅋㅋㅋ
http://webmasters.stackexchange.com/questions/30276/does-google-penalize-changed-h1-tags
H1 tag 페날티 에 관한 내용이구요, 어제 관련내용을 읽다 잘못 ctrl+c, v 를 했네요. ㅋㅋㅋ
게시글 목록
| 번호 | 제목 |
|---|---|
| 12333 |
JavaScript
한글만 되게 하는 자바스크립트 입니다.
|
| 12332 |
JavaScript
간단한 팝업창 중앙에 띄우기 입니다.
|
| 12331 |
JavaScript
2단계 드롭다운 레이어 메뉴 입니다.
|
| 12329 |
JavaScript
동적 막대그래프
1
|
| 12328 |
JavaScript
간단한 위로가기 자바스크립트 입니다.
|
| 12327 |
JavaScript
따라다니는 link 퀵메뉴 입니다.
|
| 12326 |
JavaScript
글씨의 색을 자동으로 변환시켜주는 자바스크립트 입니다.
|
| 12325 |
JavaScript
인스타그램 사진가져오기
|
| 12324 |
jQuery
checkedbox 컨트롤
|
| 12323 |
jQuery
radio 컨트롤
|
| 12322 |
jQuery
select box 컨트롤
|
| 12321 | |
| 12320 |
node.js
Node.js - 실시간 위치 추적 (2)
|
| 12319 | |
| 12318 |
JavaScript
특정 이메일 입력 금지및 이메일 유효성 검사하기 입니다.
|
| 12317 |
JavaScript
마우스 오버시 그림 변하게 하는 자바스크립트 입니다
|
| 12316 |
JavaScript
시작과 멈춤이 가능한 스크롤 텍스트 입니다.
|
| 12315 |
JavaScript
이미지 없이 라운딩 박스 + 보더 표현하기 입니다.
|
| 12314 |
JavaScript
Trim 함수 자바스크립트로 사용하기 입니다.
|
| 12313 |
JavaScript
실제 이미지 크기 알아내기 입니다.
|
| 12312 |
JavaScript
present 자바스크립트 입니다.
|
| 12311 |
JavaScript
이미지 미리 로딩시켜놓기 입니다.
|
| 12310 |
JavaScript
다각형 이미지슬라이드쇼 자바스크립트 입니다.
|
| 12309 |
JavaScript
가운데 정렬된 홈페이지에서 따라다니는 레이어 자바스크립트 입니다.
|
| 12308 |
JavaScript
클릭시 펼쳐지는 메뉴 입니다.
|
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기