CSS
display 🔥
요소를 어떻게 보여줄지를 결정한다.
block, inline-block, none, flex, grid
block
- 요소에 전후 줄바꿈이 들어간다. 혼자 한줄을 차지한다.
<div>, <p>, <h1~h6>, <ul>, 시멘틱 태그
inline
- 요소들이 한줄에 나란히 배치된다.
- w랑 h가 없다.
<span>, <a>, <em>, <strong>등
inline-block
- block+inline
- inline이면서 w랑 h 넣을 수 있다. 즉 w랑 h를 설정하면서 여러개의 요소를 한 줄에 나란히 배치 가능하다.
none
- 요소가 없어진다.
- 화면에서 특정 요소를 감추고 싶을 때 사용한다.
- 브라우저에서 렌더링되지 않으며, 화면에 표시되지도 공간을 차지하지도 않는다.
- 시각적으로는 보이지 않지만 접근성을 위해 필요한 폼 요소나 링크를 “display: none”으로 숨기기도
visibility:hidden은 보이지 않지만 공간을 차지하는 옵션
position에 대하여 설명해보세요. 🔥
position은 문서 상에 요소를 어떻게 배치할 것인가를 지정한다.
static, relative, absolute, sticky, top, left, right, bottom
static
position의 기본값으로, 왼쪽에서 오른쪽, 위에서 아래로 쌓인다.
relative
static은 위에서 아래로 그냥 쌓이기 때문에 위치 변경이 어렵다. 위치를 변경하고 싶다면 relative를 쓸 수 있다. position을 relative로 설정하고, top, right, bottom, left 속성을 사용해 위치 조절이 가능하다.
relative는 각각의 방향을 기준으로 태그 안쪽 방향으로 이동한다 → ex) top을 2로 설정하면, 2만큼 요소의 위에서 멀어진다.
fixed
특정 위치에 고정시키는 옵션
absolute
position: static 속성을 가지고 있지 않은 부모를 기준으로 한다. 만약 부모 중에 relative, absolute, fixed인 태그가 없다면 가장 위의 태그(body)가 기준이 된다.
float가 어떻게 작동하는가 🔥
float는 떠있다는 의미.
위에서 아래로, 왼쪽에서 오른쪽으로 태그들이 순서대로 배치되고 있는데, float옵션이 들어간 태그를 중간에 넣으면 그 태그가 중간에 붕 뜨게 된다. 그리고 남은 태그들이 그 자리를 메꾸는 형태.
만약 float로 인한 영향을 없애고 싶다면 float: clear도 가능
근데 요새는 잘 안 쓰는 것 같다. flex 쓸 듯.
💡 sticky와 fixed 차이
fixed는 화면 스크롤 상관없이 고정됨
sticky는 스크롤 내리면 그때서야 고정
Flexbox나 Grid 스펙을 사용해본 적이 있나요 ? 🔥
Flex 를 사용하는 이유가 무엇인가요?
1차원의 레이아웃을 설정하기 위해 사용한다.
네비게이션 메뉴나 탭 같은데에서 많이 쓴다.
Grid를 사용하는 이유가 무엇인가요?
2차원의 레이아웃을 설정하기 위해 사용한다. 가령 갤러리나 뉴스기사 레이아웃처럼 width와 height가 다양한 블럭 느낌으로 이뤄진 요소들에 많이 쓴다.
이미지 태그를 스타일로 대체하는 법 🔥
이 질문의 의도를 파악하지 못했다…
background-image - CSS: Cascading Style Sheets | MDN
반응형 웹의 3요소 🔥🔥
첫째, 그리드 레이아웃. 부모 요소에 display: grid 속성을 넣어준다.
둘째, 가변형 이미지: max width, width, min-width 등을 이용해 화면 너비에 따라 높이와 너비가 바뀌는 이미지
셋째, 미디어 쿼리: 미디어 타입과, 미디어 특성(width, height, color 등)을 이용하여 그 특성에 따라 다른 스타일 적용 가능
CSS selector가 어떠한 원리로 동작하나요? 🔥
전체선택자(*), 태그선택자(div, p, a), 클래스선택자(.classname), ID선택자(#)
반응형웹과 적응형웹에 설명하시오 🔥
반응형 웹이란? 🔥
사용자가 이용하고 있는 디바이스의 해상도에 따라 웹사이트의 크기가 변경되는 것이다. 어떤 디바이스에서 접속했을 때에나 동일한 URL 유지하는 게 일반적이다.
적응형 웹이란?
규칙적인 UI로 동작시키기 어렵기 때문에, PC용-모바일용 등, 해상도를 별도로 나눠서 구축 하는 것을 의미한다. 보통 PC와 모바일의 URL이 다르다.
💡 42 Peer는 반응형+적응형 ⇒ 화면이 너무 작아지거나 크게 되었을때 불편한 상황 생기니까!
PX, EM에 대해 설명하시오 🔥🔥
절대단위
다른 부분에 영향을 받지 않고 동일한 크기를 가진 단위
px
화면(해상도)의 가장 작은 단위인 픽셀을 기준.
10px이면? 10개의 픽셀로 이뤄진 크기
pt
인쇄물에서 사용하는 단위. 1px=1/72인치
상대단위
상위 요소의 글꼴 크기나 viewport 크기와 같이 다른 요소와 관련하여 크기가 변하는 단위. 다른 것에 비례하도록 조정할 수 있다는 점
em
상위 요소의 글꼴 크기가 기준. 1em = 현재 요소의 글꼴 크기에 해당
ex
글꼴의 ‘x’ 문자의 높이를 기준으로 크기를 조절
%
기존 글꼴의 크기에 대하여 퍼센트로 계산
| 단위 | 이름 | 다음과 동일함 |
|---|---|---|
| cm | 센티미터 | 1cm = 37.8px = 25.2/64in |
| mm | 밀리미터 | 1mm = 1/10th of 1cm |
| Q | 4분의 1밀리미터 | 1Q = 1/40th of 1cm |
| in | 인치 | 1in = 2.54cm = 96px |
| pc | Picas | 1pc = 1/6th of 1in |
| pt | 포인트 | 1pt = 1/72nd of 1in |
| px | 픽셀 | 1px = 1/96th of 1in |
CSS 적용 우선순위 🔥🔥
- !important
- inline으로 넣은 style
- id
- class, 수도 클래스(:first-child)
- 태그, 수도 엘레먼트(::before)
- 상위 객체에 의해 상속된 속성
CSS-in-JS에 대해서 설명해 주세요. 🔥
CSS를 JS 코드 안에서 작성하는 것으로, styled-components과 emotion 등이 있다.
장점으로는 CSS를 문서 레벨(css 파일)이 아닌 컴포넌트 레벨로 추상화한다는점, JS와 CSS 사이의 상수와 함수를 공유할 수 있다는 점, 현재 사용중인 스타일만 DOM에 포함할 수 있다는 점이 있습니다.
단점으로는 러닝 커브가 있다는 점과, CSS IN JS 라이브러리에 대한 새로운 의존성이 생기고 라이브러리 설치에 따른 번들 크기가 증가한다는 점이다. CSS IN CSS에 비해 느린 속도를 가지고 있다는 점이다.
CSS 전처리기(CSS preprocessors)를 사용해보셨나요? 🔥
CSS 전처리기란? CSS 전처리기에 맞는 문법에 맞게 프로그래밍하고 컴파일러를 통해서 CSS 파일로 결과물이 나오는 구조.
Sass나 Less, Stylus 등이 있다.
장점으로는, 프로그래밍이 가능하니 반복적인 항목을 줄일 수 있다는 점입니다.
padding과 margin의 차이가 무엇인가요? 🔥
padding에 대하여
- 해당 요소의 내부 여백을 조절한다.
margin에 대하여
- 해당 요소의 외부 여백을 조절한다.
