sooleeandtomas

CSS의 box-model 에서 블록요소의 영역을 차지하는 CSS속성은? CSS의 block이란? CSS에 포함되는 모든 요소의 외장은 박스입니다. 이 박스를 이해하는 것은 CSS을 통해 레이아웃을 생성하거나, 아이템과 다른 아이템을 정렬하는 것을 가능하게 합니다. CSS 박스엔 두가지가 있습니다. 블록 박스 block : 1. 상위 콘테이너에서 사용 가능한 공간을 채웁니다. 2. 새 줄로 행갈이합니다. 3. width, height 값이 존중됩니다. 4. 패딩과 여백, 테두리로 인해 다른 요소들이 박스로부터 밀려납니다. 예) header, footer, p, li, table, div, h1, address, article, aside, ol, video, table, form 인라인 박스 inline..

floating clearing을 안하면 발생하는 일! float을 사용하는 이유: 한글2020과같은 문서파일에서 텍스트들 사이에 이미지를 넣고 싶을 때, float을 사용하면 이미지들 사이에 이미지가 껴 들어갑니다. 여기서 float:left의 속성이 시작되지 않았나 하는 생각이 듭니다. 원래의 시작은 inline-block 의 단점을 보완하고자 나온 속성 인 듯합니다. 지금은 flex, gridbox와 같은 쓰기 좋은 속성들이 나왔지만, 이 전에는 float이 많이 쓰였다고 합니다. position:absolute를 사용하면 되지 않나요? position:absolute의 경우, 주변 요소들을 리사이징 할 때, 같이 reflow되지 않습니다. float의 경우, 주변 요소들을 리사이징 할 때, 같이 ..

FOUC 란? FOUC란? : Flash Of Unstyled Content 외부의 CSS가 불러오기 전에 잠시 스타일이 적용되지 않은 웹 페이지가 나타나는 현상입니다. 웹 브라우저가 웹 페이지에 스타일 정의를 부르고 적용할 때 보여지는 부분을 최대한 빨리 수정하지만, 이 변화는 짧지 않은 시간 동안 나타나므로 사용자는 페이지에 오류가 있다는 생각을 하게됩니다. FOUC가 발생하는 이유? 브라우저의 랜더링 과정 때문입니다. 브라우저렌더링과정 DOM ⇢ CSS ⇢ JS 순으로 진행되기 때문에, 번들이 되거나, CSS가 여러개일 때, CSS를 로더하기 전, HTML 이 먼저 렌더된다면, CSS없이 페이지가 랜더될 수 있는 것입니다. FOUC를 더욱 발생시키는 요소? 1. 최근의 웹 페이지들은 아래와 같은 방..