Header Slider 해상도별 글자위치 중간으로 하고싶어요
관련링크
본문
입니다 메인 배너에 텍스트를 해상도 변경되어도 중간으로 위치하고 싶은데
잘안되네요 부탁드리겠습니다 해상도 와이드가 크던 작던 항상 중간으로 위치하고 싶습니다
/*---------- Header Slider ----------*/
.header-slider-bg {z-index:1;position:relative;overflow:hidden;text-align:center}
.header-slider-bg:after {position:absolute;top:0;left:0;z-index:2;width:100%;height:100%;content:" ";background:rgba(0,0,0,0.35)}
.header-slider-bg > img {top:0;width:100%}
.header-slider-bg > .container {position:relative;z-index:3}
.header-slider-bg h1 {color:#fff;font-size:24px;font-weight:600;padding:0px 0 10px;text-align:center;margin-top:-270px}
.header-slider-bg h2 {color:#fff;font-size:14px;font-weight:600;padding:0px 0 10px;text-align:center;margin-top:-10px}
.header-slider-bg p {color:#ededed;font-size:12px;font-weight:200;padding:0px 0 10px;text-align:center;margin-top:-0px}
답변 3
대략적으로 봤을때
1. .header-slider-bg{position:relative} 추가
2. .header-slider-bg > .container {position:absolute; width:100%;bottom:80px;} 추가
위를 해주시고 미디어 쿼리를 사용해서 .header-slider-bg > .container에 있는 bottom을 조정해주셔야 하고, 폰트들에 대해서도 수정이 필요합니다.
container 에
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- margin: auto;
- z-index: 999;
- display: table;
- vertical-align: middle;
이렇게 하면 화면 사이즈 관계없이 무조건 중앙으로 나갑니다.
767px 이하에서는 글자가 오른쪽 위로 올라가는 현상이 생기는데 ㅠㅠ 어떻게 방법이 없을까요?
소스 보시면 알겠지만 노가다로 해상도별 위치 일일이 지정해서 쓰고있는데 제가봐도 저질이네요
부탁좀 드리겠습니다.
부탁드리는김에 하나더 전수해주시면 감사하겠습니다
1. http://tmeic-korea.iptime.org/page/?pid=aboutus - 상부 배너 이미지 메인화면(http://tmeic-korea.iptime.org/)이미지 처럼 해상도에따라 높이 크기 변경하려하니 지금페이지(aboutus page) 박스사이즈에서 벗어나질 못합니다.. 해결할수 있을까요?
아래 남겨주신 질문은 어떤 의미인지 잘 모르겠어요;
1. http://tmeic-korea.iptime.org/page/?pid=aboutus에서 상부 배너 이미지가 뭐를 뜻하는지
2. 박스 사이즈에서 벗어나지를 못한다는게 무슨 뜻인지
그리고 현재 미디어쿼리 적어놓으신 것을 봤습니다. 노가다로 어느정도 끼워 맞추신것 같은데...물론 이것도 한 방법은 맞습니다. 그리고 다른 방법으로는 보통 미디어 쿼리가 발생하는 지점을 분기점이라고도 부릅니다. 그 분기점이 웹페이지에서 동일하게 적용하는게 가장 이상적입니다. 예를 들면 보통 3개의 분기점을 가집니다. 적으면 2개 정도인 경우도 있고, 많으면 더 많은 경우도 있습니다.
현재 .header-slider-bg h2에 적용된것만 7개의 분기점이 있습니다. 너무 많다고 생각되네요. 슬라이더에 모든 글자가 반응해서 꼭 다 보여야 하나요? 특정 분기점에서(너무 사이즈가 작을 경우) 너무 긴 글자는 가독성과 디자인을 해치는 경우가 있어 안 보이게 처리하는 경우도 있습니다.
