카테고리 없음
CSS visual 부분 정리
selfstarter
2020. 1. 1. 12:30
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;}