I'm sw engineer!

버튼그룹으로 만들고 싶은 태그를 부모 div태그로 감싸고 "btn-group" 클래스를 부여하면 된다. 1. button 태그에 적용시킬 때 Left Middle Right 2. a 태그에 적용시킬 때 Active link Link Link https://getbootstrap.com/docs/5.0/components/button-group/ Button group Group a series of buttons together on a single line or stack them in a vertical column. getbootstrap.com

페이지를 그리다보면 해당 요소를 어느 한 곳에 배치를 시켜야하는, layout을 작업해야하는 일이 많이 생긴다. float속성의 정의는 해당 html 요소가 다른 주변의 다른 요소들과 자연스럽게 어우러지게 하는 속성인데, layout 설정하는데에 많이 사용되고 있다. layout설정하는데에 flex도 있고 grid 도 있고, 점점 발전된 기술이 나오고 있고, 개발하는 입장에서 더 편리하고 깔끔한 디자인을 지원해준다고 생각하지만 모든 브라우저가 flex와 grid를 지원하는 것은 아니라서 아직 float 속성이 많이 쓰이고 있다고 한다. 그래서 차이점이 어떤 것인지 감이 오지 않아서 검색을 한 결과 도움되는 페이지들을 같이 첨부한다. 나의 포스팅 : https://imswengineer.tistory.co..

https://inpa.tistory.com/entry/CSS-%F0%9F%92%8D-%EB%B2%84%ED%8A%BC-%EB%94%94%EC%9E%90%EC%9D%B8-%EB%AA%A8%EC%9D%8C#%EB%AC%B4%EB%82%9C%ED%95%9C_%EB%B2%84%ED%8A%BC_%EC%BB%AC%EB%A0%89%EC%85%98 [CSS] 💍 버튼 디자인 스타일 🖌️ 모음 (2022-05-20 UPDATE) 버튼 디자인 CSS 모음 (button css design) Codepen에서 괜찮은 디자인을 뽐내는 CSS 템플릿중에 버튼 디자인 요소들 모아 간추려 포스팅 해보았다. 급하게 CSS 템플릿을 찾으면서도 모던하면서도 준수한 inpa.tistory.com 버튼을 부트스트랩의 기본 클래스를 사용해..

차트를 그리려는데 데이터 항목중에 합계(total)는 데이터 lebel만 표시하고 line은 숨기고 싶은 상황이었다. 그래서 line의 color속성을 투명색 코드로 주고, symbolSize 속성값은 0으로 주었다. color: "#00ff0000" ➡ 색상코드 넣는 곳에 넣어주면 된다.

저번에는 float를 사용하여 div 를 가로정렬하는 포스팅을 했었다. 그런데 내가 프로젝트 할 때는 float말고 flex를 사용하고 있다. 가로로 정렬할 div 태그들의 부모 태그에 CSS 속성으로 display:flex; flex-direction:row; 를 주면 가로로 아이템들이 정렬된다. flex로 정렬된 아이템들을 원하는 기준으로 정렬하는 여러가지 방법들이 있다. 직접 눌러보고 화면으로 보면 쉬우니 둘러보자 ~~~~~~~~~~ https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content justify-content - CSS: Cascading Style Sheets | MDN The CSS justify-content property ..

태그는 인라인 요소이기 때문에 줄바꿈 되지 않고 가로로 나열된다. 태그는 블록요소이기 때문에 자동으로 한줄을 차지한다. 그러나 태그는 안에 문자만 들어가게 작성하는 것이 좋다. 그래서 태그를 가로로 정렬하기 위해서 css속성 중에 float 을 사용하여 준다. float : left ➡️ 왼쪽으로 가로정렬 float : right ➡️ 오른쪽으로 가로정렬

position 속성 - css에서 position 속성은 HTML 문서 상에서 요소가 배치되는 방식을 결정. - 정확한 위치 지정을 위해서는 top, left, bottom, right 속성과 함께 사용 static - position 속성을 따로 지정해주지 않았다면, 기본값인 static이 적용. - position : static; 으로 되어있으면 HTML에 작성된 순서대로 화면에 표시하라는 의미이기 때문에 top, left, bottom, right 속성을 작성해도 무시된다. relative - position : relative; 로 되어있으면, 이 요소를 원래 위치 기준으로 상대적 ( relative )으로 위치를 지정한다는 의미이므로, top, left, bottom, right 속성을 이용..

outline-offset css속성은 outline ( 윤곽선 )과 요소의 가장자리 사이의 간격을 설정한다. 예로든 요소의 크기는 동일하고 out-line 설정만 바뀌는 것이다. outline-offset: 4px; outline-offset: .6rem; outline-offset: 12px; outline: 5px dashed blue; 출처 : https://developer.mozilla.org/en-US/docs/Web/CSS/outline-offset

CSS는 같은 속성을 여러번 정의하게 되면, 나중에 설정한 값이 적용된다. 만약 나중에 설정한 값이 적용되지 않아야 한다면 속성값 뒤에 !important 를 붙여준다. 프로젝트를 하다보면 css파일도 많아지고 추가하게되면서 같은 속성을 정의하게 되어 내가 원하는 효과가 나오지 않을 때가 있는데, 너무 남발하면 안되겠지만 중요한 곳에 적어두면 되겠다. 먼저 !important를 적어놓았어도 나중에 정의한 값에도 !important를 붙이면 나중에 설정한 값으로 바뀐다 ex) p{ background-color : red !important; float : left; } p{ background-color : blue; float : left } p{ background-color : green !impo..

overflow 속성은 요소의 콘텐츠가 커서 블록서식 맥락에 맞출 수 없을 때의 처리법을 지정한다. overflow: visible; visible - 콘텐츠를 자르지 않고 안쪽 여백상자 밖에도 그릴 수 있다. overflow: hidden; hidden - 콘텐츠를 안쪽 여백상자에 맞춰 잘라낸다. - 스크롤 지원도 하지 않는다. overflow: scroll; scroll - 콘텐츠를 안쪽 여백상자에 맞춰 잘라낸다. - 콘텐츠를 잘라냈는지의 여부와 상관없이 항상 스크롤로바를 노출한다. overflow: auto; auto - 사용자 에이전트가 결정한다. - 콘텐츠가 안쪽 여백상자안에 들어간다면, visible과 동일하게 보이나 새로운 블록서식 문맥을 생성 - 데스크톱 브라우저의 경우 콘텐츠가 넘치면 스..