Html&css
-
cssbackground-image 한 클래스에 여러개 넣기Html&css 2024. 7. 19. 09:40
.class { width: 100%; height: 100vh; /* or any other appropriate height */ background-image: url('imges1.png'), url('imges2.png'), url('imges3.png'); background-position: left 0 top 143px, left 0 top 455px, right 0 bottom 0; background-size: 152px 243px, ..
-
active 되는 border의 px이 다른 경우 width값 유지하는 방법Html&css 2024. 6. 25. 13:38
상황= 글씨에 따라 width가 늘어나야해서 width를 지정하지 못하는 경우.=> border:2px solid #4C71EA; 그대로 넣으면1px이던 border가 active가 붙으면서 2px이 되기 때문에 width가 달라지는 이슈 발생. 해결방법 { border: 1px solid transparent; outline: 2px solid #4C71EA; color: #4C71EA;}border 1px solid에 투명도를 주고 ( border 두께 변경 시 영향을 줄이기 위해 투명하게 설정)동시에 outline에 내가 원하는 두께와 색상을 넣어주면 border은 그대로 1px이 유지 되면서, 색상과 두께가 달라진다 !+outline으로 생기다 보니, 간격이 줄어들 수 있어서 이런 경우 사이사이..
-
각 운영체제에서 스크롤바 숨기기Html&css 2023. 2. 14. 13:59
.scroll-x { overflow-x: auto; overflow-y: hidden; white-space: nowrap; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; scrollbar-width: none; } .scroll-x::-webkit-scrollbar { display: none; } 1. -webkit-overflow-scrolling: touch; -모바일 환경시 가로스크롤이 터치되며 가속 2. -ms-overflow-style: none; -IE 스크롤바 감추기 3. scrollbar-width: none; -firefox 스크롤바 감추기 4.::-webkit-scrollbar {display: none;} -chrom..
-
사용자 접근성을 고려한 '스크린 리더'Html&css 2023. 2. 13. 22:16
접근성은 중요합니다 🔊 "접근성은 중요합니다" 접근성은 중요합니다 🔊 "A11Y는 중요합니다" 왜 이런 결과가 나타날까? = Accessible Name 1. author: 특별한 속성을 사용해서 정하는 값 (aria-label, aria-labelledby,alt) 2. contents: 요소의 텍스트값 *우선순위: author > contents .sr-only { overflow: hidden; position: absolute; clip: rect(0, 0, 0, 0); clip-path: polygon(0 0, 0 0, 0 0); width: 1px; height: 1px; margin: -1px; white-space: nowrap; } -role >button role span1 span2 ..
-
form 태그 사용Html&css 2023. 2. 6. 14:36
ID : PW : -> action: 내가 로그인 한 정보가 어디로 가야하는지 정보를 넣어주면 된다 ex)result서버주소 & db가 모이는 파일 주소 method: 어떠한 방식으로 form태그의 방식을 전달할 지 결정 해 주는 속성 -method 사용 가능 벨류 get,post (put.delete form태그에선 사용 불가능) 1.get : 사용자가 입력한 정보를 url에 표현해준다 / ?를 분기로 정보를 출력함 ex) id=123 pw=123 2.post : 사용자가 입력한 정보를 url에 표현하지 않는다. (서버에 요청을 보내는 방식) placeholder : id나 password를 입력하기 전 사용자에게 요구해야 하는 동작을 텍스트로 알려줌. input type -submit (버튼을 만들어..
-
css의 gridHtml&css 2023. 2. 2. 18:28
grid-template-columns : 그리드의 세로기준 grid-template-rows : 그리드의 가로 기준 grid-template-areas: 그리드의 위치지정 grid-areas: 저장한 위치값 설정 grid-gap : 그리드 사이의 공간 > grid-template-columns,rows .container { display: grid; grid-template-columns: 1fr 1fr; //1fr 1fr (1씩 나눠갖는 경우) grid-template-rows: 200px 200px 200px; width: 400px; height: 600px; border: 1px solid black; color: white; } -> > grid-template-columns,rows .co..