[TIL] #5. CSS 셀렉터

2022.5.2. (월)

1. 오늘의 소감

• CSS 셀렉터는 이전에 정리해둔 내용이 있어서 공부가 힘들지는 않았다. 처음보기엔 매우 복잡해보이지만, 막상 쓰다보면 쓰던 것 위주로 쓰게되고 자연스럽게 익혀진다는 걸 알기 때문이다. 다만 각 셀렉터를 지칭하는 이름을 알아두어야겠다. 내가 정리했던 자료랑 오늘 배운 내용에서 셀렉터 명칭이 달라서, 나중에 남에게 설명할 때 상대방을 헷갈리게 할 것 같다.
• 자꾸 6시 이후에 자리에 앉는 게 힘들어진다. 수업시간이 끝나면 개인 공부도 꼭 해야하는데... 내일은 1시간 만이라도 밥먹고 앉아있기를 실천하자.

2. 학습한 키워드

• 프론트엔드 개발자에게 CSS는 왜 중요한가, UI, 셀렉터, 선언블럭, 선언, 선언 구분자, 속성명, 속성값, 인라인 스타일, 내부 스타일 시트, 외부 스타일 시트, color, link:css (css 연결하는 link 태그를 쉽게 쓰는 emmet), nth-last-child(n), nth-last-of-type(n), text-align, vertical-align, 셀렉터로 태그 쉽게 작성할 수 있다, 박스모델, content, padding, border, margin, box-sizing, content-box, border-box

3. 키워드를 바탕으로 학습 내용 설명해보기

• 프론트엔드 개발자에게 CSS는 왜 중요한가?
  • HTML과 자바스크립트로 구조를 아무리 잘짜고, 기능을 잘 구현해 놓아도 사용자가 사용할 수 없으면 의미가 없다.
  • 때문에 개발자는 CSS를 이용해 사용자 인터페이스를 잘 제작해야한다.
  • 사용자 인터페이스(UI)란, 사용자와 컴퓨터가 상호작용하기 쉽게 하는 매개체이다. 대표적인 UI로 버튼이 있다.
  • 직관적이고 쉬운 UI를 만들어 사용자가 해당 서비스를 이용하는데 불편함이 없도록 해야한다. 불편함 없는 UI가 좋은 사용자 경험(UX)으로 이어지기 때문이다.
• 셀렉터 명 체크하기
  • * 전체 셀렉터
  • 태그 셀렉터, ID 셀렉터, class 셀렉터, attribute 셀렉터
  • 자식 셀렉터
  • (띄어쓰기) 후손 셀렉터
  • ~ 형제 셀렉터
  • + 인접 형제 셀렉터
  • :hover, :focus, :active, :visited, :link 가상 클래스 셀렉터
  • :enabled, :disabled, :chacked UI 요소 상태 셀렉터
  • :not(제외셀렉터) 부정 셀렉터
  • :first-child, :last-child, :nth-child(), :first-of-type, :last-of-type, :nth-of-type() 구조 가상 클래스 셀렉터
  • :valid, :invalid 정합성 확인 셀렉터
• 셀렉터를 띄어쓰기 없이 붙여서 사용하면 정밀 선택이 된다.
  • p.selected.top[name=”box”]
• 처음 접했던 셀렉터
  • :nth-last-child(n) → nth-child(n) 와 같은데, 뒤에서 부터 찾는다.
  • :nth-last-of-type(n) → nth-of-type(n) 와 같은데, 뒤에서 부터 찾는다.
• margin 값은 음수로 줄 수 있다.
• box-sizing: border-box 는 처음부터 아예 적용시켜버리는 편이다.
  이렇게 * { box-sizing: border-box; }
• content-box는 width, height 속성이 content 크기만 포함하는 것을 뜻한다.
• border-box는 width, height 속성이 border 까지의 크기를 다 포함하는 것이다. 즉 border-box 에서 너비, 높이는 content + padding + border 의 너비, 높이 합.