본문 바로가기

분류 전체보기

 (207)
button, input, textarea의 font-family body에 font-family를 줘도 button이나 input, textarea에는 폰트가 안먹고 system ui 그대로일 수 있으니 따로 font-family 한번 더 선언해 줄 것.
열거한 아이템들 사이 CSS로 ·(점) 넣기 span::after { content: "·"; margin: 0 6px; } span:last-child::after { content: ""; margin: 0; } ::after로 만든 요소는 inline > margin top/bottom은 가질 수 없어도 margin left/right은 가질 수 있으니 margin: 0 6px 괜찮다 열거된 아이템 마지막에는 점을 넣고 싶지 않으니까 span의 가장 마지막 child의 뒤에는 content 없애버림.
.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를 빼먹으면 경우에 따라 화면 전체가 배너로 뒤덮일 수도..)
이미지 (image) 참고 developer.mozilla.org/ko/docs/Web/HTML/Element/img : 이미지 삽입 요소 HTML img 요소는 문서에 이미지를 넣습니다. developer.mozilla.org src - 필수 속성. - 포함하고자 하는 이미지 절대/상대 경로를 넣어준다. alt - alt 필수는 아니지만 항상 값을 넣어줄 것! - 이미지 컨텐츠를 간단 명료하게 설명하는 텍스트 (이미지 유/무, 파일 이름 그 자체를 넣어서는 안됨) - 스크린 리더가 alt의 값을 읽어 사용자에게 이미지 설명 => 접근성을 높을 수 있음 - 네트워크 오류, 콘텐츠 차단, 죽은 링크 등 이미지를 표시할 수 없는 경우에도 이 속성의 값을 대신 보여줌. - alt 속성을 아예 적어주지 않으면. '이미지가 콘텐츠에서..

티스토리툴바