- block 부모 컨테이너의 너비를 채운다. 새 줄에서 시작하고, 그 옆에 HTML 요소를 허용하지 않는다. (float사용시에는 허용) width/height 지정이 가능하다. vertical-align 정렬이 불가능하다. margin, padding이 모든 방향에서 가능하다. - inline-block 내용에 크기를 의존한다. 다른 콘텐츠와 함께 흐르고, 다른 요소가 옆에 있는 것을 허용한다. width/height 지정이 가능하다. vertical-align 정렬이 가능하다. margin, padding 모든 방향에서 가능하다. - inline 내용에 크기를 의존한다. 다른 콘텐츠와 함께 흐르고, 다른 요소가 옆에 있는 것을 허용한다. width/height 설정이 무시된다. vertical-al..
Float는 CSS 위치지정 속성이다. Float 된 Element는 페이지의 흐름의 일부가되며, 페이지의 흐름에서 제거되는 position: absolute 와 달리 다른 요소 (floating element 주위에 있는 텍스트)의 위치에 영향을 준다. CSS clear 속성은 float Element에 left/right/both를 적용시킬 수 있다. 부모 Element에만 float가 있으면 그 높이는 무효가 되고, 컨테이너의 float Element 다음에 있지만 컨테이너가 닫히기 전에 float를 clear한다면 해결할 수 있다. 나중에 다시보기 github.com/zereight/front-end-interview-handbook/blob/master/contents/kr/css-questio..
- Resetting Resetting은 요소의 모든 기본 브라우저 스타일을 제거하기 위한 것이다. ex) margin, font-size, padding 재설정 - Normalizing Normalizing은 모든 스타일을 제거하는 것이 아니라, 유용한 기본 스타일을 보존하고 브라우저 종속성에 대한 버그를 수정하는 것이다. => 나만의 스타일링을 많이 해야할때 Resetting github.com/zereight/front-end-interview-handbook/blob/master/contents/kr/css-questions.md#resetting%EA%B3%BC-normalizing-css%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90%EC%9D%80-%EB%AC%B4%EC%..
브라우저는 CSS 선택자의 특정성에 따라 Element에 표시할 스타일을 결정한다. CSS 선택자는 4개의 쉼표로 구분된 값 a,b,c,d 을 기반으로 계산된다. 1. a는 인라인 스타일이 사용되고 있는지 여부이다. 속성의 선언이 인라인 스타일이라면, a는 1, 아니면 0이다. 2. b는 ID 셀렉터의 수 3. c는 클래스, 속성, 가상 클래스 선택자의 수 4. d는 태그, 가상 요소 선택자의 수이다. 결과적으로 css 셀렉터는 점수가 아니라, 4개의 값을 비교하여 가장 높은 특정성을 갖는 항목을 적용한다. a,b,c,d에서 0,1,0,0와 0,0,10,10 이 있다면 0,1,0,0이 우선적으로 반영된다는 것이다. 동등한 특정성의 경우에는, 가장 마지막 규칙이 중요한 규칙이라 판단한다. (중복으로 스타일..
기기의 디스플레이 너비에 따라 다른 이미지를 사용자에게 제공하려는 경우, srcset을 사용한다. 레티나 디스플레이를 통해 고품질 이미지를 제공하여 사용자 경험을 향상시키고, 저해상도 저사양 기기에 제공하여 성능을 높이고 데이터 낭비를 줄인다. (더 큰 이미지를 제공하는 것은 눈에 보일 정도의 차이가 없기 때문) 예를 들어서 는 클라이언트 해상도에 따라 브라우저에 small, medium, large .jpg 그래픽을 표시하도록 지시한다. (첫번째 값은 이미지이름이고 두번째 값은 픽셀 단위의 이미지 width이다.) 즉, 클라이언트의 해상도가 1x일 경우, small.jpg 에 해당하는 500w가 브라우저에 의해 선택된다. 해상도가 레티나(2x) 인 경우, 브라우저는 최소값에서 가장 위로 가까운 해상도를..
왜 css 를 내에 선언하고, js 를 직전에 위치시키는 것이 좋은 방법인가? - 안에 를 넣는 이유 를 안에 넣는 것은 최적화된 웹사이트를 구출할 때 적절한 스펙이다. 페이지가 처음 로드되면, HTML과 CSS가 동시에 파싱되는데, HTML은 DOM(Document Object Model)을 만들고, CSS는 CSSOM (CSS Object Model) 을 만든다. 2가지 모두 웹 사이트에서 시각적인 부분을 만드는데 필요하므로, 빠른 first meaningful paint를 할 수 있게 해준다. (first meaningful paint은 사이트의 성능 지표중 하나) 문서 최하단에 stylescheet를 두는 것은 이에 반하는 행동이다. 또한, 점진적인 렌더링을 하는 경우 몇몇 브라우저는 스타일이 변..
https://github.com/woowacourse-fe-study/havruta-frontend/discussions/30 - HTML 파싱이 중단되고, 스크립트를 즉시 가져오고 실행되며, 스크립트 실행 후 HTML 파싱이 다시 시작된다. - HTML 파싱과 병렬적으로 진행되며, 가능할 때 즉시 실행된다. (HTML 파싱이 끝나기 전) 스크립트가 페이지의 다른 스크립트들과 독립적인 경우에 async를 사용하는 편이다. - HTML 파싱과 병렬적으로 가져오지만, 페이지 파싱이 끝나면 실행된다. 이것이 여러개 있는 경우, 각 스크립트는 페이지에 등장한 순서대로 실행된다. 스크립트가 완전히 파싱된 DOM에 의존하는 경우, defer 속성은 스크립트를 실행하기 전에 HTML이 완전히 파싱되도록 하는데 유용..
cookie, sessionStorage, localStorage 기술은 모두 클라이언트 측에서 값을 저장하는 key-value 저장소 매커니즘이다. 모두 문자열로만 값을 저장할 수 있다. cookie localStrorage sessionStorage 생성자 클라이언트 또는 서버 Set-Cookie 헤더를 사용 클라이언트 클라이언트 만료 수동으로 설정 영구 탭 종료 시 브라우저 세션 전체에서 지속 만료 설정 여부에 따라 다름 ㅇ X 모든 http 요청과 함께 서버로 보냄 쿠키는 Cookie 헤더를 통해 자동 전송됨 X X 용량 (도메인 별) 4kb 5MB 5MB 접근성 모든 윈도우 모든 윈도우 같은 탭
