로고 가운데 정렬과 관련하여 질문 드립니다
981
2016.01.12 12:56
짧은주소
- - 짧은주소: 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 부분에 정리해 올려 둬야 겠네요
초보자라면 누구나 한번즈음 검색을 해볼 사항인데 답을 얻기가 힘들더라고요 ^^
일단 저는 해결을 위해 다시 한번 이것 저것 넣어봐야 겠습니다 ^^
1
레벨 10
경험치 10,166
Progress Bar 59%
- 가입일 : 2015-03-16 21:00:17
- 서명 :
- 자기소개 :
Total 64건 2 페이지
게시판 이용안내
이윰빌더를 이용하시는 모든 회원님들이 서로 궁금한 부분을 질문 또는 답변을 하며 문제점을 서로 해소할 수 있는 공용 질답 게시판입니다.
질문 시 기본적인 예절을 지켜주세요.
- 질문 시 바른말을 이용 해 주세요.
- 질문자의 상황을 다른이가 예측하기 힘듭니다. 오류가 난 상황이나 환경등을 최대한 자세하게 알려주셔야만 원하시는 답을 얻을 확률이 높습니다.
- 질문의 유형에 따라 틀릴 수 있지만 문제가 되는 해당 페이지 주소가 있으면 가장 근접한 해법이 나올 가능성이 큽니다.
- 원하시는 답을 얻으시면 감사의 말씀을 전하는 센스를 발휘 해 주세요.
- 질문 전 한번쯤 읽어볼만한 글 : http://eyoom.net/bbs/board.php?bo_table=qna&wr_id=74
| 번호 | 제목 | 글쓴이 | 날짜 | 뷰 |
|---|---|---|---|---|
| 44 |
red123
|
2015.05.23 | 1,030 | |
| 43 |
red123
|
2015.06.22 | 1,015 | |
| 42 |
red123
|
2015.04.09 | 1,006 | |
| 41 |
red123
|
2015.04.09 | 1,004 | |
| 열람 |
red123
|
2016.01.12 | 982 | |
| 39 |
red123
|
2016.10.30 | 973 | |
| 38 |
red123
|
2015.04.16 | 949 | |
| 37 |
red123
|
2015.07.31 | 937 | |
| 36 |
red123
|
2015.04.08 | 910 | |
| 35 |
red123
|
2015.05.24 | 884 | |
| 34 |
red123
|
2015.06.22 | 855 | |
| 33 |
red123
|
2015.07.03 | 853 | |
| 32 |
red123
|
2015.07.18 | 845 | |
| 31 |
red123
|
2016.04.05 | 844 | |
| 30 |
red123
|
2017.06.23 | 842 | |
| 29 |
red123
|
2016.06.01 | 836 | |
| 28 |
red123
|
2015.05.05 | 826 | |
| 27 |
red123
|
2015.04.09 | 815 | |
| 26 |
red123
|
2016.01.05 | 808 | |
| 25 |
red123
|
2016.09.08 | 800 |
댓글목록
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}
}
로고의 사이즈를 자신이 원하는 위치만큼 잡아주세요