로고 가운데 정렬과 관련하여 질문 드립니다
짧은주소
- - 짧은주소: http://v2.eyoom.net/bbs/?t=1Q0 주소복사
본문
오래간만에 다시 돌아와 모든 것을 까먹고 새로 시작하고 있습니다 ㅠㅠ
지금 하려는 작업이 로고를 화면 정 가운데 넣으려고 하는데 문제가 있네요
검색을 통한 정렬 방법을 다 써도 이 로고 이미지가 꿈쩍도 안하기 때문입니다
제가 한 방식은 이렇습니다
head_bs의 파일에 다음과 같은 수정을 하였습니다
<!--{* ------------- Header Logo 영역 시작 ------------- *}-->
<div class="header-logo" >
<!--{? logo == 'text'}-->
<!-- 2016/01/11 author : lim -->
<!-- <a class="navbar-brand" href="{C.G5_URL}">{config.cf_title}</a> -->
<!--{: logo == 'image'}-->
<!--{* 안내: 출력되는 이미지로고 크기는 167 x 40 픽셀입니다. 선명도 최적화를 위해 334 x 80 픽셀 사이즈로 image 폴더에 업로드 하시길 권합니다. *}-->
<a class="navbar-brand" href="{C.G5_URL}"><img src="../image/site_logo.png" class="img-responsive" ></a>
<!-- <a class="head-brand" href="{C.G5_URL}"><img src="../image/site_logo.png" class="img-responsive" alt="{config.cf_title} LOGO"></a> -->
<!--{/}-->
</div>
<!--{* ------------- Header Logo 영역 끝 ------------- *}-->
물론 배너 부분은 모두 주석 처리를 하여 화면에 나오지 않게 만들었습니다
.header-title .header-logo {position:relative;width:100%;height:200px;z-index:100}
.header-title .navbar-brand {position:relative;line-height:60px;font-size:32px;font-weight:bold;padding:15px 0;}
.header-title .navbar-brand img {height:160px;max-height:160px;margin:10 auto;}
style.css 부분에 대한 수정 사항은 다음과 같습니다
display의 값을 조절도 해보고 vertical-align도 변경해 보았지만
여전히 움직이지 않고 있네요
혹시 이 부분에 대해 조언 주실 분 있으시면 답변 부탁 드리겠습니다
아무튼 해결이 되면, 스터디 html/css 부분에 정리해 올려 둬야 겠네요
초보자라면 누구나 한번즈음 검색을 해볼 사항인데 답을 얻기가 힘들더라고요 ^^
일단 저는 해결을 위해 다시 한번 이것 저것 넣어봐야 겠습니다 ^^
좋아요!
Progress Bar 59%
댓글목록
red123님의 댓글
해결은 했습니다만, 모바일에서 보면 상단 왼쪽에 붙어 버리네요 ㅠㅠ
.header-title .header-logo {position:relative;width:100%;height:200px;z-index:100}
.header-title .navbar-brand {position:relative;line-height:60px;font-size:32px;font-weight:bold;padding:15px 0;position:absolute; top:50%; left:50%; margin:-100px 0 0 -250px; text-align:center;}
.header-title .navbar-brand img {height:160px;max-height:160px;}
반응형을 고려해서 수정을 해야하는데.. 마진으로 강제 적용한게 문제인것 같네요
방법을 다시 찾아봐야 겠습니다 허..
축하합니다. 행운의 포인트 38포인트를 획득하였습니다.
red123님의 댓글
한참 보면서 코드가 왜 이렇게 되었지란 생각 뿐이네요.
다시 처음부터 살펴봐야겠네요 ㅠㅠ
red123님의 댓글
일단 비슷하게 나오는 코드 입니다
.header-title .header-logo {position:relative;width:100%;height:200px;z-index:100}
.header-title .navbar-brand {position:relative;line-height:60px;font-size:32px;font-weight:bold;padding:15px 0; left:30%; }
.header-title .navbar-brand img {height:160px;max-height:160px;}
@media (max-width: 991px) {
.header-title .header-logo.logo-none {display:none;z-index:0}
.header-title .navbar-brand {position:absolute;top:10px;left:10%;height:40px;max-height:40px;line-height:40px;font-size:30px;padding:5px 0}
}
테스트가 더 필요할것 같습니다
참고로 이미지는 452px x 160px로 잡히네요
joosam님의 댓글
저도 정말 궁금했던 부분인데.... 반응형이라 모바일 보기에서는 한쪽에 붙어버린다는... ㅡㅡ
red123님 해결되시면 팁을 공개 해 주세요~~
축하합니다. 지뢰폭탄 포인트 80포인트를 획득하였습니다.
red123님의 댓글
네 검색해보니 반응형은 정렬 하는 방법이 따로 있는것 같더군요
이것 저것 해봐야 하는데..
지금 당장 만들어야 하는 사항이 있어서
일단 1~2주 후 다시 들여다 봐야 할것 같아요 ㅠㅠ
joosam님의 댓글
^^ 답변 감사합니다~~ 춥습니다... 건강 조심하세요~~
정말.. 반응형은 어렵워요~~
red123님의 댓글
오래간만에 왔다가 사용하고 있는 코드가 생각나 첨부해 놓고 갑니다
/*---------- Header Title ----------*/
.header-title {position:relative;background:#fff}
.header-title .header-logo {position:relative;width:100%;height:200px;z-index:100}
.header-title .navbar-brand {position:relative;line-height:60px;font-size:32px;font-weight:bold;padding:15px 0; left:30%; }
.header-title .navbar-brand img {height:160px;max-height:160px;}
해당 코드는 모바일로 확인해도 작아진 사이즈로 중앙 정렬되어 출력됩니다.
헌데 모바일에서 좀 더 작게 만들고 싶은데 스타일 시트의 @media의 기존 값들을 조금씩 건딜어도
이 부분에 대한 변경 결과가 없네요
아마 새로운 값을 추가해야 할것 같은데요.. 이 부분도 알게되면 공유해 드릴게요 ^^
red123님의 댓글
하다가 이 부분도 수정해 보았습니다
@media (max-width: 991px) {
.header-title .header-logo {left:10%;height:150px;width:80%}
.header-title .header-logo.logo-none {display:none;z-index:0}
.header-title .navbar-brand {position:absolute;top:10px;left:0;height:40px;max-height:40px;line-height:40px;font-size:30px;padding:0px 0}
}
로고의 사이즈를 자신이 원하는 위치만큼 잡아주세요