HTML에서 기본이고 중요하다고 생각되고 어려운 게 구조 짜는 거 인 것 같다...
구조를 잘 짜였다고 생각했는데 막상 해보면 난항이 있을 때가 있다.
그리고 어쩔 때는 아예 '어떻게 하면 되지'라고 구조만 생각한 적도 있다.
강사님 말대로 구조를 짜는 거를 생활화해 보아라라고 말씀하셨는데....
지금까지 그냥 흘러가는 포스터, 영상, 홈페이지 였는데 막상 구조를 보려고 하니
어렵게만 느껴지는 것 같다...
그래도 꾸준히 해볼 것이다.
※구조실습 (홈쇼핑 fornt 페이지)
# 결과 값: 기본값 1.
#1번 그림 결괏값 맨 왼쪽 위칸에 위치한 그림 눌렀을 시 이미지확대됨.
#2번 그림 클릭 시 배경색 검은색계열의 투명색 되고 흰색박스
나타남.
1) 우선 큰 틀로 ID(wrap) 안에 header 클래스와 container 클래스로 나눌 것이다.
2) header 클래스 안에 logo라는 클래스의 (그림상 핑크박스)를 만들고 중앙에 위치시킬 것이다.
- position으로 left , top 값을 주고 중앙으로 옮겨도 되고
- magin 100px auto로 중앙에 위치시킬 수 있을 것이다.
3) header클래스로 밑줄을 생기게 해 줄 것이다 ( border-bottom)
4) 이제 container 몸통 부분으로 넘어가서 container 자체에 width 1185px과 height 880px (실제 그림과 맞는 사이즈)를 주고 margin auto로 중앙 부분을 맞춰줄 것이다.
5) 그림상 보면 세로로 한번 구조를 2개로 나누어서 왼쪽을 l_col_item과 r_col_item으로 나눌 것이다 (가로로 나누어도 된다)
6) l_col_item에 위에서부터 그림 1,2 (lg1, lg2)를 선언해 주고 그 이미지에 맞는 가로*세로 을선언 후 그림을 불러올 것이다.
7) r_col_item에 위와 마찬가지로 그림들을 오른쪽으로 순서대로 선언해 줄 것이다.
여기에는 그림들이 오른쪽으로 위치해 있으니 가로 *세로 값을 잘 정해주고 float:left을 활용해 정렬해 줄 것이다.
8)그리고 이미지들을 공통적으로 약간의 흰색 테두리를 주기 위해서 box-shadow: 0 0 0 5px red 왕같이 박스쉐도우의 테두리 부분에 5px를 줄 것이다 (여기서 border를 안 쓰는 이유는 이미지 사방에 테두리를 주면 겹치는 부분이 생기기 마련인데 겹치는 부분은 바깥쪽보다 2배로 두꺼울 것이다. 하지만 box-shadow는 겹치는 부분이 있으면 그림자로 겹치기 때문에 안쪽 부분도 바깥쪽처럼 똑같은 테두리가 나올 것이다)
9) 이렇게 구조를 완성했으면 css를 활용해 위에 이미지와 같이 1번 그림을 눌렀을때 확대대는 효과를 줄 것이다
-간단하다 우선 url 구조로 짠 이미지는 그 div이미지태그를 눌렀을 시 (hover 하면) cover에 부분을 지우고 110% 라고 기존 이미지 크기보다 더 높여서(구조가 깨지지 않는 선에서) 정하면 될 것이다.
10) 2번째 그림은 눌렀을 시 파란색 박스테두리가 생기고 검은색계열의 투명도와 안에 white 테두리계열의 박스가 생길 것이다.
- b_pan , w_box라는 클래스 네임을 가진 클래스들을 2번째 이미지 안에 만들 것이다.
- w_box에 white 테두리 계열의 박스를 만들고 position을 이용해 b_pan박스 안에 중앙에 위치시킬 것이다.
- b_pan박스는 2번째 그림에 위치하면 display:none으로 안에 w_box와 사라지게 할 것이고
-2번째 그림을 :hover 했을 시 b_pan이 display:block; 으로 다시 나타나게 할 것이다.
#그리고 파란색 테두리는 border부분의 테두리(자기 자신의 테두리)가 아닌 box-shadow의 테두리(바로 옆의 박스의 테두리 그림자) 이기 때문에 뒤에 감춰져 있는 테두리가 나오기 위해서 z-indext를 정수값으로 줘야지 앞으로 보일 것이다.
그래서 2번째 그림을 :hover 할시 z-index:999; 로 뒤에 그림자에 가려진 그림자테두리가 앞으로 나올 것이고 여기다가 box-shadow 0 0 0 5px blue ; 로 (눌렀을 시) 나오는 테두리 색을 정해줄 것이다.