CSS (48) 썸네일형 리스트형 .sr-only 스타일링 display:none을 해버리면 편할 것 같지만 display:none의 치명적 단점은 screen reader마저도 저 요소가 존재하지 않는 요소라고 생각해서 읽어주지 않는다. 그럼 sr-only를 만드나 마나...하게 됨 .sr-only{ position:absolute; z-index:-100; } position:absolute를 주면 아예 집나간 자식이 되서 부모 요소는 이 친구가 어디 갔는지 모르고 형제들도 모름.. 그리고 z-index를 줘서 아주 아래로 꺼져버리게(.. )만들었다. 이것만으로 부족하다고 생각이 된다면 .sr-only{ position:absolute; z-index:-100; width:1px; height:1px; overflow:hidden; opacity:0; } w.. 작은 아이콘, 이모지가 옆의 글자들과 높이 맞춰주기 .badge{ position:relative; top:2px; } position:relative -원래 자신의 위치 기준. -뒤에 따라오는 다른 요소에 영향을 미치지 않음 옆에 따라오는 text에 비해 넣어준 아이콘이나 이미지가 너무 위에 있으면 position:relative를 이용해서 top,bottom,right,left 조정을 살짝씩 해준다. 세로가 긴 이미지, 가로가 긴 이미지 div에 맞추기 .img-container { width: 300px; height: 200px; display: flex; justify-content: center; align-items: center; overflow: hidden; } .img-container img.vertical { width: 100%; height: auto; } .img-container img.horizontal { width: auto; height: 100%; } 임의로 가로 300px 세로 200px인 div에 딱 맞는 이미지를 넣으려고 할때 (마치 배경이미지처럼) div보다 세로가 긴 이미지인 경우 (.vertical) width:100%주고 height는 자기가 원래 가지고 있는 비율대로 나오게 하기 위해 auto를 준다. .. width:100%; max-width:736px; width:100%를 주면 화면의 사이즈가 커지면 커질 수록 그에 맞춰 너비도 100% 채울 수 있게 계~~속 늘어난다. 그런데 계~~속 늘어나다가 element의 너비가 736px이 되면 거기서 멈춤. 화면이 아~~~무리 커져도 element가 가질 수 있는 최대 너비는 736px; 화면 사이즈가 736px보다 작을 때는 element의 너비가 화면을 꽉 채우지만 (100%) 화면 사이즈가 736px보다 더 커지면 (화면이 아~~~무리 커져도) element의 너비는 736px보다 더 커지지 않는다. (+화면 사이즈가 736px보다 더 커졌을 때, element의 배치는 padding이나 margin 등의 속성을 넣어서 잘,, 알아서,, 스타일링..) position:fix인 배너 bottom:0(모바일) -> top:0(데스크탑)으로 갈 때 모바일에서 하단에 위치한 배너 .elem{ position:fixed; bottom:0; left:0; } 미디어 쿼리를 써서 데스크 톱에서는 상단에 위치시키고 싶을 때 @media screen and (min-width:768px){ .elem{ top:0; bottom:auto; } } element를 배치시킬때 top과 bottom 둘 중 하나 + right과 left 둘 중 하나를 써서 배치시키는데 위에서는 bottom을 썼고 아래 미디어 쿼리에서는 top을 써야할 때, bottom을 풀어줘야한다. 이때 bottom:auto를 써주면 알아서 높이 설정 됨 (bottom:auto를 빼먹으면 경우에 따라 화면 전체가 배너로 뒤덮일 수도..) position:absolute;의 기준점 부모는 position:static만 아니면 된다. position:absolute의 기준점이 되는 요소는 position: relative, absolute, fixed, sticky 다 가능. position: static만 아니면 된다. 참고 developer.mozilla.org/en-US/docs/Web/CSS/position position The position CSS property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements. developer.mozilla.org 모달(modal) viewport 중앙에 위치 시키기 body{ width:100%; height:100vh; } .modal{ position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); } input, button 못생긴 테두리 없애기 input, button{ border:none; /*border-radius:4px 가능 */ } input:focus, input:active, button:focus, button:active { outline: none; box-shadow: none; } 이전 1 2 3 4 5 6 다음
