I'm sw engineer!

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

페이지를 그리다보면 해당 요소를 어느 한 곳에 배치를 시켜야하는, 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" ➡ 색상코드 넣는 곳에 넣어주면 된다.

사용자가 브라우저를 통해 웹사이트를 접속하면, 서버로부터 HTML, CSS등 웹사이트에 필요한 리소스를 다운 받는다. 브라우저가 페이지를 렌더링하려면 먼저 HTML코드는 DOM, CSS는 CSSOM트리를 생성해야 한다. 1-1. DOM 트리 생성 - 변환 : 브라우저가 HTML의 원시 Byte를 읽어와서, HTML에 정의된 인코딩( UTF-8 )에 따라 개별 문자로 변환 - 토큰화 : 브라우저가 문자열을 W3C표준에 지정된 고유 토큰으로 변환 - 렉싱 : 방출된 토큰은 해당 속성 및 규칙을 정의하는 "객체"로 변환 - DOM 생성 : 마지막으로 HTML 마크업에 정의된 여러 태그 간의 관계를 해석해서 트리구조로 연결 브라우저는 HTML 마크업 처리를 할 때마다 위의 모든 단계 수행 1-2. CSSOM 트..

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과 동일하게 보이나 새로운 블록서식 문맥을 생성 - 데스크톱 브라우저의 경우 콘텐츠가 넘치면 스..