visibility
기본 값은 inherit
문서의 레이아웃의 변경 없이 요소를 숨기거나 보이게 설정하는 태그의 가시성을 결정
visibility: visible; /* 보이게 설정 */
visibility: hidden; /* 자신의 영역은 그대로 차지하지만 보이지 않음 */
visibility: collapse; /* 겹치도록 지정 (테이블의 행과 열 요소만 지정 가능 그 외의 요소는 hidden으로 해석) */
visibility:inherit; /* 부모 요소의 값을 상속 받음 */ 잘 안쓰이지만
table에서 사용
overflow
기본값은 visible
요소의 컨텐츠가 요소의 블록을 넘어가는 경우의 처리 방법
overflow: visible; /* 넘어가는 요소를 자르지 않고 보이게함 */
overflow: hidden; /* 넘어가는 요소를 박스 크기에 맞춰 숨김 */
overflow: scroll; /* 넘어가는 요소를 박스 크기에 맞춰 잘라내고 스크롤로 볼 수 있게함 x, y 지정 가능 */float
보통 텍스트와 이미지가 같이 존재하는 박스에 사용
float: left; /* 오른쪽 기준으로 이동하며 왼쪽에 텍스트를 채울 수 있음 */
float: right; /* 왼쪽 기준으로 이동하며 오른쪽에 텍스트를 채울 수 있음 */
float: none; /* 요소를 문서의 흐름으로 배치(왼쪽)하며 오른쪽에 텍스트를 채울 수 없음 */CSS TIP
- margin 겹침 현상
margin을 적용했는데 원하는 간격이 나오지 않습니다.
margin을 적용했는데 원하는 간격이 안 나온다면 요소들끼리 margin이 겹쳐있을 확률이 매우 높다.
더 큰 값의 margin을 적용하기 때문이다.
시각적으로 보이지 않는 텍스트와 시각적으로 보이는 텍스트의 마진 값은 다르게 적용한다.
ex) border: 10px solid red를 텍스트에 적용했을 때와 아닐 때의 차이가 나타남
- 상속
알고 넘어가야 할 부분 상속
어떤 속성들은 부모 태그에 특정 값을 적용하면 자식 태그(하위 태그)에도 해당 속성들이 전달되기도 한다.- 속성:inherit을 사용하면 강제로 부모의 속성을 상속받을 수도 있다.
- -prefix-
가끔 개발자 도구로 다른 개발자분들의 코드를 살펴볼 때 발견되는 prefix가 붙은 속성
해당 속성은-webkit-: 크롬, 사파리, 오페라,-moz-: 파이어폭스,-ms-: IE 또는 Edge등의 브라우저에 탑재된 엔진으로, 해당 엔진을 사용하는 브라우저에서만 작동하는 속성이라는 의미- 주로 아직 표준화가 되지 않은 새로운 기능들의 속성이 prefix를 사용한다.
- 단축 속성 Shorthand Properties
자주 사용하는 *padding, border, background등의 속성은 단축 속성을 사용할 수 있다. 해당 방법은 css 파일의 용량을 줄이는데 용이하다.div { padding-top:10px; padding-right:20px; padding-botton: 10px; padding-left:20px; /* padding: 10px 20px */ }
- media 쿼리
반응형을 만든다면 모바일 먼저 고려하는게 좋다.@media (min-width: 600px) { /* 해당 코드는 600px 이상의 모든 디바이스에 해당 스타일을 부여한다는 의미 */ }
둡둡