[2주차] CSS 퀴즈 풀이

2주차에는 CSS 개념을 공부하고 퀴즈를 풀어보았습니다.

---

퀴즈

w3schools - CSS 퀴즈

HTML 퀴즈에 비해 문제 수는 적었습니다. 난이도는 비슷한 것 같습니다.

---

오답 풀이

/* CSS 주석 */

 

text-transform: 대문자로 또는 소문자로 바꾸는 속성

• none : 입력된 그대로 출력합니다.
• capitalize : 단어의 첫 번째 글자를 대문자로 바꿉니다.
• uppercase : 모든 글자를 대문자로 바꿉니다.
• lowercase : 모든 글자를 소문자로 바꿉니다.
• initial : 기본값으로 설정합니다.
• inherit : 부모 요소의 속성값을 상속받습니다.

 

 

padding은 속성값으로 음수를 허용하지 않고, 설정을 무시하거나 초기 값 혹은 디폴트 값인 ‘0’으로 해석하기도 합니다.

 

list-style 속성

1. list-style-type
   마커(marker): 리스트 요소의 앞에 위치하는 숫자나 기호
   list-style-type 속성을 이용하면 리스트에 다양한 마커를 적용할 수 있습니다.

<style>
    .circle { list-style-type: circle; }
    .square { list-style-type: square; }
    .upperAlpha { list-style-type: upper-alpha; }
    .lowerRoman { list-style-type: lower-roman; }
</style>

2. list-style-image
   마커로 자신만의 이미지를 사용할 수 있습니다.

<style>
    .imageMarker { list-style-image: url("/examples/images/img_list_marker.png"); }
</style>

3. list-style-position
   리스트 요소의 위치를 설정할 수 있습니다.
   기본 속성값은 outside입니다.

<style>
    .outside { list-style-position: outside; }
    .inside { list-style-position: inside; }
</style>

 

=> list-style 속성 한 번에 적용하기

<style>
    ul { list-style: square inside url("/examples/images/img_list_marker.png"); }
</style>

 

 

그룹 선택자 (Group Selector)는 여러 선택자를 그룹으로 묶는 기능입니다.
아래의 코드는 모두 동일한 문법입니다.

h1 {
  color: red;
}
p {
  color: red;
}
li {
  color: red;
}

h1, p, li {
  color: red;
}

 

 

position: 태그를 어떻게 위치시킬지를 정의하는 속성

• static: 기본값, 다른 태그와의 관계에 의해 자동으로 배치되며 위치를 임의로 설정해 줄 수 없습니다.
• absolute: 절대 좌표와 함께 위치를 지정해 줄 수 있습니다.
• relative: 원래 있던 위치를 기준으로 좌표를 지정합니다.
• fixed: 스크롤과 상관없이 항상 문서 최 좌측상단을 기준으로 좌표를 고정합니다.
• inherit: 부모 태그의 속성값을 상속받습니다.

좌표를 지정 해주기 위해서는 left, right, top, bottom 속성과 함께 사용합니다.

position을 absolute나 fixed로 설정시 가로 크기가 100%가 되는 block 태그의 특징이 사라지게 됩니다.

---

참고

CSS / text-transform / 대문자로 또는 소문자로 바꾸는 속성
padding과 margin의 음수 값
tcpschool - css
CSS 그룹 선택자 의미와 사용법
CSS position 속성