728x90 반응형 CSS11 [코드스피츠/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. vertical-align: middle 속성이 적용되지 않을 때 해결 방법 최상위 안에 button, div, button이 있을 때 수직 정렬이 되지 않는 문제가 있었다. 이미 최상위 의 자식 는 가운데 정렬되어 있다고 생각해, 에게만 vertical-align: middle;을 줬다. 하지만 버튼들은 여전히 수직 정렬이 되지 않는 문제가 있었다. 결과적으로 vertical-align: middle; 속성을 뿐만 아니라 자식 에게도 줬어야 했다. 적용시키고자 하는 요소가 있을 때 그 주변 요소들도 모두 같이 적용시켜줘야 수직 정렬이 되기 때문이다. 흠 vertical-align에 대해 깊게 공부해보고 있는데 자식 에게만 vertical-align: middle; 속성을 주면 버튼들이 수직 정렬되는 것을 확인할 수 있었다. vertical-align 이 놈이 진짜 골 때리는 놈.. 2023. 3. 14. 이전 1 2 3 다음 728x90 반응형
