intro 오늘은 styled-components 수업을 듣던 중, 왜 tailwind가 아닌 해당 라이브러리를 사용하고 배우며 그것에 관해 고찰한 내용을 글로 써보았다. 하나의 주제를 잡고 파고들어 고찰을 하는 글을 써보는 것은 처음이지만, 구글링과 공부하면서 배운 내용을 정리해보도록 하겠다. 1. Styled-components의 '유지보수 모드' 진입: 왜? 우선 해당 라이브러리는 javascript 안에서 css를 작성할 수 있게 했던 대표적인 Css-In-JS라이브러리였다. 컴포넌트 단위로 스타일을 정의할 수도 있고, props기반으로 동적 스타일링도 가능했기 때문에, React프로젝트에서 많이 사용되었다.React스타일링의 표준이라고 하면 아직 나에게는 Styled-components이다...

intro이번 게시물은 저번시간에 학습했던 css flexbox를 활용해서항공편 조회사이트를 css로 제작해보는 실습을 하는 과정을 적어보겠습니다.원래 학습 실습에 대한것은 많이 올리지 않으려했는데,이번 실습은 포스팅을 하면 css복습에 도움이 될것 같아서 올려봅니다.start~ 저번 학습에 대한 글 참고 CSS Layout - flexboxintro저번 포스팅에 이어 이번에는 css layout에 대한 정리를 해보겠습니다.두번째 글도 힘내서 포스팅해볼게요 ✏️플렉스박스란? css에서 한 줄의 레이아웃을 유연하게 배치하기 위한 css레이아웃noeyh66.tistory.com ✏️실습설명 전체 예시 페이지 html과 css코드를 제공해주었고, 위 코드를 이용해서 리디자인을 하는 코드였다. html과 c..

intro저번 포스팅에 이어 이번에는 css layout에 대한 정리를 해보겠습니다.두번째 글도 힘내서 포스팅해볼게요 ✏️플렉스박스란? css에서 한 줄의 레이아웃을 유연하게 배치하기 위한 css레이아웃 모델 중 하나입니다. 참고로 grid라는 것도 있습니다. 실무에서는 flexbox를 더 많이 사용한다고 하네요. ✏️플렉스박스 만들기display: flex; ✏️배치방향 flex-direction을 사용하면 기본 축의 방향을 정할 수 있습니다. 이때 기본 값은 row 입니다. ✏️기본 축 정렬 justify-content를 사용하면 기본 축 방향으로 정렬할 수 있습니다. 기본 값은 flex-start입니다. ✏️교차 축 정렬: align-items 교차 축 방향으로 정렬할 때는 ali..

intro해당 내용은 코드잇 스프린트 23기 프론트엔드 과정 2주차에서의 배운 내용을 토대로 정리한 내용입니다. 블로그 포스팅을 재밌게 시작하고 싶은데 아무래도 포스팅 경험이 많지 않다보니 어렵네요,,앞으로 여러가지 개발 일지를 써보며 글쓰기 실력도 늘었으면 좋겠습니다.2026년 새해복 다들 많이 받으세요 일단 나부터.. position 속성글의 흐름에서 벗어나서 요소를 자유롭게 배치할 때 쓰는 속성입니다. position에 따라서 위치를 정하는 기준이 달라집니다. 기본 값은 static이고, static인 경우 원래 있어야 할 위치에 배치됩니다. 위치 정하기위치를 정하는 기준에 대해서 top, right, bottom, left 속성으로 위치를 정할 수 있습니다. 4방향이 모두 같을 경우, ins..