개발자 지망생의 블로그

[CSS] 스크롤바 커스텀 | 스크롤바에 padding, margin 넣기 CSS로 웹페이지의 스크롤바를 커스텀하는 방법에 대해 알아보자. 사실 스크롤바에 padding, margin을 넣는 방법은 존재하지 않는다. 하지만 border를 사용해 padding, margin을 넣은 것처럼 보이게 만들 수 있다. 일단, 스크롤바는 위 같이 크게 막대와 배경 두 개의 요소로 이루어져 있다. 막대 부분은 thumb, 배경 부분은 track이다. 요소마다 스크롤바 디자인을 다르게 설정할 수 있다. -webkit-scrollbar, -webkit-scrollbar-track, -webkit-scrollbar-thumb의 3가지 가상 요소를 이용하면 해당 요소의 스크롤바를 스타일링할 수 있다. 3가지 가상 요소 이외..

[CSS] p 태그 내에서 개행 문자가 적용되지 않는 현상 React로 나만의 이력서 & 포트폴리오 페이지를 만들던 중 작은 오류가 발생했다. p 태그 안에 들어갈 텍스트에 개행을 넣기 위해 stirng을 백틱으로 감싸고 줄바꿈을 입력했는데 페이지에 적용되지 않았다. const aboutme = { EN: `Hi, I'm blahblah. I started learning software development with interest in mobile application development. Now I'm trying to progress as an agile and systematic front-end developer.`, KO: '안녕하세요, 앱 개발에 흥미를 느껴 개발을 시작했으며 민첩하고 체..

CSS의 막강한 레이아웃 기능인 Flex! 그중 조금 헷갈리는 flex-basis, flex-grow, flex-shrink 속성의 개념을 완벽히 이해해보도록 하자. box1 box2 box3 box4 box5 box6 body { box-sizing: border-box; font-family: sans-serif; font-weight: 600; } .container { display: flex; background: #f9f1f0; border: 2px solid black; width: 90vw; height: 200px; } .box { background-color: pink; border: 2px solid black; width: 100px; height: 100px; margin: 10..