728x90 반응형 CSS12 가로 스크롤(overflow-x-auto)이 생기지 않는다면? 가로로 긴 테이블이나 콘텐츠를 표시할 때, over-x-auto를 사용하면 스크롤이 자동으로 생기도록 할 수 있습니다.그런데 막상 overflow-x-auto를 적용해도 가로 스크롤이 생기지 않는 경우가 있습니다!이 문제는 보통 부모 요소의 overflow 설정 구조와 관련이 있습니다. 가로 스크롤이 생기지 않을 때는 아래와 같은 사항을 먼저 의심해보는게 좋습니다.1. 스크롤을 적용한 요소보다 자식 요소가 충분히 넓은가?2. 스크롤 요소의 부모가 스크롤을 막고 있는가?3. 너비 제한(max-w..., w-full 등)이 걸려 있지 않은가? 저의 경우에는 1번과 3번 케이스로 인해 스크롤을 발생시킬 요소에 overflow-x-auto 속성을 적용했음에도 불구하고 스크롤이 생기지 않는 이슈가 발생했었습니다.. 2025. 6. 9. [코드스피츠/CSS] Display Model, Flex Box 전부 다 정리하기보다는 새롭게 알게 된 것들이나 기억하고 싶은 것들을 정리했다. 풀 강의는 유투브에서 확인하는 것이 좋다. Display Model 박스 생성 display: none; box를 무시할 때 사용 display: contents; 마찬가지로 box 모델을 무시한다. 자기 자신의 content를 무시하고, layout 상으로 부모 요소로 승격시켜 그릴 수 있다. Flex Box justify-content는 메인 축에 적용되는 속성이다. flex-start flext-end center space-between space-around align-items는 cross 축에 적용되는 속성이다. flex는 원래 한 줄을 사용하는 것이 기본값이다. 하지만 flex-wrap: wrap;을 사용하면 .. 2023. 4. 20. [코드스피츠/CSS] CSS 렌더링(Float) 전부 다 정리하기보다는 새롭게 알게 된 것들이나 기억하고 싶은 것들을 정리했다. 풀 강의는 유투브에서 확인하는 것이 좋다. float Line Box로 화면에 그려진다. 추가적으로 BFC(Block Formatting Contexts)박스를 만든다. DOM 요소의 포함 관계랑은 상관없이, inline 요소의 가드로 작동한다. 이 때 다시말해 float 안에는 inline 요소가 들어가지 못한다. 반면, block 요소는 floatting되지만 실제 화면에서 부모 요소만큼의 width를 차지한다. See the Pen float과 inline, block by 고주디 (@1two13) on CodePen. 이 예제를 보면 float 특징을 조금 더 확실하게 알 수 있다. inline과 block 엘리먼트 .. 2023. 3. 24. [코드스피츠/CSS] CSS 렌더링(Normal Flow) 전부 다 정리하기보다는 새롭게 알게 된 것들이나 기억하고 싶은 것들을 정리했다. 풀 강의는 유투브에서 확인하는 것이 좋다. 먼저 렌더링시스템과 CSS 정의를 살짝 정리했다. Rendering System이란? 어떠한 대상을 원하는 모습으로 다시 구현하는 것을 말한다. rendering은 보통 2단계로 구성된다. 1. reflow: geometry(구역)을 나눈다. 2. repaint: fragment(파편)을 채운다. 이 때, pixel이 아닌 fragment를 사용하는 이유는 화면이 실제로 표현할 수 있는 physicl pixel(물리적 픽셀)과 HTML/CSS에서 논리적으로 표현할 수 있는 logical pixel(논리적 픽셀)은 1:1로 대응하지 않기 떄문에 매번 상대적으로 다른 DPR(Device.. 2023. 3. 20. flex 사용하지 않고 HTML 태그들을 가로 정렬시키는 방법(+코드펜예제) 항상 flex를 사용해서 아주 쉽게 모든 HTML 태그들을 가로 정렬시킬 수 있었지만, 이번에는 flex를 사용하지 않고 태그들을 가로 정렬을 시켜보는 연습을 했다. 이를 제대로 알고 구현하기 위해서는 inline, block, inline-block을 제대로 알고 있어야 한다. CSS에는 block-level과 inline-level의 구분이 있다. display 값은 모두 이 2가지 범주 중 하나에 속한다. block-level 블록 레벨 박스는 요소 박스가 기본으로 부모 요소의 콘텐츠 영역 너비를 채운다. 블럭 요소가 있을 경우 줄바꿈 현상이 일어난다. block은 height, width, margin, padding을 지정할 수 있다. 블록 박스를 만드는 display 값: block, list.. 2023. 3. 16. 이전 1 2 3 다음 728x90 반응형
