페이지 비주얼 영역 제작(2)
오늘은 전 시간에 이어 비주얼 부분을 마무리하는 시간을 갖도록 하겠습니다.
지난번 시간에는 여기까지 했었습니다.
여기서 일단 저 시작, 일시정지 버튼의 이미지를 가져오고 투명도 설정하는 것과, 빨간색 라인을 지워 보겠습니다.
먼저 이미지를 가져오는 작업부터 하도록 하겠습니다.
이미지를 가져올 때는 지금까지 많이 썼던 background url을 이용해 가져와 보도록 하겠습니다.
.visual .control > div > div a {overflow: hidden;display: inline-block;width: 8px; height:9px;
background: url(../image/sp_com.png) no-repeat;}
전 시간에는 height값까지만 설정했었는데, 그 뒤에 보면 background url에 샘플 이미지들이 다 모여 있는 파일의
경로를 넣어주었습니다.
이렇게 경로를 넣어 주면 그 사진 파일에서 해당 이미지가 있는 위치의 x, y축 시작점을 background-position으로
할당을 해 줘야 하는데, 이 값은 시작과 일시정지 버튼의 위치가 다르므로 따로 배정해 주도록 하겠습니다.
.visual .control > div > div a.play {background-position:-108px -72px;}
.visual .control > div > div a.pause {background-position:-108px -60px;}
(play와 pause는 html 코드에서 시작과 일시정지의 class값으로 배정이 되어 있습니다.)
.visual .control > div > div a.play {background-position:-108px -72px;}
.visual .control > div > div a.pause {background-position:-108px -60px;}
(시작 버튼은 x:0,y:0 왼쪽 위 꼭짓점을 기준으로 x:108px, y:72px 지점에 있는 것이고, 일시정지는 x축 동일,
y:60px 지점에 있는 것입니다.)
크기값은 전 글에서 width:8px, height:9px로 지정해 주었으니, 저렇게 코드를 추가하면 화면이 이렇게 나옵니다.
버튼의 생김새와 위치 설정을 모두 했으니 이제 저 빨간색 선은 필요가 없겠죠?
그러면 아예 .control a 태그에 설정되어 있는 border 값을 지우고 5개 버튼의 css에 있는 border:none도 필요가
없어질 테니 지우겠습니다.
그럼 이렇게 깔끔하게 됩니다.
근데 원래 홈페이지의 화면과 비교했을 때, 시작과 일시정지 버튼이 너무 붙어 있는 것 같으니 살짝 거리를
벌리겠습니다.
.visual .control > div > div a {overflow: hidden;display: inline-block;width: 8px; height:9px;
background: url(../image/sp_com.png) no-repeat; margin:0 0 0 7px;}
a 태그에 margin의 끝값에 7px을 주었는데, 참고로 margin값을 저렇게 4개를 주면 앞에서부터 순서대로
위,오른쪽,아래,왼쪽 순서가 됩니다.
시작, 일시정지 버튼은 이미 바로 위 부모 태그인 div 태그의 css값으로 right:0 을 줬기 때문에 왼쪽의 margin값을
7px을 줌으로써 버튼들 사이의 거리를 살짝 띄었습니다.
이렇게 되었습니다.
그리고 본 홈페이지에선 현재 눌려진 상태의 버튼은 흰색, 아닌 상태의 버튼은 투명색으로 설정되어 있습니다.
(이건 왼쪽의 5개 버튼의 설정값과 비슷합니다.)
그래서 그것도 해 보는데, 5개 버튼을 할 때와 다르게 opacity라는 속성값을 이용해 해 보겠습니다.
먼저 html 코드에 시작 부분의 a 태그에 on이라는 class값을 또 하나 줍니다.
<a href="#a" class="play on">시작</a>
(다중클래스라고 이렇게 여러 클래스 값을 주는 것도 가능하고, 다중 적용 시 css 코드 순서대로 적용됩니다.)
그리고 a태그의 css와 a.on이라고 새로 만들어 각각 opacity를 적용하겠습니다.
.visual .control > div > div a {overflow: hidden;display: inline-block;width: 8px; height:9px;
background: url(../image/sp_com.png) no-repeat; margin:0 0 0 7px; opacity:0.5;}
.visual .control > div > div a.on {opacity: 1;}
opacity의 값은 0.0부터 1.0까지 넣을 수 있으며, 숫자가 작을수록 투명해집니다.
그러면 임시이긴 하지만, 일단 선택된 버튼과 선택되지 않은 버튼의 색상도 구현이 되었습니다.
버튼들이 가운데 정렬이 잘 되는지도 테스트 했을 때 잘 동작하는 모습입니다.(확장성)
이제 원래 페이지에서 글자를 띄워 주는 부분이 남았습니다.
바로 저 "가구소재~만들어 갑니다." 텍스트 부분인데요.
일단 html 코드 쪽을 살펴보면,
<div class="con">
<div class="slide">
가구소재에서<br>
인테리어 자재까지
<p>한솔홈데코가 편리하고 행복한 공간을 만들어 갑니다.</p>
</div>
</div>
바로 이 부분입니다.
그럼 기존 .con .slide의 css 부분에 속성을 추가 해 주면 되겠죠?
.visual .con .slide {background: url(../image/bg_main01.jpg) no-repeat center;
color:#fff; font-size: 32px;}
.visual .con .slide p {font-size: 20px;}
컬러값과 글씨 크기값을 정해 주었습니다.
(아래의 "한솔홈데코~만들어 갑니다." 부분은 다른 글씨 크기를 p 태그를 이용해 값을 나눠 주었습니다.)
그리고 위치를 위 화면에 보이는 것처럼 중앙 쪽의 위치에 갖다 놓아야 합니다.
그 방법으로 저 글씨 부분을 새로운 태그로 묶어 주고, position absolute로 직접 위치값을 조정하는 방법을
사용하겠습니다.
<div class="txt">
가구소재에서<br>
인테리어 자재까지
<p>한솔홈데코가 편리하고 행복한 공간을 만들어 갑니다.</p>
</div>
이렇게 css용으로 div 태그를 새로 만들어준 뒤 class값으로 txt라는 값을 줍니다.
그리고 css에서 .slide 안에 .txt로 css 값을 주면 되는데요.
.visual .con .slide {background: url(../image/bg_main01.jpg) no-repeat center;
color:#fff; font-size: 32px;}
.visual .con .slide p {font-size: 20px;}
.visual .con .slide .txt {position: absolute;left: 962px;top:175px;}
보면 .slide 안에 font-size 32px, p 태그 안에 font-size 20px, .txt 안에 absolute값을 주고 left와 top 값을 줘서
위치를 이동시킨 것을 볼 수 있습니다.
위의 32px과 20px은 페이지를 봤을 때 위의 두 줄의 글씨 크기와 아래 한 줄의 글씨 크기가 다르기 때문에 따로
준 것입니다.
이렇게 했을 때,
화면의 이미지에 위치가 잘 놓인 것을 볼 수 있습니다.
단, 이렇게 하면 화면 크기를 줄이거나 늘렸을 때 텍스트의 위치가 바뀌고 할 수 있는데, 이 부분도 나중에
처리하겠습니다.
저 상태에서 글자 사이의 간격이 좀 맞지 않으니 글간격을 늘려주는 값을 추가로 넣어 주겠습니다.
.visual .con .slide {background: url(../image/bg_main01.jpg) no-repeat center;
color:#fff; font-size: 32px; line-height: 46px;}
.visual .con .slide p {font-size: 20px;padding: 19px 0 0; line-height: 100%;}
.slide에 line-height(글간격)을 46px만큼 넣고, 아래 작은 글씨 쪽이랑은 46px만큼 차이가 나면 안되기 때문에
아래의 p태그에 line-height값을 100%로 주고 padding값의 top을 19px을 줘서 위쪽의 46px을 적용받지 않고
아래쪽이랑은 19px만큼만 차이나게 설정했습니다.
그럼 일단 큰 화면으로 봤을 때는 비주얼 부분이 완성되었습니다.
하지만 만약 화면을 줄이거나 하면,
이런 식으로 텍스트가 틀어지는 문제점이 있습니다.
이렇게 되는 이유는 우리가 코딩할 때 .txt의 left값을 962라는 px값으로 주었기 때문입니다.
그럼 왼쪽에서 962px 떨어진 지점에 항상 위치해야 하기에, 화면 크기를 줄였을 때 저런 문제점이 생기는 겁니다.
이거는 left 값만 조정하면 해결되는 문제인데요, left값을 px값이 아니라 % 값으로 줘 보겠습니다.
.visual .con .slide .txt {position: absolute;left: 50%;top:175px;}
이럼 화면을 줄여도 항상 절반 위치에 있는 것을 볼 수 있습니다.
아까보다 화면 크기를 더 줄였음에도 가운데 쪽에 텍스트가 위치하고 있는 게 보이죠?
근데 이번에는 다른 문제가 있습니다.
이렇게 화면 크기를 더 줄이면 텍스트는 계속 가운데에 위치해도 베너 쪽의 텍스트들이 겹친다거나 하는
문제점이 생깁니다.
이 문제는 반응형 웹(mediaquery)으로 해결할 수도 있지만, 그러기에는 지금으로썬 css 코드가 좀 복잡해졌기 때문에,
가장 상위의 태그인 body 태그에 min-width값을 지정해 주겠습니다.
body {min-width: 1280px;}
이렇게 지정을 하면 화면의 가로 크기가 1280px 이하로 내려가게 되면 가로 스크롤이 생기게 됩니다.
자, 이렇게 1280px 이하로 줄였을 때 가로 스크롤이 정상적으로 작동하는 것을 볼 수 있습니다.
근데 여전히 저 베너 부분의 텍스트가 겹치는 문제는 해결되지 않았는데요, 해당 영역의 css로 가 보겠습니다.
header .spot { position: absolute; right:50px; top:0; }
이 부분이 위에서 텍스트가 겹치게 되는 제품정보~BLOG 부분에 대한 css 내용입니다.
보면 position 값을 absolute로 잡고 right:50px을 줘서 항상 오른쪽에서 50px 떨어진 곳에 위치하도록 설정을 했습니다.
absolute 포지션의 특징 중 하나가, 상위 태그 중 포지션 값이 relative인 값이 있으면 해당 태그의 영역 안을 기준으로
위치가 옮겨진다는 특징이 있습니다.
그럼 상위 태그로 올라가면 header 태그의 css를 보게 되는데,
header {height: 81px; text-align: center;}
보시다싶이 처음 설정할 때 header 태그에는 포지션 값이 지정이 되어 있지 않고, 그럼 기본값인 static으로 되어 있는
겁니다.
이렇게 되면 .spot의 right 값은 가장 상위의 태그인 body의 영역 안에 놓이게 되고, 그 결과 화면을 줄여서
가로 스크롤이 되도록 했음에도 불구하고 옆으로 가 보아도 .spot의 위치는 적용이 되지 않았던 것입니다.
그럼 header의 css에 position값을 relative로 주고 다시 실행을 시켜 보겠습니다.
이렇게 화면 크기를 줄이면 베너라던지 아까는 이미지 위에 있는 텍스트의 디자인에도 영향을 받았었는데,
지금은 화면 크기가 줄어듬에도 페이지의 디자인에 전혀 영향이 가지 않는 모습을 보여주고 있습니다.
최종적으로 비주얼 영역까지 원하는 기능을 구현하였습니다.
https://www.inflearn.com/course/%ED%8D%BC%EB%B8%94%EB%A6%AC%EC%85%94-%EC%9B%B9%EC%82%AC%EC%9D%B4%ED%8A%B8%EB%A7%8C%EB%93%A4%EA%B8%B0-%EB%A6%AC%EB%B2%A0%ED%95%98%EC%96%80/dashboard
-> 이 내용은 해당 강의의 내용을 참고하였음을 밝힙니다.
(강의하시는 분께 양해를 구했습니다.)