[마우스 hover 을 이용한 효과 #1. html 뼈대 만들기]

목표 

1. 세개의 다른 이미지 

2. 사진 갤러리 처럼 옆으로 나란히 보여지게 

3. 한개의 사진에 마우스를 올리면 텍스트가 나타나는 방식으로 

4.  위 -> 아래로 내려오는 텍스트 1개 

5. 아래 -> 위 올라오는 텍스트 1개  그렇게 해서   1개의  div 값에 총 2개의 class 가 넣어져 있어야 함

 

 구역 나누기 

 

 

1. 전체를 하나의 div 의 값으로 지정을 해준다 . 

<div class ="box" > 로  지정해 주었다. 

 

2 . class box 안에 순서를 나타내는 

<ul> 의 값 그 안에 

  <li> 값을 넣어 주었다. 

 

3. <li> 태그 안에 <a href=""> 를 넣어주고  한개의 이미지 안에 들어갈 

텍스트를 전체로 생각하고  그 전체를  <div> 구역이라 생각한다. 

그러면 1개의 사진에 나오는 전체 텍스트  div 값의 이름을 <div class = "screen" > 이라고 지정

 

4. 이제 이 screen 의 클래스 안에 

상세 텍스트의 구역 (div class) 값을 지정해준다 .

위에서 나타나는 텍스트 <div class="top">

아래에서 나타나는 텍스트 <div class="bottom">

 

5. 이미지 위에 텍스트 요소가 나타나야 하니 

이미지는 맨 하위에 있어야 한다 .

고로 <div class = bottom > 아래 

<img src="./폴더이름/파일이름"> 을 넣어준다. 

 

6. 이렇게 1개의 <a> 의 값이 지정된거다. 그럼 이제 <a> 태그 하위에 있는 태그 복붙. 

 

 

- 태그 적용 사진 -