개발자 지망생의 블로그

[HTML] 파일과 데이터를 모두 body에 넣어 API 요청하기 | form 태그 활용기 (1) React로 쇼핑몰 프로젝트를 짜다가 파일(이미지)과 데이터(문자열, 숫자)를 모두 body에 넣어 API를 요청해야 하는 경우가 생겼다. 상품 판매자가 상품을 등록할 때 위와 같은 기능이 필요했다. React에서 바로 하려니 어려워서, (1) pure HTML로 먼저 짜보고 (2) pure HTML+JavaScript로 짜보고 (3) React에 적용하는 과정을 거쳤다. HTML form 태그에 대해 잘 몰랐는데, pure HTML로 먼저 짜보면서 HTML form을 구성하는 방법에 대해서 공부할 수 있었다. image product_name price shipping_method 택배 직접 shippin..

[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..

HTML을 공부하기에 앞서, HTML Living Standard에 대해 알아보려고 한다. 멋쟁이사자처럼 강의자분들이 HTML Living Standard가 중요하고, 이를 HTML5라고 일컫는 것은 잘못되었다고 하셨는데 왜 그런 것인지 궁금했기 때문이다. 또한 HTML 언어의 역사에 대해 공부하며 HTML에 대해 더 깊이 이해하고 싶었다. HTML Living Standard란 무엇인가? Living standard는 직역하면 '살아있는 표준'이다. 간단하게 설명하면 HTML 문법 등을 규정한 표준이라고 생각하면 된다. The HTML Living Standard (sometimes informally called HTML5). The HTML specification has been a living ..