0217/CSS

쌍용교육센터에서 공부한 내용을 정리하며 기록하는 글이고 주관적인 생각이 들어갈 수 있습니다.
잘못된 내용이나 피드백 및 생각 공유는 언제든 환영입니다.
댓글로 남겨주시면 확인 후 수정하겠습니다.
내용에 대한 소스 코드는 https://github.com/2jaehoon/html에 올려두었습니다.

 

마우스 포인터

  - cursor:값;( pointer, crosshair, progress, move, wait... )

 

스크롤 바 설정

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

    보여지게 된다.( 영역보다 큰 데이터를 영역 안에서 보여줄 때 사용 )
  - 주로 약관을 만들 때 사용
  - overflow:auto;( 데이터가 영역보다 많다면 영역 안에서 스크롤 바를 제공 )

 

디자인설정

  - position 속성을 사용

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

  - position: 값;

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

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

    top:값;( x좌표 값 )

    left:값;( y좌표 값 )

 

일반적인 웹사이트 형태

 

HTML5 디자인태그

  - 의미적인 태그( 가독성 상승 )

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