[W3Schools/W3스쿨즈] CSS 퀴즈를 풀어보자

저번에는 HTMl 퀴즈를 풀어보았다.

2023.07.02 - [프로그래밍/프론트엔드] - [W3Schools/W3스쿨즈] HTML 퀴즈를 풀어보았다.

[W3Schools/W3스쿨즈] HTML 퀴즈를 풀어보았다.

 

이번에는 CSS 퀴즈를 풀어보았다. 저번과는 다르게 25문제 밖에 되지 않았는데, 과연 결과는?

css 퀴즈 결과

그래도 이 정도면 꽤 잘 본거 같은데?라는 생각이 들었다.

물론 숨을 턱 막히게 하는 문제들이 몇 개 있어서 아직 개념이 완벽하지 않음을 느꼈지만,

오답정리를 해보면서 보완해 나가면 될 일이다.

 

---

CSS 퀴즈 오답정리

 

HTML 요소의 텍스트 색상을 변경하는 데 사용되는 CSS 속성은 무엇인가요?

-> text-color가 아니라, color이다.

 

모든 <p> 요소를 볼드체로 만들기 위한 올바른 CSS 구문은 무엇인가요?

-> p {font-weight: bold;}이다. 

 

※ font-weight의 역할

CSS에서 font-weight 속성은 텍스트의 굵기를 지정하는 데 사용됩니다. 이 속성은 텍스트의 두께를 조절하여보다 가는 글꼴에서부터 두꺼운 글꼴까지 다양한 두께로 표현할 수 있습니다.

font-weight 속성에는 다양한 값을 사용할 수 있으며, 일반적으로 다음과 같은 값을 가집니다:

• normal: 기본 굵기를 가진 텍스트를 지정합니다. 이 값은 일반적으로 400과 동일한 의미로 사용됩니다.
• bold: 굵은 굵기를 가진 텍스트를 지정합니다. 이 값은 일반적으로 700과 동일한 의미로 사용됩니다.
• lighter: 부모 요소보다 더 얇은 텍스트를 지정합니다.
• bolder: 부모 요소보다 더 굵은 텍스트를 지정합니다.
• 숫자 값: 100부터 900까지의 숫자를 사용하여 텍스트의 상대적인 굵기를 지정할 수 있습니다. 숫자가 커질수록 텍스트는 더 굵어집니다.

(출처 : chatGPT)

 

텍스트에서 각 단어의 첫 글자를 대문자로 시작하게 하는 방법은 무엇인가요?

-> capitalize인 것은 알고 있었다. text-transform이 아니라 text-style에서 지정을 해주어야한다.

 

※ text-style의 역할

CSS에서 text-transform 속성은 텍스트의 대소문자 변환을 제어하는 데 사용됩니다. 이 속성을 사용하여 텍스트를 다양한 대소문자 변환 형태로 표시할 수 있습니다.

text-transform 속성에는 다음과 같은 값을 사용할 수 있습니다:

• none: 텍스트 변환을 적용하지 않고 원래의 텍스트를 그대로 표시합니다.
• capitalize: 각 단어의 첫 글자를 대문자로 변환합니다.
• uppercase: 모든 글자를 대문자로 변환합니다.
• lowercase: 모든 글자를 소문자로 변환합니다.
• full-width: 텍스트를 전각 글자로 변환합니다. (일부 언어에서 사용됩니다.)

(출처: chatGPT)

 

요소의 글꼴을 변경하는 데 사용되는 속성은 무엇인가요?

-> font-style이 아니라 font-family이다. 다 배운 것들인데 왜 이럴까.

 

※ font-style의 역할

CSS의 font-style 속성은 텍스트의 글꼴 스타일을 지정하는 데 사용됩니다. 이 속성은 텍스트를 기울임꼴로 표시하거나, 기울임꼴을 제거하여 일반적인 글꼴 스타일로 표시할 수 있습니다.

font-style 속성에는 다음과 같은 값이 사용될 수 있습니다:

• normal: 일반적인 글꼴 스타일을 나타냅니다. 기울임꼴이나 특수한 스타일이 적용되지 않은 상태입니다.
• italic: 텍스트를 기울임꼴로 표시합니다. 해당 글꼴이 기울임꼴을 지원하는 경우에만 적용됩니다.
• oblique: 텍스트를 경사로운 기울임꼴로 표시합니다. 해당 글꼴이 기울임꼴을 지원하지 않더라도 텍스트를 경사로운 형태로 표시합니다.

(출처: chatGPT)

 

※ font-family의 역할

CSS의 font-family 속성은 텍스트에 적용할 글꼴 또는 글꼴 패밀리를 지정하는 데 사용됩니다. 이 속성은 웹 페이지에서 사용되는 텍스트의 시각적인 표현을 변경할 수 있습니다.

font-family 속성에는 다양한 값이 사용될 수 있습니다:

• serif: 글자 끝에 작은 장식이 있는 세리프 글꼴을 지정합니다. 예시로는 Times New Roman, Georgia 등이 있습니다.
• sans-serif: 글자 끝에 작은 장식이 없는 산세리프 글꼴을 지정합니다. 예시로는 Arial, Helvetica 등이 있습니다.
• monospace: 각 문자가 동일한 폭을 가진 등간격 글꼴을 지정합니다. 예시로는 Courier New, Consolas 등이 있습니다.
• cursive: 필기체나 손글씨를 흉내 내는 글꼴을 지정합니다. 예시로는 Comic Sans MS, Brush Script MT 등이 있습니다.
• fantasy: 장식적이거나 상상력을 자극하는 글꼴을 지정합니다. 예시로는 Impact, Chiller 등이 있습니다.

여러 개의 글꼴을 지정할 때는 쉼표로 구분하여 순서대로 대체할 글꼴을 지정할 수 있습니다. 먼저 지정된 글꼴이 시스템에 설치되어 있지 않으면, 다음으로 지정된 글꼴이 대체되어 표시됩니다.

(출처: chatGPT)

 

padding 속성을 사용할 때, 음수 값을 사용할 수 있나요?

-> CSS에서 padding 속성은 요소의 콘텐츠와 테두리 사이의 간격을 조절하는 데 사용됩니다. 음수 값을 사용하여 padding 속성을 설정하는 것은 허용되지 않습니다.

CSS 박스 모델에서 padding 값은 음수가 아닌 양수 또는 0으로 지정되어야 합니다. 양수 값은 요소의 내부에 여백을 추가하여 콘텐츠와 테두리 사이의 공간을 조절합니다. 음수 값을 사용하려고 하면 예기치 않은 레이아웃 문제가 발생할 수 있으며, 이는 일반적으로 음수 마진 값을 사용하여 요소를 조정하는 데 사용됩니다.

따라서 padding 속성을 사용할 때는 음수 값을 사용할 수 없으며, 양수 값을 사용하여 요소의 패딩을 조절해야 합니다.

(출처: chatGPT)

 

어떻게 사각형으로 항목이 표시되는 목록을 만들 수 있나요?

-> list-style-type에서 만들 수 있다.

 

※ list-style-type의 역할

CSS의 list-style-type 속성은 목록 요소에서 항목의 마커 스타일을 지정하는 데 사용됩니다. 이 속성을 사용하여 목록 항목의 마커를 다양한 스타일로 표시할 수 있습니다.

list-style-type 속성에는 다양한 값을 사용할 수 있습니다:

• none: 마커를 표시하지 않습니다.
• disc: 항목을 원형 마커로 표시합니다.
• circle: 항목을 빈 원형 마커로 표시합니다.
• square: 항목을 사각형 마커로 표시합니다.
• decimal: 항목을 숫자 형식으로 표시합니다.
• decimal-leading-zero: 0을 포함한 숫자 형식으로 표시합니다.
• lower-roman: 소문자 로마 숫자로 표시합니다.
• upper-roman: 대문자 로마 숫자로 표시합니다.
• lower-alpha: 소문자 알파벳으로 표시합니다.
• upper-alpha: 대문자 알파벳으로 표시합니다.

(출처: chatGPT)

 

선택자를 그룹화하는 방법은 무엇인가요?

-> CSS에서 선택자를 그룹화하는 방법은 쉼표(,)를 사용하여 여러 선택자를 하나의 규칙에 적용하는 것입니다.

예를 들어, 다음과 같은 CSS 코드를 사용하여 선택자를 그룹화할 수 있습니다:

 

h1, h2, h3 {
  color: blue;
  font-size: 20px;
}

위의 코드는 <h1>, <h2>, <h3> 요소들을 그룹화하여 스타일을 적용합니다. 모든 제목 요소들에 대해 글자 색상을 파란색으로 지정하고, 글꼴 크기를 20픽셀로 설정합니다.

이와 같이 선택자를 그룹화하면 같은 스타일을 여러 요소에 쉽게 적용할 수 있습니다. 선택자 그룹을 사용하면 코드의 중복을 줄이고 작성하기도 간편하며, 유지 및 관리도 용이해집니다.

(출처: chatGPT)

 

---

오답정리를 하고나니 내가 개념이 많이 부족한걸 알게 되었다. 위에서 언급했지만 복습은 필수다.

내일 깨서 다시 복습을 해야겠다.