부트캠프 6일차 (CSS 기초)

 

셀렉터 너무 어려워요

오늘의 생각

CSS관련해서 공부를 시작했는데, 슬슬 헷갈리기 시작했다. 평소 정확히 몰랐던 em과 rem의 차이 등을 다시 정립할 수 있어서 좋은 기회였는데...셀렉터에서 엄청 헷갈렸다. 전체 구조를 보고 셀렉터에 부합하는 요소를 찾는 응용 문제들을 풀어봤는데, 굉장히 어려웠다. 자식(>)/후손(  )/형제(~) 셀렉터 사이에서 해당하는 요소를 찾는 데 어려움이 있었고, 특히 구조 가상 클래스 셀렉터 (:nth-child, :last-nth-child, :nth-last-of-type 등)에서는 정신이 혼미해졌었다. 용어 자체가 다양한데 내용이 굉장히 유사해서 찾고자 하는 요소에 어려움이 있었다. 부정 셀렉터(!)라도 붙었다간 찾고자 하는 셀렉터의 반대 개념이라 더더욱 어려웠다. 실제로 이런 셀렉터가 쓰일까? 싶은 셀렉터도 있었다. 문제들을 해결하는데 있어 가장 주요했던 부분은 침착하게 구조를 훑어보고 셀렉터가 찾고자 하는 요소의 대상이 무엇인지 다시 한 번 되새겨 보았던 점 같다. 긴 텍스트에 두려워말고 접근하면 풀 수 있는 문제들이었지만 처음에는 꽤 아득해 보였다..

---

오늘의 키워드

CSS, UX, UI, 셀렉터(Selector), 속성명(Property)과 속성값(Value), rel, id/class, em, rem, block, inline, inline-block, border, box-sizing: border-box

---

오늘의 학습내용

• CSS의 정의와 존재 이유
• UX(User Experience)와 UI(User Interface)의 정의
• UI의 중요성
• CSS 기본 스타일링의 구성 요소: 셀렉터, 선언 블록, 선언, 속성명과 속성값, 선언 구분자(;)
• CSS 스타일을 적용할 수 있는 3가지 방법: 인라인 스타일, 내부 스타일 시트, 외부 스타일 시트
• 중복된 class 이름을 활용해 스타일링을 적용하는 방법
• 하나의 요소에 여러 개의 class styling을 적용하는 방법
• id와 class의 차이점
• CSS 스타일링 속성, 절대 단위와 상대 단위
• 박스 모델의 종류(block, inline, inline-block)와 각각의 차이점
• 박스를 구성하는 요소: Margin, Border, Padding, Content 
• 박스를 벗어나는 콘텐츠 처리(overflow)
• box-sizing: border-box 의 의미와 사용법
• CSS 셀렉터의 종류와 각 셀렉터가 지칭하는 하는 요소

---

어려웠던 keyword

• rem, em
• inline-block
• 자식 / 후손 / 형제 셀렉터
• 구조 가상 클래스 셀렉터

---

내가 질문한다면

• em을 사용한다면 어떨 때 사용하실건가요?
• 다른 속성들(block, inline)과 비교했을 때, inline 속성이 가지고 있는 특징이 무엇인가요?
• > / 공백 / ~ / + 셀렉터 간의 차이와 그 용도가 무엇인가요?
• 구조 가상 클래스 셀렉터가 언제 필요한가요? 예를 들어주실 수 있나요?