form 으로 감싸져 있는 div에 jquery로 input file을 append 한 후 form.submit()을 했을 때, 아무리 해도 파일이 전송되지 않았던 사례
해당 문서(jsp)의 html tag 구조에 깨진 부분이 있었다. (여는 태그, 닫는 태그의 정합성 문제) 태그의 아구를 서로 잘 맞춰주니 파일 전송이 잘 되었다. 시간 깨나 썼는데 말이지…ㅠㅠ…
Category Archives: HTML/CSS
[css] 수직(vertical) 가운데(중앙, middle, center) 정렬(align)하는 방법
CSS : 요소 및 레이어 중앙정렬 방법
[펌글] SASS 에서 미디어쿼리(media query)를 사용하여 기기(디바이스, device) 분기 처리(반응형, responsive)하는 샘플 코드
참고 원본 출처 – [SCSS(SASS)] 반응형 breakpoints 추가하는 방법 원본이 scss로 되어 있어서 sass로 변환해 봄 sass로 map 선언시, 개행하면 문법오류가 나서 map-merge를 사용했으나 별로 좋아보이지 않는다. sass의 한계인지? 샘플 소스 /////////////////////////////// 반응형 환경변수 정의 (S) /////////////////////////////// $breakpoints: ('mobile-extra-small': (min-width: 21.25rem)) // 340 $breakpoints: map-merge($breakpoints, ('mobile-portrait-only': (max-width: 29.9375rem))) // 479 $breakpoints: map-merge($breakpoints, ('mobile-landscape': (max-width: 51rem)))… Read More »
[html] input text 입력폼에서 원하지 않는 빨간색 밑줄(red underline)이 보일 경우 (spellCheck)
input 태그의 spellcheck 속성을 false로 설정해 보자
[javascript] textarea 의 마지막 글자 뒤에 커서가 위치하도록 하기 (set cursor at the end)
element.selectionStart = element.value.length 참고 https://stackoverflow.com/questions/10158190/how-to-set-cursor-at-the-end-in-a-textarea
[css] 두 개 이상의 클래스가 존재하는 엘리먼트에 한해서만 적용되는 css 정의 (CSS rule to apply only if element has BOTH classes)
css 작성시 단순히 두 개의 클래스를 나열해 주면 된다. <div class="abc xyz">블라블라</div> .abc.xyz { /* rules go here */ }
[html/css] 분명히 z-index 값이 더 높은데도 불구하고 click 이벤트가 먹지 않았던 사례 (해결 => position: relative)
다음과 같은 상황이 있었다. A: 투명 div layer B: 버튼(button tag)을 감싸고 있는 div layer A가 B를 가리고 있는데, A가 투명이라 눈으로 보기에는 문제가 없음. 내 생각으로는 B의 z-index가 더 높기 때문에 클릭하는데 아무 문제가 없을 것이라고 생각했는데, 아무리 해도 클릭이 되지 않았다. B 에 position: relative 를 주었더니 해결됨!
[링크] CSS 학습 관련
이번에야말로 CSS Flex를 익혀보자 이번에야말로 CSS Grid를 익혀보자
[css] 스크롤바(scrollbar) 모양(design, 디자인) 조정하는 샘플코드 (custom…)
/* * 스크롤바 디자인 커스텀하는 코드 * * – 일단 antd table 내의 스크롤바를 가공해 보았음 * – webkit 계열에서만 사용할 수 있다고 함. */ /* 스크롤바 폭 */ .ant-table-body::-webkit-scrollbar { width: 8px; /* 여기서 height가 의미가 있나? */ } /* 스크롤바에서 움직이는 부분 */ .ant-table-body::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 2px; background-color: #bbb;… Read More »
[링크] html과 css만으로 탑메뉴(GNB, top menu) 만들기
https://www.cssscript.com/multi-level-navigation/
[html/css] 탑메뉴(gnb) 작성시 드롭다운 메뉴가 컨텐츠 영역 뒤로 숨겨지던 문제 (dropdown menu gets hidden behind the content)
일반적인 조언들 z-index 를 충분히 큰 값으로 설정 position: relative 를 활용 탑메뉴 영역이 overflow:hidden 으로 되어 있는지 확인 내 경우는 탑메뉴 영역이 overflow: auto 로 되어 있는 것이 문제였다.
[eslint] anchor 태그 <a /> 를 버튼 처럼 사용하는 것을 허용
.eslintrc 파일에 추가 { "rules": { … "jsx-a11y/anchor-is-valid": 0 } }
[antd] FormItem 으로 엘리먼트를 감쌀 때 알 수 없는 공백(space)가 들어갈 경우 해결 사례
css .ant-form-item { margin-bottom: 0; } .ant-form-item-control { max-width: 100%; } 참고 https://stackoverflow.com/questions/56782898/how-to-reduce-spacing-between-antd-form-items
[html] 상/하위 block 요소 간의 수직정렬 사례
html 엘리먼트의 수직정렬은 정확히 알고 하던 것이 아니라서 항상 헷갈리는데, 이번에 알게 된 사례를 하나 기록한다. 부모/자식 둘 다 display:block 이라고 가정하고, 부모요소의 css에 아래 항목을 추가한다. { display:flex; align-items:center; } 참고 링크 https://stackoverflow.com/questions/5166574/vertical-align-text-in-block-element/9406982
[링크] CSS float 자식들 포함하기 (div 포함 관계)
https://zetawiki.com/wiki/CSS_float_%EC%9E%90%EC%8B%9D%EB%93%A4_%ED%8F%AC%ED%95%A8%ED%95%98%EA%B8%B0
[링크] 웹개발용 아이콘 소스
https://github.com/coreui/coreui-icons
html 테이블(table) 의 각 cell(td) 이 일정한 폭(width)을 유지하도록 하면서, 셀 내 컨텐츠 길이에 따라 자동 줄바꿈(line break)이 되도록 하는 방법
* table 태그에 아래의 스타일 추가 table-layout:fixed * td 태그에 아래의 스타일 추가 word-wrap:break-word
부트스트랩 모달(bootstrap modal) 사용시 수직 가운데 정렬 (vertical middle align) 하기
bootstrap 4.1 기준으로, .modal-dialog 클래스가 있는 엘리먼트에 modal-dialog-centered 클래스를 추가해 주면 된다.
[링크] 웹폰트(web font) 관련 참고
웹 폰트 사용과 최적화의 최근 동향
bootstrap modal 사용시 modal 생성 인자의 keyboard 속성이 true임에도 불구하고 ESC 키를 눌렀을 때 modal 이 닫히지 않는 경우
modal 의 틀을 정의한 div 엘리먼트(modal class를 사용하는 div)에 tabIndex=”-1″ 속성을 추가해 준다. (bootstrap 3.3.6 에서 확인 완료)