CSS visual 부분 정리

visual 부분

• visual 부분은 section 태그로 감싼다
• section은 영역을 나누는 것이기 때문에 여러번 나올 수 있다
• 코딩은 제어할 수 있는 부분부터 작업하는 게 좋다(기능, 이벤트)
• 반복되는 코드는 묶어준다. 일단 공통점을 찾아라(<, > 화살표, 같은 css 메뉴)
• 퍼블리싱의 잘함의 기준은 코드량(같은 걸 표현하더라도 얼만큼 적고 효율적으로 작업하는 가?)

inline-block 여백 처리

• font size를 0으로 준다(ul의 li가 inline 되면서 발생)

  .visual .control ul {font-size:0;}

overflow:hidden

• overflow 속성은 요소의 크기보다 안의 글자가 더 길 때 어떻게 보이는 설정
• visible : 그대로 보임
• hidden : 내용이 크기를 넘으면 자름
• scroll : 내용이 크기를 넘치지 않아도 항상 스크롤바를 생성함
• auto : 내용이 잘릴 때 스크롤바를 생성함

  overflow:hidden

background-position

• 배경의 위치를 지정
• background-position : 가로 위치 세로 위치

  .visual .control > div > div a.play {background-position: -108px -72px;}

화면 크기 변화

• 화면 크기가 변할 수 있으므로 px대신 %를 쓰도록 한다

  .visual .con .slide .txt {position:absolute; left:750px; top: 400px;}