본문 바로가기

Front-End/CSS6

2025-08-12 CSS 배운것 기록 오늘은 사이드바가 빠지면 어긋나는 페이지를 좀 이쁘게 다듬다가 깨닫게?된 것을 정리한다@media (max-width: 1199px) { .app-board { margin-left: 0; width: 100%; /* 필요에 따라 너비도 조절 */ top: 115px; /* 헤더 높이에 맞춰 조정 */ }}@media (max-width: 1199px) { header.app-header { margin-left: 0 ; width: 100% ; left: 0 ; top:67px; }} 보이듯이 header와 board의 px가 특정된 값에서 작아질 때 적용되는 코드를 적용한 것이다.크롬을 쓰고있고, F12 키를 누른 후 개발자툴로 화면크기를 조정하면서 픽셀.. 2025. 8. 12.
2025-08-11 CSS 코드 화면의 크기가 달라질때마다 화면 구조를 달라지게 하기위해서 @media{} 코드를 사용중인데 기본 크기(최대화)일때도 @media 에 적힌 코드가 적용되는 문제가 발생해 해결방법을 검색해 알게된 !important 를 정리했다header.app-header { position: fixed; left: 0; z-index: 50; margin-left: 270px; width: calc(100% - 270px); background: var(--bs-body-bg); padding: 0 10px; top: 65px;}@media (max-width: 991px) { header.app-header { margin-left: 0 ; width: 100% ; left: 0 ;.. 2025. 8. 11.
2025-08-10 CSS 배운것 정리 display: flex 가 있으면 자식 요소들이 기본적으로 가로 방향으로 나란히 배치된다. 아래 둘 중 하나가 있어야 버튼들이 가로로 나열된다:css 파일.dropdown.flex { display: flex; } Jsx 파일 {/* Bootstrap에서 d-flex가 display: flex 역할 */} ... 2025. 8. 10.
몰랐던 css 속성들 정리 속성명 대상 설명 대표값 예시속성명대상설명 대표값 예시text-align텍스트/인라인요소텍스트 가로 정렬left, right, center, justifyvertical-align인라인요소텍스트/요소 세로 정렬baseline, middle, top, bottomjustify-contentFlex/Grid 컨테이너아이템 주축 정렬flex-start, center, space-betweenalign-itemsFlex/Grid 컨테이너아이템 교차축 정렬flex-start, center, stretchalign-selfFlex 아이템특정 아이템 교차축 정렬flex-start, centerfloat블록/인라인요소요소 좌우 띄움left, rightclear요소플로팅 해제left, right, both item: 부.. 2025. 8. 7.

티스토리툴바