PC 및 모바일 버전 헤더 검정색 부분 배경이미지로 넣기

매출이 오르면 내리는 수수료! 지금 수수료센터에서 전자결제(PG)수수료 비교견적 신청해 보세요!
PC 및 모바일 버전 헤더 검정색 부분 배경이미지로 넣기

QA

PC 및 모바일 버전 헤더 검정색 부분 배경이미지로 넣기

본문

안녕하세요 그누보드로 홈 작업하다 막혀서 문의드립니다.

어찌보면 정말 초보적인 질문이라 ...그래도 제겐 어려워서 ㅠㅠ

이부분을 해결할려고 Q&A에 검색 해봤는데 해결책이 없어서

질문 올려 도움요청 드립니다.

 

그누보드5 맨위 상단 검정색 부분을 모두 제거하고 해당부분에

"배경이미지(background)이미지"를 넣고자 합니다.

여러차례 시도해 봤는데 해당부분이 해결되지않아 답답해서 글올립니다. ㅠㅠ

아래는 원래 원본인데 해당 스크린샷의 검은색 부분입니다.

검색폼은 로그인폼 하단으로 위치를 이동시켜서 해결됬고

남은 바탕의 검정색 부분을 배경이미지로 대체하고자 합니다.

 

32716038_1736783562.4612.jpg

 

아래 이미지처럼 변경하려고 합니다.

일반적인 img src의 이미지 삽입이 아닌 background img로 넣으려고 합니다.

 

32716038_1736783657.6192.jpg

 

 

이 질문에 댓글 쓰기 :

답변 1

여기서는 상단을 배경이미지로 채우는 방법을 질문 하셨으므로 따로 용어에 대한 설명은 하지 않겠습니다. 궁금하시면 따로 구글이나 네이버에 찾아보시기 바랍니다.

 

pc버전 설명 드릴께요

 

배경색 바꾸고 상단 로그인 부분도 깔끔하게 날리고 기존 그누보드 로고를 큰 이미지로 대체하는 방법으로 해볼께요.

 

<div id="hd_wrapper"> 여기 부분에서 아래 로고 부분 제외하고 나머지 코드를 날립니다.

다른 코드를 날리시면 안됩니다.

그러면 상단 로그인쪽을 날리게 됩니다.


<div id="logo">
<a href="<?php echo G5_URL ?>"><img src="<?php echo G5_IMG_URL ?>/logo.png" alt="<?php echo $config['cf_title']; ?>"></a>
</div>

 

그다음에 default.css를 갑니다. 

71번째 줄쯤 보면 이렇게 되어 있을겁니다. 이게 상단 배경색 부분입니다.

#212020이 검은색을 나타내는 컬러 코드 입니다.

이거를 하얀색을 나타내는 컬러코드 #fff로 바꿉니다.


#hd{background:#212020}

81번 줄쯤에 로고 관련 css가 있습니다. 여기서 padding을 지웁니다.

 

마지막으로

 

가로 1200px 세로 140px 이미지를 구하거나 기존 이미지를 인터넷에 이미지 사이즈 조절 하는걸로

사이즈를 조절합니다. 그 다음 이름을 logo.png로 바꿉니다.

 

그 다음에 img 폴더에 logo.png를 업로드를 합니다. 이미 기존 로고 파일이 있으니까. 덮어 쓸꺼냐고 물어보면 덮어 쓰시고 사이트에 접속해서 ctrl + f5를 눌러 캐시를 지우는 새로고침을 해봅니다.

 

img폴더는 메인 폴더에 있습니다.

 

 

이렇게 하면 결과가 이렇게 나오겠내요.

2943618031_1736787780.5601.png

상단 로그인이 필요하시다면 코드 다른곳으로 위치 이동하시면 되겠습니다.

상단에 줄을 제거하려면 default.css에 61번째줄 쯤에 #tnb를 찾아서 border-bottom 속성을 제거하시면 됩니다.

배경 이미지 높이 키우고 싶으시면
default.css 78번째 줄쯤에
#hd_wrapper 찾아서 높이 부분 키우시고 이미지 파일 높이도 키우시면 되겟습니다.

모바일 같은 경우도 비슷하게 작업하시면 되니까 대략 설명만 드려 볼께요

모바일쪽 css를 열어서 배경색 부분을 찾아서 하얀색으로 변경합니다.

그리고 모바일에 46,71번째 부분 찾아서 컬러 부분 다른 색으로 변경합니다. (버튼 색이 하얀색이라 안보입니다.)

인터넷에 컬러 코드 치셔 가지고 맘에 드는 색상 코드로 변경하시면 됩니다.

그다음 아까 처럼 배경으로 사용할 이미지를 만듭니다. 이미지 파일 이름은 m_logo.png로 하고

사이즈는 원하는 사이즈로 만들어서 업로드 하시되 모바일 페이지라 게시판 최신글을 너무 가리지 않게 높이를 적당하게 높이는 것이 좋겠습니다.

답변을 작성하시기 전에 로그인 해주세요.
전체 0
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT