브라우저는 웹페이지에 약간의 CSS가 적용되어있습니다.
CSS 재설정을 하려는 이유는 무엇입니까?
모든 브라우저에서 스타일을 동일하게 지정하기 위해 CSS 재설정을 합니다.
Reset CSS tools
절대 단위는 모든 상황에서 항상 동일한 단위입니다.
px
는 페이지의 다른 항목과 관련하여 변경되지 않으므로 절대 단위입니다.
상대 단위는 어떤 기준에 따라 변경될 수 있는 단위입니다.
em
은 해당 단위가 사용되고 있는 요소의 font-size
속성값에 비례해서 결정되는 상대 단위입니다.
div {
font-size: 20px;
width: 10em; /* 200px */
}
rem
은 최상위 요소, 즉 html
요소의 font-size
속성 값이 기준이 됩니다. 보통 16px
입니다.
div {
font-size: 20px;
width: 10rem; /* 160px */
}
vw
와 vh
는 뷰포트의 사이즈와 관계가 있습니다. 1vh
는 1%
의 뷰포트 높이와 같고 1vw
는 1%
의 뷰포트 너비와 같습니다.
왜
px
대신 글꼴 크기에em
,rem
을 사용하고 싶습니까?
em
과 rem
은 사용자가 기본 글꼴 크기를 변경하여 가독성을 높일 수 있습니다.
vh
와vw
를 사용하고 싶은 경우는 무엇입니까?
full-height의 hero나 full-screen의 app과 같은 인터페이스에 유용합니다.
사용자 컴퓨터에 설치되지 않은 글꼴을 추가하는 두 가지 방법은 무엇입니까?
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
해당 글꼴을 가져오고 CSS에서 사용할 수 있도록 설정합니다.
body {
font-family: 'Roboto', sans-serif;
}
@font-face {
font-family: my-cool-font;
src: url(../fonts/the-font-file.woff);
}
h1 {
font-family: my-cool-font, sans-serif;
}
system font stack은 무엇이며 왜 사용하고 싶습니까?
시스템 글꼴 스택은 시스템(OS)에 설치된 글꼴을 찾을 때 까지 각 글꼴을 살펴 본 다음 사용합니다.
body {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
단어에서 글자 사이의 간격을 늘리거나 줄이기 위해 어떤 속성을 사용하십니까?
letter-spacing
속성을 사용합니다.
단락에서 줄 사이의 간격을 늘리거나 줄이기 위해 어떤 속성을 사용하십니까?
line-height
속성을 사용합니다.
후손 선택자와 자식 선택자의 차이점은 무엇입니까?
후손 선택자는 선택 태그 안에 들어있는 모든 것이고, 자식 선택자는 선택 태그 바로 아래 계층에 있는 것을 말합니다.
<div class='container'>
<p>I am the first</p>
<div>
<p>I am the second</p>
</div>
</div>
후손 선택자
.container p {
color: red;
}
여기서 후손 선택자는 container 아래에 있는 모든 p를 얘기한다.
I am the first
I am the second
자식 선택자
.container > p {
color: red;
}
여기서 자식 선택자는 container 바로 아래에 있는 p를 얘기한다.
I am the first
I am the second
의사 클래스와 의사 요소의 구문은 어떻게 다릅니까?
의사 클래스 선택자는 단일 콜론이 접두사로 붙으며 HTML에 이미 존재하는 요소를 대상으로 지정하는 방법이고, 의사 요소는 두 개의 콜론 접두사가 붙으며 일반적으로 마크업에 존재 하지 않는 요소를 대상으로 지정합니다.
의사 클래스 예시
:focus
커서로 선택하거나 키보드를 사용하여 사용자가 현재 선택한 요소에 적용
:active
현재 클릭 중인 요소
:link
링크 요소
:root
부모가 없는 요소인 문서의 최상위 수준을 나타내는 특수 클래스
:nth-child
n번째 형제 요소
의사 요소 예시
::marker
요소의 글머리 기호 또는 번호 스타일
::first-letter
::first-line
일부 텍스트의 첫 글자나 첫 줄
::selection
사용자가 텍스트 선택 시 강조 표시
::before
::after
HTML 대신 CSS를 사용하여 페이지에 추가적인 요소 제공
text 유형의 모든 input 요소를 어떻게 선택할 수 있습니까?
input[type='text']{}
thunder
로 시작하는 모든 클래스를 어떻게 선택할 수 있습니까?
[class^=thunder]{}
ex) .jpg로 끝나는 모든 img?
img[src$='.jpg']{}
static과 relative 포지션의 차이?
static은 기본값이고, 일반적인 문서 흐름에 따라 요소를 배치합니다.
relative는 top
,right
..과 같은 프로퍼티가 주어지면 정상적인 위치로부터 지정하는 양만큼 이동합니다.
absoulte 포지션은 어떤 경우에 유용합니까?
모달이나 캡션이 있는 이미지, 다른 요소 위에 있는 아이콘 등에 유용합니다.
fixed와 sticky의 차이는 무엇입니까?
fixed는 일반적으로 뷰포트에 고정됨을 의미하고,
sticky는 설정한 오프셋에 도달할 때까지 스크롤하고 설정한 지점에 도달하면 멈춥니다.
CSS에서 CSS 수학 함수를 어떻게 사용합니까?
함수는 괄호 사이에 '인수'가 전달되며 각 인수는 함수에서 특정 방식으로 사용됩니다.
color: rgb(0, 42, 255);
background: linear-gradient(90deg, blue, red);
CSS의 네 가지 수학 함수는 무엇입니까?
calc()
CSS 속성의 값으로 계산식을 지정할 수 있습니다.
calc(calc() - calc())
min()
min()
함수는 2개 이상의 대소비교가 가능한 값이 주어졌을 때, 그 중에서 작은 값을 반환합니다.
예를 들어, min(100px, 60%)
의 경우 부모 요소의 크기가 100px
라면 자식 요소의 크기는 100px
와 60%(60px)
중 60%
가 더 작은 값이기 때문에 60%
가 선택됩니다.
반면, 부모 요소의 크기가 그 두배인 200px
라면 자식 요소의 크기는 100px
와 60%(120px)
중 100px
가 더 작은 값이기 때문에 100px
가 선택됩니다.
따라서 min()
함수는 반응형 웹에서 어떤 속성의 최대값을 설정하기 위해 사용됩니다.
max()
max()
는 min()
함수와 반대로 작동합니다. 괄호 안에서 큰 값을 반환합니다.
max()
함수는 화면이 매우 작거나 사용자가 브라우저의 확대/축소 기능을 사용하여 컨텐츠의 크기를 늘릴 때 유용합니다.
max()
함수는 반응형 웹에서 최소값을 설정하기위해 사용됩니다.
clamp()
clamp()
는 clamp(최솟값, 기본값, 최댓값)
형식으로 최솟값과 최댓값의 범위 내에서 중간 값을 선택합니다.
clamp(50%, 300px, 70%)
의 경우, 부모의 너비가 670px
인 경우 clamp(50%(335px), 300px, 70%(469px))
중 중간 값인 50%(335px)
가 선택된다.
부모의 너비가 463px인 경우, clamp(50%(231.5px), 300px, 70%(324.1px))
중 중간 값인 300px
가 선택된다.
만약 부모의 너비가 242px
인 경우, clamp(50%(121px), 300px, 70%(169px))
중 중간 값인 169px
가 선택된다.
사용자 지정 속성을 사용하면 파일 전체에서 CSS 값을 원하는 만큼 참조할 수 있고, 색상을 일관되게 유지할 수 있습니다.
특정 값의 모든 단일 인스턴스를 업데이트 하는 대신 단일 인스턴스만 업데이트 하면 되므로 편리합니다. 다크 모드와 같은 테마를 만드는 데 유용합니다.
.error-modal {
--color-error-text: red;
--modal-border: 1px solid black;
--modal-font-size: calc(2rem + 5vw);
color: var(--color-error-text);
border: var(--modal-border);
font-size: var(--modal-font-size);
}
이중 하이픈 뒤에 대/소문자를 구분해서 하이픈으로 구분된 속성 이름을 사용하여 사용자 지정 속성을 선언합니다. 그리고 접근할 때는 var()
함수를 사용합니다.
사용자 지정 속성의 범위는 선택자에 의해 결정된다.
이 범위는 사용자 지정 속성이 선언된 선택자와 해당 선택자의 모든 하위 항목이 포함된다.
<div class='cool-div'>
<p class='cool-paragraph'>Check out my cool, red background!</p>
</div>
<p class='boring-paragraph'>I'm not in scope so I'm not cool.</p>
.cool-div {
--main-bg: red;
}
.cool-paragraph {
background-color: var(--main-bg);
}
.boring-paragraph {
background-color: var(--main-bg);
}
위 예에서는 cool-div
의 하위 항목인 cool-paragraph
만 빨간색 배경으로 스타일이 지정된다.
:root
:root
선택자에 사용자 지정 속성을 선언하면 다른 모든 선택자가 사용자 지정 속성에 액세스 할 수 있다.
:root
선택기는 페이지에 테마를 추가하는 방법을 제공한다.
:root.dark {
--border-btn: 1px solid rgb(220, 220, 220);
--color-base-bg: rgb(18, 18, 18);
--color-base-text: rgb(240, 240, 240);
--color-btn-bg: rgb(36, 36, 36);
}
:root.light {
--border-btn: 1px solid rgb(36, 36, 36);
--color-base-bg: rgb(240, 240, 240);
--color-base-text: rgb(18, 18, 18);
--color-btn-bg: rgb(220, 220, 220);
}
body {
background-color: var(--color-base-bg);
padding: 10px;
}
미디어 쿼리
prefers-color-scheme
미디어 쿼리를 사용하면 OS 또는 브라우저에서 설정된 테마에 맞게 테마를 설정할 수 있다.
/*기본 light모드*/
:root {
--border-btn: 1px solid rgb(36, 36, 36);
--color-base-bg: rgb(240, 240, 240);
--color-base-text: rgb(18, 18, 18);
--color-btn-bg: rgb(220, 220, 220);
--theme-name: "light";
}
@media (prefers-color-scheme: dark) {
:root {
--border-btn: 1px solid rgb(220, 220, 220);
--color-base-bg: rgb(18, 18, 18);
--color-base-text: rgb(240, 240, 240);
--color-btn-bg: rgb(36, 36, 36);
--theme-name: "dark";
}
}
body {
background-color: var(--color-base-bg);
color: var(--color-base-text);
padding: 10px;
}
이름이
text-color
인 사용자 정의 속성을 어떻게 선언합니까?
--text-color
이름이
background-color
인 사용자 지정 속성에 어떻게 액세스합니까 ?
background-color: var(--bacgkground-color)
범위가 전역이고 다른 모든 선택기가 액세스할 수 있도록 사용자 지정 속성을 선언하는 위치는 어디입니까?
:root
Safari는 iOS 및 iPadOS에서 기술적으로 지원되는 유일한 브라우저이다. 따라서 웹 애플리케이션이 Apple 사용자를 위해 작동하려면 Webkit 및 Safari에서 사용되는 기타 기술에 대한 지원을 보장해야 한다.
Bootstrap
및 Tailwind
와 같은 프레임워크는 일반적으로 사용되는 CSS 코드, 아이콘 및 상호 작용(메뉴 드롭다운)등을 패키징하는 작업을 수행합니다. 예를 들어, 많은 프레임워크는 .btn
이라는 클래스로 버튼에 필요한 모든 스타일을 추가할 수 있습니다.
전처리기는 CSS에서 변수, 연산자, 함수 등을 사용하여 CSS를 쉽게 작성할 수 있도록 도와주는 언어입니다. 개발 후 이런 파일은 모든 브라우저가 이해할 수 있는 CSS로 컴파일됩니다. SASS
,LESS
,Stylus
,PostCSS
가 있습니다.
CSS 프레임워크를 사용하면 어떤 이점이 있습니까?
CSS 프레임워크를 사용하면 어떤 단점이 있습니까?
CSS 전처리기를 사용하면 어떤 이점이 있습니까?
CSS에서 재사용 가능하고 쉽게 유지&관리 할 수 있으며 확장 가능한 코드를 작성하는 데 도움이 됩니다. 즉, 프로젝트를 위해 작성해야 하는 CSS 코드의 양이 줄어듭니다.
CSS 전처리기를 사용하면 어떤 단점이 있습니까?