개발 기본 상식

출처 : https://github.com/junh0328/prepare_frontend_interview/

display 🔥

display 속성은 웹 페이지의 레이아웃(layout)을 결정하는 CSS의 중요한 속성 중 하나입니다. 이 속성은 해당 HTML 요소가 웹 브라우저에 언제 어떻게 보이는가를 결정합니다.

대부분의 HTML 요소는 display 속성의 기본값으로 다음 두 가지 값 중 하나의 값을 가집니다.

블록(block)
인라인(inline)

block

display 속성값이 블록(block)인 요소는 언제나 새로운 라인(line)에서 시작하며, 해당 라인의 모든 너비를 차지합니다 <div>, <h1>, <p>, <ul>, <ol>, <form>요소는 대표적인 블록(block) 요소입니다.

inline

display 속성값이 인라인(inline)인 요소는 새로운 라인(line)에서 시작하지 않습니다. 또한, 요소의 너비도 해당 라인 전체가 아닌 해당 HTML 요소의 내용(content)만큼만 차지합니다. <span>, <a>, <img>요소는 대표적인 인라인(inline) 요소입니다.

inline-block

display 속성값이 인라인-블록으로 설정된 요소는 해당 요소 자체는 인라인(inline) 요소처럼 동작합니다.

하지만 해당 요소 내부에서는 블록(block) 요소처럼 동작합니다.

이처럼 인라인-블록 요소는 인라인 요소와 비슷하지만, 너비와 높이를 설정할 수 있습니다.

또한, 블록 요소처럼 margin을 이용하여 여백을 지정할 수도 있게 됩니다.

visible : 해당 HTML 요소를 웹 페이지에 나타냅니다.
hidden : HTML 요소를 웹 페이지에 나타내지 않습니다. 하지만 여전히 웹 페이지의 레이아웃에는 존재합니다.
collapse : 이 속성값은 동적인 테이블에서만 사용할 수 있으며, 테이블의 테두리를 한 줄만 보여줍니다.

position에 대하여 설명해보세요. 🔥

position 속성은 문서 상에 요소를 배치하는 방법을 지정합니다. position 속성은 요소의 정확한 위치 지정을 위해서 top, left, bottom, right 속성과 함께 사용됩니다.

static

position 속성을 별도로 지정해주지 않으면 기본값인 static이 적용됩니다. position 속성이 static인 요소는 HTML 문서 상에서 원래 있어야하는 위치에 배치됩니다.

이 말은 요소들이 HTML에 작성된 순서 그대로 브라우저 화면에 표시가 된다는 것을 뜻하며, 따라서 top, left, bottom, right 속성값은 position 속성이 static일 때는 무시됩니다.

relative

소를 원래 위치에서 벗어나게 배치할 수 있게 됩니다. 요소를 원래 위치를 기준으로 상대적(relative)으로 배치해준다고 생각하시면 이해가 쉬울 것 같은데요. 요소의 위치 지정은 top, bottom, left, right 속성을 이용해서, 요소가 원래 위치에 있을 때의 상하좌우로 부터 얼마나 떨어지게 할지를 지정할 수 있습니다.

fixed

이게 가능한 이유는 fixed 속성값의 배치 기준이 자신이나 부모 요소가 아닌 뷰포트(viewport), 즉 브라우저 전체화면이기 때문인데요. top, left, bottom, right 속성은 각각 브라우저 상단, 좌측, 하단, 우측으로 부터 해당 요소가 얼마나 떨어져있는지를 결정합니다.

absolute

position 속성이 absolute일 때 해당 요소는 배치 기준을 자신이 아닌 상위 요소에서 찾습니다. DOM 트리를 따라 올라가다가 position 속성이 static이 아닌 첫 번째 상위 요소가 해당 요소의 배치 기준으로 설정되는데요. 만약에 해당 요소 상위에 position 속성이 static이 아닌 요소가 없다면, DOM 트리에 최상위에 있는 <body> 요소가 배치 기준이 됩니다.

sticky

position 속성의 sticky 값은 CSS에서 비교적 최근에 추가된 속성값인데요. 특이하게도 요소가 스크롤링될 때 효과가 나타납니다.

float가 어떻게 작동하는가 🔥

loat는 CSS 위치지정 속성이다.

Float 된 Element는 페이지의 흐름의 일부가되며, 페이지의 흐름에서 제거되는 position: absolute 와 달리

다른 요소 (floating element 주위에 있는 텍스트)의 위치에 영향을 준다.

CSS clear 속성은 float Element에 left/right/both를 적용시킬 수 있다.

부모 Element에만 float가 있으면 그 높이는 무효가 되고, 컨테이너의 float Element 다음에 있지만 컨테이너가 닫히기 전에 float를 clear한다면 해결할 수 있다.

Flexbox나 Grid 스펙을 사용해본 적이 있나요 ? 🔥

Flexbox는 주로 1차원 레이아웃을 대상으로 하며 Grid는 2차원 레이아웃을 대상으로 합니다.

Flexbox는 CSS에서 컨테이너 안에 있는 요소의 수직 가운데정렬, sticky footer 등과 같은 많은 일반적인 문제들을 해결합니다. Bootstrap과 Bulma는 Flexbox를 기반으로 하고, 이는 아마도 요즘 레이아웃을 만드는 데 권장되는 방법일 것입니다.

Grid는 그리드 기반의 레이아웃을 생성하기 위한 가장 직관적인 접근법이지만(더 좋을 것입니다!), 현재 브라우저 지원은 넓지 않습니다.

반응형 웹의 3요소 🔥🔥

그리드 레이아웃, 가변형 이미지, 미디어 쿼리 1) 그리드 레이아웃 : 부모요소에 display:grid; 속성을 넣어준다. 2) 가변형 이미지 : max width, width, min-width등을 이용해 화면 너비에 따라 높이와 너비가 바뀌는 이미지 3) 미디어 쿼리 컨텐츠의 변경없이 주로 화면의 크기에 따라 스타일 시트를 달리하여 적절한 모양을 보여줄 수 있다.

CSS selector가 어떠한 원리로 동작하나요? 🔥

선택자는 크게 4가지로 분류할 수 있다.

ID : #header, #footer Class : .container Tag : div, p, a Universal : * 오픈소스 엔진으로는 Webkit(크롬, 사파리)과 Gecko(파이어폭스)가 널리 사용되고 있다. 스타일 엔진은 키 셀렉터로부터 시작하여 왼쪽으로 이동하면서 엘리먼트가 규칙에 적합한지 확인한다. 만약 엘리먼트가 이 규칙에 적합하거나 적합하지 않다는게 확인되면 멈춘다.

반응형웹과 적응형웹에 설명하시오 🔥

적응형 웹은 서버나 클라이언트에서 웹에 접근한 디바이스를 체크하여 그 다바이스에 최적화된 마크업을 호출한다. 적응형 웹의 특징으로는 기존의 사이트를 재구축할 필요가 없고 다양한 디바이스에 최적의 성능을 가져올 수 있다. 반면, 반응형 웹은 미디어 쿼리를 사용하여 화면의 크기를 확인하고 유연한 이미지와 그리드로 화면 크기의 변화에 따라 그에 맞는 크기가 된다.

반응형웹 장단점

하나의 템플릿만을 사용해 다양한 사용자와 기기에 대응할 수 있어 개발이 간편하다는 장점을 가진다. 그러나, 사용자는 단 하나의 기기만으로 접속하지만 그 경우에도 모든 기기를 위한 CSS를 전부 다운로드 해야하니 데이터를 낭비하고 로딩시간을 늘리는 단점을 가진다.

또, 기존에 이미 운영중이었던 데스크톱용 사이트가 있었다면 사이트를 재구축해야만 한다는 점에서 불편할 수 있다.

적응형웹 장단점

기존에 이미 데스크톱용 템플릿을 작성했따면 처음부터 재구축할 필요없이 다른 기기용 템플릿만 따로 만들면 된다. 또한 사용자의 기기에 맞는 템플릿 및 CSS만 다운로드하므로 데이터 낭비가 적고 로딩 속도가 빠르다. 다만, 각 기기별로 별도의 템플릿을 작성해야하므로 개발이 복잡해진다.

CSS 기본상식2