0217 국비 수업 CSS 마우스 포인터 스크롤바 디자인 설정(position, fixed, absolute, relative) 좌표 설정(top,left) HTML5 디자인 태그

*마우스 포인터

 cursor:값; // pointer, crosshair, progress, move, wait,,,,

 

---

*스크롤 바 설정

 -개발자가 설정한 넓이와 높이보다 데이터 많다면  데이터를 영역을 빠져 나가서 보여짐

=> 영역보다 큰 데이터를 영역 안에서 보여주기

 

- 주로 약관을 만들 때 사용

  overflow:auto; 

=> 데이터가 영역보다 많다면 영역 안으로 들어가면서 스크롤 바를 제공
  

---

*디자인 설정

 -position 속성을 사용

모든 대상을 원하는 위치에서 보여줄 수 있음

   position: 값;

 

 

• fixed :  고정 좌표
  스크롤 바가 움직이면 설정된 좌표를 스크롤 바에 맞게 수정함
  (스크롤 바가 움직이면 대상의 좌표가 변경되어 따라옴)
  relative에 영향을 받지 않음
  
  
• absolute : 절대 좌표
  스크롤 바가 움직여도 설정된 좌표 값이 변하지 않음
  스크롤 바가 움직여도 좌표가 변경되지 않으므로 따라오지 않음
  시작 좌표가 relative에 영향을 받음
  
  
• relative : 상대 좌표
  absolute의 시작 좌표를 변경할 때 사용함

 

 

- 좌표 설정 : top 속성 left 속성으로 좌표를 설정

• top: 값; //x좌표값 
• left :값;  //y좌표값
  
  
  

---

*wrap, header, container, footer

 

 

• wrap 
  디자인에 사용된 div를 묶는 용도
  
  
• header
  사이트로고, navigation bar
  
  
• container, content
  사용자에게 제공할 서비스
  
  
• footer
  기업정보,개인정보보호정책

---

 

 

---

*HTML5 디자인 태그
 - 의미적인 태그

 

• <header> - 페이지 구조상 header 부분
• <nav> - navigation bar 부분
• <section> - 게시글(<article>)의 모임
• <article> - 게시글 모임
• <footer> - 페이지 구조상 footer 부분
• <aside> - 본문 이외의 추가할 내용