텍스트 양쪽 정렬 https://codepen.io/piarey/pen/gOrVdmM 양쪽정렬 원리 (text-align:justify) ... codepen.io th의 min-width (width도 무관해보임) 설정 span을 text-align:justify로 양쪽정렬 th::after로 span의 기준이 th전체의 크기값을 가지도록 th에 font-size:0으로 ::after가 높이를 차지하지않게하고 span에 별도의 폰트사이즈 설정 그때 그때/CSS 2022.01.12
드래그 색상 변경 ::selection { background-color: cyan; } https://developer.mozilla.org/en-US/docs/Web/CSS/::selection ::selection - CSS: Cascading Style Sheets | MDN The ::selection CSS pseudo-element applies styles to the part of a document that has been highlighted by the user (such as clicking and dragging the mouse across text). developer.mozilla.org 그때 그때/CSS 2022.01.10
ie rowspan border 안보일때 https://www.phpschool.com/gnuboard4/bbs/board.php?bo_table=qna_html&wr_id=208646 그때 그때/CSS 2021.11.19
input date placeholder 없애기, value색 변경 input[type=date]::-webkit-datetime-edit-text { -webkit-appearance: none; display: none; } input[type=date]::-webkit-datetime-edit-month-field{ -webkit-appearance: none; display: none; } input[type=date]::-webkit-datetime-edit-day-field { -webkit-appearance: none; display: none; } input[type=date]::-webkit-datetime-edit-year-field { -webkit-appearance: none; display: none; } value값 custom input[t.. 그때 그때/CSS 2021.07.22
selectbox option custom / arrow 제거(ie) https://codepen.io/paperwiz/pen/BaRQvJN BaRQvJN ... codepen.io https://www.freecodecamp.org/korean/news/html-select-taegeu-deurobdaun-menyu-ddoneun-kombo-riseuteureul-mandeuneun-bangbeob/ https://www.w3schools.com/howto/tryit.asp?filename=tryhow_custom_select W3Schools online HTML editor The W3Schools online code editor allows you to edit code and view the result in your browser www.w3schools.co.. 그때 그때/CSS 2021.07.13
border gradient 참고) zinee-world.tistory.com/453 [CSS] Gradient Border "보더에는 그라디언트 못 넣어요?" 디자이너님의 말 한마디에서 시작되었다. 그라디언트는 당연히 배경색에나 넣는 건 줄 알았던 나는 (!!!) 부랴부랴 방법이 있는지 찾아봤다. 역.시.있.었.다 http zinee-world.tistory.com 그때 그때/CSS 2021.02.10
text-decoration / MDN text-decoration: none;//선x text-decoration: line-through;//글자 중간 선 text-decoration: overline;//글자 위 선 text-decoration: unverline;//글자 아래 선 text-decoration: double;//글자 아래 두줄 text-decoration: dotted;//글자 아래 점선 text-decoration: dashed;//글자 아래 긴 점선 text-decoration: wavy;//글자 아래 물결선 text-decoration: initial;//기본값 text-decoration: inherit;//부모값 상속 색지정 가능 text-decoration: underline red; text-decoratio.. 그때 그때/CSS 2021.01.27
모바일 터치 touch-action 모바일 터치 이벤트를 제한할 수 있는 속성 touch-action auto - 기본 none - 터치이벤트 안됨 pan-x - X축 터치 스크롤 허용 pan-y - Y축 터치 스크롤 허용 manipulation - 핀치줌, 터치스크롤 pan-left - 왼쪽방향 터치스크롤 pan-right - 오른쪽방향 터치스크롤 pan-down - 아래바향 터치스크롤 pan-top - 위쪽 방향 터치스크롤 pinch-zoom - 핀치줌허용 참고) gahyun-web-diary.tistory.com/129 [CSS]touch-action 속성을 이용해 터치 제한하기 모바일 터치 이벤트를 제한할 수 있는 속성 touch-action auto - 기본 none - 터치이벤트 안됨 pan-x - X축 터치 스크롤 허용 pan.. 그때 그때/CSS 2021.01.27
float 해제 1. 부모요소에 가상요소 추가하기 .wrapper{} .wrapper::after{content:''; display:block; clear:both;} .left-box{float:left;} 2.overflow:hidden ->보여져야하는 컨텐츠가 있을 경우 비추 .wrapper{overflow:hidden;} .left-box{float:left;} 3. 4. 그때 그때/CSS 2020.12.31