로고 크기에 제한이 있나요?
안녕하세요.
그런데 사이트 로고 만들고나서 적용시키니 익스플로러8에서는 좌측 #side 부분이 살짝 이상해집니다.
로고 크기에 제한이 있어서 이런건지, 해결방법이 궁금합니다.
답변 부탁드립니다.
댓글 21개
cshop
13년 전
ㅋㅋㅋ
저 지금 로고 달고 있는데...
제 경험으로는 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> 에 로고를 넣는경우는 잘 없는 것 같네요....
13년 전
말씀해주신대로 해봤지만 그대로네요ㅠㅠ;;
아, 물론 h1을 div로 바꾸고 width, height 값을 주었지말입니다~
아, 물론 h1을 div로 바꾸고 width, height 값을 주었지말입니다~
13년 전
접근성을 고려한 기법입니다.
혹시 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>
13년 전
답변 감사합니다, 그런데 아직 그대로에요..
사이트 주소 내용에 기재했습니다.
사이트 주소 내용에 기재했습니다.
cshop
13년 전
재미있는 글들이 많은데요...
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> 에 로고를 넣지 말라고 하나봅니다.
13년 전
ㅎㅎㅎ그렇군요, 전 이미 div로 바꿨습니다.
13년 전
기술적인 부분에 치우쳐져 답변하다 보니 그런 h1 에 로고를 넣는 걸 인지하지 못했네요. 좋은 댓글 감사합니다.
저 역시 실무에서 h1 에 로고를 넣는 일은 안하지요. ㅎㅎㅎ
근데 black hat techniques 이건 h1 에 로고를 넣으면 패널티를 준다는게 아니라 일반 환경에서 감춰진 콘텐츠에 대한 이야기인 거 같은데요?
그리고 엄밀히 말해서 h1 에 로고를 넣는 건 꼼수가 아니라 바보짓이죠. ^^;;
저 역시 실무에서 h1 에 로고를 넣는 일은 안하지요. ㅎㅎㅎ
근데 black hat techniques 이건 h1 에 로고를 넣으면 패널티를 준다는게 아니라 일반 환경에서 감춰진 콘텐츠에 대한 이야기인 거 같은데요?
그리고 엄밀히 말해서 h1 에 로고를 넣는 건 꼼수가 아니라 바보짓이죠. ^^;;
13년 전
흠 그리고 제가 위에 기술한 내용은 이미지 대체 기술로 “Web Accessibility: Web Standards and Regulatory Compliance” 라는 책에서 Richard Rutter 가 언급한 방법입니다.
웹 접근성을 고려한 방법으로 CSS는 사용하지만 Image는 사용하지 않거나, 둘 다 사용하지 않을 때 이미지에 대한 대체텍스트를 제공하는 것인데 이것 역시 black hat 으로 간주되어서 검색엔진에서 패널티를 준다는 것인가요?
음... 그렇다면 상당히 유감이네요.
웹 접근성을 고려한 방법으로 CSS는 사용하지만 Image는 사용하지 않거나, 둘 다 사용하지 않을 때 이미지에 대한 대체텍스트를 제공하는 것인데 이것 역시 black hat 으로 간주되어서 검색엔진에서 패널티를 준다는 것인가요?
음... 그렇다면 상당히 유감이네요.
cshop
13년 전
네... 불행하게도... 그렇답니다. 이미지에 대한 대체 텍스트를 저도 로고 넣을때 같이 넣거든요.. 인덱스를 마이너스로 왕창줘서 방문자는 못 보지만 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 를 했네요. ㅋㅋㅋ
13년 전
댓글까지 다 읽어보시고 링크하신건가요??
cshop
13년 전
지운 아빠님 글은 다 봅니다. 제가 알아둘것, 유념해야 할 것들, 제가 몰랐던 것들을 말씀하시니 (항상 그렇다는 얘기가 아니라, 맨날 뻘글 쓰시다가 가끔 아주 중요한 얘기를 하시죠.)
챙겨봐야죠.
챙겨봐야죠.
13년 전
제 글 말구요... 올려주신 링크글에 있는 다른 사람 댓글이요.
13년 전
@Glycan - You're not going to find something from google that says 'changed fonts for h1 tags are ok', because that doesn't exist. Typeface changes are presentational--search engine optimisation deals with content and code structure. SEO helps users find your page. Good visual presentation helps you keep users ON your page once they're there.
Google spiders aren't looking in your css files to find out whether you've changed your paragraph tag typeface from Arial to Courier-- they're too busy sifting through markup to get at those keywords in the content.
이 내용 말입니다. ^^
Google spiders aren't looking in your css files to find out whether you've changed your paragraph tag typeface from Arial to Courier-- they're too busy sifting through markup to get at those keywords in the content.
이 내용 말입니다. ^^
cshop
13년 전
style.css 68 줄을 이렇게 바꾸세요.
#login_area { position:relative; margin-bottom:20px; width:210px;overflow:hidden; border:1px solid #e1e1e1; border-top:2px solid #000; }
이렇게 바꾸시면 똑같이 보이실겁니다.
다평정님이 사용하시는 DOCTYPE 이 아마 IE 에서 padding 이 안 먹는것 같습니다.
저번에도 말씀드렸지만, IE 의 경우, DOCTYPE 에 따라 패딩이 먹었다 안먹었다 지맘이라서요...
로고랑은 상관 없는 문제 입니다.
#login_area { position:relative; margin-bottom:20px; width:210px;overflow:hidden; border:1px solid #e1e1e1; border-top:2px solid #000; }
이렇게 바꾸시면 똑같이 보이실겁니다.
다평정님이 사용하시는 DOCTYPE 이 아마 IE 에서 padding 이 안 먹는것 같습니다.
저번에도 말씀드렸지만, IE 의 경우, DOCTYPE 에 따라 패딩이 먹었다 안먹었다 지맘이라서요...
로고랑은 상관 없는 문제 입니다.
13년 전
그누보드 로고(크기 작았음)에서 제 원래의 사이트 로고로 바꾸고나면 그럽니다.
아직도 해결이 안되네요ㅠㅠ
아직도 해결이 안되네요ㅠㅠ
cshop
13년 전
글구 <center></center> 는 지우시구요,
#logo {margin: 0 auto;}
이렇게 css 에 한줄 넣으세요. 필요없는 걸 자꾸 넣으시면 나중에 골아픕니다.
#logo {margin: 0 auto;}
이렇게 css 에 한줄 넣으세요. 필요없는 걸 자꾸 넣으시면 나중에 골아픕니다.
13년 전
margin: 0 auto가 먹히지않네요!.. (익플에서만)
cshop
13년 전
그럼 DOC TYPE 을 바꾸셔야 합니다.
HTML5 DOC TYPE 으로 바꾸시면 제일 골이 안 아프신데....
<!doctype html>
HTML5 DOC TYPE 으로 바꾸시면 제일 골이 안 아프신데....
<!doctype html>
13년 전
음..그래도 익스플로러에선 안먹히네요ㅋㅋ#side는 어떻게할까요ㅠㅠ?
cshop
13년 전
저는 잘만 되는데요?
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
#wrap #head #logo {
margin: 0 auto;
}
</style>
</head><body marginwidth="0" marginheight="0">
<title>그누보드4</title>
<link rel="stylesheet" type="text/css" href="style.css" charset="UTF-8" media="all">
<script type="text/javascript">
//<![CDATA[
// 자바스크립트에서 사용하는 전역변수 선언
var g4_path = ".";
var g4_bbs = "bbs";
var g4_bbs_img = "img";
var g4_bbs_path = "./bbs";
var g4_url = "http://yotaeji.dothome.co.kr";
var g4_https_url = "";
var g4_is_member = "";
var g4_is_admin = "";
var g4_bo_table = "";
var g4_sca = "";
var g4_charset = "utf-8";
var g4_cookie_domain = "";
var g4_is_gecko = navigator.userAgent.toLowerCase().indexOf('gecko') != -1;
var g4_is_ie = navigator.userAgent.toLowerCase().indexOf('msie') != -1;
//]]>
</script>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="common.js"></script>
<script type="text/javascript" src="wrest.js"></script>
<div id="wrap">
<div id="head">
<!-- 로고 -->
<div id="logo"><span>로고 로고</span></div>
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
#wrap #head #logo {
margin: 0 auto;
}
</style>
</head><body marginwidth="0" marginheight="0">
<title>그누보드4</title>
<link rel="stylesheet" type="text/css" href="style.css" charset="UTF-8" media="all">
<script type="text/javascript">
//<![CDATA[
// 자바스크립트에서 사용하는 전역변수 선언
var g4_path = ".";
var g4_bbs = "bbs";
var g4_bbs_img = "img";
var g4_bbs_path = "./bbs";
var g4_url = "http://yotaeji.dothome.co.kr";
var g4_https_url = "";
var g4_is_member = "";
var g4_is_admin = "";
var g4_bo_table = "";
var g4_sca = "";
var g4_charset = "utf-8";
var g4_cookie_domain = "";
var g4_is_gecko = navigator.userAgent.toLowerCase().indexOf('gecko') != -1;
var g4_is_ie = navigator.userAgent.toLowerCase().indexOf('msie') != -1;
//]]>
</script>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="common.js"></script>
<script type="text/javascript" src="wrest.js"></script>
<div id="wrap">
<div id="head">
<!-- 로고 -->
<div id="logo"><span>로고 로고</span></div>
13년 전
사이트 주소 타고 들어가봤는데 복잡하게 짜져 있어서 어떻게 손을 대야될 지 모르겠네요.
그냥 새로 짜세요. ㅠ
그냥 새로 짜세요. ㅠ
게시글 목록
| 번호 | 제목 |
|---|---|
| 4405 | |
| 17973 |
Mobile
서브도메인 연결 오류...해결 부탁드립니다.
1
|
| 17969 | |
| 30568 |
HTML
고수님들 도움좀 부탁드립니다!
|
| 17965 |
PHP
웹 프로그래밍 강의사이트
3
|
| 17962 |
JavaScript
PhotoSwipe(갤러리) js 소스 해결좀 부탁드립니다.
2
|
| 17959 | |
| 17955 |
JavaScript
초보자 궁금한게 있습니다!
3
|
| 17953 | |
| 17950 | |
| 17947 | |
| 4403 | |
| 17944 |
jQuery
메뉴에서 무엇이 문제인가요?
2
|
| 17943 |
JavaScript
스크립트 소숫점 자르기
|
| 17941 | |
| 17939 |
Linux
리눅스 yum으로 apm설치하기
1
|
| 17935 |
jQuery
FAQ 예제입니다.
3
|
| 17928 | |
| 4391 | |
| 17926 |
Flash
저도 또 플래시 기본플레이어 질문이네요;
1
|
| 17923 | |
| 17920 |
jQuery
jquery 라이브러리 개발자 사이트
2
|
| 17917 |
jQuery
[질문] 이미지 메뉴 페이드 효과 넣고 싶어요.
2
|
| 26380 | |
| 17916 |
PHP
멀티스크린 대응
|
| 30565 |
HTML
[접기 펴기]간단 소스 문의좀..
2
|
| 17910 | |
| 17907 |
JavaScript
숫자 계산시 NaN 이 나올경우질문드립니다
2
|
| 17905 |
MySQL
ms sql 작업하실분 구합니다.
1
|
| 30555 | |
| 17904 |
MySQL
ssh 터널링을 통한 mysql 접속
|
| 30552 | |
| 17901 |
JavaScript
버튼 롤아웃시에 버튼 온 이미지를 줄수있는 방법 좀 갈켜 주세요.
2
|
| 17900 |
JavaScript
따라다니는 배너 스크립트인데요
|
| 17898 |
Flash
플래시가 검게만 보입니다 ㅠㅠ
1
|
| 30549 | |
| 17895 | |
| 26379 | |
| 26378 | |
| 26377 | |
| 17893 | |
| 17891 |
JavaScript
메뉴바 - 이런걸 원하시는건가??
1
|
| 17888 | |
| 17885 | |
| 17883 | |
| 17882 | |
| 17861 | |
| 17859 |
Flash
플레시 메뉴 만들기중 질문드립니다.
1
|
| 17857 | |
| 4388 | |
| 24413 | |
| 4383 | |
| 17849 | |
| 17847 |
PHP
효과에 대한 질문입니다.
1
|
| 17845 |
Flash
플래시 플레이어가 안나오네요!
1
|
| 17844 |
Linux
mod_ssl 설치 문제
|
| 17839 | |
| 17838 | |
| 30548 |
HTML
이미지 게시판 질문드려요
|
| 17836 |
JavaScript
메뉴바 도움 부탁드립니다.
1
|
| 17833 | |
| 17831 | |
| 17827 |
JavaScript
모바일 홈페이지 연동소스들중에 베가레이스2 기종이 연동이 안된다고 하는데
3
|
| 17826 | |
| 17823 |
JavaScript
네이버 나눔글꼴 적용 좀 봐 주세요
2
|
| 17820 |
MySQL
중복제거 쿼리문좀 간절히 부탁드립니다^^
2
|
| 17818 | |
| 24412 | |
| 30547 |
HTML
모바일 퍼스트와 반응형 웹
|
| 17814 |
MySQL
정중히 문제해결 도움 요청합니다
3
|
| 4377 | |
| 30544 |
HTML
프레임 문의 드려요 ^^;;
2
|
| 17813 |
JavaScript
새창뜨우기 소스에요
|
| 17810 |
기타
서브도메인
2
|
| 26373 | |
| 17804 | |
| 30543 |
HTML
HTML5 스터디가 가능할까요?
|
| 17803 | |
| 4370 | |
| 17801 |
JavaScript
스맛폰 에서 보면 메뉴가 뒤로 숨어서 안보이는데요?
1
|
| 17796 | |
| 26372 | |
| 17794 | |
| 30536 |
HTML
반응형 웹 스타디 초안?
6
|
| 17791 |
JavaScript
클래스 안에 태그의 src 추출
2
|
| 4364 | |
| 17789 | |
| 30535 |
HTML
opacity 질문입니다.!
|
| 17788 |
JavaScript
페이지 경고창 없애고 무한 롤링
|
| 30527 | |
| 30525 | |
| 30524 | |
| 4358 | |
| 30521 | |
| 17781 |
기타
DTD가 뭔가요?
6
|
| 26371 | |
| 17776 | |
| 4343 | |
| 17772 | |
| 17768 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기