다음은 슬라이드 쇼처럼 넘어가는 slider부분이다
이는 main이라기보다는 aside에 가깝다
퀵메뉴처럼 활용 되고 있기 때문이다
우리는 동적인 부분을 제외한 나머지를 만들기로 했기 때문에 슬라이드 부분은 한 개의 메뉴만 만들도록 하겠다.
먼저 수정한 부분이 조금씩 있다.
원래 있던 html문서에서 slider부분을 main 밖으로 빼고 header밑에 div태그로 감쌌다.
또한 한 장면만 할 것이므로 문장과 a태그를 하나씩만 넣었다.
</header>
</div>
<!--header 밑에-->
<div id="slider"><!--slider전체의 공간을 주기위해 div로 감쌌다.-->
<h3 class="hidden">슬라이더 메뉴</h3>
<div><!---->
<p>이미지에서 텍스트를 인식하는 기술<br />클로바OCR</p>
<a href="https://clova.ai/speech" target="_blank">자세히 보기</a>
<video loop muted preload="auto" autoplay style="width:100%">
<source src="https://static-clova.pstatic.net/static/public/video/CH_OCRmain.mp4" type="video/mp4">
<!--video의 소스는 네이버 클로바에서 가져온것이다. 배경이 비디오 이므로 video태그를 이용해 자동 재생하도록 하였다.-->
</video>
</div>
</div>
<!--main 위에-->
<main>
<section>
<h2 class="hidden">본문</h2>
작업 전
밑의 작업 후 와 비교해볼 때 어떤 속성을 적용해야 할지 생각해보자
1. slider의 공간이 생겼다
=> 기본 공간, margin, padding을 조사하고 값을 적용해 준다.
2. 공간들의 위치를 지정해 준다. 비디오 안에 텍스트가 들어가 있다.
=> margin 또는 padding으로 가능한 것은 그것으로 지정해준다.
그 외의 것은 position을 적용해준다.
3. 텍스트 색, 크기, 간격이 적용되었다. 테두리가 적용되었다.
=> color, font-size, letter-spacing, text-align, line-height , border를 지정해준다.
4. 자세히 보기에 마우스를 갖다 대면 배경색이 바뀐다. 하단의 메뉴 바를 클릭하면 배경색이 바뀐다.
=> a:hover를 이용하여 바꾸어 주도록 한다.
=> a:visited를 이용하여 바꾸어 주도록 한다.
background-color
5. 하단의 메뉴 바의 위치를 지정해 준다.
=> 각각의 메뉴들이 서로 동일하게 떨어져 있고 배경은 동일하게 가지고 있다.
따라서 각각의 메뉴에 id값을 주어 margin값을 준다.
작업 후
원본과 비교
id값 지정 및 선택자 적기
hmtl의 slider부분
<div id="slider">
<h3 class="hidden">슬라이더 메뉴</h3>
<div>
<p>이미지에서 텍스트를 인식하는 기술<br />클로바OCR</p>
<a href="https://clova.ai/speech" target="_blank">자세히 보기</a>
<video loop muted preload="auto" autoplay style="width:100%">
<source src="https://static-clova.pstatic.net/static/public/video/CH_OCRmain.mp4" type="video/mp4">
</video>
<div id="menus">
<a href="#" id="menu1"></a>
<a href="#" id="menu2"></a>
<a href="#" id="menu3"></a>
<a href="#" id="menu4"></a>
<a href="#" id="menu5"></a>
</div>
</div>
</div>css의 slider부분
/*slider*/
#slider {}
#slider div p {}
#slider div a {}
#slider div a:hover {}
/*하단의 메뉴바*/
#slider div div a {}
#slider div div a:visited {}
#menu2 {}
#menu3 {}
#menu4 {}
#menu5 {}1. & 2. slider의 공간이 생겼다. 공간들의 위치를 지정해 준다. 비디오 안에 텍스트가 들어가 있다.
작업 후
이미지를 video태그 안에 넣고 제일 우선으로 보이게 하기 위해 새로운 속성을 배우게 되었다.
/*slider*/
#slider {
width: 100%
}
#slider video{
vertical-align: middle;
}
#slider div p {
width: 560px;
position: absolute;
top: 248px;
left: 674px;
z-index: 1;
}
#slider div a {
display: block;
width: 141px;
height: 50px;
position: absolute;
top: 387px;
left: 880px;
z-index: 1;
}
#slider div a:hover {}
/*하단의 메뉴바*/
#slider div div a {
display: block;
width: 40px;
height: 1px;
position: absolute;
top: 640px;
left: 831px;
z-index: 1;
}
#slider div div a:visited {}
#menu2 {}
#menu3 {}
#menu4 {}
#menu5 {}
작업 내용(모든 공간들은 원본 페이지에서 참고할 수 있다.)
-
width와 height를 사용하여 기본 공간을 지정해 주었다. (a요소에 공간을 지정하려면 display:block;잊으면 안 된다.)
-
비디오 태그 안에 텍스트를 넣기 위해서는 margin을 사용할 수 없었다
margin을 사용하면 텍스트들이 비디오 밖으로 튀어 나가기 때문이었다.
따라서 #slider div p, #slider div a, #slider div div a에 각각의 position과 그 값을 주었다. - vertical-align을 사용하여 video태그 밑의 공간을 없애 주었다.
높이가 따로 정해져 있지 않고 나중에 나올 하단 메뉴바의 테두리 공간이 div태그의 공간을 차지하기 때문에
video 밑으로 빈 공간이 튀어나온다. vertical-align으로 인라인 요소를 중간으로 잡아주어 그것을 방지한다. - 여기서 새로 배운 z-index를 활용한다.
z-index란 레이어 들에게 순서를 정해주는 속성이다.
ex) video레이어와 text레이어의 순위를 조절해서 video안에 text를 집어 넣었다.
3. & 4. 텍스트 색, 크기, 간격이 적용되었다. 테두리가 적용되었다. 자세히 보기에 마우스를 갖다 대면 배경색이 바뀐다. 하단의 메뉴 바를 클릭하면 배경색이 바뀐다.
작업 후
거의 완성되어 간다.ㅎ
/* slider */
#slider {
width: 100%;
}
#slider div p {
width: 560px;
letter-spacing: -5px;
position: absolute;
top: 248px;
left: 674px;
color: #fff;
font-weight: 900;
font-size: 39px;
text-align: center;
z-index: 1;
font-family: sans-serif;
}
#slider div a {
display: block;
width: 141px;
height: 50px;
border: 1px solid #fff;
border-radius: 28px;
position: absolute;
top: 387px;
left: 880px;
z-index: 1;
color: #fff;
font-size: 15px;
font-weight: 700;
text-align: center;
line-height: 50px;
}
#slider div a:hover {
background-color: rgb(73, 231, 146);
border: 1px solid rgba(228, 230, 202, 0);
}
#slider div div a {
display: block;
width: 40px;
height: 1px;
position: absolute;
top: 640px;
left: 831px;
z-index: 1;
background-color: rgba(119, 116, 116, 0.5);
border: 1px solid rgba(252, 252, 247, 0);
}
#slider div div a:visited {
background-color: #fff;
border: 0;
}
#menu2 {}
#menu3 {}
#menu4 {}
#menu5 {}
작업내용
- 헤더의 배경색을 임의로 바꾸었다. 아쉽게도 헤더를 배경과 겹치게는 하지 못하였다.
- color와 font-size, font-weight, font-famliy를 이용하여 글자의 색과 크기, 굵기, 글꼴을 바꾸어 주었다.
p, a에 각각 적용 - text-align과 line-height를 이용하여 글자들을 중앙 정렬해 주었다.
- border와 border-radius를 이용해 자세히 보기에 테두리를 적용해 주었다.
또한 하단의 메뉴바에도 테두리를 적용해 주었다. - a:hover와 a:visited 선택자를 이용해 각각의 a태그에 마우스를 갖다 대거나 클릭했을 때
배경색(background-color)과 테두리(border)를 바꾸어주었다.
5. 하단의 메뉴 바의 위치를 지정해 준다.
작업 후
완성이다.
#slider div div a {
display: block;
width: 40px;
height: 1px;
position: absolute;
top: 640px;
left: 831px;
z-index: 1;
background-color: rgba(119, 116, 116, 0.5);
border: 1px solid rgba(252, 252, 247, 0);
}
#slider div div a:visited {
background-color: #fff;
border: 0;
}
#menu2 {
margin-left: 50px;
}
#menu3 {
margin-left: 100px;
}
#menu4 {
margin-left: 150px;
}
#menu5 {
margin-left: 200px;
}작업 내용
- 원래 겹쳐져 있던 menu바들에게 margin-left값을 적용해 주어 서로 떨어지게 끔 만들었다.
slider부분을 마무리해 보았다.
공감 또는 훈수 부탁드립니다.(내가 그걸 모를 꺼 같니?? 라던가 응 아니야~이거야~ 해주세요)
그럼~ 앙 제바
'IT아카데미 > 정적 웹사이트 만들기(실습)' 카테고리의 다른 글
| 네이버 클로바(Naver Clova copy) -사이트 카피 header (0) | 2020.05.18 |
|---|---|
| 네이버 클로바(Naver Clova copy) -사이트 카피 css 초기화 (0) | 2020.05.17 |
| 네이버 클로바(Naver Clova copy) -사이트 카피 (0) | 2020.05.14 |
