CSS/learned_it_today (34) 썸네일형 리스트형 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; } position:absolute인 요소를 수직 정중앙에 배치하기 .parent{ position:relative; } .parent .child{ position:absolute; top:50%; transform:translateY(-50%); } 기준점 삼고 싶은 부모 요소에 position:relative를 준다. 그 부모 요소의 수직축 기준으로 정중앙에 위치시키고 싶을 때, position:absolute;를 주고 top:50%;를 주면 부모의 height기준 정중앙인 지점부터 시작해서 자식 요소가 배치된다. 그러면 내가 원하는 위치보다 child 요소가 아래로 내려가있는 것을 확인할 수 있다. 이 문제를 해결하기 위해서 사용하는 속성이 transform이다. transform에는 rotate, scale, translate 같은 함수가 와서 원하는 요소를 회.. 부모 요소(element) 속 이미지 크기 맞추기 부모 요소(element)의 width를 설정해도 이미지는 자체 width와 height가 있기 때문에 이미지는 (거의 항상) 부모 박스를 삐져나온다. 이때 자주 쓰는 CSS 속성 조합은 .parent{ width:400px; } .parent img{ display:block; width:100%; height:auto; } 이렇게 부모 element에 원하는 너비를 준다. img는 inline요소이긴 하지만 원래 자체 너비와 높이가 있어서 높이, 너비 조정이 가능하지만 좀더 정확성을 기하기 위해서 display:block을 준다. 그 후에 width:100%를 주면 부모 요소의 너비의 100%를 차지하고 height:auto를 주면 원래 이미지가 가지고 있던 비율에 맞춰서 자동으로 높이가 조절된다. 선택된 메뉴에 border-bottom, font-weight을 주고 싶을 때 li에? a에? .menu-item.selected{ font-weight:500; border-bottom:1px solid #2860e1; } 이 경우는 a에 주든 li에 주든 상관 없다 이전 1 2 3 4 5 다음
