HTML & CSS9 [CSS] position: absolute 가운데 정렬 시키기 left: 50%; top: 50% 준 후에 transform을 이용해 요소 크기 만큼 보정 하기 .contents { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } 높이값은 지정하고 좌우만 가운데 정렬할 경우. .contents { position: absolute; left: 50%; top: 300px; transform: translate(-50%, 0); } 2023. 3. 13. [HTML&CSS]img 태그 src가 없을때 기본 이미지 표시하기 img 태그 안에 onerror="this.src='default 이미지 주소' "를 추가하면 된다. onerror='주소'만 추가해도 된다고 하지만, 이상하게도 적용되지 않았다. 혹시 저처럼 안되는 경우에 this.src=''를 사용해보기를 바란다. 1 cs 2023. 3. 5. [CSS]IMG를 수직 중앙 정렬 시키기 wrapper에 line-height 값을 지정하고 img에 vertical-align:middle; 을 지정한다. 예시 : .press-img-wrapper { position: relative; width: 200px; height: 200px; line-height: 200px; } .press-img { width: 100%; vertical-align:middle; margin: 0; } 2023. 2. 17. img 태그 width 값과 화질에 대한 아주 짧은 분석 이미지 순서대로 (1) 원본(width 205px)의 이미지를 width="105" 설정 (2) 원본(width 105px)의 이미지를 width="105" 설정 (3) 원본(width 105px)에 width 값 옵션 없이 설정 1. 원본 105px 이미지를 그냥 표시하는 것과 width="105px" 지정하는 것은 차이 없음 2. Duolac BI의 경우 205px을 105px로 줄인 이미지 보다 105px로 줄인 이미지 화질이 선명함 3. Lactoclear의 경우 반대로 205px을 줄인 이미지가 더 선명한 느낌 경험상 이미지는 width 값 변경없이 표시하는게 왜곡 없이 깔끔하나, (Duolac) 그렇다고 큰 원본 이미지를 포토샵 등에서 줄일 경우 왜곡이 발생할 여지가 있음 (Lactoclear) 2023. 1. 13. 이전 1 2 3 다음
