뷰포트

[TIL] CSS 정렬, 반응형

✍ Today I Learned 오늘도 내비게이션 바와 아웅다웅하며 알게 된 것들 내비게이션 바 오른쪽 정렬하면 콘텐츠 내용 계속 바뀌던 거 에 display: inline; 설정으로 해결 내비게이션 바의 height이 정해져 있으면 line-height 똑같이 설정해서 수직정렬 높이를 굳이 지정하지 않았으면 padding으로 수직정렬 에 vertical-align: middle; 설정 vertical-align은 오로지 inline과 table-cell element에만 적용된다. (block level element에 사용 X) 예를 들면, img element를 text element 라인 속에서 정렬할 때 쓰인다. (참고자료) float으로 한쪽 정렬을 하지 않으면 아주 미세한.. 이상한 마진이 ..

[CSS] background img 꽉차게 채우는 법

배경 이미지를 화면에 꽉 차게 채워야 하는 경우가 종종 있다. 원하는 조건은 다음과 같다. 화면에 보이는 전체 페이지를 여백 없이 이미지로 채우기 필요에 따라 이미지 크기 조정 이미지의 중앙 부분 no 스크롤바 여러 방면으로 시도해 본 결과 2가지 방법이 가장 유용했다. 1. 태그 이용하기 html { background: url(img.jpg) no-repeat center fixed; background-size: cover; } 태그는 최소한 브라우저 창의 높이다. backgroun 속성은 background에 관련된 속성 값을 한 번에 적을 수 있다. 순서대로 background-repeat, background-position, background-attchment background-size:..