I'm sw engineer!

rem(root em) 단위는 CSS에서 글꼴 크기 및 레이아웃을 상대적으로 설정하기 위해 사용되는 단위입니다. rem은 "root em"의 줄임말로, 이는 문서의 루트 요소()의 글꼴 크기와 관련이 있습니다.기본적으로, 1rem은 루트 요소의 글꼴 크기와 동일합니다. 예를 들어, 브라우저의 기본 설정에서 루트 요소의 기본 글꼴 크기는 16px입니다. 이 경우 1rem은 16px을 의미합니다. 따라서, font-size: 1rem;은 16px 크기의 글꼴을 설정하는 것입니다. 만약 루트 요소의 글꼴 크기가 변경되면, rem 단위로 설정된 요소들의 크기도 이에 따라 자동으로 조정됩니다.예를 들어, 루트 요소의 글꼴 크기를 20px로 설정하면 1rem은 20px을 의미하게 됩니다. 이 방식은 전체 레이아웃을..

style="display:none;"으로 설정했는데 해당 영역의 높이만큼 자리차지는 하게 해주고 싶으면 어떻게 해야될까? Visibility를 활용하는 방법:내용visibility:hidden; 속성은 요소를 보이지 않게 하지만, 공간은 그대로 유지합니다. style="visibility:hidden;" 을 해제하는 jquery 코드 $('#myElement').css('visibility', 'visible'); 이 영역은 처음에 보이지 않습니다. Show Element

가 스크롤을 내려도 페이지 최상단에 고정되도록 하려면 CSS의 position: sticky 속성을 사용할 수 있습니다.  1. 을 감싸는 에 길이를 설정한다.나는 max-height:80vh로 화면의 길이에 따라 유동적으로 변하게 높이를 설정해주었다.2. thead th에 css 설정을 해주었다.$(document).ready(function(){ const $tableHead = $('thead th'); $tableHead.css({ 'position': 'sticky', 'top': '0', 'z-index': '2', 'background-color': '#f2f2f2' }..

https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse have shared or separate borders." data-og-host="developer.mozilla.org" data-og-source-url="https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse" data-og-url="https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse" data-og-image="https://scrap.kakaocdn.net/dn/i8FKa/hyWdnEAtaO/36lb5hHh2lqM9zKFqeYAs0/img.png?widt..

multiselect를 datatables 안의 에 넣어서 사용을 하는 상황.multiselect를 클릭하여 dropdown menu가 펼쳐질때 의 아래에 펼쳐지게 하는 옵션을 찾아보았는데,기본적으로는 원래 아래에 펼쳐지는건데 영역에 따라 위치가 변하고 있는거라, 따로 CSS로 설정을 해줘야하는 상황.그런데 js로 css를 설정해주려고 했는데,$(td).on('click', () => { // 드롭다운 메뉴가 확장될 때 if (!$(td).find('div.multiselect-container').hasClass('show')) { $(td).find('div.multiselect-container').css({ 'position': 'absolute !imp..

https://darrengwon.tistory.com/130 Flexbox 제대로 활용하기 (flex-grow, flex-shrink, flex-wrap etc) Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com 이번에야말로 CSS Flex를 익혀보자 이 튜토리얼은 “차세대 CSS 레이아웃” 시리즈의 첫번째 포스트입니다. 이번에야말로 CSS Flex를 익혀보자 이번 darrengwon.tistory.com .flex-container { width: 550px; margin: 0px auto; display: flex; } .flex-item:nth-child(3) { margin-left: auto; } margin: 0px auto;..

https://codingfirst.kr/1442/ CSS기초(1) CSS 파일 넣는 방법 - 우선코딩 CSS 파일 넣는 방법 link 태그를 이용하기 위치 : head 태그 사이 link 태그는 현재 문서(HTML)와 외부 리소스(CSS, JavaScript..) 간의 관계를 정의할 때 사용합니다. @import 를 이용하기 @import url("css/style.css") codingfirst.kr 안에 안에 안에 @import

https://icolorpalette.com/color/111 검은색

https://cocoon1787.tistory.com/843 [CSS] CSS, SASS, SCSS 차이점, 사용방법 ⏲ TL;DR SASS와 SCSS는 CSS를 편리하게 사용할 수 있도록 하며 추가 기능 또한 있는 확장판 스크립트 언어 SASS, SCSS에서 기존의 CSS의 기능 부재 단점을 보완한 다양한 기능 추가 SASS는 들여 쓰기+줄 바 cocoon1787.tistory.com https://icecokel.tistory.com/20 SCSS 사용하는 이유, SCSS 장점과 실 사용 예제 안녕하세요. 오늘은 제가 사이드 프로젝트에 추가한 SCSS에 대해서 간략한 포스팅을 진행하겠습니다. SCSS 개념 및 장점 SCSS 사용방법 1. SCSS 개념 및 장점 CSS는 HTML 태그를 꾸미거나 효과..

https://nh0404.tistory.com/43 [html/css] 글자수 넘어가면 말줄임표 / 원하는 만큼의 줄만 보이게 하기 문장을 내가 지정한 영역 밖으로 못나가게 하거나 지정한 영역이 좁아 말줄임표를 사용해야하는 경우가 있습니다. 알라딘의 책 소개처럼 ! 이러한 경우 말줌임표를 ㅁ + 한자 키로 직접 입력해 nh0404.tistory.com .elps{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}