- Keyword
IntersectionObserver / Infinite Scroll / Custom Hooks / CSS
일단 무한 스크롤 적용은 했지만, 많이 부족하다.
공부할 것이 많은 한 주가 될 것 같다.
- Quiz 정리
Q1.
CSS보다 SCSS/SASS가 가진 장점에 대해 설명하세요.
A1.
SCSS와 SASS는 CSS의 전처리기입니다.
CSS보다 쉬우면서, 추가 기능이 있는 CSS의 확장판 같은 역할을 합니다.
SCSS는 CSS 문법에 SASS 문법을 섞은 것이며, SASS 컴파일러로 그대로 컴파일됩니다.
SCSS/SASS를 사용하면 SASS의 Nesting을 이용하여 코드 중복을 줄일 수 있고, 연관된 코드를 그룹화할 수 있습니다.
$로 시작하는 변수를 지정하여 일괄적으로 값을 변경할 수 있습니다.
또한, 함수와 연산자를 사용할 수 있고, mixin을 사용해 CSS 그룹을 만들고 재사용이 가능하며, extend를 이용해 특정 셀렉터를 상속할 수 있게 해 줍니다.
이러한 장점으로 코드를 쉽게 관리해 유지보수성을 극대화할 수 있습니다.
Q2.
id와 class 셀렉터의 차이점에 대해 설명하세요.
A2.
id는 문서 안의 유일한 요소를 식별하고 싶을 때 사용하며, class는 공통점이 있는 여러 요소를 그룹화하여 식별하고 싶을 때 사용합니다.
CSS에서 id는 #을 앞에 붙이고, class는 .을 붙여서 구별합니다.
또한 id는 class보다 우선순위가 높으며, id의 속성은 해당 요소에 부여된 class의 속성과 관계없이 작동합니다.
Q3.
CSS 박스 모델에 대해서 설명하세요.
A3.
모든 HTML 요소는 박스 모양으로 구성되기 때문에 박스 모델이라고 합니다.
박스 모델에서는 각 HTML 요소들에 padding, border, margin, content가 있다.
content는 박스의 실질적 내용으로 텍스트나 이미지 등 요소의 실제 내용이 들어가며,
padding는 content와 border 사이에 있는 안쪽 여백, border는 content와 padding을 감싸는 테두리며,
margin은 border를 기준으로 이웃하는 요소 사이의 간격을 뜻합니다.
Q4.
CSS에서 px, em, rem, vh, vw 단위들의 차이점은 무엇인가요?
A4.
px는 절대 길이 단위이고, 나머지 em, rem, vh, vw는 상대 길이 단위입니다.
px는 일반적인 모니터 디스플레이의 1 픽셀을 의미합니다.
em, rem은 글꼴 상대 길이이며, em는 상위 요소, rem은 루트 요소의 폰트 사이즈를 기준으로 합니다.
vh, vw는 현재 브라우저 화면에서 보이는 뷰포트 기준으로 1vh는 뷰포트 높이의 1%, 1vw는 뷰포트 너비의 1%를 기준으로 설정합니다.
Q5.
CSS 레이아웃 기법의 종류와 특징에 대해서 설명하세요.
A5.
크게 flexbox와 grid가 있습니다.
flexbox는 인터페이스 내 아이템 간 공간 배분과 정렬 기능을 제공하기 위한 1차원 레이아웃 모델로 설계되었습니다.
수평축 혹은 수직축 방향으로 요소를 배치, 정렬할 수 있으며, 각 요소의 순서를 변경할 수 있습니다.
grid는 테이블처럼 행과 열을 기준으로 요소를 정렬합니다. 행과 열 격자 구조에 요소를 자유롭게 배치할 수 있고, HTML 문서 위계 구조와 무관하게 아이템을 grid 내부에 자유롭게 위치시킬 수 있습니다. 행과 열을 함께 조절하는 2차원 모델로 설계되었습니다.
Q6.
CSS in JS(styled component)의 장단점에 대해서 설명하세요.
A6.
styled component를 사용하면 class 명이 빌드 시 유니크한 해시값으로 변경되기 때문에 별도의 명명 규칙이 필요하지 않습니다. 그리고 CSS가 컴포넌트 단위로 추상화되기 때문에 CSS 파일 간 의존성을 신경 쓰지 않아도 됩니다.
CSS 코드를 자바스크립트 파일에 작성하기 때문에, 컴포넌트의 상태에 따른 동적 코딩이 가능합니다.
단점으로는 아무래도 라이브러리를 설치해야 되기 때문에 번들의 크기가 커지고, 자바스크립트의 CSS 코드를 읽어와야 되기 때문에 비교적 느립니다.
Q7.
position 속성과 z-index의 연관성에 대해 설명하세요.
A7.
position 속성이 없는 태그는 순서대로 쌓입니다.
position 속성이 있는 태그들은 없는 태그들보다 위에 쌓입니다.
position 속성과 z-index 값이 있으면 z-index 값이 큰 태그가 위에 쌓입니다.
z-index 값이 커도 부모 태그의 z-index가 우선으로 적용됩니다.
- 오늘 하루 느낀 점
몸 상태가 좀 최악이었다.
불면증 때문에 잠도 제대로 못 자서 오전부터 기운이 없었고 저녁 이후에는 당이 떨어진 건지 힘이 안 났다.
몸 관리도 내가 잘 못 관리한 것이니까 생활 패턴을 좀 바꿔야겠다.
이번 5번째 팀 과제에서도 무한 스크롤 기능을 맡았다.
재밌긴 하지만 IntersectionObserver가 익숙지 않아 코드를 잘 못 짜겠고, Custom Hooks를 만드는 것도 능숙하지 않아서 아직 부족하다는 것을 깨닫는 하루였다.
주말에 정리하자.