[오딘프로젝트] Intermediate CSS Concepts

박먼지·2023년 8월 20일

CSS 오딘 프로젝트

오딘 프로젝트

목록 보기

2/5

1.Default Styles

브라우저는 웹페이지에 약간의 CSS가 적용되어있습니다.

CSS 재설정을 하려는 이유는 무엇입니까?

모든 브라우저에서 스타일을 동일하게 지정하기 위해 CSS 재설정을 합니다.

Reset CSS tools

2.CSS Units

절대 단위

절대 단위는 모든 상황에서 항상 동일한 단위입니다.
px는 페이지의 다른 항목과 관련하여 변경되지 않으므로 절대 단위입니다.

상대 단위

상대 단위는 어떤 기준에 따라 변경될 수 있는 단위입니다.

em과 rem

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과 같은 인터페이스에 유용합니다.

3.More Text Styles

사용자 컴퓨터에 설치되지 않은 글꼴을 추가하는 두 가지 방법은 무엇입니까?

온라인 글꼴 라이브러리를 사용합니다.

<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 속성을 사용합니다.

4.More CSS Properties 생략

5.Advanced Selectors

후손 선택자와 자식 선택자의 차이점은 무엇입니까?

후손 선택자는 선택 태그 안에 들어있는 모든 것이고, 자식 선택자는 선택 태그 바로 아래 계층에 있는 것을 말합니다.

<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']{}

6. Positioning

static과 relative 포지션의 차이?

static은 기본값이고, 일반적인 문서 흐름에 따라 요소를 배치합니다.
relative는 top,right..과 같은 프로퍼티가 주어지면 정상적인 위치로부터 지정하는 양만큼 이동합니다.

absoulte 포지션은 어떤 경우에 유용합니까?

모달이나 캡션이 있는 이미지, 다른 요소 위에 있는 아이콘 등에 유용합니다.

fixed와 sticky의 차이는 무엇입니까?

fixed는 일반적으로 뷰포트에 고정됨을 의미하고,
sticky는 설정한 오프셋에 도달할 때까지 스크롤하고 설정한 지점에 도달하면 멈춥니다.

7.CSS Functions

CSS에서 CSS 수학 함수를 어떻게 사용합니까?

함수는 괄호 사이에 '인수'가 전달되며 각 인수는 함수에서 특정 방식으로 사용됩니다.

color: rgb(0, 42, 255);
background: linear-gradient(90deg, blue, red);

CSS의 네 가지 수학 함수는 무엇입니까?

calc()

CSS 속성의 값으로 계산식을 지정할 수 있습니다.

단위를 혼합해서 사용할 수 있습니다.(vh, rem, px...)
혼합 계산이 가능합니다.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가 선택된다.

8.Custom Properties

사용자 지정 속성을 사용하면 파일 전체에서 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

9.Browser Compatibility

Safari는 iOS 및 iPadOS에서 기술적으로 지원되는 유일한 브라우저이다. 따라서 웹 애플리케이션이 Apple 사용자를 위해 작동하려면 Webkit 및 Safari에서 사용되는 기타 기술에 대한 지원을 보장해야 한다.

10.Frameworks and Preprocessors

CSS 프레임워크

Bootstrap 및 Tailwind와 같은 프레임워크는 일반적으로 사용되는 CSS 코드, 아이콘 및 상호 작용(메뉴 드롭다운)등을 패키징하는 작업을 수행합니다. 예를 들어, 많은 프레임워크는 .btn이라는 클래스로 버튼에 필요한 모든 스타일을 추가할 수 있습니다.

전처리기

전처리기는 CSS에서 변수, 연산자, 함수 등을 사용하여 CSS를 쉽게 작성할 수 있도록 도와주는 언어입니다. 개발 후 이런 파일은 모든 브라우저가 이해할 수 있는 CSS로 컴파일됩니다. SASS,LESS,Stylus,PostCSS가 있습니다.

CSS 프레임워크를 사용하면 어떤 이점이 있습니까?

프레임워크는 문서화가 잘 되어있다.(협업에 용이)
개발 속도가 빨라진다.
디자인이 되어있다.
반응형 디자인에도움이 된다.

CSS 프레임워크를 사용하면 어떤 단점이 있습니까?

프레임워크 코드 재정의의 어려움
웹 페이지의 개성이 없어짐(모든 웹사이트가 똑같아 보임)
성능 문제

CSS 전처리기를 사용하면 어떤 이점이 있습니까?

CSS에서 재사용 가능하고 쉽게 유지&관리 할 수 있으며 확장 가능한 코드를 작성하는 데 도움이 됩니다. 즉, 프로젝트를 위해 작성해야 하는 CSS 코드의 양이 줄어듭니다.

CSS 전처리기를 사용하면 어떤 단점이 있습니까?

디버깅이 더 어렵다.
컴파일로 인해 개발속도가 느려진다.
매우 큰 CSS 파일을 생성할 수 있다.
CSS 전처리기를 선택하는 경우 제거하는 것이 쉽지 않다.

박먼지

개발괴발

이전 포스트

[오딘프로젝트] Intermediate HTML Concepts

다음 포스트

[오딘프로젝트] Intermediate CSS Concepts