여행자의 책

헤더의 경우, 반응형으로 디자인 할 때 화면 사이즈 변경시 이미지 높이 변화없이 이미지의 중앙만 보여줘야 할 때가 있다. 본래의 경우 화면크기가 줄어들면서 이미지 크기가 비율에 맞게 줄어들거나 아래와 같은 조건을 주면 img{ display:block; margin: 0 auto; } 하지만 이렇게 해준다면 오른쪽부터 사라지도록 되어 있다. 하지만 헤더의 특정 영역에 화면에 크기에 관계없이 반드시 노출되어야할 이미지나 로고 있다면 위와 같은 방식으로는 조금 어려울 것이다. 오늘은 화면 사이즈 변경시에도 이미지의 중앙을 보여주는 css를 알아 보겠다. body 태그 내의 코드는 다음과 같다. 이 상태에서 css는 다음과 같다. .img-container-size{ position: relative; wid..

웹에서 화면 비율을 이것저것 맞춰보고 모바일로 넘어가서 확인 보는데 다 맞는데 가로전환했을 때 이상하게 뜨는 경우가 있다. (그게 바로 내 경우다..) 아래의 미디어 쿼리의 orientation property를 이용해 가로 전환의 경우에 css를 바꿔주면된다. #가로 모드일 때 @media(orientation: Landscape){ body { padding-top:100px; margin-right:20px; margin-left:20px; } } #세로 모드일 때 @media(orientation: Portrait){ body { padding-top:100px; margin-right:20px; margin-left:20px; } } css는 프로그래밍언어가 아니다... 수십번 되뇌인다...

textarea관련해서 자주사용하는 style과 스크립트 코드를 정리해두었다. 1. 글자 간격 조절 textarea{ line-height: 20px; } 2. 테두리 제거 textarea{ border: none; } 3. 포커싱 되었을 때 테두리 제거 textarea:focus{ outline:none; } 4. 줄 바꿈시 높이 변경