I'm sw engineer!

https://presentlife-coding.tistory.com/entry/%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%A4%91%EC%95%99-%EC%A0%95%EB%A0%AC%ED%95%98%EB%8A%94-2%EA%B0%80%EC%A7%80-%EB%B0%A9%EB%B2%95 이미지 중앙 정렬하는 2가지 방법 목 차 이미지 중앙 정렬하는 2가지 방법 이 글에서는 position 속성 중 absolute와 transform 속성 중 translate를 이용하여 이미지 중앙 정렬하는 방법과 display 속성 중 flex를 이용하여 이미지 중앙 정렬하 presentlife-coding.tistory.com

div태그는 대표적인 block 속성을 가지고 있다. grid나 flex 또는 float 속성으로 div를 한줄에 배치할 수도 있지만 그런 설정말고 div자체를 겹쳐야하는 방법을 찾아보았다. 겹치는 것에도 부모태그안의 div를 부모와 겹치게 하는 것도 있고, 각각의 div 태그를 겹쳐야 하는 경우도 있는데, 나의 경우엔 후자이다. position : absolute 로 설정하면 다른 어떤 것들에도 구애받지 않고 위치를 설정해 줄 수 있다. top, bottom, left, right 방향으로 절대적인 위치를 설정해주면 그 위치에 배치할 수 있다. 부모요소를 기준으로 설정이 되지만 부모요소가 없다면 body태그 기준이라는 것도 알아두자. 만약에 다른 요소와 겹쳐서 보이지 않는 경우에는 z-index 를 사..

버튼그룹으로 만들고 싶은 태그를 부모 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