🙋🏻♀️ 목표: 실제 현업에서 면접시에 나올법한 내용들을 간추려서 한 번 정리해보자.🚀
1. 🥷자네, Id와 Class의 차이점은 뭔가?
🙌"네, Id와 class의 차이는 단순히 중복과 관련이 있습니다. 고유한 식별자를 주고싶을 땐 Id를 사용하고 클래스는 이와 반대입니다.
2. "reset" CSS가 무엇인가?
🙌"네, reset CSS는 브라우저 제조사에서 만들어 놓은 기본 스타일링 값을 초기화하는 것입니다.
3. padding과 margin의 차이는 무엇인가?
🙌"네, margin은 박스를 기준으로 외부를 말하고, padding은 내부 영역을 말합니다.
4. CSS 전처리기를 사용해 보았나, 장단점은 무엇인가?
🙌"네, 우리 프로젝트 규모가 점점 커지면서 너무 큰 CSS 파일을 수정하기 힘들었기 때문입니다.
따라서 장점으로는 CSS 코드를 여러 파일로 나누기 때문에 유지 보수하기 쉽고, 선택자를 한꺼번에 묶어서 속성값을 지정할 수 있습니다. 또한 조건문이나 반복문 그리고 연산도 가능합니다.
하지만 단점으로는 웹에서는 CSS만 동작하기 때문에 전처리기를 다시 CSS로 컴파일을 해줘야합니다. 그 다음에 동작시켜야 합니다. 이 과정에서 시간이 좀 걸릴 수 있습니다.
5. float에서 클리어링 기술을 아는가? flex-box와 차이점은 무엇인가?
🙌"네, 요소가 float 속성에 대해 영향을 안받고 싶을 때 사용합니다. float와 flex-box의 차이점은 브라우저 호환성에 있습니다.
6. { box-sizing: border-box; } 는 무엇을 의미하는가?
🙌"네, 박스 사이즈를 결정할 때 border까지 합해서 결정하겠다 라는 것입니다.
가령 border-box; 로 지정된 요소에 padding 값을 주게 되면, 박스 사이즈는 유지하되 안에 들어있는 컨텐츠의 크기는 바껴도 상관없다는 뜻입니다.
7. display 속성 중에 block과 inline과 inline-block의 차이점은 무엇인가?
🙌"네, block 은 한 줄을 다 차지하겠다 라는 것이고, inline 은 차지한 부분이 있으면 모두 없애 버리겠다는 뜻이며 inline-block 은 양 옆에 차지했던 공간들만 없애겠다 라는 뜻입니다. 위아래까지는 아닌 것입니다.
8. 요소를 배치하는 방법중에 static, relative, fixed, absolute, sticky의 차이점은 무엇인가?
🙌네, 전부 다 position 과 관련된 속성값인데요, static 은 기본 위치입니다. 포지션 기본값이라고 할 수 있습니다. relative 는 레이아웃이 변경되지는 않고 원래 있었던 자리에서 포지션 값 만큼의 위치 변경이 일어납니다. absoulte 는 가장 가까이에 있는 부모 요소의 포지션 속성값이 relative 한 부모 요소를 기준으로 이동합니다.
그리고 fixed 는 페이지를 벗어나서 페이지를 기준으로 위치를 고정시켜 달라는 것이고, sticky 는 fixed 와 다르게 내가 위아래 값을 지정할테니 값 만큼 부모 요소로 부터 고정시켜 달라는 뜻이다.
9. CSS 선택자는 써 보았는가? 어떤 원리인가?
🙌네, 선택자는 크게 네 가지가 있습니다. id class tag * 인데요, 선택자를 활용하여 DOM트리를 탐색합니다. 노드를 찾아내는 것입니다.
10. 컨텐츠를 안보이게 하는 기술들을 써 보았고 차이점을 아는가?(+스크린 리더에서 접근이 가능한 방법을 아는가?)
🙌네, 사용자에게 컨텐츠를 안보이게 하는 방법으로는 display: none; 과 visibility: hidden; 이 있습니다. 전자는 아예 없어지는 것이고, 후자는 존재하지만 사용자에게는 안보이게, 투명하게 만드는 것입니다. 그리고 스크린 리더에서 접근하는 방법은 width: 0; height:0; overflow: hidden; text-indent, position은 음수를 사용 합니다.
11. box model은 무엇이며, 브라우저에서 어떻게 동작하는가?
🙌네, 박스 모델은 애초에 object를 어떻게 시각적으로 모델링할 지 생각해 보다가 만들어낸 용어입니다. 박스 규격과도 같은데요, 규칙을 임의로 만든 것입니다. 박스 모델은 2가지가 있습니다. W3C 박스 모델과 IE 박스 모델입니다. W3C 모델은 기본값이 box-sizing: content-box; 이고 IE 모델은 기본값이 box-sizing: border-box; 입니다.
12. flex-box를 사용하는 이유가 무엇이라고 생각하는가?
🙌네, 레이아웃을 좀 더 쉽게 잡기 위해서 입니다. 기존에 CSS에서 제공하는 float 나 inline-block 으로도 가능은 했습니다. 억지로 끼워 맞추는게 가능했습니다만 지금은 조금 더 유연한 flex-box 를 많이 사용합니다.
13. 웹 페이지에서 표준 폰트가 아닌 희안한 폰트를 사용해 보았는가, 그거 어떻게 처리했는가?
🙌"웹 서버에서 폰트 파일(.eot, .woff 등)을 올려서 사용합니다.
14. CSS Sprites라고 아는가? 이것이 성능과 어떤 연관성이 있는지 생각해 보았는가?
🙌네, 사용자가 웹 사이트에 들어가면 웹 브라우저는 서버로부터 웹 서비스에 필요한 여러가지 코드 문서나 이미지 등을 다운로드 합니다. 만약, 대규모 컨텐츠를 제공하는 웹 서비스라면 이미지 리소스의 총량도 그만큼 커질 수 밖에 없습니다. 사실 사용자가 웹 사이트 하나를 보기 위해서 여러가지 자원들을 다운로드할 때 발생되는 네트워크 트레픽 은 서버 운영 비용을 증가시킵니다. 그리고 웹 사이트의 속도에 영향을 줍니다. 따라서 대부분의 웹 서비스에서는 레이아웃 구성에 필요한 이미지들을 하나로 뭉쳐버리고 이미지 크기도 완전히 줄여 버립니다. 이러한 목적으로 만들어진 리소스를 CSS 스프라이트 라고 하는 것입니다. 이 방식은 굉장히 획기적이고 경제적입니다. HTTP 요청(Request) 횟수를 엄청나게 줄이기 때문입니다. 여담으로 게임 개발에도 많이 쓰이는 방식입니다.
15. CSS flex-box와 관련해서 Grid 스펙을 사용해 본 적이 있는가?
🙌네, flex-box는 주로 1차원 레이아웃을 대상으로 하고 Grid는 2차원 레이아웃을 대상으로 합니다.
flex-box 는 CSS에서 요소의 수직, 수평정렬 그리고 sticky footer 와 같은 문제들을 쉽게 해결합니다. Bootstrap과 Bulma는 flex-box 를 기반으로 하고 이것이 실용적인 대안이 될 수 있습니다. flex-box 는 여전히 웹 브라우저 호환성을 고려해야 합니다. 왜냐하면 flex-grow 를 사용할 때 사파리와 호환성에 문제가 있기 때문에 inline-block 과 수학을 사용해야 하는 큰 어려움이 있습니다.
Grid는 그리드 기반의 2차원 레이아웃을 생성하기 위한 좋은 방법이지만 지원하는 브라우저가 많지 않습니다.
16. { position: absolute; } 대신 translate()를 사용하는 경우에 대해서 생각해 보았는가?
🙌네, 성능과 연관이 있기 때문입니다.
우리가 transform 이나 opacity 를 변경해도 reflow 나 repaint 가 발생되지 않고 해당 컴포지션만 실행되지만 position: absolute; 는 reflow 가 발생하기 때문에 CPU에 영향이 있습니다. CPU를 사용하는 것입니다. 반대로 transform 은 GPU 레이어가 생성이 됩니다. 이런 차이가 있습니다. 개발 툴에서 확인해 보면 둘은 성능에 차이가 있다고 알려줍니다.
17. CSS 테스트에 대해서 생각해 보았는가?
🙌네, CSS 테스트를 통해 CSS 파일들에 에러가 없는지 확인하는 것이며 Stylelint 로 확인해 볼 수 있습니다.
18. CSS 임베딩 또는 인라인에 대해서 생각해 보았는가?
🙌네, HTML에 CSS를 같이 작성하는 것입니다. 애초에 둘은 역할이 다르기 때문에 따로 구별해서 연결만 시켜놓고 관리하는 것이 더 좋습니다.
19. 벤더 프리픽스라는 용어를 아는가?
🙌네, 예전에 브라우저 전쟁이 있었습니다. 그래서 통합되지 못한 다양한 브라우저에서 잘 구현되게끔 접두사와 함께 스타일링 하는 것입니다. 현재는 CSS 프레임워크가 잘 나와있습니다.
PostCSS와 같은 CSS 전처리기를 활용하면 번거롭지 않고 간단하게 스타일링 가능합니다.
20. 성능과 관련해서 Non-blocking을 알고 있는가?
🙌네, CSS파일들은 기본적으로 DOM이 로딩하는데에 방해가 되지 않도록 비동기적으로 로드가 이루어져야 하는 것을 말합니다.
