해나아부지 개발일지

display: flex는 레이아웃을 구성하기 위한 유용한 CSS 속성 중 하나입니다. 그러나 많은 flex 속성을 사용하는 것은 렌더링 속도에 영향을 미칠 수 있습니다. display: flex를 사용하면 브라우저는 레이아웃을 계산하기 위해 추가 작업을 수행해야 합니다. 이 작업은 브라우저의 처리 속도와 요소의 수 및 복잡도에 따라 렌더링 속도에 영향을 미칩니다. 따라서, display: flex는 꼭 필요할 때만 사용하는 것이 좋다는 말씀. 렌더링 속도를 향상시키기 위해 flex 속성 대신에 grid 레이아웃 등 다른 CSS 속성을 사용하는 것이 좋다.

원인 디자인 리뉴얼 상품 리스트 개발 중에...! div 안에 img를 넣어보면 padding을 주지 않았는데도 하단 여백이 생기는 걸 발견한다 디자이너 분께서 아주 중요한 부분이라며 여백을 없애줄 것을 요청하셨다! 이번 문제를 해결하기 위해서는 타이포그래피(Typograpy)에 대해서 알고 있어야 한다. 타이포그래피란? 타이포그래피(Typography)는 활자 서체의 배열을 말하는데, 특히 문자 또는 활판적 기호를 중심으로 한 2차원적 표현을 가리킨다. 활판으로 하는 인쇄술을 가리키는 용어이기도 하다. 오늘날에는 뜻이 바뀌어 사진까지도 첨가하여 구성적인 그래픽 디자인 전체를 가리키고 일반의 디자인과 동의어 같이 쓰이는 일도 있다. 즉, 편집 디자인 분야에서는 활자의 서체나 글자 배치 따위를 구성하고 표..

MDN 박스 모델 CSS에 포함되는 모든 요소의 외장은 박스이며, 이 박스를 이해하는 것은 CSS을 통해 레이아웃을 생성하거나, 아이템과 다른 아이템을 정렬하는 것을 가능하게 하는 열쇠입니다. CSS에는 크게 두 가지 박스 (블록 박스와 인라인 박스) 유형이 있습니다. 이러한 특성은 박스가 페이지 대열 측면 및 페이지의 다른 박스와 관련하여 박스의 작동 방식을 나타냅니다. 'Box Model'과 'Block' 개념을 제대로 인지하고 있지 않으면 혼동이 있을 수 있다. 'Block' 요소는 'Box Model'의 한 유형이다. 모든 HTML 요소는 박스(box) 모양으로 구성되며, 이것을 박스 모델(box model)이라고 부른다. CSS box model의 특징 box 모델이란 말에 느낌대로 기본적으로 ..

반드시 기억해야하는 css 선택자 30가지! 너무 많아서... 하루에 몇개씩 정리해 봅시다. 1. * (all) 전체 선택자 특정 태그에 하위 태그로도 사용 가능 #container * (id container 태그 하위에 모두 적용) 테스트 용도로는 괜찮, 많이 사용하면 과부하 걸림 * { margin: 0; padding: 0; } 2. #id 선택자(단일) #container { margin: 0; padding: 0; } 3. .class 선택자(다중) .container { margin: 0; padding: 0; } 출처 링크타고 ㄱ ㄱ

속성 값 뒤에 !important 를 붙인 속성 HTML에서 style을 직접 지정한 속성 #id 로 지정한 속성 .class, :추상클래스 로 지정한 속성 태그이름 으로 지정한 속성 상위 객체에 의해 상속된 속성 My text 1 My text 2 // 2번째 우선순위 My text 3 // 5번째 우선순위 div { color: red; } 출처 css 적용 우선순위 - ofcourse