본문 바로가기

CSS

 (13)
CSS에서 max-width 설정 시 반응형 중앙 정렬 문제 해결하기 (tailwind : max-w-screen-sm) 모바일 화면에서 max-w-screen-sm ( max-width: 640px ) 등의 고정 너비를 줄 경우, div가 부모 요소의 전체 너비(width: 100%)를 차지하게 되고,이로 인해 마치 가운데 정렬된 것처럼 보이는 시각적 효과가 생깁니다.  그로 인해서 해당 사이즈를 초과하는 테블릿이나 PC 화면에서는 컨텐츠가 가운데 정렬이 안된 것 처럼 보이는 현상이 생기게 됩니다.이때는 명시적인 중앙 정렬이 필요하게 됩니다. 해당 사이즈 이상의 화면에서는 별도로 미디어 쿼리를 주고 좌우 마진을 auto를 주면 좌우 정렬이 됩니다.  @media (min-width: 768px) { margin: 0 auto ;}혹은  테일윈드에서는 md:mx-auto 추가    // ... existi..
[CSS] Grid의 Subgrid 속성 이해하기 - 별점 레이아웃 예제 그리드 안의 그리드에서 다음과 같은 상황이 생겼다 이렇게 별표 평점 날짜를 위치 시키고 싶은데...   별표 아래 평점이 있고 날짜가 2번째 열에 있어버리는 상황....   이럴 때 subgrid  속성을 사용하면 됩니다.부모 그리드의 열(column) 정의를 자식 요소에 상속하는 속성입니다.  tailwind                    일반 css 속성grid-cols-subgrid  // grid-template-columns: subgrid; 주요 특징:1.부모 그리드의 열 트랙을 그대로 사용할 수 있습니다2. 부모와 동일한 그리드 라인을 공유합니다3. 중첩된 그리드 레이아웃을 더 쉽게 만들 수 있습니다  ..
[CSS] margin: 0 auto 중앙 정렬이 작동하지 않는 경우 필수 조건은 아래 두개를 만족해야 합니다. 1. 블록 레벨 요소여야 함 (display: block, grid, flex 등) 2. 너비가 지정되어 있어야 함 (width, max-width)   대표적으로 작동하지 않는 케이스들입니다 1. position: absolute 또는 fixed 가 아니여야 합니다.(일반적인 문서 흐름에서 요소를 제거하기 때문)   2.float 속성이 적용된 경우  3.부모 요소에 display: flex가 적용된 경우  4.transform 속성이 적용된 경우  5. calc()로 동적 너비가 설정된 경우
[CSS] 색상을 사용하는 팁, contrast ratio 확인 방법 1.  메인 컬러를 웹사이트의 개성에 맞게 설정하세요: 컬러는 의미를 전달합니다!  🔴 빨간색주목성이 높음힘, 열정, 흥분을 상징강렬한 에너지를 표현 🟠 주황색빨간색보다 덜 공격적행복, 쾌활함, 창의성을 전달 💛 노란색기쁨, 밝음, 지성을 의미긍정적인 에너지를 표현 💚 초록색조화, 자연, 성장, 건강을 대표안정감과 평화로움을 전달 💙 파란색평화, 신뢰성, 전문성을 상징 ( 파란색 계열이 많이 쓰이는 이유 )차분하고 안정적인 이미지 💜 보라색부, 지혜, 마법을 상징고귀함과 신비로움을 표현 💗 분홍색로맨스, 관심, 애정을 나타냄부드럽고 따뜻한 감정을 전달 🟤 갈색자연, 내구성, 편안함과 연관안정감과 신뢰성을 표현 ⚫ 검정색힘, 우아함, 미니멀리즘을 상징동시에 슬픔과 비통함도 표현 출처https..
[CSS] 4. 포지셔닝 ( position , float, clear) 과 float layout 1. 목적블록 속성을 가진 대상을 원하는 위치에 정렬하기 위함 2. 위치 지정을 위한 속성Box-sizing 속성 : 상자 너비 기준 설정float 속성 : 좌우 위치 설정clear 속성 : float 속성 해제position 속성 : 배치 방법 지정z-index 속성 : 순서 요소 정렬3. float엘리먼트의 수평 정렬을 위한 속성marin: auto 는 block 요소에서만 사용 가능하며 inline, inlien-block 에서는 가운데 정렬이 안된다 Ex 1 )부모요소에 clearfix 란 별도의 클래스 명을 주고, pseudo element 인 after 를 사용하여 수정했다. 이런 방식의 과거 수정법을 clearfix hack 이라고 한다 https://www.w3schools.com/howt..
[TroubleShooting / CSS] button border ( border: none ) 최상위 태그의 border 가 solild 4px black 으로 주어진 상황에서add to cart 란 버튼에 윗줄만 border-top 을 주려고 하면 아래 사진처럼 버튼의 테두리가 부자연스러운 모습을 볼 수 있는데, 이는 버튼 태그는 기본적으로 브라우저에 의해 border 가 1.714로  설정되어 있기 때문입니다.    먼저  border: none 을 주어서 기본 border 를 0으로 만든 후, 추가로 border-top 을 줘야 매끄럽게처리가 가능해집니다.
[TIL] 9.30 1. Design Pattern 디자인 패턴의 유형 정리https://daunje0.tistory.com/156 [Design Patterns] 0. 디자인 패턴의 유형, 간단 설명http://vincehuston.org/dp/ Huston Design PatternsCategory: miscellaneous Abstract Factory ... model "platform" (e.g. windowing system, operating system, database) with an inheritance hierarchy, and model each "product" (e.g. widgets, services, data structdaunje0.tistory.com 2. CSS 2-1 ) 화면을 좌우 중앙..
[CSS] 3. 레이아웃 스타일 - 인라인, 블록, 인라인블록 인라인(inline)인라인블록(inline-block)블록(block)크기값을 지정못함크기값을 지정할 수 있음한줄에 여러개 배치한줄에 한개만 배치좌우 마진만 가능상하좌우마진 모두 가짐기본 너비값은 컨텐츠의 너비값기본 너비값은 부모 요소의 100% ■ block 요소- div, ul, ol, li, h, hr, form, dl, dt, dd, p, table, body, main, header, article, footer, section, nav, details, summury, center, aside, h1 ~ h6- 레이아웃( 제목, 문단, 표 )과 관련된 요소 ■ inline 요소- span, a, big, small, em, b, br, audio, video, s, u, mark, q, str..

티스토리툴바